/*-- scss:defaults --*/

/*-- scss:rules --*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap');


/* Custom CSS Variables and Base Styles */
:root {
  --bg: #ffffff;           /* Light blue background */
  --panel: #ffffff;        /* White panels */
  --ink: #0b2545;          /* Dark blue text */
  --muted: #5f6b7a;        /* Muted gray text */
  --brand: #113cfc;        /* Brand blue */
  --brand-ink: #ffffff;    /* White text on brand */
  --cta: #ff8a65;          /* Call-to-action orange */
  --cta-ink: #ffffff;      /* White text on CTA */
  --accent: #e8eefc;       /* Light accent blue */
  --shadow: 0 8px 24px rgba(11,37,69,0.08);  /* Soft shadow */
  --radius-lg: 16px;       /* Large border radius */
  --radius-md: 12px;       /* Medium border radius */
  --radius-sm: 10px;       /* Small border radius */
  --ring: 0 0 0 3px rgba(17,60,252,0.15);    /* Focus ring */
}

/* Reset and base typography */
*, *::before, *::after { 
  box-sizing: border-box; 
}

html, body { 
  height: 100%;
  background: #ffffff !important;  /* Force white background */
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  /* Gradient background with multiple radial gradients */
  background: radial-gradient(1200px 600px at 20% -10%, rgba(17,60,252,0.06), transparent 60%),
              radial-gradient(1000px 500px at 80% -10%, rgba(255,138,101,0.06), transparent 60%),
              var(--bg);
  line-height: 1.45;
}

/* Link and focus states */
a { 
  color: var(--brand); 
  text-decoration: none; 
}

a:focus { 
  outline: none; 
  box-shadow: var(--ring); 
  border-radius: 6px; 
}

button:focus, input:focus { 
  outline: none; 
  box-shadow: var(--ring); 
}

/* Layout containers */
.page { 
  max-width: 1040px; 
  margin: 40px auto; 
  padding: 0 16px; 
}

.card { 
  background: var(--panel); 
  border-radius: 20px; 
  box-shadow: var(--shadow); 
  padding: 28px; 
}

/* Navigation styles */
.nav { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  padding-bottom: 8px; 
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-weight: 800; 
  font-size: 22px; 
}

.brand-icon { 
  width: 22px; 
  height: 22px; 
  color: #ff8a65; 
}

.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 22px; 
  color: var(--muted); 
  flex-wrap: wrap; 
}

.nav-cta { 
  background: #ff8a65; 
  color: #fff; 
  border: 0; 
  padding: 10px 14px; 
  border-radius: 12px; 
  font-weight: 600; 
  cursor: pointer; 
}

#title-block-header {
  display: none;
}


/* 🎯 ENHANCED HERO SECTION */
.hero { 
  margin: 8px 0 6px 0;
  text-align: center; /* Center the hero content */
}

.hero h1 { 
  /* Increased font size but more conservative for single line */
  font-size: clamp(2rem, 6vw, 3.5rem); /* Smaller than before to stay on one line */
  
  /* Your specified color */
  color: #203A59;
  
  /* Less chunky font weight */
  font-weight: 700; /* Bold but not extra bold */
  
  /* Tight line height for single line emphasis */
  line-height: 1.0;
  
  /* Center alignment */
  text-align: center;
  
  /* Adjusted margins for better spacing */
  margin: 12px 0 16px 0;
  
  /* Tight letter spacing for modern look */
  letter-spacing: -0.02em;
  
  /* Optional: Add subtle text shadow for depth */
  text-shadow: 2px 2px 4px rgba(32, 58, 89, 0.1);
}

.hero p { 
  color: var(--muted); 
  font-size: 20px; /* Larger subtitle text */
  font-weight: 500; /* Medium weight for better presence */
  margin: 0 0 24px 0; /* More space below subtitle */
  text-align: center; /* Ensure subtitle is also centered */
  max-width: 600px; /* Constrain width for better readability */
  margin-left: auto; /* Center the constrained width */
  margin-right: auto;
  line-height: 1.4; /* Good line height for readability */
}



/* Features grid */
.features { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 18px; 
  margin: 22px 0 24px; 
}


.feature { 
  background: #fff; 
  border: 1px solid #eef2f7; 
  border-radius: 12px; 
  padding: 18px; 
}

.feature h3 { 
  margin: 8px 0 6px; 
  font-size: 20px; 
}

.feature p { 
  margin: 0; 
  color: var(--muted); 
}

.feature .icon { 
  width: 42px; 
  height: 42px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 12px; 
  background: var(--accent); 
}

/* Banner for teacher signup */
.banner { 
  background: #fff1eb; 
  border: 1px solid #ffe0d5; 
  border-radius: 16px; 
  padding: 16px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  flex-wrap: wrap; 
}

.banner strong { 
  display: block; 
  font-size: 18px; 
  margin-bottom: 2px; 
}

.banner p { 
  margin: 0; 
  color: #6b7280; 
}

.banner .btn { 
  background: #2343ff; 
  color: #fff; 
  padding: 10px 14px; 
  border: 0; 
  border-radius: 12px; 
  font-weight: 700; 
  cursor: pointer; 
}

/* Footer */
.footer { 
  text-align: center; 
  color: #94a3b8; 
  font-size: 14px; 
  margin-top: 18px; 
}


.navbar {
  
    /* Actually apply the white background */
  background-color: #ffffff !important;
  /* Text Colors */
  color: #203A59 !important;
  
  
  --bs-navbar-bg: #ffffff;  /* Add this line */
  --bs-navbar-color: #333333; /* Dark text on white background */
  /* ... rest of your existing variables */
  /* Navbar Spacing */
  --bs-navbar-padding-x: 0;                          /* Horizontal navbar padding */
  --bs-navbar-padding-y: 0.5rem;                     /* Vertical navbar padding */

  /* Navbar Colors (Light Theme Default) */
  --bs-navbar-hover-color: rgba(33, 37, 41, 0.8);    /* Navbar link hover color */
  --bs-navbar-disabled-color: rgba(33, 37, 41, 0.3); /* Disabled navbar link color */
  --bs-navbar-active-color: rgba(33, 37, 41, 1);     /* Active navbar link color */

  /* Navbar Brand */
  --bs-navbar-brand-padding-y: 0.3125rem;            /* Brand vertical padding */
  --bs-navbar-brand-margin-end: 1rem;                /* Brand right margin */
  --bs-navbar-brand-font-size: 1.25rem;              /* Brand font size */
  --bs-navbar-brand-color: rgba(33, 37, 41, 1);      /* Brand text color */
  --bs-navbar-brand-hover-color: rgba(33, 37, 41, 1); /* Brand hover color */

  /* Navbar Links */
  --bs-navbar-nav-link-padding-x: 0.5rem;            /* Navbar link horizontal padding */

  /* Navbar Toggler (Mobile Menu Button) */
  --bs-navbar-toggler-padding-y: 0.25rem;            /* Toggler vertical padding */
  --bs-navbar-toggler-padding-x: 0.75rem;            /* Toggler horizontal padding */
  --bs-navbar-toggler-font-size: 1.25rem;            /* Toggler icon size */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,..."); /* Toggler icon SVG */
  --bs-navbar-toggler-border-color: rgba(33, 37, 41, 0.15); /* Toggler border color */
  --bs-navbar-toggler-border-radius: 0.375rem;       /* Toggler border radius */
  --bs-navbar-toggler-focus-width: 0.25rem;          /* Toggler focus ring width */
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; /* Toggler transitions */
}

/* Navbar toggler */
.navbar-toggler {
    color: var(--bs-navbar-color);
    background-color: #ffffff;
    border: #203A59  !important;
    border-color: #203A59 !important;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:hover {
  outline: none;
  box-shadow: 0 0 0 2px #203A59;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23203A59' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-size: contain;
  
}



/*  RESIZE NAVBAR PROJECT TITLE  */

.navbar a {
  font-size: 1.7rem;        /* Bigger font */
  font-weight: 700;
  line-height: 1.8;         /* Controls space inside each line */
  
}

/* Resize NavBar Titles   */
.navbar-nav .nav-link {
  font-size: 1.3rem;        /* Bigger font */
  font-weight: 525;
  line-height: 1.9;         /* Controls space inside each line */
}

/* Resize Drop Down Text   */

.dropdown-menu .dropdown-item {
  font-size: 1.07rem;
  font-weight: 600;      /* Optional: make it semi-bold */
}


/* Navbar links */
.navbar-nav .nav-link {
  color: #203A59 !important;
}

/* Navbar brand (logo text) */
.navbar-brand {
  color: #203A59 !important;
}


/* Dropdown menu items */
.navbar .dropdown-menu .dropdown-item {
  color: #203A59 !important;
}

/* Hover states */
.navbar-nav .nav-link:hover {
  color: #FF8862 !important; /* Your orange color for hover */
}

.navbar-brand:hover {
  color: #FF8862 !important;
}






/* Style the last navbar item as a button */
.navbar-nav .nav-item:last-child .nav-link {
  background: #FF8862 !important;
  color: white !important;
  border: none;
  padding: 6px 10px !important;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
    /* --- new additions --- */
  white-space: normal;
  word-break: keep-all;   /* keeps small words together */
  line-height: 1.4;       /* smoother vertical spacing */
}

.navbar-nav .nav-item:last-child .nav-link:hover {
  background: #e07552 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(224, 117, 82, 0.3);
}

/*BANNER Make banner buttons match navbar style */
.banner button,
.banner .btn {
  background: #FF8862 !important;
  color: white !important;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.banner button:hover,
.banner .btn:hover {
  background: #e07552 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(224, 117, 82, 0.3);
}





/* Resize logo in navbar */
.navbar-brand img {
  height: 80px !important;  /* Try 60–80px for bigger logo */
  width: auto;
}
.navbar-logo {
    max-height: 40px !important;
    width: auto;
    padding-right: 4px;
}



/* ==============================================
   ADDITIONS FOR CENTERING & ICON ENLARGEMENT
   Add these rules to the bottom of your mmio.css
   ============================================== */

/* Center content within feature cards */
.feature { 
  text-align: center; /* Centers all content in feature cards */
}

/* Enhanced icon styling - enlarges and centers icons */
.feature .icon { 
  width: 60px;        /* Larger than your current 42px */
  height: 60px;       /* Larger than your current 42px */
  margin: 0 auto 12px auto; /* Centers the icon and adds space below */
  display: flex;      /* Enables centering of SVG inside */
  align-items: center;
  justify-content: center;
}

/* Ensure SVG icons are properly sized within the container */
.feature .icon svg {
  width: 48px;        /* Icon size within the container */
  height: 48px;
  display: block;
}

/* Center and improve spacing of feature headings */
.feature h3 {
  text-align: center;
  margin: 12px 0 8px 0; /* Consistent spacing */
}

/* Center and improve spacing of feature descriptions */
.feature p {
  text-align: center;
  margin: 0;
}




/* ==============================================
   ADDITIONS FOR CENTERING & ICON ENLARGEMENT
   Add these rules to the bottom of your mmio.css
   ============================================== */

/* Center content within feature cards */
.feature { 
  text-align: center; /* Centers all content in feature cards */
}

/* Enhanced icon styling - enlarges and centers icons */
.feature .icon { 
  width: 60px;        /* Larger than your current 42px */
  height: 60px;       /* Larger than your current 42px */
  margin: 0 auto 12px auto; /* Centers the icon and adds space below */
  display: flex;      /* Enables centering of SVG inside */
  align-items: center;
  justify-content: center;
}

/* Ensure SVG icons are properly sized within the container */
.feature .icon svg {
  width: 48px;        /* Icon size within the container */
  height: 48px;
  display: block;
}

/* Center and improve spacing of feature headings */
.feature h3 {
  text-align: center;
  margin: 12px 0 8px 0; /* Consistent spacing */
}

/* Center and improve spacing of feature descriptions */
.feature p {
  text-align: center;
  margin: 0;
}


/* ==============================================
   BANNER TEXT POSITIONING & SIZING
   ============================================== */

/* Adjust banner text positioning and sizing */
.banner {
  align-items: flex-start; /* Align items to top instead of center */
  padding-top: 20px;       /* More top padding */
  padding-bottom: 16px;    /* Adjust bottom padding */
}

/* Style the text container to shift right and adjust spacing */
.banner > div:first-child {
  margin-left: 24px;       /* Shift text to the right */
  margin-top: 4px;         /* Move top text down a little */
  line-height: 1.3;        /* Tighter line spacing between the two lines */
}

/* Make "Are you a music teacher?" larger */
.banner strong {
  font-size: 24px;         /* Larger than default 18px */
  font-weight: 700;        /* Keep it bold */
  display: block;
  margin-bottom: 2px;      /* Small space between lines */
}

/* Adjust the second line */
.banner > div:first-child {
  font-size: 16px;         /* Normal size for second line */
  color: #6b7280;          /* Keep your existing muted color */
}



.banner-text {
  margin-left: 24px;       /* Shift text to the right */
  margin-top: 4px;         /* Move top text down a little */
}

.banner-text strong {
  font-size: 24px;         /* Larger heading */
  font-weight: 700;
}





/* =============================================================================
   SEARCH RESULTS STYLING
   Add these styles to your existing mmio.css file
   ============================================================================= */

.addr-pin { width:18px; height:18px; vertical-align:middle; }
.address  { display:flex; align-items:center; gap:6px; }


/* Search Results Container */
#searchResults {
    margin-top: 40px;
    padding: 20px;
}

/* Search Status Messages */
#searchStatus {
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 500;
}

/* Results Category Containers */
.results-category {
    margin-bottom: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.results-category h3 {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    margin: 0;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 600;
}

/* Results Table Styling */
.results-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.results-table th,
.results-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.results-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.results-table tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

/* Place Name Styling */
.place-name {
    font-weight: 600;
    color: #333;
}

/* Rating Styling */
.rating {
    color: #ff6b35;
    font-weight: 600;
}

/* Enhanced Search Button States */
.search button[type="submit"] {
    transition: all 0.3s ease;
}

.search button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.search button[type="submit"]:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Location Input Enhanced States */
.search-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Smooth Scrolling for Results */
html {
    scroll-behavior: smooth;
}

/* Loading State Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.search button[type="submit"]:disabled {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Success/Error Message Styling */
.status-success {
    background-color: #e6ffe6;
    border: 1px solid #ccffcc;
    color: #006600;
}

.status-error {
    background-color: #ffe6e6;
    border: 1px solid #ffcccc;
    color: #cc0000;
}

.status-loading {
    background-color: #e6f3ff;
    border: 1px solid #b3d9ff;
    color: #0066cc;
}

/* No Results Message */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

/* Enhanced Table Accessibility */
.results-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Price Level Display (if you add this feature later) */
.price-level {
    color: #28a745;
    font-weight: 600;
}

/* Business Hours Display (if you add this feature later) */
.business-hours {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Contact Info Styling (if you add this feature later) */
.contact-info {
    font-size: 12px;
    color: #007bff;
}

.contact-info a {
    color: inherit;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}





.search-results {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.status-message {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  display: none;
}

.status-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.music-lesson {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.music-lesson:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.music-lesson h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.3em;
}

.music-lesson .address {
  color: #666;
  margin: 8px 0;
  font-size: 0.95em;
}

.music-lesson .rating {
  color: #ff9800;
  font-weight: bold;
  margin: 8px 0;
}

.music-lesson .phone {
  color: #3b82f6;
  margin: 8px 0;
  font-weight: 500;
}

.results-header {
  text-align: center;
  margin: 30px 0 20px 0;
  color: #2c3e50;
}

#searchButton:disabled {
  background: #ccc;
  cursor: not-allowed;
}




/* ====================================
   On-Demand Details Loading Styles
   ==================================== */

/* Container for progressive details */
.details-area {
  margin-top: 12px;
  min-height: 40px;
  transition: all 0.3s ease;
}

/* More Info button styling */
.more-info-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
}

.more-info-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a72e8 0%, #6b4299 100%);
}

.more-info-btn:active {
  transform: translateY(0);
}

/* Button text styling */
.btn-text {
  font-weight: 600;
  font-size: 14px;
}

.btn-subtext {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
}

/* Loading state */
.loading-details {
  padding: 12px;
  text-align: center;
  color: #666;
  font-style: italic;
  background: #f8f9fa;
  border-radius: 8px;
}

.spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
  font-style: normal;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Contact details container */
.contact-details {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  animation: fadeIn 0.3s ease;
}

/* Fade in animation for revealed details */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Detail links (phone/website) */
.detail-link {
  display: inline-block;
  margin: 6px 12px 6px 0;
  padding: 8px 14px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Phone link hover state */
.phone-link:hover {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Website link hover state */
.website-link:hover {
  background: #2196F3;
  color: white;
  border-color: #2196F3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* No data available */
.no-data {
  color: #999;
  font-size: 13px;
  font-style: italic;
  display: inline-block;
  margin: 6px 12px 6px 0;
  padding: 8px 0;
}

/* Error message */
.error-message {
  color: #d32f2f;
  padding: 12px;
  text-align: center;
  background: #ffebee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Retry button */
.retry-btn {
  padding: 6px 12px;
  background: white;
  border: 1px solid #d32f2f;
  border-radius: 4px;
  color: #d32f2f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  background: #d32f2f;
  color: white;
}


/* SOLUTION 2: Use flexbox (more modern approach) */
.hero .google-attribution {
  display: flex;                  /* Use flexbox */
  justify-content: flex-end;      /* Align content to right */
  max-width: 720px;               /* Match your search bar width */
  margin: 2px auto 0 auto;        /* Center container, add top margin */
  padding-right: 20px;            /* Space from edge */
}

/* Keep your existing image styles */
.google-attribution img {
  height: 15px;              /* small lockup size */
  display: inline-block;     /* change from 'block' to 'inline-block' for text-align to work */
}


/**
 * Base styling for PNG images inside feature icon containers
 * - Matches existing SVG icon dimensions (48x48 desktop)
 * - Uses object-fit to maintain aspect ratio
 * - Enables crisp rendering for scaled images
 */
.feature .icon img {
  width: 48px;                                /* Match desktop SVG size */
  height: 48px;                               /* Match desktop SVG size */
  display: block;                             /* Remove inline spacing */
  object-fit: contain;                        /* Maintain aspect ratio, no cropping */
  image-rendering: -webkit-optimize-contrast; /* Sharp scaling in WebKit browsers */
  image-rendering: crisp-edges;               /* Sharp scaling in Firefox */
}



/**
 * Search field container
 * - Wraps the input element
 * - Position relative allows for icon positioning if needed
 */
.search-field {
  position: relative;           /* Needed for icon positioning */
  width: 100%;                  /* Full width of parent container */
}



/**
 * Search button base styles
 * - Works for both desktop and mobile
 * - Mobile overrides will adjust sizing
 */
.search button {
  padding: 14px 20px;           /* Comfortable desktop padding */
  background: #113cfc;          /* Brand blue background */
  color: #fff;                  /* White text */
  border: 1px solid transparent; /* Prevents layout shift */
  border-radius: 12px;          /* Rounded corners */
  font-weight: 700;             /* Bold text */
  cursor: pointer;              /* Hand cursor on hover */
  font-size: 16px;              /* Prevents iOS auto-zoom */
  box-sizing: border-box;       /* Include padding in width calculation */
  margin: 0;                    /* Remove browser defaults */
  min-height: 44px;             /* Minimum touch target (iOS/Android standard) */
}


/**
 * Search container - Desktop layout (default)
 * - Horizontal flex layout
 * - Centered on page with max-width constraint
 */
.search {
  width: 100%;                  /* Full width of parent */
  display: flex;                /* Flexbox layout */
  flex-direction: row;          /* Horizontal layout (desktop) */
  gap: 10px;                    /* Space between input and button */
  align-items: center;          /* Center items vertically */
  max-width: 720px;             /* Constrain width on desktop */
  margin: 0 auto;               /* Center on page */
}

/**
 * Search input base styles
 * - Full width within search-field container
 * - Comfortable padding for desktop and mobile
 */
.search input {
  width: 100%;                  /* Fill search-field container */
  padding: 14px 14px 14px 14px; /* Consistent padding all sides */
  font-size: 16px;              /* Prevents iOS auto-zoom on focus */
  border: 1px solid #203A59;    /* Light gray border */
  border-radius: 12px;          /* Rounded corners */
  background: #f9fafb;          /* Very light gray background */
  box-sizing: border-box;       /* Include padding in width calculation */
  margin: 0;                    /* Remove browser defaults */
  height: 60px;
}

/**
 * Search input focus state
 * - Blue outline when focused
 */
.search input:focus {
  outline: none;
  border-color: #203A59;      /* Brand blue border */
  box-shadow: 0 0 0 3px rgba(32, 58, 89, 0.15); /* Subtle glow */
}





/* FIREBASE AUTH CSS */
/* Override FirebaseUI Next button */
.firebaseui-id-submit.mdl-button {
  background-color: #FF8862 !important; /* your orange */
  color: #fff !important;              /* white text */
  border-radius: 6px !important;       /* rounded corners */
  padding: 0.5rem 1rem !important;     /* spacing */
  font-size: 1rem !important;
  text-align: center !important;
  display: inline-block !important;
}

.firebaseui-id-submit {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
    /* Fix vertical alignment issues */
  line-height: normal !important;
  padding: 0.5rem 1rem !important;   /* make consistent with your other buttons */
  height: auto !important;           /* let content dictate height */
  min-height: 40px !important;       /* force enough space for centering */
  font-size: 1rem !important;        /* keep text sizing consistent */
}


/* ═══════════════════════════════════════════════════════════════
   INSTRUCTOR VERIFICATION BADGES - WORKING VERSION
   Replace your existing badge section (around line 1230-1330) with this
   ═══════════════════════════════════════════════════════════════ */

/**
 * Badge wrapper container - positions in top-right corner
 * This needs the parent (.music-lesson) to have position: relative
 */
.badge-wrapper {
  position: absolute;          /* Position relative to .music-lesson */
  right: 10px;                 /* 10px from right edge */
  top: 10px;                   /* 10px from top edge */
  z-index: 10;                 /* Stay above other content */
  line-height: 1;
  background: transparent !important;  /* ← ADD THIS LINE TOO */
}

/**
 * Badge image styling - ENLARGED & ALWAYS VISIBLE
 * 
 * Changes from original:
 * - Size increased from 48px to 56px (desktop)
 * - Added drop shadow for depth
 * - Explicit visibility rules
 * - Enhanced hover effect
 */
.instructor-badge {
  display: block !important;              /* Always visible */
  width: 56px;                            /* ENLARGED from 48px */
  height: 56px;                           /* ENLARGED from 48px */
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));  /* NEW: Shadow */
  opacity: 1 !important;                  /* Force visible */
  visibility: visible !important;         /* Force visible */
  background: transparent !important;
}

/**
 * Hover effect - scales badge larger
 * OLD: scale(1.1)
 * NEW: scale(1.15) - more pronounced
 */
.instructor-badge:hover {
  transform: scale(1.15);                 /* ENHANCED from 1.1 */
  cursor: help;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));  /* Enhanced shadow */
}

/**
 * CRITICAL: Parent container must have position: relative
 * This makes the badge position relative to each search result card
 */
.music-lesson {
  position: relative;          /* REQUIRED for badge positioning */
}

/**
 * Optional: Add padding to top-right for badge space
 * Only if badge overlaps with content
 */
.music-lesson h3 {
  padding-right: 70px;         /* Space for badge next to title */
}

/**
 * Mobile responsive - 40px on tablets/phones
 */
@media (max-width: 768px) {
  .instructor-badge {
    width: 40px;               /* Smaller on mobile */
    height: 40px;
  }
  
  .badge-wrapper {
    right: 8px;                /* Closer to edge on mobile */
    top: 8px;
  }
  
  .music-lesson h3 {
    padding-right: 55px;       /* Less padding on mobile */
  }
}

/**
 * Very small mobile devices - 36px
 */
@media (max-width: 480px) {
  .instructor-badge {
    width: 36px;               /* Even smaller on tiny screens */
    height: 36px;
  }
  
  .badge-wrapper {
    right: 6px;
    top: 6px;
  }
  
  .music-lesson h3 {
    padding-right: 45px;
  }
}

/**
 * Print styles - ensure badge prints in color
 */
@media print {
  .instructor-badge {
    filter: grayscale(0) !important;
  }
}

/* END OF BADGE SECTION */


/* ============================================================================
   SEARCH BUTTON IMAGE STYLING
   Updated: November 7, 2025
   Purpose: Style image-based search button with loading states
   Breaking Change: Replaces text-based button styling
   ============================================================================ */

/**
 * Image-based search button container
 * - Maintains existing button dimensions and behavior
 * - Padding adjusted for image content
 * - Preserves all hover and focus states
 */
.search button#searchButton {
  padding: 8px 16px;               /* Reduced padding for image content */
  background: transparent;         /* Remove background to show image */
  border: none;                    /* Remove border for clean image display */
  cursor: pointer;                 /* Hand cursor on hover */
  transition: all 0.3s ease;       /* Smooth transitions */
  min-height: 60px;                /* Maintain touch target size */
  height: 60px;  
  display: flex;                   /* Flexbox for image centering */
  align-items: center;             /* Center image vertically */
  border-radius: 12px; 
  justify-content: center;         /* Center image horizontally */
}

/**
 * Search button image styling
 * - Maintains aspect ratio of original image
 * - Responsive sizing for different screens
 * - Smooth hover animation
 */
.search-button-image {
  width: auto;                     /* Maintain aspect ratio */
  height: 96px;                    /* Fixed height for consistency */
  max-width: 240px;                /* Prevent oversizing on large screens */
  display: block;                  /* Remove inline spacing */
  transition: transform 0.2s ease, /* Smooth hover animation */
              opacity 0.3s ease;   /* Loading state animation */
}

/**
 * Hover state for search button
 * - Slight scale increase for visual feedback
 * - Maintains button functionality during hover
 */
.search button#searchButton:hover {
  transform: translateY(-2px);     /* Lift button on hover */
}

.search button#searchButton:hover .search-button-image {
  transform: scale(1.05);          /* Slightly enlarge image */
}

/**
 * Active/clicked state
 * - Provides visual feedback when button is clicked
 */
.search button#searchButton:active {
  transform: translateY(0);        /* Reset lift on click */
}

/**
 * Focus state for keyboard navigation
 * - Ensures button is visible when navigating with keyboard
 * - WCAG 2.1 compliance for accessibility
 */
.search button#searchButton:focus {
  outline: 3px solid #113cfc;      /* Brand blue outline */
  outline-offset: 2px;             /* Space between button and outline */
}

/**
 * Loading state for search button
 * - Visual feedback during search operation
 * - Replaces text-based "Searching..." indicator
 */
.search button#searchButton.loading {
  cursor: wait;                    /* Show wait cursor during loading */
  pointer-events: none;            /* Prevent clicks during loading */
}

.search button#searchButton.loading .search-button-image {
  opacity: 0.5;                    /* Dim image during loading */
  animation: pulse 1.5s ease-in-out infinite; /* Pulsing animation */
}

/**
 * Pulsing animation for loading state
 * - Subtle opacity change to indicate activity
 * - Loops infinitely during search
 */
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/**
 * Disabled state
 * - Prevents interaction when button is disabled
 * - Visual feedback that button is not clickable
 */
.search button#searchButton:disabled {
  opacity: 0.6;                    /* Dim button when disabled */
  cursor: not-allowed;             /* Show not-allowed cursor */
  pointer-events: none;            /* Prevent any interaction */
}

.search button#searchButton:disabled:hover {
  transform: none;                 /* No hover effect when disabled */
}

/* ============================================================================
   MOBILE RESPONSIVE STYLES
   Adjust button sizing for smaller screens
   ============================================================================ */

/**
 * Tablet breakpoint (1024px and below)
 * - Maintain full-width button layout from existing mobile styles
 */
@media (max-width: 1024px) {
  .search button#searchButton {
    width: 100%;                   /* Full width on tablets */
    padding: 10px 16px;            /* Slightly more padding for touch */
  }
  
  .search-button-image {
    height: 80px;                  /* Slightly smaller on tablets */
  }
}

/**
 * Mobile breakpoint (768px and below)
 * - Optimize for phone screens
 */
@media (max-width: 768px) {
  .search button#searchButton {
    padding: 8px 14px;             /* Compact padding for phones */
    min-height: 48px;              /* Maintain touch target */
  }
  
  .search-button-image {
    height: 64px;                  /* Smaller image on phones */
    max-width: 160px;              /* Prevent overflow */
  }
}

/**
 * Small phone breakpoint (480px and below)
 * - Maximum optimization for tiny screens
 */
@media (max-width: 480px) {
  .search button#searchButton {
    padding: 6px 12px;             /* Minimal padding */
    min-height: 52px;              /* Maintain minimum touch target */
  }
  
  .search-button-image {
    height: 42px;                  /* Compact image for small screens */
    max-width: 130px;               /* Prevent overflow on small screens */
  }
}

/* ============================================================================
   PRINT STYLES
   Ensure button appears correctly in printed documents
   ============================================================================ */

@media print {
  .search button#searchButton {
    border: 1px solid #ccc;        /* Add border for print visibility */
    padding: 5px 10px;             /* Compact for print */
  }
  
  .search-button-image {
    height: 32px;                  /* Smaller for print */
    filter: none;                  /* Ensure image prints correctly */
  }
}