/* ========== ORIGINAL STYLES ========== */
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Inter', 'League Spartan', sans-serif;
      background: #FFFFFF;
      color: #1A1A1A;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    :root {
      --maroon: #8B1E2C;
      --maroon-dark: #6B1723;
      --maroon-light: #A52A3A;
      --black: #1A1A1A;
      --white: #FFFFFF;
      --gray-light: #F5F5F5;
      --gray: #E8E8E8;
      --text-muted: #666666;
    }
    ::-webkit-scrollbar { width:8px; }
    ::-webkit-scrollbar-track { background:var(--gray-light); }
    ::-webkit-scrollbar-thumb { background:var(--maroon); border-radius:4px; }

    .navbar {
      position:fixed; top:0; width:100%;
      background:rgba(255,255,255,0.98);
      backdrop-filter:blur(10px);
      box-shadow:0 2px 20px rgba(0,0,0,0.05);
      z-index:1000;
      padding:0.8rem 5%;
      transition:all 0.3s ease;
    }
    .nav-container { max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
    .logo { display:flex; align-items:center; gap:0.75rem; text-decoration:none; }
    .logo-img { height:50px; width:auto; display:block; }
    .logo-text { font-weight:800; font-size:1.2rem; letter-spacing:1px; color:var(--black); }
    .logo-text span { color:var(--maroon); }
    .nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
    .nav-links a { text-decoration:none; font-weight:600; color:var(--black); transition:0.3s; font-size:0.95rem; letter-spacing:0.5px; }
    .nav-links a:hover, .nav-links a.active { color:var(--maroon); }

    /* Portal Login Button */
    .btn-login {
      background: var(--maroon);
      color: white !important;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-weight: 700;
      transition: 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 2px solid var(--maroon);
    }
    .btn-login:hover {
      background: var(--maroon-dark);
      border-color: var(--maroon-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(139,30,44,0.4);
      color: white !important;
    }

    /* Join Button in Nav */
    .btn-join-nav {
      background: transparent;
      color: var(--maroon) !important;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-weight: 700;
      transition: 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 2px solid var(--maroon);
    }
    .btn-join-nav:hover {
      background: var(--maroon);
      color: white !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(139,30,44,0.3);
    }

    .menu-toggle { display:none; font-size:1.8rem; cursor:pointer; color:var(--maroon); }

    .hero {
      min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center;
      text-align:center; padding:8rem 2rem 4rem; overflow:hidden;
    }
    .slideshow-container { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
    .slide {
      position:absolute; top:0; left:0; width:100%; height:100%;
      background-size:cover; background-position:center; background-repeat:no-repeat;
      opacity:0; transition:opacity 1.5s ease-in-out;
    }
    .slide.active { opacity:1; }
    .hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55); z-index:1; }
    .hero-content { position:relative; z-index:2; max-width:800px; color:white; }
    .hero-logo-img { max-width:180px; margin-bottom:1.5rem; filter:brightness(0) invert(1); }
    .hero h1 { font-size:3.5rem; font-weight:800; font-family:'League Spartan',sans-serif; margin-bottom:1rem; color:white; }
    .hero h1 span { color:#FFB5B5; }
    .hero p { font-size:1.2rem; margin-bottom:2rem; color:rgba(255,255,255,0.9); }
    .btn-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
    .btn {
      padding:0.9rem 2rem; border-radius:50px; font-weight:700; text-decoration:none;
      transition:0.3s; display:inline-flex; align-items:center; gap:8px;
    }
    .btn-primary { background:var(--maroon); color:white; box-shadow:0 4px 14px rgba(139,30,44,0.3); }
    .btn-primary:hover { background:var(--maroon-dark); transform:translateY(-2px); }
    .btn-outline { border:2px solid white; color:white; background:transparent; }
    .btn-outline:hover { background:white; color:var(--maroon); transform:translateY(-2px); }

    .section { padding:5rem 5%; max-width:1400px; margin:0 auto; }
    .section-title { text-align:center; font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:var(--black); }
    .section-subtitle { text-align:center; color:var(--text-muted); margin-bottom:3rem; font-size:1.1rem; }
    .maroon-divider { width:70px; height:3px; background:var(--maroon); margin:0.5rem auto 2rem; border-radius:4px; }

    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
    .about-image { width:100%; border-radius:24px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); }
    .about-image img { width:100%; height:auto; display:block; transition:transform 0.3s; }
    .about-image img:hover { transform:scale(1.02); }
    .about-text p { margin-bottom:1rem; line-height:1.6; color:var(--text-muted); }
    .about-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:1.5rem; }
    .stat-card { background:var(--gray-light); padding:1.5rem; border-radius:20px; text-align:center; }
    .stat-number { font-size:2rem; font-weight:800; color:var(--maroon); }

    .events-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
    .event-card {
      background:white; border-radius:24px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.05);
      transition:0.3s; border:1px solid var(--gray);
    }
    .event-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(139,30,44,0.1); border-color:var(--maroon-light); }
    .event-icon { background:var(--maroon); padding:1.5rem; text-align:center; font-size:2.5rem; color:white; }
    .event-content { padding:1.5rem; }
    .event-content h3 { margin-bottom:0.5rem; color:var(--black); }
    .event-date { color:var(--maroon); font-weight:600; margin-bottom:0.5rem; }

    /* ===== RIDE SCHEDULE SECTION ===== */
    .schedule-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .schedule-card {
      background: white;
      border-radius: 20px;
      padding: 1.5rem;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      border: 1px solid var(--gray);
      transition: 0.3s;
      text-align: center;
    }
    .schedule-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(139,30,44,0.1);
      border-color: var(--maroon-light);
    }
    .schedule-card .day {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--maroon);
      margin-bottom: 0.5rem;
      letter-spacing: 0.5px;
    }
    .schedule-card .time {
      font-size: 1.1rem;
      color: var(--black);
      font-weight: 600;
    }
    .schedule-card .route {
      color: var(--text-muted);
      font-size: 0.9rem;
      margin-top: 0.5rem;
    }
    .schedule-card .badge {
      display: inline-block;
      background: var(--maroon);
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.2rem 0.8rem;
      border-radius: 20px;
      margin-top: 0.5rem;
      text-transform: uppercase;
    }
    .schedule-card.sunday .badge { background: #888; }
    .schedule-card.saturday .badge { background: var(--maroon-light); }

    .gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
    .gallery-item {
      background:var(--gray-light); border-radius:20px; overflow:hidden; aspect-ratio:1;
      cursor:pointer; transition:0.3s;
    }
    .gallery-item img { width:100%; height:100%; object-fit:cover; transition:0.3s; }
    .gallery-item:hover { transform:scale(1.02); box-shadow:0 10px 25px rgba(139,30,44,0.15); }

    .join-container {
      display:grid; grid-template-columns:1fr 1fr; gap:3rem;
      background:var(--gray-light); border-radius:32px; padding:2.5rem;
    }
    .join-info h3 { font-size:1.8rem; margin-bottom:1rem; }
    .join-benefits { list-style:none; margin-top:1.5rem; }
    .join-benefits li { margin-bottom:1rem; display:flex; align-items:center; gap:10px; }
    .join-benefits i { color:var(--maroon); font-size:1.2rem; }
    .join-form { display:flex; flex-direction:column; gap:1rem; }
    .join-form input, .join-form select, .join-form textarea {
      padding:0.9rem 1.2rem; border:1px solid #ddd; border-radius:12px;
      font-family:inherit; outline:none; transition:0.2s;
    }
    .join-form input:focus, .join-form select:focus, .join-form textarea:focus {
      border-color:var(--maroon); box-shadow:0 0 0 3px rgba(139,30,44,0.1);
    }

    /* ========== RICH FOOTER ========== */
    .footer { background:#0d0d0d; color:#bbb; padding:4rem 5% 0; margin-top:4rem; }
    .footer-content {
      max-width:1400px; margin:0 auto; display:grid;
      grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem;
      padding-bottom:3rem; border-bottom:1px solid #222;
    }
    .footer-col h4 { color:#fff; font-size:1.1rem; margin-bottom:1.2rem; font-weight:700; letter-spacing:0.5px; position:relative; }
    .footer-col h4::after { content:''; display:block; width:30px; height:2px; background:var(--maroon); margin-top:8px; }
    .footer-col p, .footer-col a { color:#999; text-decoration:none; line-height:1.9; font-size:0.95rem; transition:0.3s; }
    .footer-col a:hover { color:var(--maroon-light); }
    .footer-col .contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
    .footer-col .contact-item i { color:var(--maroon); font-size:1.1rem; margin-top:4px; min-width:20px; }
    .footer-col .contact-item span { color:#999; }
    .footer-col .footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
    .footer-col .footer-logo img { height:40px; width:auto; filter:brightness(0) invert(1); }
    .footer-col .footer-logo span { font-size:1.3rem; font-weight:800; color:#fff; letter-spacing:1px; }
    .footer-col .footer-logo span span { color:var(--maroon); }
    .footer-col .footer-desc { color:#888; font-size:0.95rem; line-height:1.7; margin-bottom:1.2rem; }
    .footer-social { display:flex; gap:12px; margin-top:0.5rem; }
    .footer-social a {
      background:rgba(255,255,255,0.08); width:40px; height:40px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:#aaa; font-size:1.1rem; transition:0.3s;
    }
    .footer-social a:hover { background:var(--maroon); color:#fff; transform:translateY(-3px); }
    .footer-hours { list-style:none; padding:0; }
    .footer-hours li {
      display:flex; justify-content:space-between; padding:5px 0;
      color:#999; font-size:0.9rem; border-bottom:1px solid #1a1a1a;
    }
    .footer-hours li:last-child { border-bottom:none; }
    .footer-hours li span:last-child { color:#ddd; }

    .footer-bottom {
      max-width:1400px; margin:0 auto; display:flex;
      justify-content:space-between; align-items:center;
      padding:1.5rem 0; flex-wrap:wrap; gap:1rem;
    }
    .footer-bottom p { color:#666; font-size:0.85rem; }
    .footer-bottom .credit { text-align:right; color:#666; font-size:0.85rem; }
    .footer-bottom .credit a { color:var(--maroon-light); text-decoration:none; font-weight:600; transition:0.3s; }
    .footer-bottom .credit a:hover { color:#fff; }
    .footer-bottom .credit i { color:var(--maroon); margin:0 4px; }
    .footer-bottom-links { display:flex; gap:1.5rem; }
    .footer-bottom-links a { color:#666; text-decoration:none; font-size:0.85rem; transition:0.3s; }
    .footer-bottom-links a:hover { color:var(--maroon-light); }

    /* ========== LIGHTBOX ========== */
    .lightbox-overlay {
      display:none; position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.92); z-index:9999;
      justify-content:center; align-items:center; flex-direction:column;
      opacity:0; transition:opacity 0.3s ease;
    }
    .lightbox-overlay.active { display:flex; opacity:1; }
    .lightbox-container { max-width:92vw; max-height:85vh; display:flex; justify-content:center; align-items:center; position:relative; }
    .lightbox-container img { max-width:100%; max-height:85vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.8); }
    .lightbox-btn {
      position:fixed; top:50%; transform:translateY(-50%);
      background:rgba(255,255,255,0.15); border:none; color:#fff; font-size:2.5rem;
      width:60px; height:60px; border-radius:50%; cursor:pointer;
      backdrop-filter:blur(6px); transition:0.3s; display:flex; align-items:center; justify-content:center; z-index:10001;
    }
    .lightbox-btn:hover { background:rgba(255,255,255,0.3); }
    .lightbox-prev { left:20px; }
    .lightbox-next { right:20px; }
    .lightbox-close {
      position:fixed; top:20px; right:20px;
      background:rgba(139,30,44,0.8); border:none; color:#fff; font-size:2rem;
      width:50px; height:50px; border-radius:50%; cursor:pointer;
      transition:0.3s; display:flex; align-items:center; justify-content:center; z-index:10001;
    }
    .lightbox-close:hover { background:var(--maroon); transform:rotate(90deg); }
    .lightbox-counter {
      position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
      color:#fff; font-size:1rem; background:rgba(0,0,0,0.6);
      padding:8px 20px; border-radius:30px; backdrop-filter:blur(4px);
      z-index:10001; font-weight:500;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width:992px) {
      .footer-content { grid-template-columns:1fr 1fr; gap:2rem; }
    }
    @media (max-width:768px) {
      .menu-toggle { display:block; }
      .nav-links {
        display:none; width:100%; flex-direction:column; text-align:center;
        padding:1rem 0; gap:1rem; align-items:center;
      }
      .nav-links.active { display:flex; }
      .btn-login, .btn-join-nav {
        width: auto;
        margin: 0 auto;
      }
      .hero h1 { font-size:2.3rem; }
      .about-grid, .join-container { grid-template-columns:1fr; }
      .section-title { font-size:2rem; }
      .logo-img { height:35px; }
      .lightbox-btn { width:44px; height:44px; font-size:1.5rem; }
      .lightbox-prev { left:10px; }
      .lightbox-next { right:10px; }
      .lightbox-close { width:40px; height:40px; font-size:1.5rem; top:10px; right:10px; }
    }
    @media (max-width:600px) {
      .footer-content { grid-template-columns:1fr; }
      .footer-bottom { flex-direction:column; text-align:center; }
      .footer-bottom .credit { text-align:center; }
      .footer-bottom-links { justify-content:center; flex-wrap:wrap; }
    }
    @media (max-width:480px) {
      .btn-group { flex-direction:column; align-items:center; }
      .btn { width:80%; justify-content:center; }
    }
     .join-page {
            padding-top: 8rem;
            background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
            min-height: 100vh;
        }
        
        .join-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .join-header h1 {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--black);
        }
        
        .join-header h1 span {
            color: var(--maroon);
        }
        
        .join-header p {
            color: var(--text-muted);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }
        
        .join-form-container {
            background: white;
            border-radius: 32px;
            padding: 3rem;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* Step Indicator */
        .step-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 3rem;
            gap: 1rem;
        }
        
        .step-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .step-circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            background: var(--gray);
            color: #999;
            transition: 0.3s;
        }
        
        .step-circle.active {
            background: var(--maroon);
            color: white;
            box-shadow: 0 4px 14px rgba(139,30,44,0.3);
        }
        
        .step-circle.completed {
            background: #22c55e;
            color: white;
        }
        
        .step-label {
            font-weight: 600;
            font-size: 0.9rem;
            color: #999;
        }
        
        .step-label.active {
            color: var(--maroon);
        }
        
        .step-label.completed {
            color: #22c55e;
        }
        
        .step-line {
            width: 60px;
            height: 2px;
            background: var(--gray);
            transition: 0.3s;
        }
        
        .step-line.completed {
            background: #22c55e;
        }
        
        .form-section {
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--gray);
        }
        
        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .form-section-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--maroon);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-section-title i {
            font-size: 1.4rem;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        
        .form-grid .full-width {
            grid-column: 1 / -1;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group label {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--black);
            margin-bottom: 0.4rem;
        }
        
        .form-group label .required {
            color: var(--maroon);
            margin-left: 2px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 0.8rem 1rem;
            border: 2px solid var(--gray);
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            transition: 0.3s;
            background: #fafafa;
            width: 100%;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--maroon);
            outline: none;
            background: white;
            box-shadow: 0 0 0 4px rgba(139,30,44,0.1);
        }
        
        .form-group input.error,
        .form-group select.error {
            border-color: #dc3545;
        }
        
        .form-group .error-message {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: 0.3rem;
        }
        
        .form-group .help-text {
            color: var(--text-muted);
            font-size: 0.8rem;
            margin-top: 0.3rem;
        }
        
        .checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 0.8rem;
            padding: 0.8rem;
            background: var(--gray-light);
            border-radius: 10px;
            transition: 0.3s;
        }
        
        .checkbox-group:hover {
            background: #e8e8e8;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 2px;
            cursor: pointer;
            accent-color: var(--maroon);
        }
        
        .checkbox-group label {
            font-weight: 500;
            cursor: pointer;
            color: var(--black);
            font-size: 0.95rem;
        }
        
        .checkbox-group label a {
            color: var(--maroon);
            text-decoration: none;
        }
        
        .checkbox-group label a:hover {
            text-decoration: underline;
        }
        
        .checkbox-group label .error-message {
            display: block;
            margin-top: 0.3rem;
        }
        
        .checkbox-group.danger {
            background: #fef2f2;
            border: 2px solid #fca5a5;
        }
        
        .form-actions {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .btn-step {
            padding: 1rem 3rem;
            border: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-primary-step {
            background: var(--maroon);
            color: white;
            flex: 1;
            justify-content: center;
        }
        
        .btn-primary-step:hover {
            background: var(--maroon-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139,30,44,0.3);
        }
        
        .btn-secondary-step {
            background: var(--gray-light);
            color: var(--text-muted);
            border: 2px solid var(--gray);
        }
        
        .btn-secondary-step:hover {
            border-color: var(--maroon);
            color: var(--maroon);
        }
        
        .btn-success-step {
            background: #22c55e;
            color: white;
            flex: 1;
            justify-content: center;
        }
        
        .btn-success-step:hover {
            background: #16a34a;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(34,197,94,0.3);
        }
        
        .btn-submit {
            padding: 1rem 3rem;
            border: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            background: var(--maroon);
            color: white;
            cursor: pointer;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background: var(--maroon-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139,30,44,0.3);
        }
        
        .btn-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .btn-reset {
            padding: 1rem 2rem;
            border: 2px solid var(--gray);
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: 0.3s;
        }
        
        .btn-reset:hover {
            border-color: var(--maroon);
            color: var(--maroon);
        }
        
        /* Success Message */
        .success-message {
            text-align: center;
            padding: 3rem 2rem;
            background: #f0fdf4;
            border: 2px solid #86efac;
            border-radius: 24px;
        }
        
        .success-message i {
            font-size: 4rem;
            color: #22c55e;
            margin-bottom: 1rem;
        }
        
        .success-message h2 {
            color: #166534;
            margin-bottom: 0.5rem;
        }
        
        .success-message p {
            color: #15803d;
            margin-bottom: 1.5rem;
        }
        
        .success-message .membership-id {
            background: white;
            padding: 0.8rem 2rem;
            border-radius: 12px;
            display: inline-block;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--maroon);
            border: 2px solid #86efac;
        }
        
        /* Error Alert */
        .alert-danger {
            background: #fef2f2;
            border: 2px solid #fca5a5;
            border-radius: 16px;
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
            color: #991b1b;
        }
        
        .alert-danger ul {
            list-style: none;
            padding: 0;
            margin: 0.5rem 0 0;
        }
        
        .alert-danger ul li {
            padding: 0.2rem 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .alert-danger ul li::before {
            content: '•';
            color: #dc2626;
            font-weight: 700;
        }
        
        /* Terms Content */
        .terms-content {
            max-height: 400px;
            overflow-y: auto;
            padding: 1.5rem;
            background: var(--gray-light);
            border-radius: 12px;
            margin-bottom: 1.5rem;
            border: 1px solid var(--gray);
        }
        
        .terms-content h4 {
            color: var(--maroon);
            margin: 1.5rem 0 0.5rem;
        }
        
        .terms-content h4:first-child {
            margin-top: 0;
        }
        
        .terms-content p {
            color: var(--text-muted);
            line-height: 1.8;
            margin-bottom: 0.8rem;
            font-size: 0.95rem;
        }
        
        .terms-content ul {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .terms-content ul li {
            color: var(--text-muted);
            line-height: 1.8;
            margin-bottom: 0.3rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .join-page {
                padding-top: 6rem;
            }
            
            .join-form-container {
                padding: 1.5rem;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .join-header h1 {
                font-size: 2rem;
            }
            
            .form-actions {
                flex-direction: column;
            }
            
            .step-indicator {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .step-line {
                width: 2px;
                height: 20px;
            }
            
            .step-item {
                width: 100%;
                justify-content: center;
            }
        }
        
        @media (max-width: 480px) {
            .join-form-container {
                padding: 1rem;
                border-radius: 20px;
            }
            
            .form-section-title {
                font-size: 1rem;
            }
        }
        /* Fancy Registration Button */
.btn-register {
  background: var(--maroon);
  color: white !important;
  padding: 0.5rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--maroon);
  text-decoration: none;
}
.btn-register:hover {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(139,30,44,0.4);
  color: white !important;
}
.btn-register.active {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}

/* Fancy Contact Button */
.btn-contact {
  background: transparent;
  color: var(--maroon) !important;
  padding: 0.5rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--maroon);
  text-decoration: none;
}
.btn-contact:hover {
  background: var(--maroon);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(139,30,44,0.3);
}
.btn-contact.active {
  background: var(--maroon);
  color: white !important;
  border-color: var(--maroon-dark);
}