/* static/css/login-registrar.css */

/* Maritime login/register modals
   - Uses the SAME hero background image on login/register pages
   - Warm coastal glass look (sea + sand + dusk)
   - Scoped to login/register pages + #loginModal/#registerModal only
*/

/* 0) Ensure hero background image is visible on login/register pages */
body[data-page="login"],
body[data-page="register"]{
  background-image:
    var(--base-hero-overlay),
    radial-gradient(900px 600px at 18% 18%, rgba(255,232,204,0.22), transparent 58%),
    radial-gradient(980px 680px at 82% 22%, rgba(16,152,173,0.20), transparent 62%),
    radial-gradient(1200px 900px at 50% 105%, rgba(11,114,133,0.22), transparent 62%),
    var(--base-hero-img);
  background-size:
    cover,
    cover,
    cover,
    cover,
    cover;
  background-position:
    center,
    center,
    center,
    center,
    center;
  background-repeat: no-repeat;
}

/* 1) Maritime tokens (kept independent but compatible with base- tokens) */
:root{
  --lr-max-w: 440px;
  --lr-radius: 1.35rem;
  --lr-blur: 20px;

  /* Deep sea palette */
  --lr-sea-900: #06202a;
  --lr-sea-800: #083243;
  --lr-sea-700: #0b4960;
  --lr-sea-600: #0b7285;
  --lr-sea-500: #1098ad;
  --lr-sea-200: #c5f6fa;

  /* Sand + sunset */
  --lr-sand-200: #ffe8cc;
  --lr-sand-100: #fff4e6;
  --lr-coral-500: #ff7a59;

  /* Text */
  --lr-text: var(--base-clr-text, #0d2429);
  --lr-muted: var(--base-clr-muted, rgba(13,36,41,0.62));

  /* Surfaces (sea-tinted glass, not medical-white) */
  --lr-glass: color-mix(in srgb, rgba(255,255,255,0.92) 68%, rgba(16,152,173,0.18) 32%);
  --lr-glass-2: color-mix(in srgb, rgba(255,255,255,0.88) 58%, rgba(255,232,204,0.20) 42%);

  --lr-border: color-mix(in srgb, rgba(6,32,42,0.18) 70%, transparent);

  /* Shadows: depth + subtle glow */
  --lr-shadow:
    0 18px 50px rgba(0,0,0,0.26),
    0 6px 18px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.10) inset;

  /* Backdrop */
  --lr-backdrop: rgba(0,0,0,0.60);

  /* Accent for buttons/links */
  --lr-accent: var(--base-clr-primary, var(--lr-sea-500));
  --lr-accent-dark: var(--base-clr-primary-dark, var(--lr-sea-600));
  --lr-accent-contrast: var(--base-clr-primary-contrast, #ffffff);
}

/* Dark mode tuning */
html[data-bs-theme="dark"]{
  --lr-text: var(--base-clr-text, #e9ecef);
  --lr-muted: var(--base-clr-muted, rgba(233,236,239,0.68));

  --lr-glass: color-mix(in srgb, rgba(6,32,42,0.78) 70%, rgba(16,152,173,0.14) 30%);
  --lr-glass-2: color-mix(in srgb, rgba(6,32,42,0.72) 72%, rgba(255,232,204,0.10) 28%);
  --lr-border: color-mix(in srgb, rgba(233,236,239,0.16) 75%, transparent);

  --lr-shadow:
    0 22px 70px rgba(0,0,0,0.62),
    0 8px 22px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.08) inset;

  --lr-backdrop: rgba(0,0,0,0.74);
}

/* 2) Optional page scrim (extra depth; hidden while modal open to avoid double blur) */
.login-registrar-page,
.login-page{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.login-registrar-page::before,
.login-page::before{
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(900px 600px at 18% 18%, rgba(255,232,204,0.18), transparent 58%),
    radial-gradient(980px 680px at 82% 22%, rgba(16,152,173,0.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18));
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .login-registrar-page::before,
  .login-page::before{
    backdrop-filter: blur(var(--lr-blur)) saturate(1.20);
    -webkit-backdrop-filter: blur(var(--lr-blur)) saturate(1.20);
  }
}

body.modal-open .login-registrar-page,
body.modal-open .login-page{
  display: none;
}

/* 3) Page-scoped modal backdrop (login/register only) */
body[data-page="login"] .modal-backdrop.show,
body[data-page="register"] .modal-backdrop.show{
  background-image: var(--base-modal-bg);
  background-size: cover;
  background-position: center;
  background-color: var(--lr-backdrop);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  body[data-page="login"] .modal-backdrop.show,
  body[data-page="register"] .modal-backdrop.show{
    backdrop-filter: blur(6px) saturate(1.10);
    -webkit-backdrop-filter: blur(6px) saturate(1.10);
  }
}

/* 4) Dialog sizing + motion */
#loginModal .modal-dialog,
#registerModal .modal-dialog{
  max-width: var(--lr-max-w);
  margin: 1.1rem auto;
  will-change: transform;
}

#loginModal.modal.fade .modal-dialog,
#registerModal.modal.fade .modal-dialog{
  transform: translateY(16px) scale(0.988);
}

#loginModal.modal.show .modal-dialog,
#registerModal.modal.show .modal-dialog{
  transform: none;
  transition: transform 0.22s cubic-bezier(0.18, 0.9, 0.25, 1);
}

/* 5) Maritime glass card */
#loginModal .modal-content,
#registerModal .modal-content{
  position: relative;
  background: var(--lr-glass);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius);
  box-shadow: var(--lr-shadow);
  color: var(--lr-text);
  overflow: hidden;
}

#loginModal .modal-content::before,
#registerModal .modal-content::before{
  content: "";
  position: absolute;
  inset: -40% -30%;
  pointer-events: none;

  background:
    radial-gradient(closest-side at 22% 30%, rgba(197,246,250,0.26), transparent 60%),
    radial-gradient(closest-side at 78% 36%, rgba(255,232,204,0.20), transparent 62%),
    repeating-linear-gradient(
      -12deg,
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.08) 10px,
      rgba(255,255,255,0.03) 10px,
      rgba(255,255,255,0.03) 22px
    );
  transform: rotate(-4deg);
  opacity: 0.55;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #loginModal .modal-content,
  #registerModal .modal-content{
    backdrop-filter: blur(var(--lr-blur)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--lr-blur)) saturate(1.16);
  }
}

/* Keep content above shimmer */
#loginModal .modal-header,
#loginModal .modal-body,
#loginModal .modal-footer,
#registerModal .modal-header,
#registerModal .modal-body,
#registerModal .modal-footer{
  position: relative;
  z-index: 1;
}

/* 6) Header: map bg-ocean to a true maritime gradient */
.bg-ocean{
  background:
    radial-gradient(120% 180% at 18% 20%, rgba(255,232,204,0.32), transparent 55%),
    linear-gradient(180deg, rgba(16,152,173,0.98) 0%, rgba(11,114,133,0.98) 55%, rgba(8,50,67,0.98) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

#loginModal .modal-header,
#registerModal .modal-header{
  padding: 1rem 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent);
}

#loginModal .modal-title,
#registerModal .modal-title{
  font-family: "Dancing Script", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18);
}

/* 7) Body + footer */
#loginModal .modal-body,
#registerModal .modal-body{
  padding: 1.05rem 1.05rem 0.85rem;
}

#loginModal .modal-footer,
#registerModal .modal-footer{
  padding: 0.9rem 1.05rem 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--lr-border) 60%, transparent);
  background: color-mix(in srgb, var(--lr-glass-2) 82%, transparent);
}

/* 8) Inputs */
#loginModal .form-label,
#registerModal .form-label{
  color: color-mix(in srgb, var(--lr-text) 86%, transparent);
}

#loginModal .form-control,
#loginModal .form-select,
#registerModal .form-control,
#registerModal .form-select{
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--lr-border) 85%, transparent);
  background: color-mix(in srgb, rgba(255,255,255,0.78) 68%, rgba(197,246,250,0.18) 32%);
  color: var(--lr-text);
}

html[data-bs-theme="dark"] #loginModal .form-control,
html[data-bs-theme="dark"] #loginModal .form-select,
html[data-bs-theme="dark"] #registerModal .form-control,
html[data-bs-theme="dark"] #registerModal .form-select{
  background: color-mix(in srgb, rgba(6,32,42,0.62) 72%, rgba(16,152,173,0.10) 28%);
  border-color: color-mix(in srgb, var(--lr-border) 90%, transparent);
}

#loginModal .form-control::placeholder,
#registerModal .form-control::placeholder{
  color: color-mix(in srgb, var(--lr-muted) 70%, transparent);
}

#loginModal .form-control:focus,
#loginModal .form-select:focus,
#registerModal .form-control:focus,
#registerModal .form-select:focus{
  border-color: color-mix(in srgb, var(--lr-sea-500) 80%, transparent);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--lr-sea-200) 55%, transparent);
}

/* 9) Buttons: keep existing .btn-coral but maritime */
/* NOTE: Bootstrap uses --bs-btn-bg as background-color; gradients there become invalid and can yield white-on-white.
   So we set real background-image/background-color here. */
.btn-coral{
  background-color: rgba(11,114,133,0.98);
  background-image: linear-gradient(180deg, rgba(34,184,207,0.98) 0%, rgba(11,114,133,0.98) 100%);
  border-color: rgba(255,255,255,0.18);
  color: var(--lr-accent-contrast) !important;
}

.btn-coral:hover,
.btn-coral:focus{
  background-color: rgba(8,50,67,0.98);
  background-image: linear-gradient(180deg, rgba(34,184,207,1) 0%, rgba(8,50,67,0.98) 100%);
  border-color: rgba(255,255,255,0.22);
  color: var(--lr-accent-contrast) !important;
}

.btn-coral:active,
.btn-coral.active{
  background-color: rgba(6,32,42,0.98);
  background-image: linear-gradient(180deg, rgba(11,114,133,1) 0%, rgba(6,32,42,0.98) 100%);
  border-color: rgba(255,255,255,0.20);
  color: var(--lr-accent-contrast) !important;
}

.btn-coral:focus-visible{
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--lr-sea-200) 40%, transparent);
}

/* Fallback: if the submit button is plain .btn-primary inside these modals, keep it non-white */
#loginModal .btn-primary:not(.btn-outline-primary):not(.btn-coral),
#registerModal .btn-primary:not(.btn-outline-primary):not(.btn-coral){
  background-color: var(--lr-accent-dark);
  border-color: rgba(255,255,255,0.18);
  color: var(--lr-accent-contrast) !important;
}

#loginModal .btn-primary:not(.btn-outline-primary):not(.btn-coral):hover,
#loginModal .btn-primary:not(.btn-outline-primary):not(.btn-coral):focus,
#registerModal .btn-primary:not(.btn-outline-primary):not(.btn-coral):hover,
#registerModal .btn-primary:not(.btn-outline-primary):not(.btn-coral):focus{
  background-color: var(--lr-sea-700);
  border-color: rgba(255,255,255,0.22);
  color: var(--lr-accent-contrast) !important;
}

#loginModal .btn-outline-primary,
#registerModal .btn-outline-primary{
  --bs-btn-color: color-mix(in srgb, var(--lr-sea-600) 92%, #ffffff 8%);
  --bs-btn-border-color: color-mix(in srgb, var(--lr-sea-600) 45%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--lr-sea-200) 40%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--lr-sea-500) 55%, transparent);
  --bs-btn-hover-color: var(--lr-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--lr-sea-200) 55%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lr-sea-500) 70%, transparent);
}

#pw-suggest-btn.btn-outline-secondary{
  --bs-btn-color: color-mix(in srgb, var(--lr-text) 78%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--lr-border) 95%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--lr-glass-2) 78%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--lr-border) 100%, transparent);
  --bs-btn-hover-color: var(--lr-text);
}

/* Touch-friendly targets */
#loginModal .modal-footer .btn,
#registerModal .modal-footer .btn,
#pw-suggest-btn{
  min-height: 48px;
  border-radius: 0.95rem;
}

/* 10) Links and hints */
.login-registrar-link{
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  text-align: center;

  font-weight: 650;
  color: color-mix(in srgb, var(--lr-sea-600) 92%, #ffffff 8%);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.login-registrar-link:hover,
.login-registrar-link:focus{
  text-decoration: none;
}

.login-registrar-save-hint{
  font-size: 0.92rem;
  color: var(--lr-muted);
  margin-bottom: 0;
}

/* 11) Close button polish */
#registerModal .btn-close{
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.18));
}
html[data-bs-theme="dark"] #registerModal .btn-close{
  filter: invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.30));
}

/* 12) Motion safety */
@media (prefers-reduced-motion: reduce){
  #loginModal.modal.fade .modal-dialog,
  #registerModal.modal.fade .modal-dialog{ transform: none !important; }
  #loginModal.modal.show .modal-dialog,
  #registerModal.modal.show .modal-dialog{ transition: none !important; }
}

/* 13) Mobile fine-tuning */
@media (max-width: 360px){
  #loginModal .modal-dialog,
  #registerModal .modal-dialog{ max-width: 95%; }
}