/*
 * portal_split.css — Desktop split layout for Afaq portals
 * booking_portal.php | login.php | register.php
 * Desktop ≥1024px: 1/3 image (dark/gold) + 2/3 form (white)
 * Mobile: existing responsive flow unchanged
 */

/* ═══════════════════════════════════════════════════
   IMAGE PANEL — shared gold/black side panel
═══════════════════════════════════════════════════ */
.ps-img {
    display: none; /* hidden on mobile */
    background: linear-gradient(160deg, #0f1117 0%, #1a1410 35%, #2d2419 65%, #1a1410 100%);
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 60px 40px;
    text-align: center;
}

/* Animated radial glow */
.ps-img::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 40%,
        rgba(212,175,55,.16) 0%,
        rgba(212,175,55,.04) 40%,
        transparent 70%);
    animation: ps-glow 18s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Subtle pattern overlay */
.ps-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(212,175,55,.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(212,175,55,.04) 0%, transparent 50%);
    pointer-events: none;
}

@keyframes ps-glow {
    0%   { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.2) rotate(20deg); }
}

/* Logo image — fully fluid, no hardcoded px.
   width/height:auto keeps the image's native aspect-ratio (no stretch/distortion);
   the viewport- and parent-relative caps below let it grow to fill the panel
   while staying within it, and never upscale past its real resolution. */
.ps-img .ps-logo {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: min(80%, 22vw);   /* relative to parent panel (%) + viewport width (vw) */
    max-height: 34vh;            /* relative to viewport height (vh) */
    object-fit: contain;
    filter: drop-shadow(0 8px 32px rgba(212,175,55,.5));
    animation: ps-float 7s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ps-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-18px); }
}

/* Brand title */
.ps-img .ps-brand {
    position: relative;
    z-index: 2;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 900;
    color: #D4AF37;
    letter-spacing: 3px;
    text-shadow: 0 2px 20px rgba(212,175,55,.5);
    line-height: 1;
}

/* Tagline */
.ps-img .ps-tagline {
    position: relative;
    z-index: 2;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 600;
    color: #b8a88a;
    line-height: 1.8;
    max-width: 270px;
}

/* Gold divider line */
.ps-img .ps-divider {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Feature bullets */
.ps-img .ps-feats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 8px;
}

.ps-img .ps-feat {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d4c5a9;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    text-align: right;
}

.ps-img .ps-feat i {
    color: #D4AF37;
    font-size: 1rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,.12);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(212,175,55,.2);
}

/* Slogan footer inside image panel */
.ps-img .ps-slogan {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    z-index: 2;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(212,175,55,.45);
    letter-spacing: 1.5px;
}

/* ═══════════════════════════════════════════════════
   DESKTOP SPLIT — only activates at ≥1024px
═══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* Remove body padding — split fills full viewport */
    body.ps-body {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #f8f7f4 !important;
        min-height: 100vh !important;
    }

    /* Outer wrapper becomes a row */
    .ps-split {
        display: flex !important;
        flex-direction: row !important;
        min-height: 100vh !important;
        width: 100% !important;
    }

    /* Image panel: 1/3 fixed height */
    .ps-img {
        display: flex !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        min-height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
    }

    /* Form column: 2/3 scrollable */
    .ps-form-col {
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
        overflow-y: auto !important;
        min-height: 100vh !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 60px 80px !important;
    }
}

/* ═══════════════════════════════════════════════════
   RESET for container elements on desktop
═══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .ps-split.ps-container-reset {
        max-width: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
}