/**
 * Unified Design System - Modern Typography, Spacing & Icon Standards
 * This file provides consistent sizing, spacing, and icon spacing across the entire website
 * Load this AFTER all other CSS files to ensure it takes precedence
 */

/* ============================================
   TYPOGRAPHY SYSTEM - Standardized Sizes
   ============================================ */

/* Base Body Text */
body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
}

p, span, li, td, th, label {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
}

/* Heading Hierarchy - Modern & Consistent */
h1, .h1 {
    font-size: 36px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0F172A !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.01em !important;
}

h2, .h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0F172A !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.01em !important;
}

h3, .h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0F172A !important;
    margin-bottom: 16px !important;
}

h4, .h4 {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #0F172A !important;
    margin-bottom: 14px !important;
}

h5, .h5 {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #0F172A !important;
    margin-bottom: 12px !important;
}

h6, .h6 {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #0F172A !important;
    margin-bottom: 10px !important;
}

/* Hero Headlines - Special Cases */
.hero__headline,
.hero h1 {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

.hero__subheadline,
.hero p {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* Section Titles */
.section-title h2,
.value-proposition__title,
.how-it-works__title,
.faq-section__title,
.instructor-cta__title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
}

.instructor-cta__title {
    color: #fff !important;
}

/* Card Titles */
.card-title,
.value-proposition__card__title,
.how-it-works__step__title,
.listing__item__name,
.listing__item__name a {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0F172A !important;
}

/* Card Text */
.card-text,
.value-proposition__card__text,
.how-it-works__step__text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
}

/* Small Text - Metadata, Labels, Secondary Info */
small,
.text-small,
.listing__item__rating__count,
.listing__item__location,
.listing__item__meta__item,
.booking-price .price-label,
.booking-price .price-unit,
.listing__sidebar__contact ul li,
.listing__sidebar__working__hours ul li {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #64748B !important;
}

/* Extra Small Text - Badges, Tags, Tiny Labels */
.text-xs,
.listing__item__badge,
.listing__item__verified-badge,
.listing__item__price__unit,
.listing__item__rating__count--compact {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* ============================================
   BUTTON TYPOGRAPHY
   ============================================ */

.btn,
.primary-btn,
.site-btn,
button[type="submit"],
.booking-cta,
.listing__item__cta {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.btn-lg,
.primary-btn.btn-lg {
    font-size: 16px !important;
    padding: 12px 24px !important;
    height: 48px !important;
}

.btn-sm,
.primary-btn.btn-sm {
    font-size: 13px !important;
    padding: 8px 16px !important;
    height: 36px !important;
}

/* ============================================
   FORM INPUT TYPOGRAPHY
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #0F172A !important;
}

input::placeholder,
textarea::placeholder {
    font-size: 15px !important;
    color: #94A3B8 !important;
}

label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    margin-bottom: 8px !important;
}

/* ============================================
   SPACING SYSTEM - Consistent Margins & Padding
   ============================================ */

/* Section Spacing */
section.spad,
.section-padding {
    padding: 60px 0 !important;
}

.section-padding-lg {
    padding: 80px 0 !important;
}

.section-padding-sm {
    padding: 40px 0 !important;
}

/* Card Spacing */
.card,
.listing__item,
.value-proposition__card,
.booking-card,
.filter-card {
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Card Internal Spacing */
.card-body,
.listing__item__text {
    padding: 16px !important;
}

/* Gap Spacing - For Flex/Grid Layouts */
.gap-xs { gap: 4px !important; }
.gap-sm { gap: 8px !important; }
.gap-md { gap: 12px !important; }
.gap-lg { gap: 16px !important; }
.gap-xl { gap: 24px !important; }

/* Margin Bottom - Consistent Vertical Rhythm */
.mb-xs { margin-bottom: 8px !important; }
.mb-sm { margin-bottom: 12px !important; }
.mb-md { margin-bottom: 16px !important; }
.mb-lg { margin-bottom: 20px !important; }
.mb-xl { margin-bottom: 24px !important; }
.mb-2xl { margin-bottom: 32px !important; }

/* Margin Top */
.mt-xs { margin-top: 8px !important; }
.mt-sm { margin-top: 12px !important; }
.mt-md { margin-top: 16px !important; }
.mt-lg { margin-top: 20px !important; }
.mt-xl { margin-top: 24px !important; }

/* Padding */
.p-xs { padding: 8px !important; }
.p-sm { padding: 12px !important; }
.p-md { padding: 16px !important; }
.p-lg { padding: 20px !important; }
.p-xl { padding: 24px !important; }

/* ============================================
   ICON SIZING & SPACING - Standardized
   ============================================ */

/* Icon Base Sizes */
i.fa,
i.icon,
[class^="icon_"],
[class*=" icon_"] {
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Small Icons - 12px */
.icon-sm,
i.fa-sm,
.listing__item__meta__icon--compact,
.listing__item__location__icon--compact {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Medium Icons - 14px (Default) */
.icon-md,
i.fa-md {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Large Icons - 18px */
.icon-lg,
i.fa-lg,
.value-proposition__card__icon,
.how-it-works__step__icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Extra Large Icons - 24px */
.icon-xl,
i.fa-xl,
.value-proposition__card__icon i,
.how-it-works__step__icon i {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Icon Spacing - Gap between icon and text */
.icon-with-text,
.btn i,
.primary-btn i,
a i,
span i {
    margin-right: 6px !important;
}

.icon-with-text i:last-child,
.btn i:last-child,
.primary-btn i:last-child {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* Icon-only buttons - centered */
.btn-icon-only,
.icon-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-icon-only i,
.icon-button i {
    margin: 0 !important;
    font-size: 16px !important;
}

/* ============================================
   LISTING/SEARCH PAGE SPECIFIC
   ============================================ */

/* Listing Header */
.listing-header__title,
h1.listing-header__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.listing-header__subtitle {
    font-size: 13px !important;
    color: #64748B !important;
}

/* Instructor Card Text */
.listing__item__name--modern,
.listing__item__name--modern a {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.listing__item__price__amount--modern {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.listing__item__price__unit--modern {
    font-size: 11px !important;
}

.listing__item__rating__value--compact {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.listing__item__rating__count--compact {
    font-size: 11px !important;
}

.listing__item__location--compact,
.listing__item__meta__item--compact {
    font-size: 11px !important;
}

.listing__item__cta--modern {
    font-size: 12px !important;
}

/* Filter Card */
.filter-card h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
}

.filter-card label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

.filter-card input,
.filter-card select {
    font-size: 15px !important;
}

.filter-card .radio-option span {
    font-size: 15px !important;
}

/* Empty State */
.empty-state__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.empty-state__message {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.empty-state__icon i {
    font-size: 48px !important;
}

/* ============================================
   DETAIL PAGE SPECIFIC
   ============================================ */

/* Hero Section */
.listing__hero__text h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.listing__hero__widget,
.listing__hero__widget div,
.listing__hero__widget span,
.listing__hero__text p {
    font-size: 14px !important;
}

/* Detail Sections */
.listing__details__about h4,
.listing__details__gallery h4,
.listing__details__amenities h4,
.listing__details__rating h4,
.listing__details__comment h4,
.booking-card h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.listing__details__about p,
.listing__details__comment__item__text p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.listing__details__comment__item__text h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.listing__details__comment__item__text span {
    font-size: 12px !important;
}

.listing__details__amenities__item h6 {
    font-size: 12px !important;
}

.listing__details__amenities__item i {
    font-size: 20px !important;
}

.listing__details__rating__overall h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
}

.listing__details__rating__star span {
    font-size: 16px !important;
}

.listing__details__rating__overall > span {
    font-size: 13px !important;
}

/* Booking Card */
.booking-price .price-amount {
    font-size: 24px !important;
    font-weight: 700 !important;
}

.booking-price .price-unit {
    font-size: 14px !important;
}

.booking-price .price-label {
    font-size: 12px !important;
}

.booking-features li span {
    font-size: 13px !important;
}

.booking-features li i {
    font-size: 14px !important;
}

.booking-cta {
    font-size: 14px !important;
}

.safety-note p {
    font-size: 12px !important;
}

/* Sidebar */
.listing__sidebar__contact h4,
.listing__sidebar__working__hours h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.listing__sidebar__contact ul li,
.listing__sidebar__working__hours ul li {
    font-size: 13px !important;
}

.listing__sidebar__contact ul li > span:first-child {
    font-size: 14px !important;
}

/* ============================================
   FORUM & TEST DATE EXCHANGE PAGES
   ============================================ */

.forum-page h1,
.test-date-exchange-page h1 {
    font-size: 28px !important;
    font-weight: 600 !important;
}

.forum-topic h3,
.test-date-exchange-item h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.forum-meta,
.test-date-exchange-meta {
    font-size: 13px !important;
    color: #64748B !important;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    h1, .h1 { font-size: 28px !important; }
    h2, .h2 { font-size: 24px !important; }
    h3, .h3 { font-size: 20px !important; }
    
    .hero__headline,
    .hero h1 {
        font-size: 32px !important;
    }
    
    .hero__subheadline,
    .hero p {
        font-size: 17px !important;
    }
    
    .section-title h2,
    .value-proposition__title,
    .how-it-works__title,
    .faq-section__title {
        font-size: 24px !important;
    }
    
    .listing__hero__text h2 {
        font-size: 22px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 22px !important; }
    h3, .h3 { font-size: 18px !important; }
    h4, .h4 { font-size: 16px !important; }
    
    body, p, span {
        font-size: 15px !important;
    }
    
    .hero__headline,
    .hero h1 {
        font-size: 28px !important;
    }
    
    .hero__subheadline,
    .hero p {
        font-size: 16px !important;
    }
    
    .section-title h2,
    .value-proposition__title,
    .how-it-works__title,
    .faq-section__title,
    .instructor-cta__title {
        font-size: 22px !important;
    }
    
    .listing__hero__text h2 {
        font-size: 20px !important;
    }
    
    .listing__details__about h4,
    .listing__details__gallery h4,
    .listing__details__amenities h4,
    .listing__details__rating h4,
    .listing__details__comment h4 {
        font-size: 16px !important;
    }
    
    .empty-state__title {
        font-size: 20px !important;
    }
    
    .empty-state__icon i {
        font-size: 40px !important;
    }
    
    section.spad,
    .section-padding {
        padding: 40px 0 !important;
    }
    
    .section-padding-lg {
        padding: 50px 0 !important;
    }
}

/* Small Mobile (< 575px) */
@media (max-width: 575px) {
    .hero__headline,
    .hero h1 {
        font-size: 24px !important;
    }
    
    .hero__subheadline,
    .hero p {
        font-size: 15px !important;
    }
    
    .section-title h2,
    .value-proposition__title,
    .how-it-works__title,
    .faq-section__title {
        font-size: 20px !important;
    }
    
    .listing__hero__text h2 {
        font-size: 18px !important;
    }
}

/* ============================================
   FORCE OVERRIDES - Remove inline font-sizes
   ============================================ */

/* Override any inline font-size styles in search page */
.instructor-search-container *,
.listing *,
.filter-card * {
    font-size: inherit !important;
}

/* But allow specific classes to use design system sizes */
.listing-header__title,
.listing-header__subtitle,
.listing__item__name--modern,
.listing__item__price__amount--modern,
.listing__item__rating__value--compact,
.filter-card h5,
.filter-card label,
.filter-card input,
.filter-card select,
.filter-card .radio-option span {
    font-size: inherit !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Font Weights */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Text Colors */
.text-primary { color: #0F172A !important; }
.text-body { color: #64748B !important; }
.text-muted { color: #94A3B8 !important; }
.text-accent { color: #1E40AF !important; }

/* Display */
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }

/* Flex Utilities */
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }