/* ==========================================================================
   MITS STUDENT SEATING PORTAL — PREMIUM EMERALD & GOLD THEME
   File : style.css
   ========================================================================== */

/* ============================================================
   1.  DESIGN TOKENS & SYSTEM VARIABLES
   ============================================================ */
:root {
    /* Font Stacks */
    --sp-font-body:      'Inter', system-ui, -apple-system, sans-serif;
    --sp-font-title:     'Plus Jakarta Sans', 'Poppins', sans-serif;
    --sp-font-accent:    'Poppins', sans-serif;
    --sp-font-mono:      'Roboto Mono', monospace;

    /* Theme Colors (Emerald Green + Gold Palette) */
    --sp-primary:        #047857; /* Emerald Green */
    --sp-secondary:      #10B981; /* Bright Emerald */
    --sp-accent:         #D4A017; /* University Gold */
    --sp-accent-hover:   #B8860B; /* Dark Gold */
    --sp-blue:           #2563EB; /* Neon Blue */
    --sp-sky:            #38BDF8; /* Sky Blue */
    --sp-bg:             #F8FCF8; /* Soft Greenish White Background */
    --sp-card-bg:        rgba(255, 255, 255, 0.88);
    --sp-border-color:   #D1FAE5; /* Emerald border */
    
    /* System Neutrals */
    --sp-white:          #FFFFFF;
    --sp-slate-50:       #F8FAFC;
    --sp-slate-100:      #F1F5F9;
    --sp-slate-200:      #E2E8F0;
    --sp-slate-300:      #CBD5E1;
    --sp-slate-400:      #94A3B8;
    --sp-slate-500:      #64748B;
    --sp-slate-600:      #475569;
    --sp-slate-700:      #334155;
    --sp-slate-800:      #1E293B;
    --sp-slate-900:      #0F172A;

    /* Semantic */
    --sp-success:        #16A34A;
    --sp-success-light:  #ECFDF5;
    --sp-success-border: #A7F3D0;
    
    --sp-error:          #DC2626;
    --sp-error-light:    #FDF2F2;
    --sp-error-border:   #FCA5A5;
    
    --sp-warning:        #F59E0B;
    --sp-warning-light:  #FFFBEB;
    --sp-warning-border: #FDE68A;

    /* Typography Hierarchy */
    --sp-size-main-title: 48px;
    --sp-size-subtitle:   18px;
    --sp-size-hero-desc:  16px;
    --sp-size-badge:      15px;
    --sp-size-card-title: 30px;
    --sp-size-label:      13px;
    --sp-size-input:      18px;
    --sp-size-button:     18px;

    /* Text Color */
    --sp-text-heading:   #1E293B; /* Rich Charcoal */
    --sp-text-body:      #475569;
    --sp-text-muted:     #64748B;

    /* Shadows & Depth Layers */
    --sp-shadow-ambient: 0 10px 30px rgba(4, 120, 87, 0.03);
    --sp-shadow-layered: 0 30px 60px rgba(4, 120, 87, 0.08), 
                         0 10px 20px rgba(4, 120, 87, 0.04), 
                         inset 0 1px 1px rgba(255, 255, 255, 0.9);
    
    --sp-shadow-hover:   0 40px 80px rgba(4, 120, 87, 0.12), 
                         0 15px 30px rgba(4, 120, 87, 0.06), 
                         inset 0 1px 1px rgba(255, 255, 255, 1);

    /* Radii */
    --sp-radius-sm:      8px;
    --sp-radius:         12px;
    --sp-radius-lg:      16px;
    --sp-radius-xl:      24px;

    /* Transitions */
    --sp-transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2.  RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:      16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family:      var(--sp-font-body);
    background-color: var(--sp-bg);
    /* Soft Emerald + Warm Gold Radial Glows & Subtle Grid Texture */
    background-image: 
        radial-gradient(at 10% 20%, rgba(16, 185, 129, 0.06) 0px, transparent 40%),
        radial-gradient(at 90% 10%, rgba(212, 160, 23, 0.05) 0px, transparent 45%),
        radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.04) 0px, transparent 50%),
        linear-gradient(rgba(16, 185, 129, 0.012) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.012) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 50px 50px, 50px 50px;
    color:            var(--sp-text-body);
    min-height:       100vh;
    min-height:       100dvh;
    display:          flex;
    flex-direction:   column;
    overflow-x:       hidden;
    position:         relative;
    -webkit-font-smoothing: antialiased;
}

/* Faint Blurred Abstract Blobs */
body::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(212, 160, 23, 0.03) 70%, transparent 100%);
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    filter: blur(100px);
    pointer-events: none;
}

img { display: block; max-width: 100%; }

button {
    font-family: inherit;
    cursor:      pointer;
}

input,
select {
    font-family: inherit;
    outline:     none;
}


/* ============================================================
   3.  PREMIUM HERO SECTION
   ============================================================ */
.sp-hero-section {
    width:            100%;
    margin:           40px 0 40px; /* Top/Bottom 40px, Left/Right 0 */
    padding:          0 5%; /* 5% padding to keep it off the edge */
    display:          flex;
    flex-direction:   row;
    align-items:      center;
    justify-content:  flex-start;
    text-align:       left;
    gap:              24px;
    z-index:          2;
}

/* 148px x 132px Curved Rectangular Logo Container with Shadow, Emerald Border, Glass effect */
.sp-hero-logo-container {
    width:            148px;
    height:           132px;
    border-radius:    24px; /* Curved rectangular shape */
    background:       rgba(255, 255, 255, 0.9);
    border:           1.5px solid var(--sp-border-color);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          10px;
    margin-bottom:    0px; /* Removed margin since it's a row now */
    flex-shrink:      0;
    box-shadow:       0 12px 36px rgba(4, 120, 87, 0.08), 
                      0 1px 3px rgba(4, 120, 87, 0.04), 
                      0 0 20px rgba(16, 185, 129, 0.15); /* Soft emerald glow */
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:       transform var(--sp-transition), box-shadow var(--sp-transition);
    animation:        spFadeIn 0.5s ease-out, spFloat 6s ease-in-out infinite;
}

.sp-hero-logo-container:hover {
    transform:        scale(1.03) translateY(-2px); /* Logo scales to 103% */
    box-shadow:       0 16px 40px rgba(4, 120, 87, 0.12), 
                      0 0 26px rgba(16, 185, 129, 0.3);
}

.sp-hero-logo {
    width:            100%;
    height:           100%;
    object-fit:       contain;
}

.sp-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Heading: Plus Jakarta Sans, 48px, Weight 800, Charcoal */
.sp-hero-title {
    font-family:      var(--sp-font-title);
    font-size:        var(--sp-size-main-title);
    font-weight:      800;
    color:            var(--sp-text-heading);
    line-height:      1.15;
    letter-spacing:   -1px; /* Tight letter spacing */
    margin-bottom:    10px; /* Heading -> Subtitle = 10px */
    max-width:        1200px; /* Increased max-width */
    white-space:      normal; /* Display normally */
    animation:        spFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Subtitle: Black, 18px, Medium weight, Uppercase, Letter spacing 3px */
.sp-hero-subtitle {
    font-family:      var(--sp-font-accent);
    font-size:        var(--sp-size-subtitle);
    font-weight:      600;
    color:            var(--sp-text-heading);
    text-transform:   uppercase;
    letter-spacing:   3px;
    margin-bottom:    20px; /* Subtitle -> Divider = 20px */
    animation:        spFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Gradient divider: Emerald -> Gold -> Emerald */
.sp-hero-divider-container {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              12px;
    width:            150px;
    margin-bottom:    18px; /* Divider -> Badge = 18px */
    animation:        spExpandDivider 0.6s ease-out 0.3s both;
}

.sp-hero-divider-line {
    flex:             1;
    height:           2px;
    border-radius:    2px;
    background:       linear-gradient(90deg, var(--sp-primary) 0%, var(--sp-accent) 100%);
}

.sp-hero-divider-line:last-child {
    background:       linear-gradient(90deg, var(--sp-accent) 0%, var(--sp-primary) 100%);
}

.sp-hero-divider-symbol {
    font-size:        14px;
    color:            var(--sp-accent);
    line-height:      1;
}

/* Official Portal Badge: Pill shaped, light emerald background, gold-accent icon */
.sp-hero-badge {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          8px 18px;
    border-radius:    30px;
    background:       rgba(16, 185, 129, 0.08);
    border:           1px solid rgba(16, 185, 129, 0.2);
    font-family:      var(--sp-font-accent);
    font-size:        var(--sp-size-badge);
    font-weight:      600;
    color:            var(--sp-primary);
    margin-bottom:    12px; /* Badge -> Description = 12px */
    box-shadow:       0 2px 8px rgba(4, 120, 87, 0.02);
    animation:        spFadeIn 0.5s ease-out 0.4s both;
}

.sp-hero-badge i {
    color:            var(--sp-accent); /* Gold accent icon */
}

/* Tagline */
.sp-hero-tagline {
    font-family:      var(--sp-font-title);
    font-size:        22px;
    font-weight:      700;
    color:            var(--sp-primary);
    margin-bottom:    6px;
    animation:        spFadeUp 0.6s ease-out 0.5s both;
}

/* Description */
.sp-hero-desc {
    font-size:        var(--sp-size-hero-desc);
    color:            var(--sp-text-body);
    line-height:      1.5;
    font-weight:      500;
    max-width:        540px;
    margin-bottom:    20px;
    animation:        spFadeUp 0.6s ease-out 0.5s both;
}

/* Arrow */
.sp-hero-arrow {
    font-size:        1.3rem;
    color:            var(--sp-primary);
    animation:        spBounceArrow 2s infinite, spFadeIn 0.5s ease-out 0.6s both;
    margin-bottom:    40px; /* Description/Arrow -> Search Card = 40px */
}


/* ============================================================
   4.  MAIN CONTENT AREA & WATERMARK
   ============================================================ */
.sp-main {
    flex:          1 0 auto;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    padding:       0 24px 40px;
    gap:           48px; /* Section Gap = 48px */
    z-index:       1;
    width:         100%;
    position:      relative;
}

/* Huge Blurred MITS watermark behind form card (non-interactive) */
.sp-watermark {
    position:         absolute;
    top:              300px;
    left:             50%;
    transform:        translate(-50%, -50%);
    width:            480px;
    height:             480px;
    opacity:          0.04; /* Very subtle 4% opacity to maintain text legibility */
    filter:           blur(6px);
    pointer-events:   none;
    z-index:          0;
    user-select:      none;
}

.sp-watermark img {
    width:            100%;
    height:           100%;
    object-fit:       contain;
}


/* ============================================================
   5.  NOTIFICATION CARD (NO-EXAM NOTICE)
   ============================================================ */
.sp-notice {
    display:       flex;
    align-items:   center;
    gap:           16px;
    width:         100%;
    max-width:     560px;
    padding:       18px 24px;
    border-radius: var(--sp-radius-lg); /* Rounded 18px corners */
    box-shadow:    var(--sp-shadow-ambient);
    z-index:       2;
    animation:     spFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-notice i {
    font-size:     1.6rem; /* Larger icon */
    flex-shrink:   0;
    transition:    transform 0.3s ease;
}

.sp-notice:hover i {
    transform:     rotate(15deg); /* Icon rotation hover effect */
}

.sp-notice-body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.sp-notice-body strong {
    font-family:    var(--sp-font-title);
    font-weight:    700;
    font-size:      1rem;
}

.sp-notice-body span {
    font-size:      0.88rem;
    font-weight:    500;
    line-height:    1.4;
}

/* Soft Warning Gradient with Left Border */
.sp-notice-warning {
    background:     var(--sp-warning-gradient);
    border:         1.5px solid var(--sp-warning-border);
    border-left:    6px solid var(--sp-warning); /* Left accent border */
    color:          #78350F;
}

.sp-notice-warning i { color: var(--sp-warning); }


/* ============================================================
   6.  SEARCH CARD (FLOATING GLASSMORPHISM)
   ============================================================ */
.sp-card {
    width:         100%;
    max-width:     560px;
    background:    var(--sp-card-bg);
    border:        1.5px solid rgba(16, 185, 129, 0.25); /* Soft emerald border */
    border-radius: var(--sp-radius-xl); /* Rounded corners 24px */
    box-shadow:    var(--sp-shadow-layered); /* Layered premium shadows */
    overflow:      hidden;
    backdrop-filter: blur(20px); /* Strong backdrop blur */
    -webkit-backdrop-filter: blur(20px);
    z-index:       2;
    animation:     spSlideUpCard 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition:    transform var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition);
}

/* Hover Elevation Lift */
.sp-card:hover {
    transform:     translateY(-5px); 
    border-color:  rgba(16, 185, 129, 0.4);
    box-shadow:    var(--sp-shadow-hover);
}

/* Card Header Section */
.sp-card-header {
    display:       flex;
    align-items:   center;
    gap:           20px;
    padding:       32px 32px 24px; /* Card Padding = 32px */
    border-bottom: 1.5px solid rgba(209, 250, 229, 0.4);
    background:    linear-gradient(180deg, rgba(248, 252, 248, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Emerald Gradient Icon Container with rounded square & subtle glow */
.sp-card-icon {
    width:            54px;
    height:           54px;
    border-radius:    14px;
    background:       linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-secondary) 100%);
    color:            var(--sp-white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.35rem;
    flex-shrink:      0;
    box-shadow:       0 8px 18px rgba(4, 120, 87, 0.25); /* Subtle glow */
    transition:       transform var(--sp-transition);
}

.sp-card-header:hover .sp-card-icon {
    transform:        scale(1.05) rotate(5deg);
}

/* Card Title: Plus Jakarta Sans, 30px */
.sp-card-title {
    font-family:    var(--sp-font-title);
    font-size:      var(--sp-size-card-title);
    font-weight:    800;
    color:          var(--sp-text-heading);
    margin-bottom:  4px;
    letter-spacing: -0.02em;
}

/* Card Description */
.sp-card-desc {
    font-size:      0.88rem;
    color:          var(--sp-text-muted);
    line-height:    1.45;
    font-weight:    500;
}


/* ============================================================
   7.  FORM FIELDS, LABELS & INPUTS
   ============================================================ */
.sp-form {
    padding: 32px; /* Card Padding = 32px */
    display: flex;
    flex-direction: column;
    gap:     24px; /* Input Gap = 24px */
}

.sp-field-group {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    opacity:        0; /* Used for sequential loading animation */
}

/* Sequential animation classes */
.sp-form .sp-field-group:nth-child(1) { animation: spFadeUp 0.5s ease-out 0.8s both; }
.sp-form .sp-field-group:nth-child(2) { animation: spFadeUp 0.5s ease-out 0.9s both; }
.sp-form .sp-field-group:nth-child(3) { animation: spFadeUp 0.5s ease-out 1.0s both; }

/* Label Styling: Uppercase, letter spacing, grey-blue, 13px */
.sp-label {
    font-family:    var(--sp-font-accent);
    font-size:      var(--sp-size-label);
    font-weight:    700;
    color:          var(--sp-slate-600);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display:        flex;
    align-items:    center;
    gap:            8px;
    margin-bottom:  2px;
}

.sp-label i {
    color:          var(--sp-primary);
    font-size:      0.85rem;
    transition:     transform 0.2s ease;
}

/* Redesigned Inputs & Selects: height 58px, rounded 16px, font 18px */
.sp-input {
    height:           58px;
    padding:          0 20px;
    border:           1.5px solid var(--sp-slate-200);
    border-radius:    var(--sp-radius-lg); /* Rounded 16px corners */
    font-size:        var(--sp-size-input); /* Input Text = 18px */
    color:            var(--sp-slate-800);
    background:       rgba(248, 252, 248, 0.6);
    outline:          none;
    width:            100%;
    font-family:      var(--sp-font-mono);
    font-weight:      500;
    letter-spacing:   0.04em;
    box-shadow:       var(--sp-shadow-sm);
    transition:       border-color var(--sp-transition),
                      background-color var(--sp-transition),
                      box-shadow var(--sp-transition),
                      transform var(--sp-transition);
}

.sp-input::placeholder {
    color:       var(--sp-slate-400);
    font-family: var(--sp-font-body);
    font-weight: 400;
    letter-spacing: 0;
}

/* Focus State: Emerald border, soft green glow, slight elevation */
.sp-input:focus {
    border-color:     var(--sp-primary);
    background-color: var(--sp-white);
    box-shadow:       0 8px 20px rgba(4, 120, 87, 0.02), 
                      0 0 0 4px rgba(16, 185, 129, 0.15); /* Soft green glow */
    transform:        translateY(-1px);
}

.sp-input:focus + .sp-label i {
    transform:        scale(1.1);
}

.sp-input.sp-input-error {
    border-color:     var(--sp-error);
    background-color: rgba(254, 242, 242, 0.5);
    box-shadow:       0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* Select wrapper */
.sp-select-wrapper {
    position: relative;
    width: 100%;
}

.sp-select {
    height:           58px; /* Height 58px matching .sp-input */
    padding:          0 44px 0 20px;
    border:           1.5px solid var(--sp-slate-200);
    border-radius:    var(--sp-radius-lg); /* Rounded 16px */
    font-size:        var(--sp-size-input); /* Font size 18px */
    font-family:      var(--sp-font-body); /* Standard Inter font matching theme */
    font-weight:      500;
    color:            var(--sp-slate-800);
    background-color: rgba(248, 252, 248, 0.6);
    outline:          none;
    width:            100%;
    appearance:       none;
    -webkit-appearance: none;
    -moz-appearance:  none;
    cursor:           pointer;
    box-shadow:       var(--sp-shadow-sm);
    transition:       border-color var(--sp-transition),
                      background-color var(--sp-transition),
                      box-shadow var(--sp-transition),
                      color var(--sp-transition),
                      transform var(--sp-transition);
}

/* Placeholder styling when unselected */
.sp-select.is-placeholder,
.sp-select:has(option[value=""]:checked) {
    color:       var(--sp-slate-400);
    font-weight: 400;
}

.sp-select:hover:not(:disabled) {
    border-color:     var(--sp-slate-300);
    background-color: var(--sp-white);
}

.sp-select:focus {
    border-color:     var(--sp-primary);
    background-color: var(--sp-white);
    box-shadow:       0 8px 20px rgba(4, 120, 87, 0.02), 
                      0 0 0 4px rgba(16, 185, 129, 0.15);
    transform:        translateY(-1px);
}

.sp-select:disabled {
    opacity:          0.7;
    cursor:           not-allowed;
    background-color: var(--sp-slate-100);
    border-color:     var(--sp-slate-200);
    color:            var(--sp-slate-400);
    box-shadow:       none;
    transform:        none !important;
}

/* Custom Styled Options Dropdown */
.sp-select option {
    background-color: #ffffff;
    color:            var(--sp-slate-800);
    font-family:      var(--sp-font-body);
    font-size:        16px;
    font-weight:      500;
    padding:          12px 16px;
}

.sp-select option:disabled {
    color:            var(--sp-slate-400);
    font-style:       italic;
}

.sp-select-arrow {
    position:         absolute;
    right:            20px;
    top:              50%;
    transform:        translateY(-50%);
    color:            var(--sp-slate-400);
    font-size:        0.9rem;
    pointer-events:   none;
    transition:       color var(--sp-transition), transform 0.25s ease;
}

.sp-select:hover:not(:disabled) + .sp-select-arrow {
    color: var(--sp-slate-600);
}

.sp-select:focus + .sp-select-arrow {
    color: var(--sp-primary);
    transform: translateY(-50%) rotate(180deg);
}

.sp-select:disabled + .sp-select-arrow {
    opacity: 0.35;
}

/* Field error text */
.sp-field-error {
    font-size:        0.78rem;
    font-weight:      600;
    color:            var(--sp-error);
    min-height:       18px;
    display:          block;
    padding-left:     4px;
}


/* ============================================================
   8.  PRIMARY SUBMIT BUTTON & LOADING STATE
   ============================================================ */
.sp-submit-btn {
    margin-top:      6px;
    width:           100%;
    height:          56px;
    border:          none;
    border-radius:   14px; /* Rounded 14px */
    background:      linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-secondary) 100%); /* Emerald gradient */
    color:           var(--sp-white);
    font-family:     var(--sp-font-accent);
    font-size:       var(--sp-size-button); /* Button Text = 18px */
    font-weight:     700;
    letter-spacing:  0.02em;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    transition:      transform var(--sp-transition),
                     box-shadow var(--sp-transition),
                     opacity    var(--sp-transition);
    box-shadow:      0 8px 24px rgba(4, 120, 87, 0.25);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    animation:       spFadeIn 0.5s ease-out 1.2s both; /* Button fades last */
}

.sp-submit-btn::before {
    content:         '';
    position:        absolute;
    inset:           0;
    background:      linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity:         0;
    transition:      opacity var(--sp-transition);
}

.sp-submit-btn:hover:not(:disabled)::before { opacity: 1; }

/* Button hover lift & glow */
.sp-submit-btn:hover:not(:disabled) {
    transform:       translateY(-2px);
    box-shadow:      0 12px 30px rgba(4, 120, 87, 0.35); /* Button glows softly */
}

.sp-submit-btn:active:not(:disabled) {
    transform:       translateY(0);
    box-shadow:      0 4px 12px rgba(4, 120, 87, 0.2);
}

.sp-submit-btn:disabled {
    opacity:         0.75;
    cursor:          not-allowed;
    transform:       none;
}

.sp-btn-label,
.sp-btn-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
}


/* ============================================================
   9.  RESULT AREA — SUCCESS CARD (GLASSMORPHISM)
   ============================================================ */
.sp-result-area {
    width:         100%;
    max-width:     560px;
    z-index:       2;
    margin:        auto 0;
    animation:     spSlideUpCard 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-result-card {
    border-radius:   var(--sp-radius-xl);
    overflow:        hidden;
    background:      var(--sp-card-bg);
    border:          1.5px solid rgba(16, 185, 129, 0.25);
    box-shadow:      var(--sp-shadow-layered);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* SUCCESS layout details */
.sp-result-success {
    border:          2px solid var(--sp-success-border);
}

.sp-result-header {
    display:         flex;
    align-items:     center;
    gap:             18px;
    padding:         24px 32px;
    background:      var(--sp-success-gradient);
    border-bottom:   1px solid var(--sp-success-border);
}

.sp-result-check {
    width:            52px;
    height:           52px;
    border-radius:    50%;
    background:       var(--sp-success);
    color:            var(--sp-white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.6rem;
    flex-shrink:      0;
    box-shadow:       0 6px 14px rgba(22, 163, 74, 0.3);
    animation:        spPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.sp-result-headline {
    font-family:     var(--sp-font-title);
    font-size:       1.25rem;
    font-weight:     800;
    color:           var(--sp-success);
    margin-bottom:   4px;
}

.sp-result-enroll {
    font-family:     var(--sp-font-mono);
    font-size:       0.85rem;
    font-weight:     700;
    color:           var(--sp-slate-600);
    background:      rgba(22, 163, 74, 0.08);
    padding:         3px 10px;
    border-radius:   6px;
    display:         inline-block;
}

/* Scheduled Date & Time Banner */
.sp-result-schedule {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         18px 32px;
    background:      linear-gradient(135deg, rgba(4, 120, 87, 0.08) 0%, rgba(212, 160, 23, 0.08) 100%);
    border-bottom:   1px solid rgba(16, 185, 129, 0.2);
    position:        relative;
}

.sp-schedule-icon {
    width:           44px;
    height:          44px;
    border-radius:   12px;
    background:      rgba(4, 120, 87, 0.12);
    color:           var(--sp-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
    flex-shrink:     0;
    box-shadow:      0 2px 8px rgba(4, 120, 87, 0.12);
    border:          1px solid rgba(4, 120, 87, 0.2);
}

.sp-schedule-content {
    display:         flex;
    flex-direction:  column;
    gap:             3px;
    flex:            1;
}

.sp-schedule-label {
    font-family:     var(--sp-font-accent);
    font-size:       0.72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  1px;
    color:           var(--sp-accent-hover);
}

.sp-schedule-text {
    font-family:     var(--sp-font-body);
    font-size:       0.98rem;
    font-weight:     500;
    color:           var(--sp-text-heading);
    line-height:     1.45;
}

.sp-schedule-highlight {
    color:           var(--sp-primary);
    font-weight:     800;
}

.sp-result-body {
    padding: 32px; /* Card Padding = 32px */
    display: flex;
    align-items: center;
    gap:     0;
}

.sp-result-item {
    flex:            1;
    display:         flex;
    align-items:     center;
    gap:             16px;
}

.sp-result-item-icon {
    width:            46px;
    height:           46px;
    border-radius:    12px;
    background:       linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-secondary) 100%);
    color:            var(--sp-white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.15rem;
    flex-shrink:      0;
    box-shadow:       0 6px 12px rgba(4, 120, 87, 0.18);
    transition:       transform 0.3s ease;
}

.sp-result-item:hover .sp-result-item-icon {
    transform:        rotate(10deg); /* Icon rotation hover effect */
}

.sp-icon-accent {
    background:       linear-gradient(135deg, var(--sp-success) 0%, #10B981 100%) !important;
    box-shadow:       0 6px 12px rgba(22, 163, 74, 0.18) !important;
}

.sp-result-item-content {
    display:         flex;
    flex-direction:  column;
}

.sp-result-item-label {
    font-family:     var(--sp-font-accent);
    font-size:       0.72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  1px;
    color:           var(--sp-text-muted);
    margin-bottom:   4px;
}

.sp-result-item-value {
    font-family:     var(--sp-font-title);
    font-size:       1.15rem;
    font-weight:     800;
    color:           var(--sp-text-heading);
    line-height:     1.3;
}

.sp-seat-value {
    font-size:        2.3rem;
    font-weight:      900;
    font-family:      var(--sp-font-mono);
    color:            var(--sp-primary);
    line-height:      1;
}

.sp-result-divider {
    width:            1px;
    background:       var(--sp-slate-200);
    margin:           0 24px;
    align-self:       stretch;
}

.sp-result-footer {
    display:          flex;
    align-items:      center;
    gap:              12px;
    padding:          18px 32px; /* Card Padding = 32px */
    background:       rgba(248, 252, 248, 0.7);
    border-top:       1px solid rgba(226, 232, 240, 0.5);
    font-size:        0.82rem;
    color:            var(--sp-text-muted);
    line-height:      1.4;
    font-weight:      500;
}

.sp-result-footer i {
    color:            var(--sp-primary);
    font-size:        1.1rem;
    flex-shrink:      0;
}

/* Secondary Search Action Button */
.sp-search-again-btn {
    width:            100%;
    height:           56px;
    border:           none;
    border-radius:    0 0 var(--sp-radius-xl) var(--sp-radius-xl);
    background:       rgba(241, 245, 249, 0.7);
    color:            var(--sp-slate-700);
    font-family:      var(--sp-font-accent);
    font-size:        0.95rem;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    border-top:       1px solid rgba(226, 232, 240, 0.5);
    transition:       background-color var(--sp-transition), color var(--sp-transition);
}

.sp-search-again-btn:hover {
    background-color: rgba(226, 232, 240, 0.9);
    color:            var(--sp-navy);
}


/* ============================================================
   10. RESULT AREA — ERROR CARD (GLASSMORPHISM)
   ============================================================ */
.sp-result-error {
    border:           2px solid var(--sp-error-border);
    padding:          48px 32px; /* Card Padding = 32px */
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
}

.sp-result-error-icon {
    width:            68px;
    height:           68px;
    border-radius:    50%;
    background:       var(--sp-error-light);
    color:            var(--sp-error);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        2.2rem;
    margin-bottom:    24px;
    box-shadow:       0 8px 20px rgba(220, 38, 38, 0.15);
    animation:        spPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.sp-result-error-title {
    font-family:      var(--sp-font-title);
    font-size:        1.45rem;
    font-weight:      800;
    color:            var(--sp-error);
    margin-bottom:    10px;
}

.sp-result-error-msg {
    font-size:        0.92rem;
    color:            var(--sp-text-muted);
    line-height:      1.5;
    margin-bottom:    32px;
    max-width:        360px;
    font-weight:      500;
}

.sp-try-again-btn {
    width:            100%;
    height:           50px;
    border:           none;
    border-radius:    var(--sp-radius);
    background:       var(--sp-error);
    color:            var(--sp-white);
    font-family:      var(--sp-font-accent);
    font-size:        0.95rem;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    transition:       transform var(--sp-transition), 
                      box-shadow var(--sp-transition), 
                      background-color var(--sp-transition);
    box-shadow:       0 6px 16px rgba(220, 38, 38, 0.25);
}

.sp-try-again-btn:hover {
    background-color: #B91C1C;
    transform:        translateY(-2px);
    box-shadow:       0 10px 24px rgba(220, 38, 38, 0.35);
}

.sp-try-again-btn:active {
    transform:        translateY(0);
    box-shadow:       0 4px 12px rgba(220, 38, 38, 0.2);
}


/* ============================================================
   11. TRUST SECTION
   ============================================================ */
.sp-trust-section {
    display:          grid;
    grid-template-columns: repeat(4, 1fr);
    gap:              24px;
    width:            100%;
    max-width:        900px;
    margin-top:       16px;
    z-index:          2;
    animation:        spFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
}

.sp-trust-card {
    background:       rgba(255, 255, 255, 0.7);
    border:           1.5px solid rgba(16, 185, 129, 0.15);
    border-radius:    var(--sp-radius-lg);
    padding:          20px;
    display:          flex;
    align-items:      center;
    gap:              14px;
    box-shadow:       var(--sp-shadow-ambient);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:       transform var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-trust-card:hover {
    transform:        translateY(-3px);
    border-color:     rgba(16, 185, 129, 0.35);
    box-shadow:       0 12px 28px rgba(4, 120, 87, 0.06);
}

.sp-trust-icon {
    width:            40px;
    height:           40px;
    border-radius:    10px;
    background:       rgba(16, 185, 129, 0.08);
    color:            var(--sp-primary);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.1rem;
    flex-shrink:      0;
    transition:       transform 0.3s ease;
}

.sp-trust-card:hover .sp-trust-icon {
    transform:        scale(1.1);
    color:            var(--sp-accent); /* icon highlights gold on hover */
}

.sp-trust-content {
    display:          flex;
    flex-direction:   column;
    gap:              2px;
}

.sp-trust-content strong {
    font-family:      var(--sp-font-title);
    font-size:        0.85rem;
    font-weight:      700;
    color:            var(--sp-text-heading);
}

.sp-trust-content span {
    font-size:        0.75rem;
    color:            var(--sp-text-muted);
    font-weight:      500;
}

/* Background Glowing Blobs */
.sp-footer-blob {
    position:         absolute;
    border-radius:    50%;
    pointer-events:   none;
    z-index:          0;
    filter:           blur(80px);
    opacity:          0.3;
}

.sp-footer-blob-1 {
    width:            300px;
    height:           300px;
    background:       rgba(37, 99, 235, 0.2);
    top:              -100px;
    left:             10%;
    animation:        spFloat 8s ease-in-out infinite;
}

.sp-footer-blob-2 {
    width:            350px;
    height:           350px;
    background:       rgba(56, 189, 248, 0.15);
    bottom:           -50px;
    right:            10%;
    animation:        spFloat 10s ease-in-out infinite alternate;
}

.sp-showcase-section {
    max-width:        1080px; /* Increased width */
    margin:           0 auto;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    z-index:          1;
    position:         relative;
    padding-bottom:   60px;
}

/* Redesigned Section Title Wrapper with dashed lines & dots */
.sp-section-title-wrap {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              16px;
    width:            100%;
    margin:           16px 0 32px; /* Reduced margin-top */
    animation:        spFadeUp 0.5s ease-out both;
}

.sp-mentor-title-wrap {
    margin-top:       64px;
}

.sp-title-dot {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    flex-shrink:      0;
}

.sp-dot-cyan {
    background-color: #00d2ff;
    box-shadow:       0 0 10px #00d2ff;
}

.sp-dot-yellow {
    background-color: #ffeb3b;
    box-shadow:       0 0 10px #ffeb3b;
}

.sp-title-line {
    height:           1px;
    flex-grow:        1;
    max-width:        150px;
    border-bottom:    2px dashed rgba(255, 255, 255, 0.15);
}

.sp-showcase-section-title {
    font-family:      var(--sp-font-title);
    font-size:        28px;
    font-weight:      800;
    color:            #ffffff;
    text-transform:   none;
    letter-spacing:   -0.5px;
    white-space:      nowrap;
}

.sp-title-cyan span {
    color:            #00d2ff;
    text-shadow:      0 0 12px rgba(0, 210, 255, 0.4);
}

.sp-title-yellow span {
    color:            #ffeb3b;
    text-shadow:      0 0 12px rgba(255, 235, 59, 0.4);
}

/* Developers Card Grid (2 separate cards) */
.sp-devs-cards-grid {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              32px;
    width:            100%;
    margin-bottom:    40px;
}

/* Floating Glass Cards */
.sp-showcase-card {
    position:         relative;
    background:       rgba(255, 255, 255, 0.02); /* Glassmorphism background */
    border:           1.5px solid rgba(255, 255, 255, 0.05);
    border-radius:    24px;
    padding:          40px 32px;
    overflow:         hidden;
    backdrop-filter:  blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:       0 20px 50px rgba(0, 0, 0, 0.3),
                      inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transition:       transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                      border-color var(--sp-transition), 
                      box-shadow 0.4s ease;
}

.sp-developer-card {
    border-color:     rgba(0, 210, 255, 0.08); /* Cyan accent border */
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
}

.sp-developer-card:hover {
    transform:        translateY(-6px) scale(1.01);
    border-color:     rgba(0, 210, 255, 0.35);
    box-shadow:       0 30px 60px rgba(0, 210, 255, 0.1), 
                      0 0 30px rgba(0, 210, 255, 0.06);
}

/* Spotlight mouse glow */
.sp-showcase-card::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background:       radial-gradient(350px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(59, 130, 246, 0.08), transparent 85%);
    z-index:          0;
    pointer-events:   none;
}

/* Avatar formatting with animated blue glowing ring */
.sp-avatar-wrapper {
    position:         relative;
    width:            112px;
    height:           112px;
    margin-bottom:    20px;
    border-radius:    50%;
    padding:          3px;
    background:       rgba(255, 255, 255, 0.05);
    border:           1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow:       0 0 15px rgba(0, 0, 0, 0.2);
    transition:       transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--sp-transition), box-shadow var(--sp-transition);
    z-index:          2;
}

.sp-avatar-glow {
    position:         absolute;
    inset:            -2px;
    border-radius:    50%;
    opacity:          0.4;
    z-index:          -1;
    animation:        spPulseGlow 3s ease-in-out infinite;
}

.sp-glow-cyan {
    background:       linear-gradient(135deg, #00d2ff 0%, #0055ff 100%);
}

.sp-glow-yellow {
    background:       linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
}

.sp-avatar {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    border-radius:    50%;
    border:           2px solid #030712;
}

/* Hover effects for avatars */
.sp-avatar-wrapper:hover {
    transform:        scale(1.05);
    box-shadow:       0 0 25px rgba(0, 210, 255, 0.6);
    border-color:     rgba(0, 210, 255, 0.6);
}

.sp-mentor-avatar:hover {
    box-shadow:       0 0 25px rgba(255, 235, 59, 0.6);
    border-color:     rgba(255, 235, 59, 0.6);
}

.sp-profile-name {
    font-family:      var(--sp-font-title);
    font-size:        1.3rem;
    font-weight:      700;
    color:            #ffffff;
    margin-bottom:    6px;
    z-index:          2;
}

.sp-profile-role {
    font-family:      var(--sp-font-accent);
    font-size:        0.85rem;
    font-weight:      600;
    color:            var(--sp-slate-400);
    margin-bottom:    8px;
    z-index:          2;
}

.sp-role-yellow {
    color:            #ffeb3b !important;
    text-transform:   uppercase;
    letter-spacing:   1px;
    font-size:        0.8rem;
}

.sp-profile-desc {
    font-size:        0.8rem;
    color:            var(--sp-slate-400);
    line-height:      1.4;
    margin-bottom:    16px;
    z-index:          2;
}

/* Developer Card Divider & Link Pills */
.sp-card-divider {
    width:            100%;
    height:           1.5px;
    background:       linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    margin:           20px 0;
    z-index:          2;
}

.sp-profile-pills {
    display:          flex;
    justify-content:  center;
    gap:              10px;
    flex-wrap:        wrap;
    z-index:          2;
    width:            100%;
}

.sp-profile-pill {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          8px 16px;
    border-radius:    30px;
    background:       rgba(0, 0, 0, 0.35);
    border:           1.5px solid rgba(0, 210, 255, 0.15);
    color:            rgba(255, 255, 255, 0.85);
    font-family:      var(--sp-font-accent);
    font-size:        0.8rem;
    font-weight:      600;
    text-decoration:  none;
    transition:       all var(--sp-transition);
}

.sp-profile-pill i {
    font-size:        0.85rem;
    transition:       transform var(--sp-transition);
}

.sp-profile-pill:hover {
    background:       rgba(0, 210, 255, 0.12);
    border-color:     #00d2ff;
    color:            #ffffff;
    box-shadow:       0 0 15px rgba(0, 210, 255, 0.25);
    transform:        translateY(-3px);
}

.sp-profile-pill:hover i {
    transform:        scale(1.15);
}

/* Mentor Card Layout */
.sp-mentor-card-container {
    display:          flex;
    justify-content:  center;
    width:            100%;
}

.sp-mentor-horizontal-card {
    width:            100%;
    max-width:        680px; /* Increased width */
    border-color:     rgba(255, 235, 59, 0.08); /* Yellow accent border */
}

.sp-mentor-horizontal-card:hover {
    transform:        translateY(-6px) scale(1.01);
    border-color:     rgba(255, 235, 59, 0.35);
    box-shadow:       0 30px 60px rgba(255, 235, 59, 0.1), 
                      0 0 30px rgba(255, 235, 59, 0.06);
}

.sp-mentor-horizontal-body {
    display:          flex;
    align-items:      center;
    gap:              32px;
    position:         relative;
    z-index:          2;
}

.sp-mentor-info {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    text-align:       left;
}


/* ============================================================
   13. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes spFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes spExpandDivider {
    from {
        opacity:   0;
        width:     0px;
    }
    to {
        opacity:   1;
        width:     150px;
    }
}

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

@keyframes spPop {
    0% {
        opacity:   0;
        transform: scale(0.6);
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        opacity:   1;
        transform: scale(1);
    }
}

/* Floating Logo Loop */
@keyframes spFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Small Arrow bounce */
@keyframes spBounceArrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(-3px);
    }
}


/* ============================================================
   FOOTER SECTION
   ============================================================ */
.footer {
    width: 100%;
    margin-top: auto !important;
    background: transparent;
    padding: 30px 20px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.footer-copy {
    font-size: 13px;
    color: var(--sp-slate-500);
    margin: 0;
}

.footer-link {
    font-size: 13px;
    color: #4A90E2;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #357ABD;
    text-decoration: underline;
}

.footer-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.powered-text {
    font-size: 11px;
    color: var(--sp-slate-500);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-powered-by img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* ============================================================
   14. RESPONSIVE MEDIA QUERIES
   ============================================================ */
@media (max-width: 900px) {
    .sp-trust-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .sp-devs-cards-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .sp-hero-section {
        margin: 56px auto 0px;
    }
    
    .sp-hero-logo-container {
        width:            120px;
        height:           106px;
        border-radius:    18px;
        margin-bottom:    20px;
        padding:          8px;
    }

    .sp-hero-title {
        font-size: 38px; /* Scaled down */
        letter-spacing: -0.5px;
        white-space:      normal; /* Allow wrapping on smaller screens */
    }

    .sp-hero-subtitle {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .sp-hero-arrow {
        margin-bottom: 30px;
    }

    .sp-main {
        padding: 0 16px 60px;
        gap: 36px;
    }

    .sp-card-header {
        padding: 24px 24px 20px;
    }

    .sp-card-title {
        font-size: 1.45rem;
    }

    .sp-form {
        padding: 24px 24px 28px;
        gap: 20px;
    }

    .sp-input, .sp-select {
        height: 54px;
        font-size: 1rem;
    }

    .sp-submit-btn {
        height: 52px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .sp-hero-section {
        margin: 44px auto 0px;
    }
    
    .sp-hero-logo-container {
        width:            100px;
        height:           88px;
        border-radius:    14px;
        margin-bottom:    16px;
        padding:          6px;
    }

    .sp-hero-title {
        font-size: 28px;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
    }

    .sp-hero-subtitle {
        font-size: 14px;
        letter-spacing: 1.5px;
        margin-bottom: 16px;
    }

    .sp-hero-tagline {
        font-size: 18px;
    }

    .sp-hero-desc {
        font-size: 0.9rem;
    }

    .sp-hero-arrow {
        margin-bottom: 24px;
    }

    .sp-trust-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sp-trust-card {
        padding: 16px;
    }

    .sp-card-header {
        padding: 20px 20px 16px;
        gap: 12px;
    }

    .sp-card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        border-radius: 10px;
    }

    .sp-card-title {
        font-size: 1.25rem;
    }

    .sp-form {
        padding: 20px;
        gap: 16px;
    }

    .sp-input, .sp-select {
        height: 50px;
        font-size: 0.95rem;
        padding: 0 16px;
        border-radius: 12px;
    }

    .sp-submit-btn {
        height: 48px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .sp-result-header {
        padding: 20px;
        gap: 14px;
    }

    .sp-result-check {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }

    .sp-result-headline {
        font-size: 1.1rem;
    }

    .sp-result-enroll {
        font-size: 0.78rem;
    }

    .sp-result-schedule {
        padding: 14px 20px;
        gap: 12px;
    }

    .sp-schedule-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .sp-schedule-text {
        font-size: 0.88rem;
    }

    .sp-result-body {
        padding: 24px 20px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .sp-result-item {
        width: 100%;
        gap: 12px;
    }

    .sp-result-item-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .sp-result-item-value {
        font-size: 0.95rem;
    }

    .sp-seat-value {
        font-size: 1.7rem;
    }

    .sp-result-divider {
        width: 100%;
        height: 1.5px;
        margin: 0;
    }

    .sp-result-footer {
        padding: 14px 20px;
        font-size: 0.78rem;
    }

    .sp-search-again-btn {
        height: 50px;
        font-size: 0.9rem;
    }

    .sp-showcase-footer-wrap {
        padding: 48px 16px 0px;
    }

    .sp-devs-cards-grid {
        gap: 24px;
    }

    .sp-showcase-card {
        padding: 24px 16px;
    }

    .sp-mentor-horizontal-body {
        flex-direction:   column;
        align-items:      center;
        text-align:       center;
        gap:              16px;
    }

    .sp-mentor-info {
        align-items:      center;
        text-align:       center;
    }

    .sp-bottom-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .sp-bottom-footer-left {
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   NEW RESPONSIVE DESIGN (MOBILE FOCUS)
   ============================================================ */
@media (max-width: 768px) {
    .sp-hero-section {
        margin: 16px auto 24px !important;
        flex-direction: column !important; /* Stack logo and text on mobile */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
    }

    .sp-hero-logo-container {
        width: 64px !important;
        height: 64px !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important;
        padding: 4px !important;
        flex-shrink: 0 !important;
    }

    .sp-hero-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .sp-hero-title {
        font-size: 16px !important;
        white-space: normal !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .sp-hero-subtitle {
        font-size: 11px !important;
        margin-bottom: 0 !important;
        letter-spacing: 1px !important;
    }

    .sp-main {
        padding: 0 12px 16px !important;
        gap: 16px !important;
    }

    .sp-card {
        border-radius: 16px !important;
    }

    .sp-card-header {
        padding: 16px 16px 12px !important;
        gap: 12px !important;
    }

    .sp-card-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 1.1rem !important;
    }

    .sp-card-title {
        font-size: 18px !important;
    }

    .sp-card-desc {
        font-size: 12px !important;
    }

    .sp-form {
        padding: 16px !important;
        gap: 12px !important;
    }

    .sp-label {
        font-size: 11px !important;
        margin-bottom: 0px !important;
    }

    .sp-input, .sp-select {
        height: 44px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
    }

    .sp-select {
        padding: 0 32px 0 12px !important;
    }

    .sp-submit-btn {
        margin-top: 4px !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .sp-result-header {
        padding: 16px !important;
        gap: 12px !important;
    }
    .sp-result-check {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }
    .sp-result-headline {
        font-size: 1rem !important;
    }
    .sp-result-body {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .sp-result-item {
        width: 100% !important;
        gap: 10px !important;
    }
    .sp-result-divider {
        width: 100% !important;
        height: 1px !important;
        margin: 0 !important;
    }
    .sp-result-item-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
}

/* ============================================================
   STRICT HEIGHT COMPRESSION (PREVENT SCROLLING ON ALL DEVICES)
   ============================================================ */
@media (max-height: 900px) {
    .sp-hero-section {
        margin-top: 3vh !important;
        margin-bottom: 3vh !important;
    }
    .sp-hero-logo-container {
        height: 90px !important;
        width: 100px !important;
        margin-bottom: 12px !important;
    }
    .sp-main {
        gap: 3vh !important;
        padding-bottom: 20px !important;
    }
    .sp-card-header {
        padding: 20px 24px 16px !important;
    }
    .sp-form {
        padding: 20px 24px !important;
        gap: 16px !important;
    }
    .sp-input, .sp-select, .sp-submit-btn {
        height: 50px !important;
    }
    .footer {
        padding-top: 16px !important;
    }
}

@media (max-height: 750px) {
    .sp-hero-section {
        margin-top: 2vh !important;
        margin-bottom: 3vh !important;
        gap: 16px !important;
    }
    .sp-hero-logo-container {
        height: 60px !important;
        width: 60px !important;
        margin-bottom: 0 !important;
    }
    .sp-hero-title {
        font-size: 20px !important;
        margin-bottom: 2px !important;
    }
    .sp-hero-subtitle {
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }
    .sp-main {
        gap: 2vh !important;
    }
    .sp-card-header {
        padding: 16px !important;
    }
    .sp-form {
        padding: 16px !important;
        gap: 12px !important;
    }
    .sp-input, .sp-select, .sp-submit-btn {
        height: 44px !important;
    }
    .footer-powered-by img {
        height: 32px !important;
    }
}

@media (max-height: 600px) {
    .sp-hero-section {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }
    .sp-hero-logo-container {
        height: 50px !important;
        width: 50px !important;
        padding: 4px !important;
    }
    .sp-hero-title {
        font-size: 16px !important;
    }
    .sp-card-header {
        padding: 12px !important;
    }
    .sp-card-title {
        font-size: 18px !important;
    }
    .sp-form {
        padding: 12px !important;
        gap: 8px !important;
    }
    .sp-input, .sp-select, .sp-submit-btn {
        height: 38px !important;
        font-size: 14px !important;
    }
    .footer {
        padding: 10px 10px 5px !important;
    }
    .footer-content {
        gap: 4px !important;
    }
    .footer-powered-by img {
        height: 24px !important;
    }
    .sp-result-schedule {
        padding: 8px 14px !important;
    }
    .sp-schedule-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }
    .sp-schedule-text {
        font-size: 0.78rem !important;
    }
    .sp-result-body {
        padding: 12px !important;
        gap: 8px !important;
    }
}

.footer-clubs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 14px;
    color: #555;
}

.footer-clubs .footer-link {
    display: inline;
    text-decoration: none;
    white-space: nowrap;
}

.footer-clubs .footer-link:hover {
    text-decoration: underline;
    color: #333;
}