/* ================================================================
   HLAVNÍ OBSAH STRÁNKY
   ================================================================
   VARIANTA A - PRAVÁ STRANA S FORMULÁŘOVÝM BOXEM
   ---------------------------------------------------------------
   Levá strana:
   <section class="bs-content">
       ...
   </section>

   Pravá strana:
   <section class="bs-form-area">
       <div class="bs-form-box">
           ...
       </div>
   </section>

   ---------------------------------------------------------------
   VARIANTA B - PRAVÁ STRANA BEZ FORMULÁŘOVÉHO BOXU
   ---------------------------------------------------------------
   Levá strana:
   <section class="bs-content">
       ...
   </section>

   Pravá strana:
   <section class="bs-content bs-content-right">
       ...
   </section>

   Pravá strana v této variantě používá stejnou typografii,
   odsazení a obsahová pravidla jako levá strana.

   ---------------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------------
   .bs-layout = 50% / 50%

   ---------------------------------------------------------------
   MOBIL
   ---------------------------------------------------------------
   .bs-layout = 100% / 100%
   ================================================================ */
:root {
    --navy:#0A3D62; /* Tmavě modrá - hlavní barva */
    --navy-dark:#07304d; /* Tmavě modrá - tmavá varianta */
    --orange:#ff4500; /* Oranžová - hlavní akcent */
    --orange-soft:#fff0ea; /* Světle oranžová - světle oranžové pozadí */
    --text:#26343f; /* Tmavě šedá - hlavní text */
    --muted:#68737d; /* Šedá - sekundární text */
    --border:#d9e0e5; /* Světle šedá - standardní rámeček */
    --light:#e8edf1; /* Velmi světle šedá - oddělovače */
    --bg:#f6f8fa; /* Velmi světle šedá - pozadí stránky */
    --white:#ffffff; /* Bílá */
    --font:'Source Sans Pro',sans-serif; /* Source Sans Pro - hlavní font */
    --radius:5px; /* Standardní radius */
}
*,*::before,*::after {
    box-sizing:border-box;
}
html {
    margin:0;
    padding:0;
    font-size:16px;
    scroll-behavior:smooth;
}
body {
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;
    border-radius:0;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:1rem;
    font-weight:400;
    line-height:1;
    -webkit-font-smoothing:antialiased;
}
a {
    color:var(--navy);
    text-decoration:none;
}
a:hover {
    color:var(--orange);
}
p,ul,ol,li,h1,h2,h3,h4,h5,h6 {
    margin:0;
    padding:0;
}
p,ul,ol,li {
    line-height:1;
}
h1,h2,h3,h4,h5,h6 {
    margin:0 0 10px;
    padding:0;
    color:var(--navy);
    font-family:var(--font);
    line-height:1.1;
    letter-spacing:-.025em;
}
h1 {
    font-size:2.875rem;
    font-weight:900;
}
h2 {
    font-size:2rem;
    font-weight:400;
}
h3 {
    font-size:1.5rem;
    font-weight:300;
}
h4 {
    font-size:1.25rem;
    font-weight:300;
}
h5 {
    font-size:1.1rem;
    font-weight:300;
}
h6 {
    font-size:1rem;
    font-weight:300;
}
p {
    margin:0 0 5px;
    line-height:1;
}
hr {
    margin:20px 0;
    padding:0;
    border:0;
    border-top:1px solid var(--border);
}
.bs-header {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    background:var(--bg);
    flex-shrink:0;
}
.bs-header-inner {
    width:100%;
    height:80px;
    margin:0;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.bs-logo {
    display:flex;
    align-items:center;
    height:80px;
    margin:0;
    padding:0;
    flex:0 0 auto;
}
.bs-logo img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:80px;
    margin:0;
    padding:0;
}
.bs-nav {
    width:auto;
    max-width:100%;
    height:80px;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:0;
    background:var(--bg);
}
.bs-languages {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    margin:0;
    padding:0;
}
.bs-language {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    margin:0;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    color:var(--navy);
    font-family:var(--font);
    font-size:.85rem;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
    transition:color .18s ease,border-color .18s ease;
}
.bs-language:hover {
    border:1px solid var(--orange);
    border-radius:5px;
    color:var(--orange);
}
.bs-language.active {
    border:1px solid var(--orange);
    border-radius:5px;
    color:var(--orange);
}
.bs-page {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:20px;
    flex:1 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.bs-layout {
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
}
.bs-content,
.bs-content-right {
    width:100%;
    min-width:0;
    margin:0;
    padding:10px;
}
.bs-form-area {
    width:100%;
    min-width:0;
    margin:0;
    padding:10px;
}
.bs-form-box {
    width:100%;
    margin:0;
    padding:25px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--white);
    box-shadow:0 12px 30px rgba(10,61,98,.06);
}
.bs-form-box h2 {
    font-weight:500;
}
.bs-form {
    width:100%;
    margin:0;
    padding:0;
}
.bs-text-orange {
    color:var(--orange);
}
.bs-lead {
    max-width:520px;
    margin:0 0 5px;
    padding:0;
    color:var(--muted);
    font-size:1.1rem;
    font-weight:400;
    line-height:1;
}
.bs-feature-list {
    margin:0 0 15px;
    padding:0;
    list-style:none;
}
.bs-feature-list li {
    display:flex;
    align-items:center;
    gap:0;
    margin:0 0 5px;
    padding:0;
    color:var(--navy);
    line-height:1;
}
.bs-feature-list li:last-child {
    margin-bottom:0;
}
.bs-feature-list i {
    width:18px;
    margin-right:6px;
    color:var(--orange);
    text-align:left;
    flex:0 0 18px;
}
.bs-number-list {
    margin:0 0 10px;
    padding:0 0 0 18px;
    list-style-position:outside;
}
.bs-number-list li {
    margin:0 0 5px;
    padding-left:5px;
    line-height:1;
}
.bs-note {
    margin:24px 0;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--muted);
    line-height:1;
}
.bs-form-subtitle {
    margin:0 0 24px;
    padding:0;
    color:var(--muted);
    line-height:1;
}
.bs-form-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
.bs-field {
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
}
.bs-field.full {
    grid-column:auto;
}
.bs-field label {
    display:block;
    margin:0 0 6px;
    padding:0;
    color:var(--navy);
    font-size:.9rem;
    font-weight:600;
    line-height:1;
}
.bs-field input,.bs-field select,.bs-field textarea {
    width:100%;
    min-height:42px;
    margin:0;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:0;
    background:transparent;
    color:var(--text);
    font-family:var(--font);
    font-size:1rem;
    font-weight:400;
    line-height:1;
    transition:border-color .18s ease,box-shadow .18s ease;
}
.bs-field textarea {
    min-height:110px;
    resize:vertical;
}
.bs-field input::placeholder,.bs-field textarea::placeholder {
    color:#929ba2;
}
.bs-field input:focus,.bs-field select:focus,.bs-field textarea:focus {
    border-color:var(--navy);
    box-shadow:0 0 0 2px rgba(10,61,98,.08);
}
.bs-actions {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:22px 0 0;
    padding:0;
}
.bs-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:36px;
    margin:0;
    padding:8px 14px;
    border:1px solid transparent;
    border-radius:10px;
    font-family:var(--font);
    font-size:.9rem;
    font-weight:400;
    line-height:1;
    letter-spacing:.5px;
    text-transform:uppercase;
    cursor:pointer;
    transition:filter .18s ease,background .18s ease,color .18s ease;
}
.bs-btn-navy {
    border-color:var(--navy);
    background:var(--navy);
    color:var(--white);
}
.bs-btn-orange {
    border-color:var(--orange);
    background:var(--orange);
    color:var(--white);
}
.bs-btn-outline {
    border-color:var(--navy);
    background:transparent;
    color:var(--navy);
}
.bs-btn:hover {
    filter:brightness(.94);
}
.bs-footer {
    width:100%;
    max-width:1000px;
    margin:40px auto 0;
    padding:0 20px 25px;
    flex-shrink:0;
    background:var(--bg);
    color:var(--muted);
}
.bs-footer-inner {
    width:100%;
    margin:0;
    padding:0;
}
.bs-footer-grid {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:end;
    margin:0;
    padding:0;
}
.bs-footer-column {
    min-width:0;
    margin:0;
    padding:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.bs-footer-logo-column {
    padding-left:0;
}
.bs-footer-logo {
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    height: 25px;
    margin:0;
    padding:0;
}
.bs-footer-logo img {
    display:block;
    width:auto;
    height: 30px;
    max-width:100%;
    margin:0;
    padding:0;
}
.bs-footer-contact {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:6px;
    text-align:left;
}
.bs-footer-contact a {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    padding:0;
    color:var(--muted);
    font-size:1rem;
    font-weight:500;
    line-height:1;
    transition:color .18s ease;
}
.bs-footer-contact a:hover {
    color:var(--orange);
}
.bs-footer-contact i {
    width:18px;
    color:var(--muted);
    text-align:center;
}
.bs-footer-social {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:6px;
}
.bs-footer-title {
    margin:0;
    padding:0;
    color:var(--muted);
    font-size:.75rem;
    font-weight:300;
    line-height:1;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.bs-footer-social-links {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:34px;
    margin:0;
    padding:0;
}
.bs-footer-social-links a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:34px;
    margin:0;
    padding:0;
    color:var(--muted);
    font-size:1.75rem;
    line-height:1;
    transform:translateY(0);
    transition:transform .18s ease,color .18s ease;
}
.bs-footer-social-links a:hover {
    color:var(--orange);
    transform:translateY(-3px);
}
.bs-footer-empty {
    padding-right:0;
    align-items:flex-end;
    justify-content:flex-start;
}
.bs-footer-ai-banner {
    display:block;
    width:auto;
    height: 35px;
    max-width:100%;
    margin:0;
    padding:0;
    object-fit:contain;
}
.bs-footer-bottom {
    width:100%;
    margin:25px 0 0;
    padding:15px 0 0;
    border-top:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:400;
    line-height:1;
    text-align:center;
}

/* ================================================================
   BEAUTYSITE AI
   Specifické komponenty AI asistenta
   ================================================================ */
.ai-panel {
    width:100%;
}
.ai-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:0 0 20px;
    padding:0 0 15px;
    border-bottom:1px solid var(--border);
}
.ai-title-wrap {
    display:flex;
    align-items:center;
    gap:10px;
}
.ai-icon {
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--orange);
    border-radius:10px;
    color:var(--orange);
    flex:0 0 38px;
}
.ai-title {
    margin:0;
}
.ai-status {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-size:.85rem;
    line-height:1;
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#36a269;
}
.ai-close {
    width:38px;
    min-height:38px;
    padding:8px;
}
.ai-messages {
    width:100%;
    max-height:360px;
    overflow-y:auto;
    margin:0 0 15px;
    padding:0;
}
.message {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 15px;
}
.message-avatar {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--navy);
    color:var(--white);
    flex:0 0 32px;
}
.message-content {
    min-width:0;
    color:var(--text);
}
.message-content p {
    line-height:1.35;
}
.suggestions {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:15px 0 0;
}
.suggestion {
    width:auto;
    min-height:32px;
    padding:6px 10px;
    font-size:.8rem;
}
.typing {
    display:none;
    margin:0 0 10px;
    color:var(--muted);
    font-size:.8rem;
    line-height:1;
}
.typing i {
    margin-right:6px;
}
.ai-input-area {
    margin:0;
    padding:15px 0 0;
    border-top:1px solid var(--border);
}
.ai-form {
    width:100%;
}
.ai-input {
    width:100%;
}
.ai-form .bs-actions {
    margin-top:10px;
}
.ai-send {
    width:auto;
}
.ai-footer {
    margin:10px 0 0;
    color:var(--muted);
    font-size:.75rem;
    line-height:1.2;
}
@media (max-width:650px) {
    .ai-header {
        margin-bottom:15px;
        padding-bottom:12px;
    }
    .ai-messages {
        max-height:none;
    }
    .suggestions {
        flex-direction:column;
        align-items:stretch;
    }
    .suggestion {
        width:100%;
    }
    .ai-send {
        width:100%;
    }
}




@media (max-width:650px) {
    .bs-header-inner {
        height:auto;
        min-height:80px;
        padding:0 20px;
    }
    .bs-logo {
        height:80px;
    }
    .bs-logo img {
        max-height:64px;
    }
    .bs-nav {
        width:100%;
        height:auto;
        min-height:80px;
        padding:10px;
        overflow-x:auto;
        justify-content:flex-end;
    }
    .bs-page {
        padding:20px;
    }
    .bs-layout {
        grid-template-columns:1fr;
    }
    .bs-content,
    .bs-content-right {
        padding:10px;
    }
    .bs-form-area {
        padding:10px;
    }
    .bs-form-box {
        padding:25px;
    }
    .bs-form-grid {
        grid-template-columns:1fr;
    }
    .bs-field.full {
        grid-column:auto;
    }
    .bs-actions {
        flex-direction:column;
    }
    .bs-btn {
        width:100%;
    }
    .bs-footer {
        width:100%;
        max-width:1000px;
        padding:40px 20px 25px;
    }
    .bs-footer-grid {
        grid-template-columns:1fr;
        gap:15px;
    }
    .bs-footer-column {
        width:100%;
        padding:0;
        align-items:flex-start;
        justify-content:center;
    }
    .bs-footer-logo-column {
        display:flex;
        justify-content:center;
        align-items:flex-start;
    }
    .bs-footer-logo {
        justify-content:center;
        align-items:flex-start;
    }
    .bs-footer-contact {
        align-items:center;
        justify-content:flex-start;
        text-align:center;
    }
    .bs-footer-contact a {
        justify-content:center;
    }
    .bs-footer-social {
        align-items:center;
        justify-content:flex-start;
    }
    .bs-footer-social-links {
        justify-content:center;
    }
    .bs-footer-empty {
        display:flex;
        justify-content:center;
        align-items:flex-start;
    }
    .bs-footer-ai-banner {
        height:20px;
        width:auto;
        max-width:100%;
    }
    .bs-footer-bottom {
        margin-top:20px;
        padding-top:12px;
        border-top:0;
        align-items:center;
        justify-content:center;
        text-align:center;
    }
}
@media (min-width:651px) {
    .bs-page {
        padding:20px;
    }
    .bs-form-grid {
        grid-template-columns:1fr 1fr;
    }
    .bs-field.full {
        grid-column:1/-1;
    }
    .bs-actions {
        flex-direction:row;
    }
    .bs-btn {
        width:auto;
    }
}
@media (min-width:901px) {
    .bs-header-inner {
        height:80px;
        padding:0 25px;
    }
    .bs-logo {
        height:80px;
    }
    .bs-nav {
        height:80px;
        align-items:center;
    }
    .bs-page {
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:20px;
        flex:1 0 auto;
        display:flex;
        align-items:center;
        justify-content:flex-end;
    }
    .bs-layout {
        width:100%;
        grid-template-columns:50% 50%;
        align-items:center;
    }
    .bs-content,
    .bs-content-right {
        padding:10px;
    }
    .bs-form-area {
        padding:10px;
    }
    .bs-form-box {
        padding:25px;
    }
    .bs-footer {
        padding:50px 25px 30px;
    }
    .bs-footer-logo-column {
        padding-left:0;
    }
}