/* ============================================================
   Kuwait Teacher Society - Event Management
   Main Stylesheet
   ============================================================ */

:root {
    --kts-primary: #1a5276;
    --kts-secondary: #2ecc71;
    --kts-gold: #d4ac0d;
    --kts-dark: #0d1b2a;
    font-family: 'Tajawal', sans-serif;
}

* { font-family: 'Tajawal', sans-serif; }

/* ---- Top Bar ---- */
.top-bar { background: var(--kts-dark); }

/* ---- Navbar ---- */
.kts-navbar { background: linear-gradient(135deg, var(--kts-primary), #2980b9); }
.brand-icon { width: 40px; height: 40px; background: rgba(255,255,255,.15); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.navbar-nav .nav-link { color: rgba(255,255,255,.9) !important; font-weight: 500; }
.navbar-nav .nav-link:hover { color: white !important; }

/* ---- Hero ---- */
.hero-section { position: relative; background: linear-gradient(135deg, var(--kts-dark) 0%, var(--kts-primary) 100%);
    min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 2; }
.hero-badge { display: inline-block; background: rgba(255,255,255,.15); color: white;
    padding: 6px 20px; border-radius: 50px; font-size: .9rem; border: 1px solid rgba(255,255,255,.2); }
.hero-title { color: white; font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.3; }
.hero-subtitle, .hero-location { color: rgba(255,255,255,.8); font-size: 1.1rem; }
.btn-hero-primary { background: var(--kts-gold); color: #000; font-weight: 700; padding: 12px 30px;
    border-radius: 50px; border: none; font-size: 1rem; }
.btn-hero-primary:hover { background: #b7950b; color: #000; }
.btn-hero-secondary { background: transparent; color: white; font-weight: 700; padding: 12px 30px;
    border-radius: 50px; border: 2px solid rgba(255,255,255,.5); font-size: 1rem; }
.btn-hero-secondary:hover { background: rgba(255,255,255,.1); color: white; }

/* ---- Stats ---- */
.stats-section { background: var(--kts-primary); }
.stat-card { background: rgba(255,255,255,.1); border-radius: 16px; padding: 20px; }
.stat-icon { font-size: 2rem; color: var(--kts-gold); margin-bottom: 8px; }
.stat-value { font-size: 2rem; font-weight: 800; color: white; }
.stat-label { color: rgba(255,255,255,.7); font-size: .85rem; }

/* ---- Section Header ---- */
.section-title { font-size: 1.8rem; font-weight: 800; color: var(--kts-dark); }
.section-divider { width: 60px; height: 4px; background: var(--kts-primary); border-radius: 2px;
    margin: 12px auto 0; }

/* ---- Axis Cards ---- */
.axis-card { background: white; border-radius: 16px; padding: 28px 20px; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.07); transition: transform .3s, box-shadow .3s;
    position: relative; overflow: hidden; }
.axis-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.axis-number { position: absolute; top: 12px; right: 16px; font-size: 3rem; font-weight: 900;
    color: rgba(0,0,0,.05); line-height: 1; }
.axis-icon { font-size: 2.5rem; margin-bottom: 16px; }
.axis-title { font-size: 1.1rem; font-weight: 700; color: var(--kts-dark); }
.axis-desc { color: #666; font-size: .9rem; }

/* ---- Conditions ---- */
.conditions-card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.07); overflow: hidden; }
.conditions-header { padding: 18px 20px; font-weight: 700; font-size: 1rem; }
.conditions-header.research { background: linear-gradient(135deg, #1a5276, #2980b9); color: white; }
.conditions-header.workshop { background: linear-gradient(135deg, #0e6655, #1abc9c); color: white; }
.conditions-list { list-style: none; padding: 20px; margin: 0; }
.conditions-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: .95rem; }

/* ---- CTA ---- */
.cta-section { background: linear-gradient(135deg, #0d1b2a, var(--kts-primary)); }

/* ---- Login Page ---- */
.min-vh-80 { min-height: 80vh; }
.login-card { border-radius: 20px; overflow: hidden; border: none; }
.login-header { background: linear-gradient(135deg, var(--kts-primary), #2980b9); padding: 32px 24px; }
.login-icon { width: 70px; height: 70px; background: rgba(255,255,255,.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; margin: 0 auto; }
.login-header h4, .login-header p { color: white; }
.login-body { background: white; }

/* ---- Page Header ---- */
.page-header { background: linear-gradient(135deg, var(--kts-dark), var(--kts-primary));
    padding: 40px 0; color: white; }
.page-header h2 { font-weight: 800; margin-bottom: 4px; }

/* ---- Program ---- */
.nav-program { border-bottom: 2px solid #e9ecef; gap: 4px; }
.nav-program .nav-link { border: 1px solid #dee2e6; border-radius: 12px 12px 0 0 !important;
    padding: 12px 20px; color: #666; }
.nav-program .nav-link.active { background: var(--kts-primary); border-color: var(--kts-primary); color: white !important; }
.session-card { display: flex; gap: 20px; background: white; border-radius: 14px;
    padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border-right: 5px solid #ccc; }
.session-general { border-right-color: var(--kts-primary); }
.session-workshop { border-right-color: #27ae60; }
.session-keynote { border-right-color: var(--kts-gold); }
.session-time { text-align: center; min-width: 70px; }
.time-start, .time-end { font-weight: 700; font-size: .9rem; color: var(--kts-primary); }
.time-line { width: 2px; background: #e9ecef; height: 30px; margin: 4px auto; }
.session-name { font-size: 1.05rem; font-weight: 700; color: var(--kts-dark); }
.session-type-badge { font-size: .75rem; }
.session-general .session-type-badge { background: var(--kts-primary); }
.session-workshop .session-type-badge { background: #27ae60; }
.session-keynote .session-type-badge { background: var(--kts-gold); color: #000; }
.session-speaker { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.speaker-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.speaker-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #e9ecef;
    display: flex; align-items: center; justify-content: center; color: #999; }
.session-desc { font-size: .9rem; color: #666; margin: 8px 0 0; }

/* ---- Member Info Card ---- */
.member-info-card { background: linear-gradient(135deg, var(--kts-primary), #2980b9);
    border-radius: 16px; padding: 20px; display: flex; gap: 16px; align-items: center; color: white; }
.member-avatar { width: 60px; height: 60px; background: rgba(255,255,255,.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.info-box { background: #f8f9fa; border-radius: 10px; padding: 16px; border-right: 4px solid var(--kts-primary); }

/* ---- Digital Card ---- */
.digital-card { background: white; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.15); max-width: 420px; margin: 0 auto; }
.digital-card-header { background: linear-gradient(135deg, var(--kts-dark), var(--kts-primary));
    padding: 24px; text-align: center; color: white; }
.digital-card-body { padding: 24px; }
.conference-name { font-size: .95rem; font-weight: 700; color: var(--kts-primary); }
.card-divider { height: 1px; background: #e9ecef; margin: 16px 0; }
.member-card-info { display: flex; flex-direction: column; gap: 8px; }
.card-field { display: flex; justify-content: space-between; font-size: .9rem; }
.field-label { color: #888; }
.field-value { color: var(--kts-dark); }
.qr-image { width: 150px; height: 150px; border: 4px solid var(--kts-primary); border-radius: 8px; }
.barcode-value { font-family: monospace; font-size: .75rem; }
.card-dates { font-size: .85rem; color: #666; }
.digital-card-footer { background: #f8f9fa; padding: 14px; text-align: center; }
.status-badge { display: inline-flex; align-items: center; padding: 6px 18px; border-radius: 50px; font-weight: 600; }
.status-badge.confirmed { background: #d5f5e3; color: #1e8449; }
.status-badge.pending { background: #fef9e7; color: #b7950b; }

/* ---- Sponsors ---- */
.sponsor-logo { max-height: 70px; filter: grayscale(.4); transition: filter .3s; }
.sponsor-logo:hover { filter: none; }
.sponsor-placeholder { background: #f0f0f0; padding: 20px; border-radius: 8px; font-size: .85rem;
    color: #666; text-align: center; }

/* ---- Footer ---- */
.kts-footer { background: var(--kts-dark); }

/* ---- Rating ---- */
.rating-group { background: #f8f9fa; border-radius: 12px; padding: 16px; }