/* =========================================================
   AUTH MODAL — kartoosh clone
   -------------------------------------------------------------
   Geometry captured live on m.kartoosh.bet/fr at 390px (identical
   on www at 1600px — the fields stretch full width):

     overlay      full screen, bg #18232D
     bar          64px, padding 0 52px 0 7px, logo 100x46 @ y9
     kicker       "Vous avez déjà un compte ?"  14/500 @ y79
     subtitle     "Connectez-vous..."            18/400 @ y105
     field 1      376x52 (1586 desktop) @ y140  pitch 67
     field 2      @ y207
     remember me  checkbox 13x13 @ x7, text @ x37  @ y274
     submit       376x48, #F8C524 / #000205     @ y305
     forgot       "Mot de passe oublié ?"        @ y373
     support bar  57px, pinned to viewport bottom @ y787 (844vh)

   Rules are prefixed with .auth-modal so they outrank the
   `.auth-modal__form input { font-size:16px }` iOS-zoom guard in
   mobile.css, which loads after this file.
   ========================================================= */

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #18232D;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.auth-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* full-screen sheet, not a centred card */
.auth-modal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #18232D;
    color: #fff;
    overflow: hidden;
}

.auth-modal-overlay.is-open .auth-modal {
    animation: authSheetIn 0.22s ease;
}

@keyframes authSheetIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 64px bar ---------- */
.auth-modal .auth-modal__bar {
    flex: 0 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 52px 0 7px;
}

.auth-modal .auth-modal__logo {
    display: block;
    height: 46px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.auth-modal .auth-modal__close {
    position: absolute;
    top: 0;
    right: 4px;
    width: 48px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.auth-modal .auth-modal__close svg {
    width: 20px;
    height: 20px;
    display: block;
}

.auth-modal .auth-modal__close:hover {
    color: #fff;
}

/* ---------- panes ---------- */
.auth-modal .auth-modal__panels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 15px;
    overflow-y: auto;
}

.auth-modal .auth-modal__pane {
    display: none;
}

.auth-modal .auth-modal__pane.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* ---------- two line heading ---------- */
.auth-modal .auth-modal__head {
    flex: 0 0 auto;
    padding: 0 7px;
}

.auth-modal .auth-modal__kicker {
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.auth-modal .auth-modal__title {
    height: 20px;
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
}

.auth-modal .auth-modal__error {
    margin: 15px 7px 0;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 16px;
    color: #ffb4b4;
    background: rgba(255, 77, 77, 0.14);
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 4px;
}

/* ---------- fields (permanent top label, like the real site) ---------- */
.auth-modal .auth-modal__form {
    display: block;
    margin: 0;
    padding: 0;
}

.auth-modal .auth-field {
    position: relative;
    display: block;
    height: 52px;
    margin: 15px 7px;
}

.auth-modal .auth-field__label {
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 1;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 59px);
}

.auth-modal .auth-field input {
    display: block;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 44px 4px 15px;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease;
}

.auth-modal .auth-field input:focus {
    background: rgba(255, 255, 255, 0.2);
}

/* remove the WebKit search decorations */
.auth-modal .auth-field input::-webkit-search-cancel-button,
.auth-modal .auth-field input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- remember me / terms checkbox ----------
   Same pattern as the real site: the native input stays in the DOM
   (position:absolute, opacity:0) so it keeps submitting its name/value,
   and the visible 16x16 box is the sibling .auth-check__box.
     unchecked  bg rgba(255,255,255,.2)  radius 4px  @ x7
     checked    bg #F8C524 + tick
     label starts at x37 (16px box + 14px gap) */
.auth-modal .auth-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 16px;
    margin: 15px 7px 0;
    cursor: pointer;
}

.auth-modal .auth-check input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    margin: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.auth-modal .auth-check__box {
    flex: 0 0 auto;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    transition: background 0.12s ease;
}

.auth-modal .auth-check__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #000205;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg) scale(0);
    transition: transform 0.12s ease;
}

.auth-modal .auth-check input[type="checkbox"]:checked ~ .auth-check__box {
    background: #F8C524;
}

.auth-modal .auth-check input[type="checkbox"]:checked ~ .auth-check__box::after {
    transform: rotate(42deg) scale(1);
}

.auth-modal .auth-check input[type="checkbox"]:focus-visible ~ .auth-check__box {
    outline: 2px solid rgba(248, 197, 36, 0.7);
    outline-offset: 2px;
}

.auth-modal .auth-check__text {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.auth-modal .auth-check--terms {
    height: auto;
    align-items: flex-start;
    gap: 10px;
}

.auth-modal .auth-check--terms .auth-check__text {
    line-height: 16px;
}

/* ---------- submit ---------- */
.auth-modal .auth-modal__actions {
    margin: 15px 7px 0;
}

.auth-modal .auth-modal__submit {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 4px;
    background: #F8C524;
    color: #000205;
    font-family: inherit;
    font-size: 12px;
    line-height: 48px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.auth-modal .auth-modal__submit:hover {
    filter: brightness(1.06);
}

.auth-modal .auth-modal__submit:active {
    filter: brightness(0.96);
}

/* ---------- forgot password ---------- */
.auth-modal .auth-modal__forgot {
    display: block;
    margin-top: 20px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.auth-modal .auth-modal__forgot:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- register-only switch (back to login) ---------- */
.auth-modal .auth-modal__switch {
    margin: 20px 14px 0;
    font-size: 13px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.5);
}

.auth-modal .auth-modal__switchbtn {
    padding: 0;
    border: 0;
    background: none;
    color: #F8C524;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.auth-modal .auth-modal__switchbtn:hover {
    text-decoration: underline;
}

/* ---------- support bar, pinned to the bottom ---------- */
.auth-modal .auth-modal__support {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 57px;
    margin-top: auto;
    padding: 20px 7px;
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.auth-modal .auth-modal__support:hover {
    color: rgba(255, 255, 255, 0.85);
}

body.auth-modal-open {
    overflow: hidden;
}