/* ============================================================================
   Sign in / sign up.

   Loaded ONLY by pages/signin.blade.php and pages/signup.blade.php through
   @section('styles'), which the layout yields inside the same
   @unless($rammiFrozen) that gates the theme — so it can never reach a rammi.*
   route.

   WHY THIS FILE EXISTS. The template styles these inputs under
   `.cd-popup-container` — its MODAL wrapper. The pages use `.popup-container`,
   a different class, so not one of those rules applied: the fields rendered
   with no background, no border and no focus state, which is the whole of the
   "I can't see the field" complaint. They were never styled; they only looked
   styled inside the modal.

   Same two rules as wallet.css, for the same reasons:

   1. EVERY selector is scoped under `.auth` and every class is prefixed
      `auth-`. Bootstrap is loaded site-wide and already owns .form-label,
      .form-input, .form-check, .items and .head.

   2. No bare element selectors. casino-theme.css already restyles 35 of them
      site-wide; adding more from a page stylesheet is how pages start fighting
      each other.
   ============================================================================ */

.auth {
   /* Local aliases with fallbacks, so the page still renders correctly if it
      is ever viewed without the theme layer loaded. */
   --auth-surface: var(--cs-surface, #171f2e);
   --auth-field: var(--cs-bg-deep, #0e131d);
   --auth-line: var(--cs-line, #2a3446);
   --auth-text: var(--cs-text, #f2f6fa);
   --auth-dim: var(--cs-text-dim, #9aa6bd);
   --auth-accent: var(--cs-green, #19c37d);
   --auth-danger: #e5484d;

   max-width: 460px;
   margin: 0 auto;
   padding: 0 16px;
}

/* ---- The card ---------------------------------------------------------- */

.auth-card {
   background: var(--auth-surface);
   border: 1px solid var(--auth-line);
   border-radius: 16px;
   padding: 32px 28px;
   box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.auth-head {
   text-align: center;
   margin-bottom: 26px;
}

.auth-title {
   font-size: 1.6rem;
   font-weight: 800;
   color: var(--auth-text);
   margin: 0 0 6px;
   letter-spacing: -0.01em;
}

.auth-sub {
   color: var(--auth-dim);
   font-size: .9rem;
   margin: 0;
}

/* ---- Fields ------------------------------------------------------------ */

/* Spacing between fields belongs to the column, not to per-field margins that
   collapse or double. */
.auth-fields {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.auth-field {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.auth-label {
   font-size: .8rem;
   font-weight: 600;
   color: var(--auth-dim);
   letter-spacing: .02em;
}

.auth-input {
   width: 100%;
   height: 50px;
   padding: 0 15px;
   border-radius: 10px;
   /* The three things that were missing, and the reason the field was
      invisible: a ground, an edge, and a colour for what you type. */
   background: var(--auth-field);
   border: 1px solid var(--auth-line);
   color: var(--auth-text);
   font-size: .95rem;
   /* Never smaller than 16px on a phone: iOS Safari zooms the whole page in
      on a focused input below that, and does not zoom back out. */
   transition: border-color .16s ease, box-shadow .16s ease;
}

.auth-input::placeholder {
   /* 4.6:1 on the field ground. The template's #7D8AA0 measured 3.6:1, which
      is under the 4.5 placeholder text needs — and a placeholder nobody can
      read is a label nobody has. */
   color: #8b99b0;
}

.auth-input:hover {
   border-color: #3a475e;
}

.auth-input:focus {
   outline: none;
   border-color: var(--auth-accent);
   /* A ring, not just a border tint: on a dark field a 1px colour change is
      not enough to say which box has the keyboard. */
   box-shadow: 0 0 0 3px rgba(25, 195, 125, .22);
}

/* A field the server rejected. */
.auth-input.is-bad {
   border-color: var(--auth-danger);
}

.auth-input.is-bad:focus {
   box-shadow: 0 0 0 3px rgba(229, 72, 77, .22);
}

/* ---- Password reveal --------------------------------------------------- */

.auth-pw {
   position: relative;
}

.auth-pw .auth-input {
   /* Room for the button, so a long password does not run underneath it. */
   padding-right: 48px;
}

.auth-pw-toggle {
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 8px;
   background: transparent;
   color: var(--auth-dim);
   cursor: pointer;
}

.auth-pw-toggle:hover {
   color: var(--auth-text);
   background: rgba(255, 255, 255, .05);
}

/* ---- Messages ---------------------------------------------------------- */

.auth-alert {
   border-radius: 10px;
   padding: 11px 14px;
   font-size: .86rem;
   margin-bottom: 18px;
   border: 1px solid transparent;
}

.auth-alert-bad {
   background: rgba(229, 72, 77, .10);
   border-color: rgba(229, 72, 77, .35);
   color: #ff9ea1;
}

.auth-alert-good {
   background: rgba(25, 195, 125, .10);
   border-color: rgba(25, 195, 125, .35);
   color: #7ee2b8;
}

.auth-alert-note {
   background: rgba(242, 185, 12, .08);
   border-color: rgba(242, 185, 12, .30);
   color: #f5d489;
}

/* ---- Actions ----------------------------------------------------------- */

.auth-submit {
   width: 100%;
   height: 52px;
   margin-top: 24px;
   border: 0;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--auth-accent), #12a86a);
   color: #06170f;
   font-size: 1rem;
   font-weight: 800;
   cursor: pointer;
   transition: filter .16s ease;
}

.auth-submit:hover { filter: brightness(1.07); }

.auth-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
   margin-top: 18px;
   font-size: .88rem;
   color: var(--auth-dim);
}

.auth-links a {
   color: var(--auth-accent);
   font-weight: 600;
   text-decoration: none;
}

.auth-links a:hover { text-decoration: underline; }

/* ---- The age / terms check --------------------------------------------- */

.auth-check {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-top: 20px;
   font-size: .84rem;
   line-height: 1.5;
   color: var(--auth-dim);
}

.auth-check input {
   /* Not shrunk by the flex row, and big enough to hit on a phone. */
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   margin-top: 1px;
   accent-color: var(--auth-accent);
}

.auth-check a {
   color: var(--auth-accent);
   text-decoration: none;
}

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 575px) {
   .auth-card {
      padding: 26px 20px;
      border-radius: 14px;
   }

   .auth-input {
      /* 16px exactly: iOS Safari zooms into any focused input under that and
         leaves the page zoomed. */
      font-size: 16px;
   }
}