/* Pralnica Website - Speed Queen Koper */

:root {
    /* Colors - Speed Queen Identity */
    --color-primary: #F05A28;
    /* Speed Queen Orange */
    --color-primary-hover: #d14010;
    --color-secondary: #000000;
    /* Black */
    --color-text-main: #333333;
    --color-text-light: #666666;
    --color-bg: #FFFFFF;
    --color-bg-light: #F5F5F5;
    --color-border: #E0E0E0;

    /* Typography */
    --font-main: 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* Transitions */
    --transition-fast: 0.3s ease;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-bg);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utility Classes */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    font-size: 0.9rem;
}



.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-outline {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--color-secondary);
    color: white;
}

.text-primary {
    color: var(--color-primary);
}

.text-center {
    text-align: center;
}

.section-padding {
    padding: var(--spacing-xl) 0;
}

/* Header */
.site-header {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.logo img {
    height: 48px;
    /* Adjust based on header height */
    width: auto;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-secondary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

/* Language Selector */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
    margin-left: 16px;
    font-weight: 600;
    color: var(--color-text-light);
}

.lang-option {
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.lang-option:hover {
    opacity: 1;
    color: var(--color-primary);
}

.lang-option.active {
    opacity: 1;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
    transform: scale(1.1);
    /* Slight scaling effect */
}

/* Separator */
.lang-option:not(:last-child):after {
    content: "/";
    margin-left: 6px;
    color: #ccc;
    font-weight: 400;
    font-size: 0.8rem;
    /* Keep separator standard size */
    opacity: 0.5;
}

/* Hide separator on the active item if you want, or keep it? 
   If the active item is big, the slash next to it might look off if it scales.
   With transform: scale(1.1), the pseudo-element scales too.
   Let's disable scale transform and just use font-size to keep it cleaner?
   Actually font-size change might make layout jump. Transform is smoother but affects space.
   Let's stick to font-size but ensure vertical align.
*/
.lang-option.active {
    transform: none;
    font-size: 1.2rem;
    line-height: 1;
}

/* Hero Section */
/* Hero Section */
.hero {
    background-color: var(--color-bg-light);
    /* Placeholder fallback */
    height: 600px;
    /* Increased height for impact */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    padding: 40px;
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    /* High contrast overlay */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.hero p {
    font-size: 1.25rem;
    color: var(--color-text);
    /* Darker text for readability on white overlay */
    margin-bottom: var(--spacing-lg);
}

/* Features/Services Teaser */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: var(--spacing-xl);
}

.feature-card {
    background: white;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: center;
    transition: var(--transition-fast);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.feature-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.feature-card h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-secondary);
}

/* Footer */
.site-footer {
    background-color: var(--color-secondary);
    color: white;
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 48px;
}

.footer-column h4 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #ccc;
}

.footer-column ul li a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: #ccc;
    line-height: 1.4;
}

.footer-contact-item span {
    color: white;
}

/* Ensure phone link logic from JS is styled */
.footer-contact-item a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-contact-item a:hover {
    color: var(--color-primary);
}

/* Social Media Icons */
.social-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
    color: white;
    box-shadow: 0 4px 10px rgba(240, 90, 40, 0.4);
}

.social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    margin: auto;
    width: 50%;
    /* Desktop default */
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    background: white;
    display: flex;
    flex-direction: column;
}

.modal-image-container {
    position: relative;
    width: 100%;
    background: #000;
}

#modalImage {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

.modal-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 30, 80, 0.8);
    color: white;
    padding: 12px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}

.modal-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: white;
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-body {
    padding: 24px;
    text-align: center;
}

.modal-tip {
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
    margin-bottom: 16px;
    background: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
}

.modal-hint {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.5;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 1001;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--color-primary);
    text-decoration: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Feature card cursor indication */
.feature-card {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Modal Adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        /* Mobile width */
        margin: 0;
        border-radius: 8px;
    }

    #modalImage {
        max-height: 50vh;
    }
}

/* Instructions Styles */
.step-icon {
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.token-alert {
    background: #e6f7ff !important;
    /* Solid light blue */
    border: 1px solid #b3e0ff !important;
    /* Subtle border */
    position: relative;
    /* Removed animation for cleaner look or keep it? User didn't ask to remove, but 'box' implies static usually. Keeping it valid. */
}

/* Video Placeholder */
.video-placeholder {
    background: #000;
    height: 400px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.play-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    border: 2px solid white;
    transition: transform 0.3s;
}

.play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid white;
    margin-left: 5px;
    /* Visual centering adjustment */
}

.video-placeholder:hover .play-icon {
    transform: scale(1.1);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Lang Option Refinement */
.lang-option {
    cursor: pointer;
    transition: color 0.2s;
}

.lang-option:not(.active):hover {
    color: var(--color-primary);
    text-decoration: underline;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* Parking Info Box */
.parking-box {
    background: #fff3e0;
    border-left: 5px solid #ff9800;
    padding: 24px;
    border-radius: 4px;
    margin-top: 32px;
}

.parking-box h3 {
    color: #e65100;
    margin-bottom: 12px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.parking-box p {
    margin-bottom: 12px;
    color: #5d4037;
    line-height: 1.6;
}

.parking-warning {
    font-size: 0.9rem;
    color: #d84315;
    font-style: italic;
    margin-top: 8px;
    font-weight: 500;
}

/* FAQ Accordion */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 16px 0;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
    transition: color 0.3s;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform 0.3s ease;
    color: var(--color-primary);
}

.faq-question.active .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-content p {
    padding-bottom: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* --- About Page Redesign Styles --- */

.about-hero-section {
    padding: 80px 0;
    overflow: hidden;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 80px;
}

.split-content h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #333;
    /* Using a dark grey instead of var--color-text if undefined, but var exists */
    color: var(--color-text);
}

.split-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 24px;
    color: #444;
}

.split-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Hybrid Model Box ("Trust Builder") */
.hybrid-model-box {
    background: linear-gradient(135deg, #fff 0%, #fff9f5 100%);
    border-left: 5px solid var(--color-primary);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    margin-bottom: 80px;
}

.hybrid-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.hybrid-icon {
    font-size: 3rem;
    line-height: 1;
}

.hybrid-header h2 {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin: 0;
}

.hybrid-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

/* Tech Section */
.tech-section {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #f8f8f8;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 80px;
}

.tech-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tech-content h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: var(--color-text);
}

.tech-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Mission List Refinement */
.mission-list li {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid #f0f0f0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .split-image {
        order: -1;
        /* Image on top on mobile */
    }

    .tech-section {
        flex-direction: column;
        text-align: center;
    }
}

/* Hybrid Model Banner */
.hybrid-banner {
    background: #f9f9f9;
    padding: var(--spacing-xl) 0;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.hybrid-banner h2 {
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: 16px;
}

.hybrid-banner p {
    color: #555;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* B2B Section Home */
.b2b-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
}

.b2b-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .b2b-content {
        align-items: center;
        text-align: center;
    }

    .b2b-header {
        flex-direction: column;
        gap: 8px;
    }

    .b2b-border-container {
        border-left: none !important;
        border-top: 3px solid var(--color-primary);
        padding-top: 24px;
        padding-left: 0 !important;
    }
}

/* Responsive Header Text */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
        /* Reduced from 3.5rem */
    }
}