/* ==========================================================================
   ONEHUB IT - FLIP7 CONTROL PANEL (CP) DESIGN SYSTEM
   Retro-playful Teal, Coral, Gold & OneHub Brand Colors
   Buttons strictly matching the home page style (8px radius, elevation, hover lift)
   ========================================================================== */

:root {
    /* Flip7 Palette */
    --cp-teal-primary: #2BA8A2;
    --cp-teal-light: #3CC4BD;
    --cp-teal-dark: #1E8C86;
    --cp-teal-bg: #E8F6F5;

    --cp-gold-accent: #FFD23F;
    --cp-gold-brand: #FFBD25; /* Matches OneHub home page hero button */
    --cp-gold-light: #FFE47A;
    --cp-gold-dark: #E6B800;

    --cp-coral: #EF6C4A;
    --cp-coral-light: #FF8A6A;
    --cp-coral-dark: #D45233;

    --cp-cream: #FFF8E7;
    --cp-cream-dark: #F3E6C8;
    --cp-sky: #5DADE2;
    --cp-sky-light: #85C1E9;

    --cp-surface-base: #EFF8F7;
    --cp-surface-card: #FFFFFF;
    --cp-success: #27AE60;
    --cp-error: #E74C3C;

    /* OneHub IT Brand Palette */
    --cp-brand-blue: #1752A4;
    --cp-brand-secondary: #3869B2;
    --cp-dark-navy: #102F4E;
    --cp-light-blue: #F5F8FC;
    --cp-text-dark: #102F4E;
    --cp-text-muted: #64748B;
    --cp-border-subtle: rgba(16, 47, 78, 0.08);

    /* Elevation -- Colored Glow System */
    --cp-shadow-sm: 0 2px 8px rgba(16, 47, 78, 0.08);
    --cp-shadow-md: 0 4px 16px rgba(16, 47, 78, 0.12);
    --cp-shadow-lg: 0 8px 32px rgba(16, 47, 78, 0.16);
    --cp-shadow-card: 0 4px 20px rgba(43, 168, 162, 0.10);
    --cp-shadow-coral-glow: 0 4px 20px rgba(239, 108, 74, 0.35);
    --cp-shadow-teal-glow: 0 4px 20px rgba(43, 168, 162, 0.30);
    --cp-shadow-accent-glow: 0 4px 20px rgba(255, 189, 37, 0.40);
    --cp-shadow-sky-glow: 0 4px 16px rgba(93, 173, 226, 0.30);
    --cp-shadow-focus: 0 0 0 4px rgba(43, 168, 162, 0.20);
}

/* ==========================================================================
   Base & Typography
   ========================================================================== */

body.cp-body {
    background-color: var(--cp-surface-base);
    color: var(--cp-text-dark);
    font-family: 'Poppins', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html[lang="ar"] body.cp-body {
    font-family: 'Cairo', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   BUTTONS (CRITICAL: HOME PAGE MATCHING STYLE)
   Border radius: 8px, tactile elevation, translateY(-3px) hover lift
   ========================================================================== */

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 28px;
    border: 0;
    border-radius: 8px; /* Strict 8px border-radius matching home page */
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.cp-btn span.btn-arrow {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
}

.cp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(16, 47, 78, 0.22);
}

.cp-btn:hover span.btn-arrow {
    transform: translateX(4px);
}

html[dir="rtl"] .cp-btn:hover span.btn-arrow {
    transform: translateX(-4px);
}

.cp-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Home Page Signature Gold Button */
.cp-btn-gold {
    background: var(--cp-gold-brand);
    color: var(--cp-dark-navy);
}

.cp-btn-gold:hover {
    background: #FFFFFF;
    color: var(--cp-dark-navy);
    box-shadow: var(--cp-shadow-accent-glow);
}

/* Brand Primary Blue Button */
.cp-btn-blue {
    background: var(--cp-brand-blue);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(23, 82, 164, 0.25);
}

.cp-btn-blue:hover {
    background: var(--cp-dark-navy);
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(16, 47, 78, 0.30);
}

/* Flip7 Teal Button */
.cp-btn-teal {
    background: var(--cp-teal-primary);
    color: #FFFFFF;
    box-shadow: var(--cp-shadow-teal-glow);
}

.cp-btn-teal:hover {
    background: var(--cp-teal-dark);
    color: #FFFFFF;
}

/* Flip7 Coral Button */
.cp-btn-coral {
    background: var(--cp-coral);
    color: #FFFFFF;
    box-shadow: var(--cp-shadow-coral-glow);
}

.cp-btn-coral:hover {
    background: var(--cp-coral-dark);
    color: #FFFFFF;
}

/* Outline Button */
.cp-btn-outline {
    background: transparent;
    border: 2px solid var(--cp-dark-navy);
    color: var(--cp-dark-navy);
    box-shadow: none;
}

.cp-btn-outline:hover {
    background: var(--cp-dark-navy);
    color: #FFFFFF;
}

/* Small Button Variant */
.cp-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    gap: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.cp-btn-sm span.btn-arrow {
    font-size: 14px;
}

/* ==========================================================================
   FLIP7 COMPONENTS
   ========================================================================== */

/* 1. Retro 3D Folded Ribbon Banner */
.flip7-ribbon-wrapper {
    position: relative;
    display: inline-block;
    margin: 14px 20px;
    z-index: 2;
}

.flip7-ribbon {
    position: relative;
    background: var(--cp-cream);
    border: 3px solid var(--cp-dark-navy);
    padding: 8px 28px;
    color: var(--cp-dark-navy);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 4px 14px rgba(16, 47, 78, 0.12);
}

html[lang="ar"] .flip7-ribbon {
    letter-spacing: 1px;
}

.flip7-ribbon::before,
.flip7-ribbon::after {
    content: "";
    position: absolute;
    top: 8px; /* 8px 3D vertical fold offset */
    width: 22px;
    height: 100%;
    background: var(--cp-cream-dark);
    border: 3px solid var(--cp-dark-navy);
    z-index: -1;
}

.flip7-ribbon::before {
    left: -16px;
    transform: skewY(-15deg);
    border-right: none;
}

.flip7-ribbon::after {
    right: -16px;
    transform: skewY(15deg);
    border-left: none;
}

/* 2. Fan Cards Background Component */
.flip7-fan-deck {
    position: relative;
    width: 140px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.fan-card {
    position: absolute;
    width: 50px;
    height: 72px;
    border-radius: 6px;
    border: 2px solid var(--cp-dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(16, 47, 78, 0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center;
}

.fan-card-1 {
    background: var(--cp-teal-primary);
    transform: rotate(-24deg) translateX(-18px);
    z-index: 1;
}

.fan-card-2 {
    background: var(--cp-brand-blue);
    transform: rotate(-12deg) translateX(-9px);
    z-index: 2;
}

.fan-card-3 {
    background: var(--cp-gold-brand);
    color: var(--cp-dark-navy);
    transform: rotate(0deg);
    z-index: 3;
}

.fan-card-4 {
    background: var(--cp-coral);
    transform: rotate(12deg) translateX(9px);
    z-index: 2;
}

.fan-card-5 {
    background: var(--cp-sky);
    transform: rotate(24deg) translateX(18px);
    z-index: 1;
}

.flip7-fan-deck:hover .fan-card-1 { transform: rotate(-32deg) translateX(-24px); }
.flip7-fan-deck:hover .fan-card-2 { transform: rotate(-16deg) translateX(-12px); }
.flip7-fan-deck:hover .fan-card-3 { transform: rotate(0deg) scale(1.08); }
.flip7-fan-deck:hover .fan-card-4 { transform: rotate(16deg) translateX(12px); }
.flip7-fan-deck:hover .fan-card-5 { transform: rotate(32deg) translateX(24px); }

/* 3. Flip7 Skewed Parallelogram Badge */
.flip7-skew-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cp-cream);
    border: 2px solid var(--cp-dark-navy);
    padding: 6px 14px;
    transform: skewX(-6deg);
    box-shadow: 0 3px 10px rgba(16, 47, 78, 0.10);
    border-radius: 4px;
}

.flip7-skew-badge span {
    transform: skewX(6deg);
    font-weight: 800;
    color: var(--cp-dark-navy);
    font-size: 13px;
}

/* 4. Section Title with Emoji & Dashed Divider */
.cp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px dashed rgba(16, 47, 78, 0.16);
}

.cp-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--cp-dark-navy);
}

.cp-emoji-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cp-teal-bg);
    border: 2px solid rgba(43, 168, 162, 0.25);
    font-size: 18px;
}

/* 5. Flip7 Cards with 6px Colored Left Accent Bars */
.cp-card {
    background: var(--cp-surface-card);
    border-radius: 20px;
    border: 1px solid rgba(16, 47, 78, 0.08);
    box-shadow: var(--cp-shadow-card);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cp-shadow-md);
}

/* Accent Borders */
.cp-card-accent-teal {
    border-left: 6px solid var(--cp-teal-primary);
}

.cp-card-accent-gold {
    border-left: 6px solid var(--cp-gold-brand);
}

.cp-card-accent-coral {
    border-left: 6px solid var(--cp-coral);
}

.cp-card-accent-sky {
    border-left: 6px solid var(--cp-sky);
}

.cp-card-accent-navy {
    border-left: 6px solid var(--cp-dark-navy);
}

/* RTL Support for Accent Bars */
html[dir="rtl"] .cp-card-accent-teal {
    border-left: 1px solid rgba(16, 47, 78, 0.08);
    border-right: 6px solid var(--cp-teal-primary);
}

html[dir="rtl"] .cp-card-accent-gold {
    border-left: 1px solid rgba(16, 47, 78, 0.08);
    border-right: 6px solid var(--cp-gold-brand);
}

html[dir="rtl"] .cp-card-accent-coral {
    border-left: 1px solid rgba(16, 47, 78, 0.08);
    border-right: 6px solid var(--cp-coral);
}

html[dir="rtl"] .cp-card-accent-sky {
    border-left: 1px solid rgba(16, 47, 78, 0.08);
    border-right: 6px solid var(--cp-sky);
}

html[dir="rtl"] .cp-card-accent-navy {
    border-left: 1px solid rgba(16, 47, 78, 0.08);
    border-right: 6px solid var(--cp-dark-navy);
}

/* 6. Victory Podium / Rankings */
.cp-podium-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 14px;
    background: #FFFFFF;
    margin-bottom: 12px;
    border: 1px solid rgba(16, 47, 78, 0.06);
    box-shadow: var(--cp-shadow-sm);
    transition: all 0.3s ease;
}

.cp-podium-item:hover {
    transform: translateX(4px);
    box-shadow: var(--cp-shadow-md);
}

html[dir="rtl"] .cp-podium-item:hover {
    transform: translateX(-4px);
}

.cp-podium-1st {
    border-left: 8px solid var(--cp-gold-brand);
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.12) 0%, #FFFFFF 60%);
    box-shadow: var(--cp-shadow-accent-glow);
}

.cp-podium-2nd {
    border-left: 8px solid #BDC3C7;
    background: linear-gradient(90deg, rgba(189, 195, 199, 0.12) 0%, #FFFFFF 60%);
}

.cp-podium-3rd {
    border-left: 8px solid var(--cp-coral);
    background: linear-gradient(90deg, rgba(239, 108, 74, 0.12) 0%, #FFFFFF 60%);
}

html[dir="rtl"] .cp-podium-1st {
    border-left: 1px solid rgba(16, 47, 78, 0.06);
    border-right: 8px solid var(--cp-gold-brand);
    background: linear-gradient(-90deg, rgba(255, 210, 63, 0.12) 0%, #FFFFFF 60%);
}

html[dir="rtl"] .cp-podium-2nd {
    border-left: 1px solid rgba(16, 47, 78, 0.06);
    border-right: 8px solid #BDC3C7;
    background: linear-gradient(-90deg, rgba(189, 195, 199, 0.12) 0%, #FFFFFF 60%);
}

html[dir="rtl"] .cp-podium-3rd {
    border-left: 1px solid rgba(16, 47, 78, 0.06);
    border-right: 8px solid var(--cp-coral);
    background: linear-gradient(-90deg, rgba(239, 108, 74, 0.12) 0%, #FFFFFF 60%);
}

.cp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: #FFFFFF;
}

.cp-avatar-gold { background: linear-gradient(135deg, #FFD23F, #E6B800); color: var(--cp-dark-navy); }
.cp-avatar-silver { background: linear-gradient(135deg, #BDC3C7, #7F8C8D); }
.cp-avatar-bronze { background: linear-gradient(135deg, #FF8A6A, #EF6C4A); }
.cp-avatar-default { background: linear-gradient(135deg, #2BA8A2, #1E8C86); }

/* 7. Crown Bounce Animation */
@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-6deg); }
    75% { transform: translateY(-4px) rotate(6deg); }
}

.animate-crown {
    display: inline-block;
    animation: crownBounce 1.5s infinite ease-in-out;
}

/* 8. BOOM Pulse & State */
@keyframes boomPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 108, 74, 0.6);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(239, 108, 74, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 108, 74, 0);
        transform: scale(1);
    }
}

.animate-boom-pulse {
    animation: boomPulse 2s infinite ease-in-out;
}

/* 9. Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.animate-glow-pulse {
    animation: glowPulse 2s infinite ease-in-out;
}

/* 10. Cream Input Surfaces */
.cp-input {
    background-color: var(--cp-cream) !important;
    border: 2px solid rgba(16, 47, 78, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: var(--cp-dark-navy) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.cp-input:focus {
    background-color: #FFFFFF !important;
    border-color: var(--cp-teal-primary) !important;
    box-shadow: var(--cp-shadow-focus) !important;
    outline: none !important;
}

.cp-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-dark-navy);
    margin-bottom: 6px;
    display: block;
}

/* 11. Tactical Counter Widget */
.cp-counter-widget {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 8px 12px;
    border-radius: 12px;
    border: 2px solid rgba(16, 47, 78, 0.10);
    box-shadow: var(--cp-shadow-sm);
}

.cp-counter-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cp-counter-minus {
    background: rgba(239, 108, 74, 0.15);
    color: var(--cp-coral-dark);
}

.cp-counter-minus:hover {
    background: var(--cp-coral);
    color: #FFFFFF;
}

.cp-counter-plus {
    background: rgba(43, 168, 162, 0.15);
    color: var(--cp-teal-dark);
}

.cp-counter-plus:hover {
    background: var(--cp-teal-primary);
    color: #FFFFFF;
}

.cp-counter-val {
    font-size: 18px;
    font-weight: 800;
    min-width: 40px;
    text-align: center;
    color: var(--cp-dark-navy);
}

/* ==========================================================================
   CP Navigation & Header
   ========================================================================== */

.cp-navbar {
    background: #FFFFFF;
    border-bottom: 2px solid rgba(16, 47, 78, 0.08);
    box-shadow: 0 4px 20px rgba(16, 47, 78, 0.05);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.cp-brand-logo {
    height: 40px;
    width: auto;
}

/* CP Language Switcher (Pill Style from Home Page) */
.cp-lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: var(--cp-light-blue);
    border: 1px solid rgba(23, 82, 164, 0.12);
    border-radius: 30px;
}

.cp-lang-switcher a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 5px 12px;
    border-radius: 20px;
    color: var(--cp-dark-navy);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.cp-lang-switcher a.active {
    color: #FFFFFF;
    background-color: var(--cp-brand-blue);
    box-shadow: 0 2px 8px rgba(23, 82, 164, 0.25);
}

.cp-lang-switcher a:not(.active):hover {
    color: var(--cp-brand-blue);
    background-color: rgba(23, 82, 164, 0.08);
}

/* ==========================================================================
   CP Error Pages Specific
   ========================================================================== */

.cp-error-wrapper {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.cp-error-code {
    font-size: clamp(80px, 14vw, 160px);
    font-weight: 900;
    color: var(--cp-dark-navy);
    line-height: 0.9;
    letter-spacing: -2px;
    text-shadow: 4px 6px 0px var(--cp-cream-dark), 8px 10px 0px rgba(16, 47, 78, 0.12);
    margin-bottom: 12px;
}

.cp-error-card {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: var(--cp-shadow-lg);
    border: 2px solid rgba(16, 47, 78, 0.08);
    position: relative;
}

/* ==========================================================================
   CP Login Page Specific
   ========================================================================== */

.cp-login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    background:
        radial-gradient(circle at 15% 15%, rgba(43, 168, 162, 0.15), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(255, 189, 37, 0.15), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(239, 108, 74, 0.08), transparent 50%),
        var(--cp-surface-base);
}

.cp-login-box {
    width: 100%;
    max-width: 980px;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: var(--cp-shadow-lg);
    border: 2px solid rgba(16, 47, 78, 0.08);
    overflow: hidden;
}

.cp-login-hero {
    background: linear-gradient(145deg, var(--cp-dark-navy) 0%, #1752A4 100%);
    color: #FFFFFF;
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.cp-login-hero::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 210, 63, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.cp-login-form-side {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Badges & Pills */
.cp-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}

.cp-badge-teal { background: var(--cp-teal-bg); color: var(--cp-teal-dark); }
.cp-badge-gold { background: #FFF8E7; color: #9A6B00; }
.cp-badge-coral { background: rgba(239, 108, 74, 0.15); color: var(--cp-coral-dark); }
.cp-badge-sky { background: rgba(93, 173, 226, 0.15); color: #21618C; }
.cp-badge-navy { background: rgba(16, 47, 78, 0.10); color: var(--cp-dark-navy); }

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .cp-login-hero {
        padding: 36px 24px;
        text-align: center;
    }
    .cp-login-form-side {
        padding: 32px 20px;
    }
}

/* ==========================================================================
   PHOTO ACCURATE LOGIN PAGE (CP AUTH V2)
   ========================================================================== */

.cp-split-auth {
    min-height: 100vh;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    overflow-x: hidden;
}

/* Left Column: Deep Navy Hero Side */
.auth-hero-side {
    flex: 0 0 46%;
    max-width: 46%;
    background: #0d3b66;
    background: linear-gradient(180deg, #0e3d6e 0%, #0a2d52 100%);
    padding: 48px 48px 36px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
}

/* Subtle circular background watermark arc */
.auth-hero-arc {
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

html[dir="rtl"] .auth-hero-arc {
    left: auto;
    right: -150px;
}

/* Top bar: Logo sticker & Geometric accent squares */
.auth-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    position: relative;
    z-index: 2;
}

.auth-hero-logo-box {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.auth-hero-logo-box:hover {
    transform: scale(1.02);
}

.auth-hero-logo-box img {
    height: 40px;
    width: auto;
    display: block;
}

/* Top right geometric blocks */
.auth-hero-blocks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.auth-block-row {
    display: flex;
    gap: 6px;
}

.auth-block {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.auth-block-orange {
    background: #f26522;
}

.auth-block-blue {
    background: rgba(255, 255, 255, 0.15);
}

/* Center Content: Fanned Cards, Heading & Bullet Points */
.auth-hero-center {
    position: relative;
    z-index: 2;
    max-width: 440px;
    margin: auto 0;
    text-align: center;
    width: 100%;
}

/* Fanned Cards Deck */
.auth-fanned-cards {
    position: relative;
    width: 180px;
    height: 135px;
    margin: 0 auto 28px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-card {
    position: absolute;
    bottom: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}

.photo-card-1 {
    width: 76px;
    height: 108px;
    background: #092644;
    transform: rotate(-22deg) translateX(-24px);
    z-index: 1;
}

.photo-card-2 {
    width: 76px;
    height: 114px;
    background: #1976d2;
    transform: rotate(-11deg) translateX(-12px);
    z-index: 2;
}

.photo-card-3 {
    width: 78px;
    height: 118px;
    background: #f26522;
    transform: rotate(0deg);
    z-index: 3;
}

.photo-card-4 {
    width: 82px;
    height: 122px;
    background: #FFFFFF;
    border: 2px solid rgba(16, 47, 78, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(2deg);
    z-index: 4;
}

.photo-card-4 span {
    font-size: 40px;
    font-weight: 800;
    color: #f26522;
    line-height: 1;
}

.photo-card-5 {
    width: 76px;
    height: 108px;
    background: #0b2f57;
    transform: rotate(14deg) translateX(18px);
    z-index: 2;
}

.auth-fanned-cards:hover .photo-card-1 { transform: rotate(-28deg) translateX(-30px); }
.auth-fanned-cards:hover .photo-card-2 { transform: rotate(-14deg) translateX(-16px); }
.auth-fanned-cards:hover .photo-card-4 { transform: rotate(0deg) scale(1.04); }
.auth-fanned-cards:hover .photo-card-5 { transform: rotate(20deg) translateX(24px); }

/* Main White Heading */
.auth-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

/* Feature Check List */
.auth-hero-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
    text-align: left;
}

html[dir="rtl"] .auth-hero-features {
    text-align: right;
}

.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14.5px;
    font-weight: 500;
}

.auth-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f26522;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(242, 101, 34, 0.4);
}

/* Bottom translucent pill */
.auth-bottom-pill {
    background: rgba(8, 28, 52, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 7px 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Right Column: Clean White Form Side
   ========================================================================== */

.auth-form-side {
    flex: 1;
    min-height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 56px 32px 56px;
    position: relative;
}

.auth-form-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

/* Language switcher pill */
.photo-lang-switcher {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 3px;
    background: #FFFFFF;
    gap: 2px;
}

.photo-lang-switcher a {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    color: #64748b;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.photo-lang-switcher a.active {
    background: #1752a4;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(23, 82, 164, 0.25);
}

.photo-lang-switcher a:not(.active):hover {
    color: #1752a4;
    background: rgba(23, 82, 164, 0.06);
}

/* Form Inner Container */
.auth-form-inner {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 24px 0;
}

.auth-form-title {
    font-size: 34px;
    font-weight: 800;
    color: #102f4e;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.auth-form-subtitle {
    color: #64748b;
    font-size: 14.5px;
    margin-bottom: 28px;
}

.photo-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #102f4e;
    margin-bottom: 6px;
    display: block;
}

/* Input group with icon */
.photo-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0 14px;
    height: 48px;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

.photo-input-group:focus-within {
    border-color: #1752a4;
    box-shadow: 0 0 0 3px rgba(23, 82, 164, 0.12);
}

.project-form-inner {
    max-width: none;
    margin: 0;
    padding: 24px 0;
}

.project-form-fields .photo-input-group {
    margin-bottom: 0;
}

.project-form-fields .project-textarea-group {
    height: auto;
    min-height: 128px;
    padding: 12px 14px;
}

.project-form-fields .project-textarea {
    min-height: 104px;
    resize: vertical;
}

.project-form-fields .project-file-input-group {
    height: auto;
    min-height: 48px;
    padding: 8px 14px;
}

.project-form-fields input[type="file"].photo-input {
    min-height: 30px;
}

.project-documents-section {
    background: #f8fafc;
}

.project-document-row .remove-project-document {
    margin-top: 4px;
}

.project-details-card {
    padding: 24px;
}

.project-description {
    white-space: pre-line;
    line-height: 1.75;
}

.project-document-item,
.project-note-item {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.photo-input-icon {
    color: #94a3b8;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[dir="rtl"] .photo-input-icon {
    margin-right: 0;
    margin-left: 12px;
}

.photo-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #102f4e;
    font-family: inherit;
}

.photo-input::placeholder {
    color: #94a3b8;
}

.photo-eye-btn {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

html[dir="rtl"] .photo-eye-btn {
    margin-left: 0;
    margin-right: 8px;
}

.photo-eye-btn:hover {
    color: #102f4e;
}

/* Options Row */
.photo-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 13px;
}

.photo-remember-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.photo-remember-label input[type="checkbox"] {
    accent-color: #f26522;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.photo-forgot-link {
    color: #1752a4;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.photo-forgot-link:hover {
    color: #102f4e;
    text-decoration: underline;
}

/* Photo Sign in Button */
.photo-submit-btn {
    width: 100%;
    height: 48px;
    background: #f26522;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(242, 101, 34, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.photo-submit-btn:hover {
    background: #e25816;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(242, 101, 34, 0.45);
}

.photo-submit-btn:active {
    transform: translateY(0);
}

/* Create Account Footer Line */
.photo-create-account {
    text-align: center;
    margin-top: 24px;
    font-size: 13.5px;
    color: #64748b;
}

.photo-create-link {
    color: #1752a4;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.photo-create-link:hover {
    color: #102f4e;
    text-decoration: underline;
}

/* Bottom copyright */
.auth-form-footer {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    margin-top: auto;
}

/* Responsive Adaptations */
@media (max-width: 991.98px) {
    .cp-split-auth {
        flex-direction: column;
    }

    .auth-hero-side {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 36px 24px;
    }

    .auth-hero-arc {
        display: none;
    }

    .auth-form-side {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 36px 24px;
        min-height: auto;
    }

    .auth-form-inner {
        padding: 16px 0;
    }
}

/* Main banner slide management */
.main-banner-list-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: #eff4fb;
}

.main-banner-language-fields {
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
}

.main-banner-language-fields legend {
    float: none;
    width: auto;
    padding: 0 .25rem;
    font-size: .95rem;
    font-weight: 700;
}

.main-banner-preview {
    position: relative;
    display: flex;
    min-height: 320px;
    align-items: center;
    overflow: hidden;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(120deg, #1254a4 0%, #087fd1 55%, #00a1e8 100%);
}

.main-banner-preview[dir="rtl"] {
    text-align: right;
}

.main-banner-preview-copy {
    position: relative;
    z-index: 1;
    flex: 1 1 60%;
    min-width: 0;
}

.main-banner-preview-label {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .8rem;
}

.main-banner-preview h3 {
    margin-bottom: .75rem;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
}

.main-banner-preview h3 strong {
    color: #ffbd25;
}

.main-banner-preview p {
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
}

.main-banner-preview ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.main-banner-preview ul li {
    padding: .25rem .5rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .7rem;
}

.main-banner-preview-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border-radius: 8px;
    color: #102f4e;
    background: #ffbd25;
    font-size: .8rem;
    font-weight: 700;
}

.main-banner-preview > img {
    position: relative;
    z-index: 1;
    flex: 0 1 38%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 14px;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .main-banner-preview {
        min-height: 260px;
        padding: 1rem;
    }

    .main-banner-preview > img {
        display: none;
    }
}