/* =========================
   RESET / BAZA
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    /*background: #f5e9da; ciepłe tło */
    background: #d5e0c2; /* zieleń tła wokół strony */
    color: #2f3437;
    line-height: 1.6;
}

.page-wrapper {
    max-width: 1100px;
    margin: 24px auto;
    background: #f5e9da;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Linki */

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Kontener */

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Przyciski */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-primary {
    background: #8fbc5e;
    color: #ffffff;
    border-color: #8fbc5e;
}

.btn-primary:hover {
    background: #7aa44f;
    border-color: #7aa44f;
}

.btn-outline {
    background: rgba(245, 233, 218, 0.85); /* jasny krem na tle hero */
    color: #355031;                        /* lekko ciemna zieleń */
    border-color: #8fbc5e;                 /* jak przycisk główny */
}

.btn-outline:hover {
    background: #8fbc5e;
    color: #ffffff;
    border-color: #8fbc5e;
    transform: translateY(-1px);
}

/* wspólna baza dla badge */
.badge {
    background: #eef4ea;
    color: #3f5f2a;
}

.badge,
.dog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.dog-link {
    background: #f3eadb;
    color: #3f3a2f;
    transition: all .15s ease;
}

.dog-link:hover {
    background: #eadfc9;
    transform: translateY(-1px);
}

/* Nagłówki */

h1, h2, h3, h4 {
    font-weight: 700;
    color: #2f3437;
    margin-bottom: 12px;
}

h1 {
    font-size: clamp(2rem, 3vw, 2.6rem);
}

h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
}

h3 {
    font-size: 1.3rem;
}

/* Sekcje */

.section {
    padding: 56px 0;
    background: #f4f1eb;
}

.section-light {
    background: #f5e9da;
}

/* =========================
   HEADER (GÓRA STRONY)
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 233, 218, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 60px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.1rem;
}

.logo-icon {
    font-size: 1.4rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
}

.main-nav a {
    position: relative;
    padding-bottom: 3px;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #8baf6b;
    transition: width 0.2s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.section > .container {
    padding-left: 60px;
    padding-right: 60px;
}

/* =========================
   HERO (GÓRNE DUŻE ZDJĘCIE)
========================= */

.hero {
    position: relative;
    min-height: 380px;
    background: url("../img/hero-loveastland.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    /* tekst domyślnie jasny */
    color: #f9f3dd;
}

/* dużo delikatniejszy filtr – tylko lekko przyciemnia lewą stronę */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.00)
    );
}

.hero-content {
    position: relative;
    max-width: 430px;
    padding: 60px 0 70px;
    margin-left: 60px;
}

/* nagłówek jak w makiecie – jasny, z lekkim cieniem */
.hero-content h1 {
    color: #f9f3dd;
    font-size: clamp(2.3rem, 3.4vw, 2.8rem);
    line-height: 1.2;
    margin-bottom: 14px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
}

/* opis pod h1 – też jasny */
.hero-content p {
    color: #f9f3dd;
    margin-bottom: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9rem;
}

.hero-badges span {
    background: rgba(245, 233, 218, 0.15);
    border-radius: 999px;
    padding: 6px 12px;
}

/* =========================
   OGÓLNE UKŁADY
========================= */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
    align-items: center;
}

.split .image img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

/* Listy cech */

.feature-list ul {
    margin-top: 8px;
    list-style: none;
}

.feature-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px;
}

.feature-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #8baf6b;
}

/* Grid kart */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Karty psów */

.dog-card,
.puppy-card,
.review-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dog-card:hover,
.puppy-card:hover,
.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.dog-card img,
.review-card img {
    width: 100%;
    border-radius: 999px;
    max-width: 140px;
    margin: 0 auto 10px;
    display: block;
    object-fit: cover;
}

/* Status szczeniaka */

.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-available {
    background: #e1f3da;
    color: #406b2f;
}

.status-reserved {
    background: #ffe8c7;
    color: #8b5a1f;
}

.status-adopted {
    background: #e1e1e1;
    color: #555555;
}

/* Kroki "Jak kupić" */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.step {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #8baf6b;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Opinie */

.reviews-actions {
    margin-top: 24px;
    text-align: center;
}

.chip-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    margin-top: 6px;
    color: #406b2f;
}

/* Galeria – mini */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.gallery-grid img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
}

/* =========================
   FORMULARZ KONTAKTOWY
========================= */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
    font: inherit;
    background: #ffffff;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #8baf6b;
    box-shadow: 0 0 0 2px rgba(139, 175, 107, 0.2);
}

/* =========================
   STOPKA (DÓŁ – OPCJA 2)
========================= */

.site-footer {
    background: radial-gradient(circle at top left, #3e5f3a 0, #203722 55%, #172618 100%);
    color: #f3f3e8;
    /*margin-top: 40px;*/
    padding-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col h3 {
    margin-bottom: 10px;
    color: #f9f7f0;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.footer-social {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.25);
    color: #f5f5f5;
    transition: background 0.2s ease, transform 0.1s ease;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

/* Linki w stopce */

.footer-links {
    list-style: none;
    margin-top: 6px;
}

.footer-links li {
    margin-bottom: 6px;
}

.footer-links a {
    font-size: 0.92rem;
    opacity: 0.95;
    position: relative;
    padding-left: 10px;
}

.footer-links a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9rem;
}

.footer-links a:hover {
    opacity: 1;
}

/* Kontakt w stopce */

.footer-col p {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.footer-call {
    margin-top: 10px;
}

/* Dolny pasek */

.footer-bottom {
    padding: 10px 0 18px;
    font-size: 0.82rem;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-bottom a {
    opacity: 0.9;
}

.footer-bottom a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-bottom .paw {
    font-size: 1rem;
}

/* =========================
   RESPONSYWNOŚĆ
========================= */

/* ==== GLOBAL MOBILE FIXES ==== */

/* Nigdy nie pozwól elementom wypychać strony na bok */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Obrazki/iframe też niech się skalują */
img, iframe, video {
  max-width: 100%;
  height: auto;
}

/* Na telefonie page-wrapper pełna szerokość (bez „ramki”) */
@media (max-width: 900px) {
  .page-wrapper {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .container {
    padding: 0 16px; /* wracamy do standardu */
  }

  .header-inner {
    padding: 12px 16px; /* zamiast 60px */
  }

  /* to jest u Ciebie ważne: masz sztywne 60px w sekcjach */
  .section > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* hero tekst nie może być odsunięty o 60px na telefonie */
  .hero-content {
    margin-left: 0;
    padding: 40px 0 40px;
    max-width: 520px;
  }
}

@media (max-width: 900px) {
  .main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    font-size: 0.95rem;
  }

  /* opcjonalnie: przyciski w headerze żeby nie rozwalały szerokości */
  .header-inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .logo {
    width: 100%;
    justify-content: center;
  }

    .split,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 280px;
    }

    .hero-content {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.about-dogs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}

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

.about-dog-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f5e9da;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.about-dog-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsywność */
@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
    }
}

/* Badges nad "O LoveAstLand" */
.about-top-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
    margin: 6px 0 18px;
}

.about-top-badges span {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fafaf7;
}

/* Układ sekcji Nasze psy / Aktualne mioty */
.dogs-layout {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    gap: 32px;
    align-items: flex-start;
}

.dogs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.dogs-right .litter-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.litter-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* responsywność */
@media (max-width: 900px) {
    .dogs-layout {
        grid-template-columns: 1fr;
    }
}

.form-light {
    background: #f5e9da;
    padding: 24px 26px;
    border-radius: 18px;
    margin: 16px auto 0;
}

/* Ogólny układ formularzy na stronie */
.form-light .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px; /* w pionie 14, w poziomie 18 */
    margin-bottom: 10px;
}

.form-light .form-group {
    flex: 1 1 240px;        /* minimum ~240px, reszta wypełnia */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* etykiety */
.form-light label {
    font-size: 0.95rem;
    font-weight: 500;
}

/* pola formularza – pełna szerokość grupy */
.form-light input[type="text"],
.form-light input[type="email"],
.form-light select,
.form-light textarea {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid #ddd3c4;
    background: #ffffff;
    font-size: 0.96rem;
}

/* tekstarea troszkę wyższa */
.form-light textarea {
    min-height: 120px;
    resize: vertical;
}

/* przycisk na środku */
.form-light .form-actions {
    margin-top: 16px;
    text-align: center;
}

/* na wąskich ekranach wszystko 1 kolumna */
@media (max-width: 640px) {
    .form-light .form-row {
        flex-direction: column;
    }
}

.opinie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.opinia-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opinia-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}


.opinia-left{ flex:1; }

.opinia-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* gwiazdki i data do prawej */
  gap:6px;              /* odstęp między gwiazdkami i datą */
  white-space:nowrap;
}

.opinia-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.opinia-owner {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: #777;
}

.opinia-stars {
    font-size: 1.1rem;
    color: #f3b542;
    white-space: nowrap;
}

.opinia-tresc {
    margin: 4px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

.opinia-meta {
    /* margin-top: 6px; */
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    color: #777;
}

.opinia-meta .date{
  font-size:16px;
  opacity:.75;
  line-height:1;
}

.opinia-meta .chip {
    font-family: monospace;
}

.opinia-gallery {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.opinia-gallery a {
    display: block;
}

.opinia-gallery img {
    display: block;
    max-height: 140px;       /* wysokość miniatury */
    width: auto;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    object-fit: cover;
}

/* Nasze psy – lista */
.dog-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.dog-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 20px 22px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.dog-avatar {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dog-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dog-name {
    font-size: 1.1rem;
    margin: 0;
}

.dog-subtitle {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: #666;
}

.dog-chip {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #888;
}

.dog-excerpt {
    margin: 12px 0 14px;
    font-size: 0.95rem;
    color: #444;
}

.dog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dog-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dog-meta-pill {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f5f0;
    color: #4c6b2f;
}

/* profil psa */
.dog-profile-card {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* galeria na stronie psa */
.dog-detail-gallery {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dog-gallery-thumb img {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dog-gallery-thumb img:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
    .dog-card-header {
        align-items: flex-start;
    }
    .dog-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.back-link{
  margin: 0 0 18px 0;
}

.back-link a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: #2f3a2f;
  background: rgba(245, 233, 218, 0.9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.back-link a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.dog-parent-link {
    position: relative;
    color: #6b8e23;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dog-parent-link:hover {
    color: #3f5d1f;
    border-bottom-color: #a6cf6d;
}

.has-preview {
    position: relative;
}

.dog-preview {
    position: absolute;
    bottom: 125%;
    left: 0;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dog-preview img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 999px;
}

.has-preview:hover .dog-preview {
    opacity: 1;
    transform: translateY(0);
}

/* Statusy szczeniąt */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* kropka */
.status-pill::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

/* available */
.status-available {
    background: #eaf6e6;
    color: #2f6b2f;
}
.status-available::before {
    background: #38a169;
}

/* reserved */
.status-reserved {
    background: #fff4d6;
    color: #7a5b00;
}
.status-reserved::before {
    background: #d69e2e;
}

/* adopted */
.status-adopted {
    background: #ececec;
    color: #555;
}
.status-adopted::before {
    background: #7a7a7a;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.section-head .back-link {
    margin-top: 6px;
}

.filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin:18px 0 26px;
}
.filters select{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.filters .btn{
  padding:10px 16px;
  border-radius:999px;
  border:2px solid #8fbf59;
  background:#8fbf59;
  color:#fff;
  cursor:pointer;
}
.filters .btn-ghost{
  padding:10px 16px;
  border-radius:999px;
  border:2px solid #8fbf59;
  color:#2e3b2a;
  background:transparent;
  text-decoration:none;
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:22px;
}

.contact-card{
  background:#fff;
  border-radius:24px;
  padding:22px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.contact-h2{
  margin:0 0 14px;
  font-size:22px;
}

.contact-item{ margin:12px 0; }
.contact-label{ color:#777; font-size:13px; margin-bottom:4px; }
.contact-value a{ color:inherit; text-decoration:none; }
.contact-value a:hover{ text-decoration:underline; }

.contact-sep{
  border:none;
  height:1px;
  background: rgba(0,0,0,0.08);
  margin:18px 0;
}

.contact-form label{
  display:block;
  font-size:13px;
  color:#555;
  margin: 10px 0;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  margin-top:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.12);
  outline:none;
  font-size:15px;
  background:#fff;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(126, 176, 70, 0.65);
  box-shadow: 0 0 0 4px rgba(166, 207, 109, 0.22);
}

.contact-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.contact-map{
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.contact-map iframe{
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 18px;
}

.contact-mini{
  background: rgba(166, 207, 109, 0.15);
  border-radius:16px;
  padding:12px 14px;
  color:#3b4a2b;
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-row{ grid-template-columns: 1fr; }
  .contact-map iframe{ height:320px; }
}

.notice{
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
}
.notice-ok{ background: rgba(166,207,109,0.18); color:#2f3b22; }
.notice-err{ background: rgba(255,107,107,0.18); color:#5b1f1f; }

.gr-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.gr-score{
  display:flex;
  align-items:center;
  gap:10px;
  color:#2e3b2a;
}
.gr-rating{
  font-weight:800;
  font-size:22px;
}
.gr-count{
  color:#666;
}

.gr-list{
  margin-top:14px;
  display:grid;
  gap:12px;
}

.gr-item{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background: rgba(0,0,0,0.03);
}

.gr-avatar{
  width:46px;
  height:46px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 46px;
  background:#f3f3f3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gr-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gr-avatar-fallback{ font-size:20px; }

.gr-body{ flex:1; min-width:0; }
.gr-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.gr-name{ color:#222; }
.gr-time{ color:#777; font-size:13px; }

.gr-stars-row{ margin-top:4px; color:#f0b400; }
.gr-text{
  margin-top:6px;
  color:#333;
  line-height:1.45;
  font-size:14px;
}

.stars { display:inline-flex; gap:2px; line-height:1; }
.star  { font-size:18px; }
.star.is-on  { color:#f2b01e; }   /* żółte */
.star.is-off { color:#111; opacity:.35; } /* „czarne”, ale miękkie */



#rating-label {
    font-size: 16px;
    color: #6b6b6b;
}

.google-reviews-footer{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.small-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #6b8f3a;              /* zielony jak przycisk Google */
    text-decoration: none;
    transition: color .2s ease, transform .15s ease;
}

.small-link::after {
    content: " →";
    font-size: 13px;
    transition: transform .15s ease;
}

.small-link:hover {
    color: #4ec65b;              /* ciemniejszy zielony */
}

.small-link:hover::after {
    transform: translateX(2px);
}

.card--content h2 { margin-top: 22px; }
.card--content ul, .card--content ol { padding-left: 18px; }
.card--content li { margin: 8px 0; }

.steps { margin: 0; padding-left: 18px; }
.steps li { margin: 12px 0; line-height: 1.6; }

.notice{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(143, 187, 95, 0.10);
  border: 1px solid rgba(143, 187, 95, 0.25);
}

/* ---- Ticket Attachments Drag&Drop ---- */
.attachments-box{
  border:2px dashed #bbb;
  border-radius:10px;
  padding:18px;
  text-align:center;
  color:#666;
  background:#fafafa;
  margin-top:10px;
  transition:background .2s,border-color .2s;
  cursor:pointer;
}

.attachments-box.dragover{
  background:#eef9ff;
  border-color:#4da3ff;
}

#attachment-input{ display:none; }

#attachment-preview{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  justify-content:center;
}

.preview-item{
  position:relative;
  width:100px;
  height:100px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #ddd;
  background:#fff;
}

.preview-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.preview-item .file-icon{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#444;
  background:#f4f4f4;
}

.preview-item .remove-btn{
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border:none;
  border-radius:999px;
  width:22px;
  height:22px;
  line-height:22px;
  cursor:pointer;
}
.preview-item .remove-btn:hover{
  background:rgba(0,0,0,.85);
}

.rating-widget { display:flex; flex-direction:column; gap:8px; }

.rating-widget .stars { display:flex; gap:6px; align-items:center; }
.rating-widget .star{
  border:0; background:transparent; padding:0; cursor:pointer;
  font-size:28px; line-height:1; color:#333; /* “nieaktywne” = czarne/szare */
  opacity:.25;
  transition: transform .08s ease, opacity .12s ease;
}
.rating-widget .star:hover { transform: translateY(-1px); opacity: .9; }

.rating-widget .star.is-on{ color:#F1B500; opacity:1; }   /* aktywne = żółte */
.rating-widget .star.is-hover{ color:#F1B500; opacity:1; } /* hover = żółte */

.rating-hint{ font-size:14px; opacity:.75; }

.rating-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-thumb{
  width:100px;height:100px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #ddd;border-radius:5px;
  font-size:32px;
}
.file-video{ }
.file-other{ }

.opinia-thumb { position: relative; display:inline-block; }
.opinia-thumb .video-badge{
  position:absolute; right:10px; bottom:10px;
  background: rgba(0,0,0,.55);
  color:#fff; border-radius:999px;
  padding:6px 10px; font-size:14px;
}

.opinia-thumb.is-video::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 36px;
    color: white;
    background: rgba(0,0,0,.35);
    border-radius: 16px;
}

.stars .star { cursor: pointer; user-select: none; }

.stars.is-invalid {
  outline: 2px solid rgba(179, 38, 30, 0.35);
  border-radius: 8px;
  padding: 2px 6px;
}

.attachments-box { cursor: pointer; }

/* =========================
   RESPONSIVE GLOBAL FIX
========================= */

/* żeby nic nie wypychało strony na bok */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* page-wrapper na telefonie bez "ramki" */
@media (max-width: 900px) {
  .page-wrapper {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Twoje duże paddingi rozwalają mobile */
  .container { padding: 0 16px; }

  .header-inner { padding: 12px 16px; }

  .section > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-content {
    margin-left: 0;
    padding: 40px 0 40px;
  }
}


/* =========================
   HEADER: burger + mobile nav
========================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* burger ukryty na desktopie */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle__bars {
  display: block;
  width: 20px;
  height: 2px;
  background: #2b2b2b;
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #2b2b2b;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

/* mobile nav panel (domyślnie ukryty) */
.mobile-nav {
  display: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
}

.mobile-nav__inner {
  padding: 12px 16px 18px;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-nav__links a {
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}

.mobile-call {
  margin-top: 6px;
  text-align: center;
}

/* ====== tryb mobile ====== */
@media (max-width: 900px) {
  /* chowamy desktop menu, pokazujemy burger */
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  /* przycisk "Zadzwoń" na mobile możesz zostawić lub schować - ja zostawiam */
  .header-call { display: inline-flex; }
}

/* panel otwarty */
.mobile-nav.is-open {
  display: block;
}

/* ===== HOME: Nasze Suczki / Aktualne mioty - MOBILE ===== */
@media (max-width: 900px) {
  .dogs-layout {
    display: block; /* jeśli masz flexa/grid, to na mobile prościej */
  }

  .dogs-left,
  .dogs-right {
    width: 100%;
  }

  /* nagłówki sekcji na środku */
  .dogs-left h2,
  .dogs-right h2 {
    text-align: center;
  }

  /* “karta miotu” też na środku */
  .litter-card {
    text-align: center;
  }

  /* te badge statusy ładnie się zawijają */
  .litter-status-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}

@media (max-width: 900px) {
  /* kontener na buttony w litter-card */
  .litter-card .btn {
    display: block;
    width: 100%;
    max-width: 420px;   /* żeby nie były absurdalnie szerokie na tablecie */
    margin: 10px auto 0 !important; /* nadpisuje Twoje inline margin-left:8px */
    text-align: center;
  }

  /* gdybyś miał 2 przyciski obok siebie przez inline style */
  .litter-card .btn + .btn {
    margin-top: 10px !important;
  }
}

@media (max-width: 900px) {
  .dogs-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* karta na środku */
  .dog-card {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
  }

  .dog-card img {
    margin: 0 auto 10px;
    display: block;
  }
}

@media (max-width: 600px) {
  .dogs-list {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .dogs-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* === PATCH: DOG CARD FOOTER (bez zmiany kolorów .dog-link) === */

/* utrzymaj stałą wysokość stopki nawet gdy brak "Zdjęcia:" */
.dog-meta-row{
  min-height: 30px; /* dostosuj jeśli chcesz */
  align-items: center;
}

/* na desktop OK jak masz; tu tylko doprecyzowanie */
.dog-card-footer{
  width: 100%;
}

/* MOBILE: wycentruj "Nasze Suczki" i elementy w stopce */
@media (max-width: 768px){

  /* jeśli "Nasze Suczki" to h2 w .dogs-left */
  .dogs-left h2{
    text-align: center;
  }

  /* footer w karcie: układ kolumnowy */
  .dog-card-footer{
    flex-direction: column;
    align-items: center;   /* <-- klucz: centrowanie zamiast flex-start */
    gap: 10px;
  }

  /* pill na środku */
  .dog-meta-row{
    width: 100%;
    justify-content: center;
  }

  /* przycisk "Zobacz profil" niech będzie ładny i czytelny */
  .dog-link{
    width: 100%;
    max-width: 110px;
    text-align: center;
  }
}


/* Testowe zmiany */
/* 1) link jako kotwica + ma realny box (inline-block) */
.dog-parent-link.has-preview{
  position: relative;
  display: inline-block;
}

/* 2) dymek ma stały rozmiar (90x90 + padding) */
.dog-preview{
  position: absolute;
  bottom: 125%;
  left: 0;
  width: 102px;          /* 90 + 6 + 6 */
  height: 102px;
  box-sizing: border-box;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* 3) obrazek zawsze 90x90, nic nie ma prawa tego nadpisać */
.dog-preview img{
  display: block;
  width: 90px !important;
  height: 90px !important;
  object-fit: cover;
  border-radius: 999px;
}

/* koniec testowych zmian */