/* ============================================================
   Suika Admin — Guest Pages CSS (login, forgot password)
   Loaded ONLY by admin/guest_layout.php — not after login
   ============================================================ */

/* -- Root Variables ----------------------------------------- */
:root {
    --suika-navy:    #1e2a3a;
    --suika-teal:    #17a2b8;
    --suika-teal-dk: #117a8b;
    --suika-bg:      #f4f6f9;
    --suika-card:    #ffffff;
    --suika-text:    #2d3748;
    --suika-muted:   #6c757d;
    --suika-border:  #dee2e6;
    --suika-shadow:  0 8px 32px rgba(30,42,58,.13);
    --transition:    .25s ease;
}

/* -- Guest Layout Wrapper ----------------------------------- */
.suika-guest-wrap {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--suika-bg);
    overflow-x: hidden;
}

/* -- Left — Form Panel -------------------------------------- */
.suika-form-panel {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
    background: var(--suika-card);
    box-shadow: 4px 0 24px rgba(30,42,58,.08);
    position: relative;
    z-index: 2;
    overflow-y: auto;
    box-sizing: border-box;
}

/* -- Right — Brand Panel ------------------------------------ */
.suika-brand-panel {
    flex: 1;
    background: linear-gradient(135deg, var(--suika-navy) 0%, #2c3f55 60%, #1a3a4a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* -- Brand Content ------------------------------------------ */
.suika-brand-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 1.5rem 2rem;
}

.suika-brand-logo {
    max-width: 180px;
    width: 60%;
    margin-bottom: .5rem;
    filter: drop-shadow(0 4px 18px rgba(23,162,184,.45));
}

.suika-brand-tagline {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--suika-teal);
    text-shadow: 0 0 12px rgba(23,162,184,.7), 0 0 28px rgba(23,162,184,.35);
    margin-bottom: .1rem;
}

.suika-brand-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--suika-teal), transparent);
    border-radius: 2px;
    margin: .6rem auto;
    opacity: .7;
}

.suika-brand-name {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: .18em;
    color: #fff;
    margin-bottom: .4rem;
    text-shadow: 0 0 18px rgba(23,162,184,.55), 0 2px 12px rgba(0,0,0,.3);
    line-height: 1;
}

.suika-brand-features {
    display: flex;
    gap: .8rem;
    justify-content: center;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.suika-feat-badge {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(23,162,184,.3);
    color: rgba(255,255,255,.8);
    border-radius: 20px;
    padding: .3rem .85rem;
    font-size: .76rem;
    letter-spacing: .04em;
    backdrop-filter: blur(6px);
    transition: background var(--transition), border-color var(--transition);
}
.suika-feat-badge:hover {
    background: rgba(23,162,184,.15);
    border-color: rgba(23,162,184,.6);
}

/* -- Mobile brand header logo ------------------------------ */
.guest-mobile-logo {
    max-height: 42px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin-bottom: .4rem;
}

/* -- Floating Icons (Brand Panel Background) ---------------- */
.suika-float-icons {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.suika-icon-bubble {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    opacity: .18;
    transition: opacity .25s ease, box-shadow .25s ease;
    cursor: default;
    will-change: left, top;
}

.suika-icon-bubble.whatsapp { background: rgba(37,211,102,.18);  color: #25d366; box-shadow: 0 0 14px rgba(37,211,102,.4),  inset 0 0 8px rgba(37,211,102,.18); }
.suika-icon-bubble.email    { background: rgba(23,162,184,.18);   color: #17a2b8; box-shadow: 0 0 14px rgba(23,162,184,.4),  inset 0 0 8px rgba(23,162,184,.18); }
.suika-icon-bubble.sms      { background: rgba(255,193,7,.18);    color: #ffc107; box-shadow: 0 0 14px rgba(255,193,7,.4),   inset 0 0 8px rgba(255,193,7,.15); }
.suika-icon-bubble.bell     { background: rgba(220,53,69,.15);    color: #ff6b7a; box-shadow: 0 0 14px rgba(220,53,69,.35),  inset 0 0 8px rgba(220,53,69,.15); }
.suika-icon-bubble.chart    { background: rgba(111,66,193,.15);   color: #b57bff; box-shadow: 0 0 14px rgba(111,66,193,.35), inset 0 0 8px rgba(111,66,193,.15); }

/* -- Form Header -------------------------------------------- */
.suika-form-header {
    margin-bottom: 1.6rem;
}

.suika-form-header .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
}

.suika-form-header .brand-mark span {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--suika-navy);
    letter-spacing: .08em;
}

.suika-form-header h2 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--suika-text);
    margin-bottom: .25rem;
}

.suika-form-header p {
    font-size: .86rem;
    color: var(--suika-muted);
    margin: 0;
}

/* -- Floating Label Inputs ---------------------------------- */
.suika-input-wrap {
    position: relative;
    margin-bottom: 1.3rem;
}

.suika-input-wrap .form-control {
    height: 52px;
    padding: 1.1rem 2.8rem 0.3rem .9rem;
    border: 1.5px solid var(--suika-border);
    border-radius: 10px;
    font-size: .95rem;
    color: var(--suika-text);
    background: #fafbfc;
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

.suika-input-wrap .form-control:focus {
    border-color: var(--suika-teal);
    box-shadow: 0 0 0 3px rgba(23,162,184,.15);
    background: #fff;
    outline: none;
}

.suika-input-wrap label {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    font-size: .95rem;
    color: var(--suika-muted);
    pointer-events: none;
    transition: top .22s ease, font-size .22s ease, color .22s ease, transform .22s ease;
    background: transparent;
    padding: 0 2px;
    transform-origin: left center;
    white-space: nowrap;
}

.suika-input-wrap .form-control:focus ~ label,
.suika-input-wrap .form-control.has-value ~ label {
    top: .55rem;
    font-size: .72rem;
    color: var(--suika-teal);
    transform: none;
}

.suika-input-wrap .input-icon {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--suika-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: color var(--transition);
}

.suika-input-wrap .form-control:focus ~ .input-icon {
    color: var(--suika-teal);
}

/* -- Buttons ------------------------------------------------ */
.suika-btn-primary {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, var(--suika-teal) 0%, var(--suika-teal-dk) 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    box-shadow: 0 4px 14px rgba(23,162,184,.35);
    margin-top: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.suika-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(23,162,184,.45);
    color: #fff;
}

.suika-btn-primary:active { transform: translateY(0); }

.suika-btn-secondary {
    width: 100%;
    height: 44px;
    background: transparent;
    border: 1.5px solid var(--suika-border);
    border-radius: 10px;
    color: var(--suika-text);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suika-btn-secondary:hover {
    border-color: var(--suika-teal);
    color: var(--suika-teal);
    background: rgba(23,162,184,.04);
}

/* -- Alerts ------------------------------------------------- */
.suika-alert {
    border-radius: 10px;
    font-size: .88rem;
    padding: .75rem 1rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    animation: suikaFadeIn .35s ease;
}

@keyframes suikaFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Captcha Widget ----------------------------------------- */
.suika-captcha-wrap .captcha-box { margin: 0; }

.suika-captcha-wrap .captcha-box > div {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.suika-captcha-wrap [style*="position:relative"] {
    border: 1.5px solid var(--suika-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fafbfc !important;
}

.suika-captcha-wrap button.btn {
    border-radius: 8px !important;
    border: 1.5px solid var(--suika-border) !important;
    background: #f4f6f9 !important;
    color: var(--suika-teal) !important;
    font-size: 1rem !important;
    transition: background var(--transition), border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.suika-captcha-wrap button.btn:hover {
    background: rgba(23,162,184,.1) !important;
    border-color: var(--suika-teal) !important;
}

.suika-captcha-wrap input[type="text"] {
    border: 1.5px solid var(--suika-border) !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    color: var(--suika-text) !important;
    background: #fafbfc !important;
    transition: border-color var(--transition), box-shadow var(--transition);
    padding-left: 8px !important;
}
.suika-captcha-wrap input[type="text"]:focus {
    border-color: var(--suika-teal) !important;
    box-shadow: 0 0 0 3px rgba(23,162,184,.15) !important;
    outline: none !important;
}

/* -- Mobile float icons: hidden on desktop, shown on mobile -- */
.suika-float-icons-mobile {
    display: none;
}

/* -- Form body + sticky footer layout ---------------------- */
.suika-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.suika-sticky-footer {
    margin-top: auto;
    padding-top: .75rem;
}

/* -- Forgot Password Pill Link ------------------------------ */
.suika-forgot-wrap {
    margin-top: 1rem;
    text-align: center;
}

.suika-forgot-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border-radius: 50px;
    background: rgba(23,162,184,.08);
    border: 1.5px solid rgba(23,162,184,.25);
    color: var(--suika-teal);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .02em;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.suika-forgot-link:hover {
    background: rgba(23,162,184,.16);
    border-color: var(--suika-teal);
    color: var(--suika-teal);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(23,162,184,.2);
    text-decoration: none;
}

.suika-forgot-link .fa-key { font-size: .8rem; opacity: .8; }

.suika-forgot-arrow {
    font-size: .72rem;
    opacity: .6;
    transition: transform var(--transition);
}

.suika-forgot-link:hover .suika-forgot-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* -- Guest Footer ------------------------------------------- */
.suika-form-footer {
    margin-top: 0;
    text-align: center;
    font-size: .82rem;
    color: var(--suika-muted);
}

.suika-form-footer a {
    color: var(--suika-teal);
    text-decoration: none;
    font-weight: 600;
}

.suika-form-footer a:hover { text-decoration: underline; }

/* -- Responsive --------------------------------------------- */
@media (max-width: 767.98px) {
    /* Pin page to viewport — wrap scrolls internally, body never scrolls */
    html, body {
        height: 100%;
        overflow: hidden;
    }

    .suika-guest-wrap {
        flex-direction: column;
        background: linear-gradient(160deg, var(--suika-navy) 0%, #1a3a4a 55%, #0f2233 100%);
        height: 100%;
        min-height: unset;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .suika-brand-panel { display: none; }

    .suika-form-panel {
        width: 100%;
        min-height: 0;
        box-shadow: none;
        background: transparent;
        padding: 2.2rem 1.25rem 1.5rem;
        justify-content: flex-start;
        flex-direction: column;
        display: flex;
        overflow-y: visible;
    }

    /* Show mobile floating icon layer */
    .suika-float-icons-mobile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    /* Form body sits above the icon layer — collapses to content height so footer follows naturally */
    .suika-form-body {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    /* Sticky footer sits naturally below form content — no auto-push to screen bottom */
    .suika-sticky-footer {
        position: relative;
        z-index: 1;
        margin-top: 1.5rem;
    }

    /* Return to Login secondary button — visible on dark bg */
    .suika-btn-secondary {
        color: rgba(255,255,255,.75);
        border-color: rgba(255,255,255,.2);
        background: rgba(255,255,255,.05);
    }
    .suika-btn-secondary:hover {
        color: #fff;
        border-color: var(--suika-teal);
        background: rgba(23,162,184,.1);
    }

    /* Forgot link — lighter border for dark bg */
    .suika-forgot-link {
        background: rgba(23,162,184,.12);
        border-color: rgba(23,162,184,.4);
        color: #5de8ff;
        text-shadow: 0 0 8px rgba(23,162,184,.5);
    }
    .suika-forgot-link:hover {
        background: rgba(23,162,184,.22);
        border-color: var(--suika-teal);
        color: #5de8ff;
        box-shadow: 0 0 18px rgba(23,162,184,.35);
    }

    /* Mobile brand mark shown at top */
    .suika-form-header .brand-mark {
        display: block !important;
        margin-bottom: .9rem;
    }

    /* Logo on dark mobile background */
    .guest-mobile-logo {
        filter: brightness(1.1) drop-shadow(0 2px 14px rgba(23,162,184,.55));
        max-height: 46px;
    }
    .suika-form-header .brand-mark span {
        color: #fff;
        text-shadow: 0 0 14px rgba(23,162,184,.8);
        font-size: 1.5rem;
    }
    .suika-form-header h2 {
        color: #fff;
        font-size: 1.35rem;
    }

    /* Inputs — dark themed */
    .suika-input-wrap .form-control {
        background: rgba(255,255,255,.07);
        border-color: rgba(23,162,184,.35);
        color: #fff;
    }
    .suika-input-wrap .form-control::placeholder { color: transparent; }
    .suika-input-wrap .form-control:focus {
        background: rgba(255,255,255,.11);
        border-color: var(--suika-teal);
        box-shadow: 0 0 0 3px rgba(23,162,184,.2);
        color: #fff;
    }
    .suika-input-wrap .form-control.has-value {
        background: rgba(255,255,255,.09);
        color: #fff;
    }
    .suika-input-wrap label {
        color: rgba(255,255,255,.55);
    }
    .suika-input-wrap .form-control:focus ~ label,
    .suika-input-wrap .form-control.has-value ~ label {
        color: var(--suika-teal);
    }
    .suika-input-wrap .input-icon {
        color: rgba(255,255,255,.4);
    }
    .suika-input-wrap .form-control:focus ~ .input-icon {
        color: var(--suika-teal);
    }

    /* Links */
    .suika-form-panel a {
        color: var(--suika-teal);
    }

    /* Footer */
    .suika-form-footer {
        color: rgba(255,255,255,.45);
    }

    /* Captcha */
    .suika-captcha-wrap [style*="position:relative"] {
        border-color: rgba(23,162,184,.35) !important;
        background: rgba(255,255,255,.07) !important;
    }
    .suika-captcha-wrap button.btn {
        border-color: rgba(23,162,184,.35) !important;
        background: rgba(255,255,255,.07) !important;
        color: var(--suika-teal) !important;
    }
    .suika-captcha-wrap input[type="text"] {
        border-color: rgba(23,162,184,.35) !important;
        background: rgba(255,255,255,.07) !important;
        color: #fff !important;
    }
}

/* -- Teal Pulse Glow — login & forgot password buttons --------- */
/* Visible breathing halo, clearly noticeable but still polished   */
/* Usage: add class "suika-btn-neon" to any .suika-btn-primary     */
@keyframes suikaPulse {
    0%   {
        box-shadow : 0 0 0 0px  rgba(23,162,184,.80),
                     0 0 12px  2px rgba(23,162,184,.35),
                     0 4px 18px    rgba(23,162,184,.25);
    }
    55%  {
        box-shadow : 0 0 0 8px  rgba(23,162,184,.0),
                     0 0 22px  6px rgba(23,162,184,.50),
                     0 6px 28px    rgba(23,162,184,.40);
    }
    100% {
        box-shadow : 0 0 0 0px  rgba(23,162,184,.0),
                     0 0 12px  2px rgba(23,162,184,.35),
                     0 4px 18px    rgba(23,162,184,.25);
    }
}

.suika-btn-neon {
    animation     : suikaPulse 2.2s ease-in-out infinite;
    outline       : 2px solid rgba(23,162,184,.70);
    outline-offset: 3px;
    border-radius : 10px !important;
    position      : relative;
    z-index       : 0;
}

/* On hover — faster pulse, brighter outline */
.suika-btn-neon:hover {
    animation-duration : 1.2s;
    outline-color      : rgba(23,162,184,1);
}

/* -- Ripple click effect (shared with admin panel) -------------- */
.sk-ripple {
    position : relative;
    overflow : hidden;
}
.sk-ripple .ripple-wave {
    position      : absolute;
    border-radius : 50%;
    transform     : scale(0);
    animation     : skRippleAnim 0.55s linear;
    background    : rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
@keyframes skRippleAnim {
    to {
        transform : scale(4);
        opacity   : 0;
    }
}

/* Tiny screens — prevent any overflow/crop */
@media (max-width: 360px) {
    .suika-form-panel    { padding: 1.8rem .9rem 1.2rem; }
    .suika-input-wrap .form-control { font-size: .88rem; }
    .suika-btn-primary  { font-size: .92rem; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .suika-form-panel { width: 55%; padding: 2rem 2rem; }
}