/* ==========================================================================
   RHU Cantilan — 3D layer for STANDALONE pages  (assets/css/rhu-standalone-3d.css)
   --------------------------------------------------------------------------
   For pages that do NOT use config/partials/portal_shell.php:
     auth/login.php, auth/register.php, auth/forgot-password.php,
     auth/verify_email.php, auth/change_password.php,
     ADMIN/Patient_Directory/patient_profile.php, patient_register.php
   Included with a <link> right before </head>, so it overrides page styles
   at equal specificity. Visual-only; screen-only; print is untouched.
   ========================================================================== */
:root {
    --rhu-ease: cubic-bezier(.2, .8, .2, 1);
    --rhu-spring: cubic-bezier(.34, 1.56, .64, 1);
    --rhu-depth: 0 1px 1px rgba(13, 36, 22, .05), 0 2px 4px rgba(13, 36, 22, .05), 0 10px 20px -8px rgba(13, 36, 22, .14), 0 26px 48px -22px rgba(13, 36, 22, .28);
    --rhu-depth-hi: 0 2px 4px rgba(13, 36, 22, .06), 0 16px 30px -10px rgba(13, 36, 22, .2), 0 44px 80px -30px rgba(13, 36, 22, .38);
}

@media screen {

/* ---- Auth split card (login / register): a floating 3D slab ---- */
.page { perspective: 1600px; }
.page > .card {
    transform-style: preserve-3d;
    transition: transform .5s var(--rhu-ease), box-shadow .5s var(--rhu-ease);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 4px rgba(13, 36, 22, .06),
        0 24px 48px -16px rgba(13, 36, 22, .30),
        0 60px 120px -40px rgba(13, 36, 22, .40);
    will-change: transform;
    animation: rhuCardIn .7s var(--rhu-spring) backwards;
}
.page > .card .panel-left { position: relative; }
.page > .card .panel-left::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(600px circle at var(--rhu-mx, 30%) var(--rhu-my, 0%), rgba(255, 255, 255, .16), transparent 45%);
}
.page > .card .logo-wrap { transform: translateZ(40px); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .28)); }
.page > .card .info-item { transition: transform .25s var(--rhu-ease), background-color .25s; }
.page > .card .info-item:hover { transform: translateX(4px); }

/* ---- Centered auth cards (forgot / verify / approval) ---- */
body > .container { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--rhu-depth-hi); animation: rhuCardIn .6s var(--rhu-spring) backwards; }
.header-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -10px rgba(13, 36, 22, .45); }

/* ---- Profile / patient pages ---- */
.profile-card, .profile-header, .info-section, .family-card, .tabs,
.container > .card, .form-section, .change-password-container > .profile-card {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--rhu-depth);
    transition: box-shadow .3s var(--rhu-ease), transform .3s var(--rhu-ease);
}
.profile-header { box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, var(--rhu-depth-hi); }
.info-section .info-item, .profile-card .info-item { transition: transform .2s var(--rhu-ease), box-shadow .2s; }
.info-section .info-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(13, 36, 22, .35); }
.tab-btn { transition: transform .15s var(--rhu-ease), box-shadow .2s, background-color .2s, color .2s; }
.tab-btn.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 16px -8px rgba(13, 36, 22, .6); }

/* ---- Buttons: tactile ---- */
.btn-signin, .btn-register, .btn-submit, .btn-primary, .btn-secondary, .btn-skip, .btn-back, .btn-photo, .btn {
    transition: transform .14s var(--rhu-ease), box-shadow .18s var(--rhu-ease), filter .18s;
}
.btn-signin, .btn-submit, .btn-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -8px rgba(45, 106, 79, .7);
}
:is(.btn-signin, .btn-register, .btn-submit, .btn-primary, .btn-secondary, .btn-skip, .btn-back, .btn-photo, .btn):not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.04); }
:is(.btn-signin, .btn-register, .btn-submit, .btn-primary, .btn-secondary, .btn-skip, .btn-back, .btn-photo, .btn):not(:disabled):active { transform: translateY(1px) scale(.985); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18); }

/* ---- Inputs: focus ring ---- */
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(64, 145, 108, .18) !important;
    border-color: #40916c !important;
    transition: box-shadow .18s, border-color .18s;
}
:focus-visible { outline: 2px solid #52b788; outline-offset: 2px; }

::selection { background: rgba(82, 183, 136, .28); }
}

@keyframes rhuCardIn { from { opacity: 0; transform: translateY(24px) rotateX(8deg) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}