/* ==========================================================================
   Taxi Järfälla - Huvud-stilmall (style.css)
   Version: 3.7 - Korrekt footer-design
   ========================================================================== */

/* === GRUNDLÄGGANDE STIL & FÄRGVARIABLER === */
:root {
    --primary-color: #005a9c;
    --admin-color: #d9534f;
    --dark-bg: #000000;
    --yellow-color: #FFD700;
    --light-bg: #f4f4f9;
    --white-bg: #ffffff;
    --text-dark: #333;
    --text-light: #555;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.container {
    padding: 10px;
    max-width: 1400px;
    margin: auto;
}

/* === KUNDSIDA: HEADER, BANNER === */
.site-header {
    background-color: var(--dark-bg);
    padding: 25px 30px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logo { 
    font-size: 36px; 
    font-weight: bold; 
}
.logo-taxi { color: var(--yellow-color); }
.logo-jarfalla { color: var(--white-bg); }
.ring-nu-btn { background-color: var(--yellow-color); color: var(--dark-bg); padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; }

.main-banner { 
    padding: 20px 0;
    position: relative; 
    overflow: hidden; 
    background-color: #2c2c2c; 
}
.banner-content-wrapper { 
    max-width: 768px; 
    margin: 0 auto; 
    color: #2c2c2c; 
    text-align: center; 
    padding: 15px 20px;
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    background: linear-gradient(270deg, #f9a825, #fdd835, #ffb300); 
    background-size: 400% 400%; 
    animation: gradientAnimation 15s ease infinite; 
    position: relative; 
    z-index: 2; 
}
.banner-content-wrapper > * { 
    font-size: 1.5em;
    font-weight: 700; 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
    animation: pulseText 5s ease-in-out infinite; 
}
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pulseText { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.taxi-animation-container { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 1; }
.taxi { position: absolute; font-size: 36px; animation: drive 15s linear infinite; }
@keyframes drive { from { transform: translateX(100%); } to { transform: translateX(-200px); } }
.taxi:nth-child(1) { animation-duration: 12s; animation-delay: 0s; bottom: 15%; font-size: 30px; }
.taxi:nth-child(2) { animation-duration: 15s; animation-delay: 3s; bottom: 50%; font-size: 40px; }
.taxi:nth-child(3) { animation-duration: 10s; animation-delay: 8s; bottom: 80%; font-size: 24px; }
.taxi:nth-child(4) { animation-duration: 18s; animation-delay: 11s; bottom: 35%; font-size: 32px; }

/* KORREKT FOOTER-DESIGN MED TRE BANNERS */
.site-footer {
    background-color: var(--dark-bg);
    color: var(--light-bg);
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 50px;
}
.footer-banner {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--yellow-color);
}
.footer-banner h3 {
    color: var(--yellow-color);
    margin-top: 0;
    border-bottom: 1px solid var(--yellow-color);
    padding-bottom: 10px;
}
.copyright-notice {
    text-align: center;
    color: #888;
    font-size: 0.9em;
    padding-top: 20px;
    border-top: 1px solid #444;
    margin-top: 20px;
}


/* === GEMENSAM STIL FÖR PANELER === */
.panel-header { display: flex; justify-content: space-between; align-items: center; background: var(--white-bg); padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
.panel-header h1 { margin: 0; font-size: 22px; }
.logout-btn { background-color: var(--danger-color); color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; font-weight: 600; }
.tab-nav { display: flex; flex-wrap: wrap; border-bottom: 2px solid #ccc; margin-bottom: 20px; }
.tab-link { padding: 10px 15px; cursor: pointer; background: #e9ecef; border: 1px solid #ccc; border-bottom: none; margin-right: 5px; border-radius: 8px 8px 0 0; font-weight: 600; }
.tab-link.active { background: var(--white-bg); border-bottom: 2px solid var(--white-bg); position: relative; top: 2px; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.section-box { background: var(--white-bg); padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 25px; }

/* === FORMULÄRSTILAR === */
.booking-form-container { max-width: 768px; margin: 40px auto 0; }
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
label { font-size: 17px; font-weight: 600; margin-bottom: 3px; display: block; }
input, textarea, select { font-size: 18px; padding: 14px; width: 100%; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 90, 156, 0.3); outline: none; }
button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; color: white; font-weight: bold; font-size: 16px; }
.btn-green { background-color: var(--success-color); }

/* === FÖRARPORTAL: KORT-DESIGN === */
.ride-list { display: flex; flex-direction: column; gap: 1rem; }
.ride-card { background: var(--white-bg); border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ride-card-dark { background: #2c2c2c; border-color: #444; color: var(--light-bg); }
.ride-card-section { border-bottom: 1px solid #f0f0f0; padding-bottom: 1rem; }
.ride-card-dark .ride-card-section { border-bottom-color: #444; }
.ride-card-section:last-child { border-bottom: none; padding-bottom: 0; }
.ride-card-section strong { font-weight: 400; color: #555; display: block; font-size: 0.9em; margin-bottom: 0.25rem; }
.ride-card-dark .ride-card-section strong { color: #aaa; }
.ride-card-main-info { font-size: 1.2em; font-weight: 600; color: #000; }
.ride-card-dark .ride-card-main-info { color: var(--white-bg); }
.customer-main-info { font-size: 1.4em; font-weight: 700; color: var(--primary-color); }
.ride-card-dark .customer-main-info { color: var(--yellow-color); }
.ride-card-section.actions { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-action { width: 100%; padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1em; }
.btn-success { background-color: var(--success-color); color: white; }
.btn-warning { background-color: var(--warning-color); color: var(--text-dark); }
.complete-ride-form { display: none; margin-top: 10px; gap: 5px; }
.complete-ride-form input { max-width: 100px; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.contact-list li:last-child { border-bottom: none; }

/* === MOBILANPASSNING === */
.mobile-sticky-footer { display: none; }
@media (max-width: 768px) {
    .banner-content-wrapper > * { font-size: 1.8em; }
    .desktop-submit-btn { display: none; }
    .mobile-sticky-footer { display: block; position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.9); padding: 15px; box-shadow: 0 -2px 10px rgba(0,0,0,0.15); backdrop-filter: blur(5px); z-index: 1000; }
    main.container { padding-bottom: 100px; }
    .form-row { flex-direction: column; gap: 0; }
    .panel-header, .site-header { flex-direction: column; gap: 15px; }
    .logo { font-size: 28px; }
}

/* Desktop-anpassningar */
@media (min-width: 769px) {
    .site-footer { grid-template-columns: repeat(3, 1fr); }
    .ride-card { flex-direction: row; align-items: center; }
    .ride-card-section { flex: 1 1 0; border-bottom: none; border-right: 1px solid #f0f0f0; padding-bottom: 0; padding-right: 1rem; }
    .ride-card-dark .ride-card-section { border-right-color: #444; }
    .ride-card-section:last-child { border-right: none; padding-right: 0; }
    .ride-card-section.actions { flex-grow: 0; flex-basis: 150px; text-align: right; }
}