/* ==========================================================================
   Cardvity Customer Authentication & Account Styles (auth.css)
   ========================================================================== */

/* Universal Auth Modal Backdrop & Container */
.cv-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(30, 20, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s;
}
.cv-auth-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.cv-auth-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: min(92vh, 720px);
  max-height: min(92dvh, 720px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(74, 48, 38, 0.2), 0 2px 8px rgba(74, 48, 38, 0.06);
  border: 1px solid rgba(232, 223, 218, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  direction: inherit;
}
.cv-auth-backdrop.is-open .cv-auth-dialog {
  transform: scale(1) translateY(0);
}

.cv-auth-header {
  padding: 20px 24px 14px;
  text-align: center;
  background: linear-gradient(180deg, #fdfbf9 0%, #ffffff 100%);
  border-bottom: 1px solid #f0e9e4;
  position: relative;
  flex-shrink: 0;
}
.cv-auth-logo {
  display: inline-block;
  margin-bottom: 8px;
}
.cv-auth-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
}
.cv-auth-header h2 {
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2b1c18;
  margin: 0 0 4px;
}
.cv-auth-header p {
  font-size: 12.5px;
  color: #796660;
  margin: 0;
  line-height: 1.45;
}

.cv-auth-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ebdcd6;
  background: #ffffff;
  color: #5a4038;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
}
.cv-auth-close:hover {
  background: #fbf8f5;
  color: #8d1724;
  border-color: #8d1724;
  transform: rotate(90deg);
}

/* Tabs switcher */
.cv-auth-tabs {
  display: flex;
  background: #f4ede8;
  padding: 4px;
  border-radius: 12px;
  margin: 14px 24px 6px;
  gap: 4px;
  flex-shrink: 0;
}
.cv-auth-tab {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #796660;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.cv-auth-tab.is-active {
  background: #ffffff;
  color: #8d1724;
  box-shadow: 0 2px 8px rgba(74, 48, 38, 0.08);
}

/* Body & Forms */
.cv-auth-body {
  padding: 14px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cv-auth-body::-webkit-scrollbar {
  width: 5px;
}
.cv-auth-body::-webkit-scrollbar-thumb {
  background: #dec8c2;
  border-radius: 99px;
}
.cv-auth-body::-webkit-scrollbar-thumb:hover {
  background: #8d1724;
}

.cv-auth-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cv-auth-form[hidden],
.cv-auth-form.is-hidden {
  display: none !important;
}
.cv-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}
.cv-auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: #4a342e;
}
.cv-auth-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d9c5c0;
  border-radius: 10px;
  background: #fdfbf9;
  font-size: 14px;
  font-family: inherit;
  color: #2b1c18;
  transition: all 0.18s ease;
  box-sizing: border-box;
}
.cv-auth-field input:focus {
  outline: none;
  border-color: #8d1724;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(141, 23, 36, 0.12);
}

.cv-auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #6a534c;
  margin-top: -2px;
}
.cv-auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cv-auth-remember input {
  accent-color: #8d1724;
  width: 15px;
  height: 15px;
  margin: 0;
}
.cv-auth-forgot-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: #8d1724;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Action Buttons */
.cv-auth-submit {
  height: 46px;
  border: none;
  border-radius: 12px;
  background: #8d1724;
  color: #ffffff;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(141, 23, 36, 0.25);
  transition: all 0.2s ease;
  margin-top: 4px;
}
.cv-auth-submit:hover {
  background: #73121d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(141, 23, 36, 0.32);
}
.cv-auth-submit:active {
  transform: translateY(0);
}

.cv-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a8948e;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2px 0;
}
.cv-auth-divider::before,
.cv-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8dfda;
}

.cv-auth-demo-btn {
  height: 42px;
  border: 1px dashed #b89389;
  border-radius: 12px;
  background: #fdf8f6;
  color: #8d1724;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s ease;
}
.cv-auth-demo-btn:hover {
  background: #f8ebe6;
  border-color: #8d1724;
  border-style: solid;
}

.cv-auth-switch-prompt {
  text-align: center;
  font-size: 12.5px;
  color: #796660;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cv-auth-switch-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #8d1724;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
  transition: color 0.15s ease;
}
.cv-auth-switch-link:hover {
  color: #5f1019;
}

/* Alert Notification */
.cv-auth-alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-auth-alert.is-error {
  background: #fdf0f0;
  color: #a42020;
  border: 1px solid #f5c2c2;
}
.cv-auth-alert.is-success {
  background: #edf7ed;
  color: #1e6b24;
  border: 1px solid #c2e2c4;
}

/* Header Account Action Indicator & Dropdown */
.cv-header-actions .cv-account-action {
  position: relative;
}
.cv-account-action.is-logged-in::after {
  content: '';
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  border: 2px solid #ffffff;
}

.cv-user-dropdown {
  position: fixed !important;
  display: none !important;
  width: 220px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(74, 48, 38, 0.15), 0 2px 6px rgba(74, 48, 38, 0.05);
  border: 1px solid #ede3de;
  padding: 8px;
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  direction: inherit;
  text-align: start;
}
.cv-user-dropdown.is-open {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cv-user-dropdown-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid #f2ebe6;
  margin-bottom: 6px;
}
.cv-user-dropdown-name {
  font-size: 13px;
  font-weight: 700;
  color: #2b1c18;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-user-dropdown-email {
  font-size: 11px;
  color: #8c7872;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-user-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4a342e;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.cv-user-dropdown-item:hover {
  background: #fbf5f2;
  color: #8d1724;
}
.cv-user-dropdown-item.is-danger {
  color: #b72b2b;
}
.cv-user-dropdown-item.is-danger:hover {
  background: #fdf1f1;
  color: #921b1b;
}

/* ==========================================================================
   Account & Purchases Page Specific Styles
   ========================================================================== */

/* Auth Required Gate Card (shown on account.html when logged out) */
.cv-auth-gate {
  max-width: 500px;
  margin: 40px auto 60px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #eeded7;
  box-shadow: 0 12px 40px rgba(74, 48, 38, 0.08);
  padding: 36px 32px;
  text-align: center;
}
.cv-auth-gate-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #faece7;
  color: #8d1724;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.cv-auth-gate-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}
.cv-auth-gate h2 {
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2b1c18;
  margin: 0 0 8px;
}
.cv-auth-gate p {
  font-size: 14px;
  color: #796660;
  line-height: 1.6;
  margin: 0 0 24px;
}
.cv-auth-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-auth-gate-actions .btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
}

/* User Profile Banner (shown on account.html when logged in) */
.cv-profile-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #eeded7;
  box-shadow: 0 8px 30px rgba(74, 48, 38, 0.05);
  padding: 24px 28px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.cv-profile-info {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cv-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8d1724 0%, #ba2838 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(141, 23, 36, 0.25);
  flex-shrink: 0;
}
.cv-profile-details h2 {
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #2b1c18;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-profile-badge {
  font-size: 11px;
  font-weight: 700;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid #c8e6c9;
}
.cv-profile-details p {
  font-size: 13px;
  color: #796660;
  margin: 0 0 4px;
}
.cv-profile-details small {
  font-size: 11px;
  color: #a8948e;
}
.cv-profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cv-profile-actions .btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 10px;
}

/* ==========================================================================
   Sub-modals (Edit Profile, Change Password, Confirmation Dialogs)
   ========================================================================== */
.cv-submodal-dialog {
  max-width: 440px;
}
.cv-modal-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #faece7;
  color: #8d1724;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.cv-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.cv-modal-actions .btn {
  flex: 1;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.cv-modal-actions .cv-modal-btn-cancel {
  background: #fbf8f5;
  border-color: #d9c5c0;
  color: #4a342e;
}
.cv-modal-actions .cv-modal-btn-cancel:hover {
  background: #f3eae4;
  border-color: #cbb3ac;
}
.cv-modal-actions .cv-modal-btn-save {
  background: #8d1724;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(141, 23, 36, 0.25);
}
.cv-modal-actions .cv-modal-btn-save:hover {
  background: #73121d;
  box-shadow: 0 6px 18px rgba(141, 23, 36, 0.32);
}

/* Confirmation Modal Dialog */
.cv-confirm-dialog {
  max-width: 410px;
  padding: 24px 22px 20px;
}
.cv-confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cv-confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cv-confirm-icon.is-danger {
  background: #fdf0f0;
  color: #b72b2b;
}
.cv-confirm-icon.is-primary {
  background: #faece7;
  color: #8d1724;
}
.cv-confirm-title {
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2b1c18;
  margin: 0 0 8px;
}
.cv-confirm-desc {
  font-size: 13.5px;
  color: #796660;
  line-height: 1.5;
  margin: 0 0 20px;
}
.cv-confirm-actions {
  display: flex;
  width: 100%;
  gap: 10px;
}
.cv-confirm-actions .btn {
  flex: 1;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.cv-btn-danger {
  background: #b72b2b !important;
  color: #ffffff !important;
  border-color: #b72b2b !important;
  box-shadow: 0 4px 14px rgba(183, 43, 43, 0.28) !important;
}
.cv-btn-danger:hover {
  background: #961e1e !important;
  border-color: #961e1e !important;
}

/* ==========================================================================
   Modern Toast Notifications (Replaces browser alert)
   ========================================================================== */
.cv-toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: 92vw;
}
.cv-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(43, 28, 24, 0.18), 0 2px 8px rgba(43, 28, 24, 0.08);
  border: 1px solid #ebdcd6;
  color: #2b1c18;
  font-family: Alexandria, Manrope, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  pointer-events: auto;
  direction: inherit;
  cursor: pointer;
  animation: cvToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.22s ease, transform 0.22s ease;
  user-select: none;
}
.cv-toast.is-leaving {
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
}
.cv-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cv-toast.is-success .cv-toast-icon {
  color: #2e7d32;
}
.cv-toast.is-error .cv-toast-icon {
  color: #b72b2b;
}
.cv-toast.is-info .cv-toast-icon {
  color: #8d1724;
}

@keyframes cvToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@media (max-width: 600px) {
  .cv-profile-card {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .cv-profile-actions {
    width: 100%;
  }
  .cv-profile-actions .btn {
    flex: 1;
  }
}

/* Responsive adjustments for Auth Modal */
@media (max-width: 480px) {
  .cv-auth-backdrop {
    padding: 12px 10px;
  }
  .cv-auth-dialog {
    max-width: 100%;
    border-radius: 18px;
    max-height: min(94vh, 640px);
    max-height: min(94dvh, 640px);
  }
  .cv-auth-header {
    padding: 16px 18px 12px;
  }
  .cv-auth-header h2 {
    font-size: 17px;
  }
  .cv-auth-header p {
    font-size: 12px;
  }
  .cv-auth-tabs {
    margin: 10px 16px 4px;
  }
  .cv-auth-tab {
    padding: 7px 8px;
    font-size: 12px;
  }
  .cv-auth-body {
    padding: 12px 16px 18px;
  }
  .cv-auth-form {
    gap: 11px;
  }
  .cv-auth-field input {
    height: 42px;
    font-size: 13.5px;
  }
  .cv-auth-submit {
    height: 44px;
    font-size: 13.5px;
  }
  .cv-auth-demo-btn {
    height: 40px;
    font-size: 12.5px;
  }
}

@media (max-height: 660px) {
  .cv-auth-backdrop {
    padding: 8px;
  }
  .cv-auth-dialog {
    max-height: 96vh;
    max-height: 96dvh;
    margin: auto;
  }
  .cv-auth-header {
    padding: 10px 18px 6px;
  }
  .cv-auth-logo {
    margin-bottom: 4px;
  }
  .cv-auth-logo img {
    height: 24px;
  }
  .cv-auth-header h2 {
    font-size: 15px;
  }
  .cv-auth-header p {
    display: none;
  }
  .cv-auth-tabs {
    margin: 6px 18px 4px;
    padding: 3px;
  }
  .cv-auth-tab {
    padding: 6px 8px;
    font-size: 12px;
  }
  .cv-auth-body {
    padding: 10px 18px 14px;
  }
  .cv-auth-form {
    gap: 10px;
  }
  .cv-auth-field input {
    height: 38px;
  }
  .cv-auth-submit {
    height: 40px;
  }
  .cv-auth-demo-btn {
    height: 36px;
  }
}