/* Velvet Quarters | style.css 
   Design: Modern dreamy "soft pastel" carsharing theme 
   Author: AI Senior UI Designer - Soft Pastel System
----------------------------------------------------------
 ===================================================================
 1. CSS RESET & NORMALIZE
 =================================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body { background: #F5FBFF; color: #26293D; font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem; line-height: 1.7; }
    img, video { max-width: 100%; height: auto; display: block; }
    ul, ol { list-style: none; margin: 0; padding: 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 12px 8px; }
    a { color: inherit; text-decoration: none; transition: color 0.2s; }
    button, [type="button"], [type="submit"] { font-family: inherit; cursor: pointer; border: none; background: none; outline: none; }
    h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700; color: #26293D; }
    h1 { font-size: 2.25rem; line-height: 1.15; margin-bottom: 16px; }
    h2 { font-size: 1.7rem; margin-bottom: 14px; }
    h3 { font-size: 1.25rem; margin-bottom: 8px; }

/* 2. COLORS used in theme - all soft pastel (brand+/expanded palette) */
:root {
  --primary: #26293D;
  --secondary: #65D0C5;
  --accent: #F5EDED;
  --pastel-blue: #A6E9F7;
  --pastel-mint: #C1F9DF;
  --pastel-lavender: #EAE7FF;
  --pastel-pink: #FED6E3;
  --pastel-yellow: #FFF8E1;
  --gray-light: #F5FBFF;
  --gray: #E5E7EB;
  --text-light: #fff;
  --text-dark: #26293D;
  --shadow-soft: 0 6px 24px 0 rgba(32,40,69,0.06);
  --shadow-card: 0 3px 18px 0 rgba(46,72,120,0.10);
}

/* 3. CONTAINER */
.container {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
}

/* 4. GENERAL FLEX LAYOUTS - See critical spacing/alignment rules */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.features, .fleet > .content-wrapper > ul, .services > .content-wrapper > ul,
.services-overview > .content-wrapper > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--pastel-mint); border-radius: 24px; box-shadow: var(--shadow-soft); }

/* 5. STRUCTURE - Header, Nav, Main, Section, Footer */
header { background: var(--gray-light); box-shadow: 0 2px 10px 0 rgba(123,173,175,0.071); position: relative; z-index: 30; }
.main-nav {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    gap: 26px;
}
.main-nav > a img { height: 38px; width: auto; }
.main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.main-nav li { margin-bottom: 0; }
.main-nav li a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--primary);
    opacity: 0.90;
    letter-spacing: 0.14em;
    transition: color 0.18s, opacity 0.14s;
    padding: 8px 11px;
    border-radius: 10px;
}
.main-nav li a:hover, .main-nav li a:focus {
    color: var(--secondary);
    opacity: 1;
    background: var(--accent);
    text-decoration: none;
}

footer {
    background: var(--pastel-lavender);
    border-top: 1px solid var(--gray);
    margin-top: 60px;
    padding-bottom: 30px;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px;
    margin-bottom: 14px;
    font-size: 0.98rem;
}
.footer-nav a {
    color: var(--primary); opacity: 0.85; transition: color .18s;
    text-decoration: underline dotted 1px var(--secondary);
}
.footer-nav a:hover, .footer-nav a:focus { color: var(--secondary); opacity: 1; text-underline-offset: 5px; }
.contact-info { margin-bottom: 18px; color: var(--primary); opacity: 0.90; }
.contact-info strong { font-weight: 700; color: var(--secondary); }

.copyrigh  t {
    color: var(--primary);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    opacity: 0.55;
    margin-top: 10px;
}

/* 6. HERO & CTAs */
.hero, .cta, .success, .callout, .registration-form {
    margin-bottom: 60px;
    padding: 40px 20px;
    border-radius: 32px;
    background: linear-gradient(120deg, var(--pastel-blue) 45%, var(--pastel-pink) 130%); /* dreamy pastel fade */
    box-shadow: var(--shadow-soft);
}
.cta {
    background: linear-gradient(100deg, var(--pastel-mint) 60%, var(--pastel-pink) 100%);
    text-align: center;
}
.cta h2, .cta p, .cta a { color: var(--primary); }
.hero h1, .hero p { color: var(--primary); }

.success {
    background: linear-gradient(120deg, var(--pastel-mint) 40%, var(--pastel-yellow) 110%);
    text-align: center;
}

.callout {
    background: var(--pastel-yellow);
    color: var(--primary);
    font-size: 1.1rem;
    border: 2px solid var(--secondary);
    border-radius: 18px;
    margin-bottom: 40px;
}

/* 7. SECTION SPACING & CONTAINERS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.services, .services-overview, .pricing, .about-story, .contact, .fleet, .faq, .steps, .team, .legal, .map {
    margin-bottom: 60px;
    padding: 40px 20px;
    background: var(--accent);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

/*************************
 8. CARD/ITEM STYLES
**************************/
.card {
    background: var(--gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 28px;
    margin-bottom: 20px;
    position: relative;
    transition: box-shadow .22s, transform .18s;
}
.card:hover, .card:focus {
    box-shadow: 0 8px 32px 0 rgba(74,128,125,0.15);
    transform: translateY(-3px) scale(1.01);
}
.card-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/*************************
 9. BUTTONS
**************************/
.btn, .main-nav > .btn, .mobile-nav a.btn {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    padding: 13px 37px;
    border-radius: 20px;
    box-shadow: 0 3px 16px 0 rgba(38,41,61,0.07);
    outline: none;
    border: none;
    font-size: 1.07rem;
    letter-spacing: 0.05em;
    margin-top: 10px;
    margin-bottom: 8px;
    min-width: 180px;
    display: inline-block;
    text-align: center;
    transition: background 0.18s, color 0.17s, box-shadow .18s, transform .17s;
}
.btn-primary {
    background: var(--secondary);
    color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: #20b3ac;
    color: var(--text-light);
    box-shadow: 0 6px 30px 0 rgba(56,194,204,0.19);
    transform: translateY(-1px) scale(1.03);
}
.btn-accent {
    background: var(--primary);
    color: var(--text-light) !important;
}
.btn-accent:hover, .btn-accent:focus {
    background: #393d5b;
    color: var(--secondary) !important;
    transform: translateY(-1.5px) scale(1.02);
}

/**********************************
 10. KEY FLEXBOX LAYOUTS for FLEX containers
***********************************/
/* Already applied above for .content-wrapper, .features, etc */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; margin-bottom: 20px; background:#E6FFFA; border: 1.5px solid var(--secondary); }

/*********************************
 11. TABLES: Pricing table in Ceník
***********************************/
.pricing table {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    margin-bottom: 30px;
    overflow: hidden;
    width: 100%;
    font-size: 1.05rem;
}
.pricing th {
    background: var(--pastel-blue);
    color: var(--primary);
    font-weight: 700;
    text-align: left;
}
.pricing tr:nth-child(even) { background: #FAFEFD; }
.pricing td, .pricing th {
    padding: 14px 10px;
    border-bottom: 1px solid #e5e7ea;
}
.pricing tr:last-child td { border-bottom: none; }

/***********************************
 12. TESTIMONIAL STYLES
***********************************/
.testimonials { background: var(--pastel-lavender); border-radius: 24px; box-shadow: var(--shadow-soft); margin-bottom: 60px; padding: 40px 20px; }
.testimonial-card p {
    color: var(--text-dark);
    font-size: 1.04rem;
    font-style: italic;
    margin-bottom: 8px;
}
.testimonial-card strong {
    color: var(--primary);
}
.testimonial-card span {
    font-size: 1rem;
    color: var(--secondary);
}

/***********************************
 13. FAQ, STEPS, ABOUT, ETC.
***********************************/
.faq dt {
    font-size: 1.09rem; font-weight: 700; color: var(--secondary); margin: 24px 0 6px 0;
}
.faq dd {
    margin-left: 0;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 1.01rem;
    opacity: 0.94;
}
.steps ol { display: flex; flex-wrap: wrap; gap: 22px; }
.steps li {
    background: var(--pastel-mint);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 22px 16px;
    flex: 1 1 275px;
    min-width: 220px;
    max-width: 330px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.steps li img {
    width: 52px; height: 52px; margin-bottom: 9px;
}
.fleet ul > li, .about-story ul > li, .team ul > li {
    margin-bottom: 18px;
    background: var(--pastel-blue);
    border-radius: 14px;
    padding: 13px 18px 10px 18px;
    box-shadow: var(--shadow-card);
    color: var(--primary);
    font-size: 1rem;
}
.fleet ul > li > h3, .about-story h3, .team h2 {
    color: var(--secondary);
    margin-bottom: 8px;
}

/***********************************
 14. LEGAL & REGISTRATION PAGES
************************************/
.legal {
    background: var(--accent);
    color: var(--primary);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 60px; padding: 40px 20px;
    font-size: 1.05rem;
}
.privacy-note {
    color: #539692;
    background: var(--pastel-mint);
    font-size: 0.99rem;
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 14px;
}

/***********************************
 15. SPACING & TYPOGRAPHY HIERARCHY
************************************/
.section, .hero, .cta, .services, .services-overview, .about-story, .fleet, .legal, .contact, .registration-form, .map, .testimonials {
    margin-bottom: 60px;
    padding: 40px 20px;
}
.content-wrapper { gap: 20px; }
.card-container, .content-grid { gap: 20px; }
.card { margin-bottom: 20px; }

/***********************************
 16. MOBILE MENU (hamburger)
************************************/
.mobile-menu-toggle {
    display: none;
    background: var(--secondary);
    color: var(--primary);
    font-size: 2rem;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    position: relative;
    z-index: 110;
    margin-left: 16px;
    margin-top: 4px;
    transition: background 0.18s, color 0.18s, box-shadow 0.17s;
}
.mobile-menu-toggle:active, .mobile-menu-toggle:focus-visible{ background: var(--primary); color: var(--secondary); }

.mobile-menu {
    position: fixed; left: 0; top: 0; bottom: 0; right: 0;
    background: rgba(245,253,250,0.98);
    z-index: 160;
    transform: translateX(-100vw);
    transition: transform 0.37s cubic-bezier(0.23, 0.84, 0.42, 1.03);
    padding: 0;
    display: flex; flex-direction: column; align-items: flex-start;
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-menu-close {
    background: var(--secondary);
    color: var(--primary);
    font-size: 2.2rem;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 16px;
    border: none;
    margin: 22px 0 0 22px;
    align-self: flex-start;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    z-index: 170;
}
.mobile-menu-close:focus-visible, .mobile-menu-close:active {
    background: var(--primary);
    color: var(--secondary);
}
.mobile-nav {
    display: flex; flex-direction: column;
    width: 100%;
    margin-top: 36px;
    align-items: flex-start;
    padding: 0 32px;
    gap: 20px;
}
.mobile-nav a {
    display: block;
    font-size: 1.18rem;
    color: var(--primary);
    padding: 15px 5px;
    width: 100%;
    border-radius: 12px;
    transition: background 0.15s, color 0.12s;
    background: none;
    font-weight: 600;
    margin-bottom: 2px;
}
.mobile-nav a.btn { background: var(--secondary); color: var(--primary); text-align: center; }
.mobile-nav a:hover, .mobile-nav a:focus {
    background: var(--pastel-lavender);
    color: var(--secondary);
}

/***********************************
 17. COOKIE BANNER & COOKIE MODAL
***********************************/
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, var(--pastel-mint) 40%, var(--pastel-yellow) 100%);
    color: var(--primary);
    box-shadow: 0 -6px 42px 0 rgba(38,41,61,0.11);
    z-index: 3500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 35px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    transition: transform 0.28s;
    font-size: 1rem;
}
.cookie-banner.hide { transform: translateY(120%); pointer-events: none; }
.cookie-banner .btn {
    margin: 0 7px 0 0;
    padding: 10px 22px;
    font-size: 1.00rem;
}
.cookie-banner .btn-accept {
    background: var(--secondary); color: var(--primary);
}
.cookie-banner .btn-reject {
    background: var(--primary); color: var(--accent);
}
.cookie-banner .btn-settings {
    background: var(--accent); color: var(--primary); border: 1.2px solid var(--secondary);
}
.cookie-banner .btn:hover, .cookie-banner .btn:focus {
    opacity: 0.88;
    box-shadow: 0 2px 9px 0 rgba(32,41,61,0.07);
}

.cookie-modal {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    z-index: 4000;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 9px 48px 0 rgba(80,172,206,0.14);
    min-width: 320px;
    max-width: 440px;
    width: 93vw;
    padding: 38px 28px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: popShow 0.22s 1;
}
@keyframes popShow {
    0% {opacity:0; transform: translate(-50%, -45%) scale(0.93);}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
.cookie-modal h2 { color: var(--primary); font-size: 1.3rem; margin-bottom: 6px; }
.cookie-categories {
    display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px;
}
.cookie-category {
    display: flex; align-items: center; gap: 13px; padding: 8px 0;
}
.cookie-category input[type="checkbox"] {
    accent-color: var(--secondary);
    width: 22px; height: 22px;
}
.cookie-category label { font-size: 1.02rem; color: var(--primary); }
.cookie-modal .btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 13px;
    margin-top: 15px;
}
.cookie-modal .btn {
    font-size: 1.01rem;
    min-width: 105px;
    padding: 9px 19px;
}
.cookie-modal .btn-close {
    position: absolute;
    top: 14px; right: 19px;
    font-size: 20px;
    background: none;
    color: var(--secondary);
}
.cookie-modal .btn-close:focus-visible, .cookie-modal .btn-close:active {
    color: var(--primary);
}
.cookie-modal-bg {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(74, 93, 113, 0.21);
    z-index: 3999;
    animation: fadeinbg .22s linear;
}
@keyframes fadeinbg { from {opacity: 0;} to {opacity: 1;} }

/***********************************
 18. FORMS (privacy note)
***********************************/
input, select, textarea {
    font-family: inherit;
    border-radius: 12px;
    border: 1.2px solid var(--gray);
    padding: 13px 15px;
    font-size: 1rem;
    margin-bottom: 12px;
    box-shadow: none;
    outline: none;
    background: var(--accent);
    transition: border 0.15s;
}
input:focus, textarea:focus, select:focus {
    border: 1.3px solid var(--secondary);
    background: #F2FDFC;
}
label { font-size: 1.01rem; }

/***********************************
 19. RESPONSIVE DESIGN (mobile first)
************************************/
@media (max-width: 1200px) {
    .container { max-width: 98vw; }
}
@media (max-width: 860px) {
    .main-nav ul { gap: 8px; }
    .main-nav { gap: 13px; }
    .container { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 768px) {
    body, html { font-size: 15px; }
    h1 { font-size: 1.78rem; }
    h2 { font-size: 1.29rem; }
    .main-nav ul, .main-nav > .btn { display: none !important; }
    .mobile-menu-toggle { display: block; }
    .main-nav { flex-wrap: wrap; }
    .section, .hero, .services, .features, .cta, .about-story, .testimonials, .pricing, .callout, .fleet, .contact, .registration-form, .legal, .map {
        padding: 28px 7px;
        margin-bottom: 38px;
    }
    .footer-nav { font-size: 0.97rem; }
    .footer-nav, .contact-info { flex-direction: column; gap: 5px; }
    .content-wrapper { gap: 12px; }
    .steps ol { flex-direction: column; gap: 10px; }
    .fleet > .content-wrapper > ul, .features, .services > .content-wrapper > ul, .services-overview > .content-wrapper > ul {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 520px) {
    body, html { font-size: 14px; }
    .cookie-banner { flex-direction: column; justify-content: center; align-items: flex-start; padding: 18px 10px; }
    .footer-nav, .contact-info { font-size: 0.94rem; }
}

/***********************************
 20. UTILITY CLASSES & ACCESSIBILITY
***********************************/
.sr-only { position: absolute; left: -1000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.text-center { text-align: center; }

/* Hide Mobile Menu overlay by default (relies on .open class from JS!) */
.mobile-menu { display: flex; pointer-events: none; }
.mobile-menu.open { pointer-events: all; }

/* Hide cookie modal bg unless active (should be managed by JS) */
.cookie-modal-bg { display: block; }

/* Subtle hover on table rows */
.pricing tbody tr:hover { background: #e7f8f5; }

/***********************************
 21. MICRO-ANIMATIONS
***********************************/
.btn, .btn-primary, .btn-accent {
    transition: background 0.18s, color 0.14s, box-shadow 0.14s, transform .14s;
}
.card, .steps li {
    transition: box-shadow 0.2s, transform .14s;
}
.card:hover, .steps li:hover {
    box-shadow: 0 8px 36px 0 rgba(38,41,61,0.09);
    transform: translateY(-3px) scale(1.01);
}

/***********************************
 22. COLORS & FONTS FALLBACKS
***********************************/
html { font-family: 'Open Sans', Arial, sans-serif; }
body { color: var(--primary); background: var(--gray-light); }

/***********************************
  END OF FILE
***********************************/