/* OLA BEAUTY — kontakt */
.contact-hero { position:relative; min-height:270px; display:flex; align-items:center; padding:52px 7%; overflow:hidden; background:url('../images/omnie-background.png') center/cover no-repeat; }
.contact-hero::before { content:''; position:absolute; inset:0; background:rgba(255,249,245,.2); }
.contact-hero-inner { position:relative; width:min(1180px,100%); margin:auto; display:flex; justify-content:center; }
.contact-hero-content { max-width:700px; padding:23px 52px 28px; border-radius:25px; background:rgba(255,252,249,.62); backdrop-filter:blur(6px); text-align:center; box-shadow:0 18px 42px rgba(79,61,50,.06); }
.contact-script { margin:0 0 3px; color:#b47961; font:38px/1 'Allura',cursive; }
.contact-hero h1 { margin:0; color:#755141; font:400 clamp(34px,4vw,58px)/1.15 'Cormorant Garamond',Georgia,serif; letter-spacing:3px; }
.contact-hero p:last-child { margin:13px auto 0; color:#674e42; font-size:14px; line-height:1.75; }
.contact-page { width:min(1280px,100%); margin:0 auto; padding:26px 22px 65px; color:#4f3d32; font:14px/1.5 Arial,sans-serif; }
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing:border-box; }
.contact-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.contact-cards.is-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.contact-card { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px 13px; border:1px solid #eadbd2; border-radius:11px; color:#4f3d32; background:linear-gradient(145deg,#fffdfb,#fcf8f5); text-align:center; text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; }
.contact-card:hover { transform:translateY(-3px); border-color:#c99178; box-shadow:0 10px 25px #81533a12; }
.contact-card-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid #d99f85; border-radius:50%; color:#bd765e; font-size:23px; line-height:1; }
.contact-card-label { color:#ae6d57; font-size:10px; font-weight:bold; letter-spacing:1.6px; }
.contact-card strong { font-size:13px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.contact-card small { min-height:30px; color:#89756b; font-size:10px; line-height:1.6; }
.contact-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.contact-form-panel,.contact-faq-panel,.contact-hours-panel { border:1px solid #eadbd2; border-radius:12px; background:linear-gradient(145deg,#fffdfb,#fcf8f5); }
.contact-form-panel { padding:30px; }
.contact-section-title { text-align:center; margin-bottom:23px; }
.contact-section-title h2 { margin:0; color:#5b4438; font:500 27px/1.25 'Cormorant Garamond',Georgia,serif; letter-spacing:1px; }
.contact-section-title p { margin:8px 0 0; color:#816f65; font-size:11px; }
.contact-heart-line { display:flex; align-items:center; justify-content:center; gap:10px; margin:9px auto 0; }
.contact-heart-line span { width:28px; height:1px; background:#e2c9bb; }
.contact-heart-line strong { color:#c47e63; font-size:13px; font-weight:400; }
.contact-form { display:grid; gap:12px; }
.contact-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-form label:not(.contact-consent) { display:block; color:#634f43; font-size:11px; font-weight:600; }
.contact-form label:not(.contact-consent) input,.contact-form label:not(.contact-consent) select,.contact-form>input,.contact-form select,.contact-form textarea { display:block; width:100%; margin-top:6px; padding:12px 13px; border:1px solid #eadbd2; border-radius:7px; color:#4f3d32; background:#fff; font:13px/1.45 Arial,sans-serif; }
.contact-form select { appearance:auto; }
.contact-form textarea { resize:vertical; min-height:145px; }
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible { outline:2px solid #b97b63; outline-offset:2px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#ad9d94; font-size:11px; }
.contact-consent { display:flex; align-items:flex-start; gap:9px; color:#85736a; font-size:10px; line-height:1.7; cursor:pointer; }
.contact-consent input { flex:0 0 auto; margin-top:3px; accent-color:#b66e55; }
.contact-consent a { color:#a86049; }
.contact-submit { min-height:44px; border:0; border-radius:7px; color:white; background:linear-gradient(100deg,#ad634c,#c17b60); font:600 11px Arial,sans-serif; letter-spacing:.6px; cursor:pointer; }
.contact-submit:hover { background:#97543f; }
.contact-submit:disabled { opacity:.6; cursor:default; }
.contact-notice { margin:0 0 18px; padding:13px 17px; border-radius:9px; font-size:12px; }
.contact-notice-success { border:1px solid #b9cfaf; background:#f4faf1; color:#4f713f; }
.contact-notice-error { border:1px solid #dc2626; background:#fef2f2; color:#b91c1c; }
.contact-side { display:grid; gap:14px; }
.contact-map { position:relative; display:block; min-height:260px; overflow:hidden; border:1px solid #eadbd2; border-radius:12px; background:#f1e7e1; color:white; text-decoration:none; }
.contact-map img { display:block; width:100%; height:100%; min-height:260px; object-fit:cover; transition:transform .35s; }
.contact-map:hover img { transform:scale(1.025); }
.contact-map span { position:absolute; right:13px; bottom:12px; padding:7px 10px; border-radius:6px; color:#fff; background:#805443d9; font-size:10px; }
.contact-faq-panel { padding:24px; }
.contact-faq-panel .contact-section-title { margin-bottom:15px; }
.contact-faq-panel .contact-section-title h2 { font-size:23px; }
.contact-faq-item { border:1px solid #eadbd2; border-bottom:0; background:#fffdfa; }
.contact-faq-item:last-child { border-bottom:1px solid #eadbd2; }
.contact-faq-item button { width:100%; display:flex; justify-content:space-between; gap:12px; padding:12px 15px; border:0; color:#5c493d; background:transparent; text-align:left; font:600 11px Arial,sans-serif; cursor:pointer; }
.contact-faq-item button b { color:#bd765e; font-size:16px; line-height:1; transition:transform .2s; }
.contact-faq-item.is-open button b { transform:rotate(180deg); }
.contact-faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.contact-faq-answer p { overflow:hidden; margin:0; padding:0 15px; color:#88746a; font-size:11px; line-height:1.7; }
.contact-faq-item.is-open .contact-faq-answer { grid-template-rows:1fr; }
.contact-faq-item.is-open .contact-faq-answer p { padding-bottom:13px; }
.contact-hours-panel { display:grid; grid-template-columns:58px minmax(0,1fr) 150px; align-items:center; gap:16px; padding:22px 24px; }
.contact-hours-icon { display:grid; place-items:center; width:53px; height:53px; border:2px solid #c47e63; border-radius:50%; color:#bd765e; font-size:28px; }
.contact-hours-content h2 { margin:0 0 10px; color:#664d40; font:600 13px Arial,sans-serif; letter-spacing:.4px; }
.contact-hour-row { display:flex; justify-content:space-between; gap:10px; margin:6px 0; color:#79675e; font-size:10px; }
.contact-hour-row strong { color:#634f43; font-weight:500; white-space:nowrap; }
.contact-signature { margin:0; color:#b57962; font:23px/1.45 'Allura',cursive; text-align:center; }
@media (min-width:1400px) { .contact-page { width:min(1500px,100%); padding-left:30px; padding-right:30px; }.contact-card { min-height:190px; }.contact-form-panel { padding:36px; }.contact-section-title h2 { font-size:31px; }.contact-form label:not(.contact-consent) { font-size:12px; }.contact-form label:not(.contact-consent) input,.contact-form label:not(.contact-consent) select,.contact-form select,.contact-form textarea { font-size:14px; padding:13px 14px; }.contact-map,.contact-map img { min-height:300px; }.contact-faq-panel { padding:30px; }.contact-hours-panel { padding:27px 30px; } }
@media (max-width:900px) { .contact-cards,.contact-cards.is-three { grid-template-columns:repeat(2,minmax(0,1fr)); }.contact-main-grid { grid-template-columns:1fr; }.contact-side { grid-row:1; }.contact-form-panel { grid-row:2; } }
@media (max-width:620px) { .contact-hero { min-height:230px; padding:40px 16px; }.contact-hero-content { padding:20px 18px 23px; border-radius:20px; }.contact-script { font-size:32px; }.contact-hero h1 { font-size:32px; letter-spacing:2px; }.contact-hero p:last-child { font-size:12px; }.contact-page { padding:18px 14px 45px; }.contact-cards { gap:9px; }.contact-card { min-height:150px; padding:15px 7px; }.contact-card strong { font-size:11px; }.contact-card small { font-size:9px; }.contact-form-panel { padding:22px 16px; }.contact-form-row { grid-template-columns:1fr; gap:12px; }.contact-section-title h2 { font-size:25px; }.contact-hours-panel { grid-template-columns:46px minmax(0,1fr); gap:12px; padding:18px 14px; }.contact-hours-icon { width:43px; height:43px; font-size:22px; }.contact-signature { grid-column:1/-1; padding-top:12px; border-top:1px solid #eadbd2; }.contact-map,.contact-map img { min-height:210px; }.contact-map span { left:10px; right:10px; text-align:center; }.contact-faq-panel { padding:18px 12px; } }

/* Większa skala kontaktu na laptopach. */
@media (min-width: 1400px) {
    .contact-page { width: min(1660px, 100%); padding-left: 34px; padding-right: 34px; }
    .contact-cards { gap: 22px; margin-bottom: 28px; }
    .contact-card { min-height: 220px; gap: 11px; padding: 28px 18px; border-radius: 14px; }
    .contact-card-icon { width: 52px; height: 52px; font-size: 29px; }
    .contact-card-label { font-size: 12px; letter-spacing: 2px; }
    .contact-card strong { font-size: 16px; }
    .contact-card small { min-height: 38px; font-size: 12px; line-height: 1.7; }
    .contact-main-grid { gap: 28px; }
    .contact-form-panel { padding: 44px; border-radius: 15px; }
    .contact-section-title { margin-bottom: 30px; }
    .contact-section-title h2 { font-size: 36px; }
    .contact-section-title p { font-size: 13px; }
    .contact-form { gap: 17px; }
    .contact-form-row { gap: 18px; }
    .contact-form label:not(.contact-consent) { font-size: 14px; }
    .contact-form label:not(.contact-consent) input,
    .contact-form label:not(.contact-consent) select,
    .contact-form select,
    .contact-form textarea { min-height: 58px; margin-top: 8px; padding: 16px 17px; border-radius: 9px; font-size: 16px; }
    .contact-form textarea { min-height: 200px; }
    .contact-consent { font-size: 12px; line-height: 1.8; }
    .contact-submit { min-height: 58px; font-size: 14px; border-radius: 9px; }
    .contact-map, .contact-map img { min-height: 360px; }
    .contact-map span { right: 17px; bottom: 17px; padding: 10px 14px; font-size: 12px; }
    .contact-faq-panel { padding: 36px; border-radius: 15px; }
    .contact-faq-panel .contact-section-title h2 { font-size: 30px; }
    .contact-faq-item button { padding: 16px 18px; font-size: 13px; }
    .contact-faq-item button b { font-size: 20px; }
    .contact-faq-answer p { padding-left: 18px; padding-right: 18px; font-size: 13px; }
    .contact-hours-panel { grid-template-columns: 70px minmax(0,1fr) 190px; gap: 22px; padding: 31px 36px; }
    .contact-hours-icon { width: 65px; height: 65px; font-size: 34px; }
    .contact-hours-content h2 { font-size: 15px; }
    .contact-hour-row { margin: 8px 0; font-size: 12px; }
    .contact-signature { font-size: 28px; }
}

/* Pola kontaktu są umieszczone w osobnych divach, dlatego stylujemy je
   bezpośrednio, a nie tylko wtedy, gdy input jest dzieckiem labela. */
.contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid #eadbd2;
    border-radius: 8px;
    color: #4f3d32;
    background: #fff;
    font: 14px/1.45 Arial, sans-serif;
}

.contact-form textarea {
    min-height: 165px;
}

/* Czytelna, równa lista: każdy dzień jest osobnym wierszem. */
.contact-hours-content { min-width: 0; }
.contact-hour-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 18px;
    min-height: 29px;
    margin: 0;
    color: #79675e;
    font-size: 12px;
}
.contact-hour-row span { min-width: 0; }
.contact-hour-row strong { text-align: right; }

@media (min-width: 1400px) {
    .contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .contact-form select,
    .contact-form textarea {
        min-height: 62px;
        margin-top: 9px;
        padding: 17px 18px;
        border-radius: 10px;
        font-size: 16px;
    }
    .contact-form textarea { min-height: 220px; }
    .contact-hours-panel {
        grid-template-columns: 72px minmax(300px, 1fr) 220px;
        gap: 24px;
        padding: 32px 38px;
    }
    .contact-hours-content h2 { margin-bottom: 11px; font-size: 16px; }
    .contact-hour-row { min-height: 32px; font-size: 13px; }
    .contact-signature { max-width: 220px; justify-self: end; }
}

@media (min-width: 621px) and (max-width: 1100px) {
    .contact-hours-panel { grid-template-columns: 62px minmax(0, 1fr); }
    .contact-signature {
        grid-column: 1 / -1;
        max-width: none;
        padding-top: 12px;
        border-top: 1px solid #eadbd2;
    }
}

/* Godzina ma być blisko nazwy dnia, a nie przy prawej krawędzi kolumny. */
.contact-hour-row {
    grid-template-columns: 120px max-content;
    justify-content: start;
    column-gap: 24px;
}

@media (min-width: 1400px) {
    .contact-hour-row {
        grid-template-columns: 135px max-content;
        column-gap: 22px;
    }
}

@media (max-width: 620px) {
    .contact-hour-row {
        grid-template-columns: 92px max-content;
        column-gap: 14px;
    }
}

/* Podpis wykorzystuje wolne miejsce obok godzin, nie zmieniając ich wyrównania. */
@media (min-width: 1101px) {
    .contact-hours-panel {
        container-type: inline-size;
        grid-template-columns: max-content max-content minmax(0, 1fr);
    }
    .contact-hours-panel .contact-signature {
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-self: center;
        font-size: 32px;
        font-size: clamp(28px, 5.5cqi, 44px);
        line-height: 1.4;
    }
    /* Gdy cała karta jest wąska, podpis ma własny wiersz zamiast ściskać godziny. */
    @container (max-width: 560px) {
        .contact-signature {
            grid-column: 1 / -1;
            padding-top: 16px;
            border-top: 1px solid #eadbd2;
        }
    }
}