/* ===== สมัครสมาชิก — เทอร์ควอยซ์เด่นที่สุด ===== */
.v-application button[data-track="open_dialog_signup"] {
  --aqua-bg: linear-gradient(
    180deg,
    #a1fff2 0%,
    #3debdc 32%,
    #00cebf 68%,
    #00aa9e 100%
  );
  --aqua-hover: linear-gradient(
    180deg,
    #cefff8 0%,
    #74f7e9 32%,
    #25dfcf 68%,
    #00bfb0 100%
  );
  --aqua-text: #052b28;
  --aqua-border: #91fff0;
  --aqua-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 10px rgba(0, 20, 18, 0.35),
    0 0 18px rgba(0, 206, 191, 0.35);
}

/* ===== เข้าสู่ระบบ — ดำขอบฟ้า ===== */
.v-application button[data-track="open_dialog_signin"] {
  --aqua-bg: linear-gradient(
    180deg,
    #203632 0%,
    #142521 50%,
    #0b1513 100%
  );
  --aqua-hover: linear-gradient(
    180deg,
    #2b4943 0%,
    #1c332d 50%,
    #10221d 100%
  );
  --aqua-text: #e8fffa;
  --aqua-border: #4aa99c;
  --aqua-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 8px rgba(0, 20, 18, 0.3);
}

/* ===== ดูเพิ่มเติม — บทความและโปรโมชั่น ===== */
.v-application .card-article .v-card__actions a.v-btn {
  --aqua-bg: linear-gradient(
    180deg,
    #f4fffd 0%,
    #d0faf3 50%,
    #a8eee3 100%
  );
  --aqua-hover: linear-gradient(
    180deg,
    #ffffff 0%,
    #dffff8 50%,
    #baffef 100%
  );
  --aqua-text: #073b33;
  --aqua-border: #63d9c8;
  --aqua-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 3px 8px rgba(0, 20, 18, 0.2);
}

/* ===== รูปแบบร่วม ===== */
.v-application :is(
  button[data-track="open_dialog_signup"],
  button[data-track="open_dialog_signin"],
  .card-article .v-card__actions a.v-btn
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--aqua-bg) !important;
  border: 1px solid var(--aqua-border) !important;
  border-radius: 14px !important;
  color: var(--aqua-text) !important;
  box-shadow: var(--aqua-shadow) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* ขนาดเข้าสู่ระบบ / สมัครสมาชิก */
.v-application button[data-track="open_dialog_signup"],
.v-application button[data-track="open_dialog_signin"] {
  min-height: 42px !important;
  padding: 8px 18px !important;
}

/* ขนาดดูเพิ่มเติม */
.v-application .card-article .v-card__actions a.v-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
}

.v-application .card-article .v-card__actions {
  padding: 12px 16px 18px !important;
}

/* ปิดพื้นหลังซ้อนเดิม */
.v-application button[data-track="open_dialog_signup"]::before,
.v-application button[data-track="open_dialog_signin"]::before,
.v-application .card-article .v-card__actions a.v-btn::before {
  opacity: 0 !important;
}

/* รองรับทั้ง Modern Button และ Vuetify */
.v-application button[data-track="open_dialog_signup"] :is(.tail, .v-btn__content),
.v-application button[data-track="open_dialog_signin"] :is(.tail, .v-btn__content),
.v-application .card-article .v-card__actions a.v-btn .v-btn__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: inherit !important;
}

/* สีข้อความ */
.v-application button[data-track="open_dialog_signup"] span,
.v-application button[data-track="open_dialog_signin"] span {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* ไอคอน ไม่มีเส้นคั่น */
.v-application button[data-track="open_dialog_signup"] .v-icon,
.v-application button[data-track="open_dialog_signin"] .v-icon {
  color: inherit !important;
  font-size: 20px !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* ===== แสงวิ่งสมัครสมาชิก ===== */
.v-application button[data-track="open_dialog_signup"]:not(:disabled):not(.v-btn--disabled)::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% 0;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: translateX(-180%) skewX(-20deg);
  animation: aqua-signup-shine 5s ease-in-out infinite;
}

@keyframes aqua-signup-shine {
  0%, 65% {
    transform: translateX(-180%) skewX(-20deg);
  }

  85%, 100% {
    transform: translateX(360%) skewX(-20deg);
  }
}

/* ลูกศรดูเพิ่มเติม */
.v-application .card-article .v-card__actions a.v-btn .v-btn__content {
  gap: 10px;
}

.v-application .card-article .v-card__actions a.v-btn .v-btn__content::after {
  content: "→";
  font-size: 20px;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* ===== Hover ===== */
@media (hover: hover) and (pointer: fine) {
  .v-application :is(
    button[data-track="open_dialog_signup"],
    button[data-track="open_dialog_signin"],
    .card-article .v-card__actions a.v-btn
  ):not(:disabled):not(.v-btn--disabled):hover {
    background: var(--aqua-hover) !important;
    transform: translateY(-1px);
  }

  .v-application button[data-track="open_dialog_signup"]:not(:disabled):not(.v-btn--disabled):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 5px 12px rgba(0, 20, 18, 0.4),
      0 0 24px rgba(0, 206, 191, 0.5) !important;
  }

  .v-application .card-article .v-card__actions a.v-btn:hover .v-btn__content::after {
    transform: translateX(3px);
  }
}

/* ===== ขณะกด ===== */
.v-application :is(
  button[data-track="open_dialog_signup"],
  button[data-track="open_dialog_signin"],
  .card-article .v-card__actions a.v-btn
):not(:disabled):not(.v-btn--disabled):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 40, 33, 0.3) !important;
}

/* ===== เลือกด้วยคีย์บอร์ด ===== */
.v-application :is(
  button[data-track="open_dialog_signup"],
  button[data-track="open_dialog_signin"],
  .card-article .v-card__actions a.v-btn
):focus-visible {
  outline: 2px solid #91fff0 !important;
  outline-offset: 3px;
}

/* ===== มือถือ ===== */
@media only screen and (max-width: 959px) {
  .v-application button[data-track="open_dialog_signup"],
  .v-application button[data-track="open_dialog_signin"] {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
  }

  .v-application button[data-track="open_dialog_signup"] span,
  .v-application button[data-track="open_dialog_signin"] span {
    font-size: 13px !important;
  }
}

/* ===== ปุ่มปิดใช้งาน ===== */
.v-application :is(
  button[data-track="open_dialog_signup"],
  button[data-track="open_dialog_signin"],
  .card-article .v-card__actions a.v-btn
):is(:disabled, .v-btn--disabled) {
  opacity: 0.5 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== ลดการเคลื่อนไหว ===== */
@media (prefers-reduced-motion: reduce) {
  .v-application :is(
    button[data-track="open_dialog_signup"],
    button[data-track="open_dialog_signin"],
    .card-article .v-card__actions a.v-btn
  ),
  .v-application .card-article .v-card__actions a.v-btn .v-btn__content::after {
    transition: none !important;
    transform: none !important;
  }

  .v-application button[data-track="open_dialog_signup"]::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ===== ต่อกล่องโลโก้กับสามเหลี่ยมบนมือถือ ===== */
@media only screen and (max-width: 959px) {
  .v-application .appbar .appbar-container.mini .top > .logo {
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  .v-application .appbar .appbar-container.mini .top > .triangle {
    flex: 0 0 14px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 24px solid transparent !important;
    border-bottom: 24px solid transparent !important;
    border-left: 14px solid var(--primary) !important;
    border-right: 0 !important;
    align-self: center;
  }
}