:root {
    --primary: #3fa66a;
    --primary-dark: #2f8556;
    --bg: #fae4ac;
    --card-bg: #f3eee0;
    --text: #2e2a26;
    --muted: #8a8177;
    --border: #ecdfd2;
    --success: #3f9142;
    --error: #c0392b;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.row-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.row-top { border-bottom: 1px solid var(--border); }
.row-top .row-inner { padding: 12px 20px; justify-content: space-between; }
.logo { font-size: 1.3em; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.usermenu { display: flex; align-items: center; gap: 12px; font-size: 0.95em; white-space: nowrap; flex-wrap: wrap; }
.usermenu a { color: var(--text); }
.usermenu a.btn-nav { background: var(--primary); color: #fff; padding: 6px 14px; border-radius: 8px; }
.usermenu a.btn-nav:hover { text-decoration: none; background: var(--primary-dark); }
.hello { color: var(--muted); }

.row-menu1 { background: var(--bg); border-bottom: 1px solid var(--border); }
.row-menu1 .row-inner { padding: 6px 20px; justify-content: space-between; }

.row-menu2 { background: var(--primary); }
.row-menu2 .row-inner { padding: 0 20px; gap: 2px; }
.row-menu2 a { color: #fff; opacity: 0.85; padding: 10px 14px; display: inline-block; }
.row-menu2 a:hover, .row-menu2 a.active { opacity: 1; background: rgba(255,255,255,0.15); text-decoration: none; }

.mainnav { display: flex; gap: 4px; flex-wrap: wrap; }

.dropdown { position: relative; }
.dropdown-toggle {
    background: none; border: none; font: inherit; cursor: pointer;
    padding: 8px 12px; border-radius: 8px; color: var(--text);
}
.dropdown-toggle .caret { font-size: 0.7em; color: var(--muted); }
.dropdown-toggle:hover, .dropdown.open .dropdown-toggle { background: var(--bg); }

.comic-badge {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--primary);
    color: var(--primary-dark); font-weight: 600; font-size: 0.92em;
}
.comic-badge:hover, .comic-badge.active { background: var(--primary); color: #fff; text-decoration: none; }
.dropdown-panel {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(46,42,38,0.12); min-width: 220px; padding: 6px; z-index: 20;
}
.dropdown.open .dropdown-panel, .dropdown:hover .dropdown-panel { display: block; }
.dropdown-panel a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); }
.dropdown-panel a:hover, .dropdown-panel a.active { background: var(--bg); text-decoration: none; color: var(--primary-dark); }

.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(46, 42, 38, 0.07), 0 8px 20px rgba(46, 42, 38, 0.06);
}

.form-card { max-width: 480px; margin: 40px auto; }
.form-card label, .pet-form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9em; }
.form-card input, .form-card textarea, .form-card select,
.pet-form input, .pet-form textarea, .pet-form select {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 1em; font-weight: 400;
}
.pet-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-bottom: 20px; }
.pet-form label:last-of-type, .pet-form textarea { grid-column: 1 / -1; }

.btn {
    display: inline-block; padding: 10px 20px; border-radius: 8px; border: none;
    background: var(--border); color: var(--text); cursor: pointer; font-size: 1em; font-weight: 600;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #eee; }
.btn-small { padding: 6px 12px; font-size: 0.85em; }
.btn-danger { background: #f8d7d3; color: var(--error); }
.btn-group { display: flex; gap: 8px; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.flash-success { background: #e3f5e1; color: var(--success); }
.flash-error { background: #fbe4e1; color: var(--error); }

.feed-layout { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.post-card {
    border-color: #ddc9b4;
    box-shadow: 0 3px 10px rgba(46, 42, 38, 0.1), 0 1px 3px rgba(46, 42, 38, 0.08);
}
.new-post-card textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 1em; resize: vertical; }
.new-post-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.admin-post-toggle { font-size: 0.85em; color: var(--muted); }

.post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-time { color: var(--muted); font-size: 0.85em; margin-left: auto; }
.post-mod { margin-left: 4px; }
.mod-delete-btn {
    background: none; border: none; cursor: pointer; font-size: 0.95em;
    opacity: 0.5; padding: 2px 4px; border-radius: 6px;
}
.mod-delete-btn:hover { opacity: 1; background: #fbe4e1; }
.mod-delete-small { font-size: 0.8em; margin-left: 6px; }
.post-content { white-space: pre-wrap; }
.post-photo { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.badge { background: var(--border); padding: 2px 10px; border-radius: 20px; font-size: 0.75em; }
.badge-admin { background: var(--primary); color: #fff; }
.badge-out { color: var(--error); }

.post-reactions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reaction-btn {
    background: none; border: 1px solid var(--border); border-radius: 20px;
    padding: 6px 14px; cursor: pointer; font-size: 0.9em; color: var(--text);
    display: inline-flex; align-items: center; gap: 6px;
}
.reaction-btn.reacted { border-color: var(--primary); background: #fff0e6; color: var(--primary-dark); font-weight: 600; }
.reaction-count { color: var(--muted); font-weight: 400; }
.reaction-btn.reacted .reaction-count { color: var(--primary-dark); }

.comments-toggle {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.9em; padding: 6px 4px;
}
.comments-toggle:hover { color: var(--primary-dark); text-decoration: underline; }

.post-comments { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.comment { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.92em; }
.comment:last-of-type { border-bottom: none; }
.comment strong { margin-right: 8px; }
.comment-time { color: var(--muted); font-size: 0.85em; }
.comment p { margin: 4px 0 0; white-space: pre-wrap; }
.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 20px; }

.map-filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.map-pin { font-size: 22px; text-align: center; }

.people-list { list-style: none; padding: 0; margin: 0; }
.people-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.people-list li:last-child { border-bottom: none; }
.search-row { display: flex; gap: 10px; margin-bottom: 16px; }
.search-row input { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }

.pet-grid, .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pet-card img, .product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.pet-photo-placeholder { width: 100%; height: 160px; background: var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 3em; margin-bottom: 10px; }
.price { font-weight: 700; font-size: 1.2em; color: var(--primary-dark); }
.qty-input { width: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; margin-right: 8px; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); }
.cart-total { text-align: right; font-size: 1.2em; margin: 16px 0; }
.inline-form { display: inline; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.admin-table th, .admin-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9em; }

.admin-breadcrumb { color: var(--muted); font-size: 0.9em; margin-bottom: 6px; }
.admin-breadcrumb a { color: var(--muted); }

.admin-dashboard {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}
.admin-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; text-align: center; color: var(--text); display: block;
    transition: border-color 0.15s, transform 0.15s;
}
.admin-card:hover { border-color: var(--primary); transform: translateY(-2px); text-decoration: none; }
.admin-card-icon { font-size: 2em; }
.admin-card h3 { margin: 10px 0 4px; color: var(--primary-dark); font-size: 1.05em; }
.admin-card-count { font-size: 1.6em; font-weight: 700; margin: 4px 0; }

.pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.page-link {
    display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); font-size: 0.9em;
}
.page-link:hover { border-color: var(--primary); text-decoration: none; }
.page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.feed-layout .pagination { justify-content: center; margin: 10px 0 30px; }

.empty-state { color: var(--muted); text-align: center; padding: 30px; }
.muted { color: var(--muted); font-size: 0.9em; }
.small-hint { font-size: 0.85em; margin: -6px 0 8px; }
.pet-form .small-hint, .pet-form button[type="submit"] { grid-column: 1 / -1; }

.sitefooter { text-align: center; padding: 20px; color: var(--muted); font-size: 0.85em; }
.footer-legal { display: flex; justify-content: center; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; }
.footer-legal a { color: var(--muted); font-size: 0.85em; }

.danger-zone { border-color: #f3c6bd; }
.danger-zone h2 { color: var(--error); }
.danger-zone label { margin-top: 12px; }

.active-toggle { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; margin-bottom: 16px !important; }
.active-toggle input { width: auto !important; }

#editor { background: #fff; min-height: 300px; margin-bottom: 16px; }
.editor-actions { display: flex; gap: 10px; align-items: center; }

/* --- Kezdőoldal --- */
.hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center; flex-direction: column;
    padding: 64px 20px 80px;
    overflow: hidden;
}
.eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8em;
    color: var(--primary-dark); font-weight: 700; margin: 0 0 14px;
}
.hero-text { max-width: 640px; z-index: 1; }
.hero h1 {
    font-size: 2.5em; line-height: 1.15; margin: 0 0 20px;
    font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
}
.hero-lead { color: var(--muted); font-size: 1.1em; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-large { padding: 14px 28px; font-size: 1.05em; border-radius: 10px; }

.hero-trail { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-trail .paw { position: absolute; font-size: 1.6em; opacity: 0.18; }
.p1 { top: 12%; left: 8%; transform: rotate(-18deg); }
.p2 { top: 28%; left: 18%; transform: rotate(10deg); }
.p3 { top: 55%; left: 4%; transform: rotate(-6deg); }
.p4 { top: 18%; right: 10%; transform: rotate(22deg); }
.p5 { top: 48%; right: 16%; transform: rotate(-14deg); }

.menu-groups {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    margin-bottom: 48px;
}
.group-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    padding: 20px; color: var(--text); display: block; transition: border-color 0.15s, transform 0.15s;
}
.group-card:hover { border-color: var(--primary); transform: translateY(-2px); text-decoration: none; }
.group-icon { font-size: 1.8em; }
.group-card h3 { margin: 10px 0 8px; color: var(--primary-dark); }
.group-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.9em; }
.group-card li { margin-bottom: 2px; }

.features { text-align: center; margin-bottom: 48px; }
.features h2 { font-family: Georgia, serif; margin-bottom: 30px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { padding: 10px; }
.feature-icon { font-size: 2em; }
.feature h3 { margin: 12px 0 8px; font-size: 1.05em; }
.feature p { color: var(--muted); font-size: 0.92em; }

.cta-band {
    background: var(--primary); color: #fff; text-align: center;
    border-radius: 18px; padding: 48px 24px; margin-bottom: 20px;
}
.cta-band h2 { font-family: Georgia, serif; margin: 0 0 10px; }
.cta-band p { opacity: 0.9; margin: 0 0 22px; }
.cta-band .btn-primary { background: #fff; color: var(--primary-dark); }
.cta-band .btn-primary:hover { background: #fff5ee; }

/* --- Tartalmi oldalak (Quill formázás megjelenítése) --- */
.content-page .content-body { line-height: 1.7; }
.content-page .content-body p { margin: 0 0 14px; }
.content-page .content-body h2, .content-page .content-body h3 { color: var(--primary-dark); margin-top: 24px; }
.content-page .content-body ul, .content-page .content-body ol { padding-left: 24px; }
.content-page .content-body img { max-width: 100%; border-radius: 10px; }
.content-page .content-body blockquote {
    border-left: 4px solid var(--primary); margin: 16px 0; padding: 4px 0 4px 16px; color: var(--muted);
}
.content-page .content-body pre {
    background: #2e2a26; color: #f2e9df; padding: 14px 16px; border-radius: 8px;
    overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9em;
}
.content-page .content-body .ql-size-small { font-size: 0.75em; }
.content-page .content-body .ql-size-large { font-size: 1.5em; }
.content-page .content-body .ql-size-huge { font-size: 2.2em; }
.content-page .content-body .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.content-page .content-body .ql-font-monospace { font-family: 'Courier New', monospace; }
.content-page .content-body .ql-align-center { text-align: center; }
.content-page .content-body .ql-align-right { text-align: right; }
.content-page .content-body .ql-align-justify { text-align: justify; }
.content-page .content-body .ql-direction-rtl { direction: rtl; text-align: right; }
.content-page .content-body iframe { max-width: 100%; border-radius: 10px; aspect-ratio: 16/9; }

@media (max-width: 800px) {
    .menu-groups, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 1.9em; }
}

@media (max-width: 640px) {
    .pet-form { grid-template-columns: 1fr; }
    .row-top .row-inner { flex-direction: column; align-items: flex-start; }
    .row-menu1 .row-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- Képregény --- */
.comic-season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.comic-season-card { color: var(--text); }
.comic-season-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.comic-season-card h3 { margin: 0 0 6px; color: var(--primary-dark); }

.comic-reader-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.comic-fullscreen-wrap:fullscreen,
.comic-fullscreen-wrap:-webkit-full-screen,
.comic-fullscreen-wrap:-moz-full-screen {
    background: #1c1a18; display: flex; flex-direction: column; justify-content: center;
    padding: 16px 20px;
}
.comic-fullscreen-wrap:fullscreen .comic-reader-bar,
.comic-fullscreen-wrap:-webkit-full-screen .comic-reader-bar,
.comic-fullscreen-wrap:-moz-full-screen .comic-reader-bar {
    color: #fff;
}
.comic-fullscreen-wrap:fullscreen .comic-reader-bar a,
.comic-fullscreen-wrap:-webkit-full-screen .comic-reader-bar a,
.comic-fullscreen-wrap:-moz-full-screen .comic-reader-bar a { color: #fff; }
.comic-fullscreen-wrap:fullscreen .comic-reader,
.comic-fullscreen-wrap:-webkit-full-screen .comic-reader,
.comic-fullscreen-wrap:-moz-full-screen .comic-reader {
    flex: 1; min-height: 0; background: none;
}
.comic-fullscreen-wrap:fullscreen .comic-page-img,
.comic-fullscreen-wrap:-webkit-full-screen .comic-page-img,
.comic-fullscreen-wrap:-moz-full-screen .comic-page-img {
    max-height: 88vh;
}
.comic-fullscreen-wrap:fullscreen .comic-reader-bottom,
.comic-fullscreen-wrap:-webkit-full-screen .comic-reader-bottom,
.comic-fullscreen-wrap:-moz-full-screen .comic-reader-bottom {
    margin-top: 10px;
}
.comic-fullscreen-wrap:fullscreen .comic-reader-bottom .muted,
.comic-fullscreen-wrap:-webkit-full-screen .comic-reader-bottom .muted { color: #ccc; }
.comic-reader {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: #1c1a18; border-radius: 14px; padding: 10px; min-height: 300px;
}
.comic-page-wrap { max-width: 100%; display: flex; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.comic-page-wrap.zoomed { cursor: grab; }
.comic-page-img {
    max-width: 100%; max-height: 78vh; border-radius: 6px; transform-origin: center center;
    user-select: none; -webkit-user-select: none; pointer-events: none;
}
.comic-nav {
    position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
    width: 15%; min-width: 44px; justify-content: center;
    font-size: 2.5em; color: rgba(255,255,255,0.55); text-decoration: none;
}
.comic-nav:hover { color: rgba(255,255,255,0.9); text-decoration: none; background: rgba(255,255,255,0.06); }
.comic-nav-prev { left: 0; border-radius: 14px 0 0 14px; }
.comic-nav-next { right: 0; border-radius: 0 14px 14px 0; }
.comic-reader-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.comic-zoom-hint { text-align: center; font-size: 0.82em; margin: 8px 0 0; }
.comic-fullscreen-wrap:fullscreen .comic-zoom-hint,
.comic-fullscreen-wrap:-webkit-full-screen .comic-zoom-hint { color: #ccc; }

.comic-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.comic-admin-page { text-align: center; }
.comic-admin-page img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.comic-admin-actions { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.comic-current-cover { max-width: 160px; border-radius: 8px; display: block; margin-bottom: 14px; border: 1px solid var(--border); }
.comic-cta { background: #fff0e6; border-color: var(--primary); text-align: center; }
.comic-cta p { margin: 0 0 12px; }

/* --- Ötletláda és menü-badge csoport (fűzd hozzá a style.css végéhez) --- */
.badge-group { display: flex; gap: 8px; flex-wrap: wrap; }
.idea-badge { border-color: #4a9b7f; color: #2f7a5f; }
.idea-badge:hover, .idea-badge.active { background: #4a9b7f; color: #fff; }

.idea-card { border-left: 4px solid var(--primary); }
.idea-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.idea-message { white-space: pre-wrap; margin: 0 0 10px; }
.idea-contact { margin: 0 0 10px; }
.idea-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.idea-status-uj { background: #fbe4e1; color: var(--error); }
.idea-status-olvasva { background: var(--border); }
.idea-status-tarolva { background: #e3f5e1; color: var(--success); }
.idea-status-felretett { background: #f0e6d2; color: #8a6d1f; }


/* --- Webshop: termék-részletező oldal --- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.product-detail-image img { width: 100%; border-radius: 14px; }
.product-detail-placeholder { height: 320px; font-size: 5em; }
.product-detail-price { font-size: 1.8em; margin: 10px 0; }
.product-detail-description { margin: 16px 0; line-height: 1.6; }
.product-detail-form { display: flex; align-items: end; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.product-detail-form label { font-weight: 600; font-size: 0.9em; }
.product-detail-form .qty-input { display: block; margin-top: 6px; width: 80px; }

/* --- Admin: rendelés-részletek --- */
.order-detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; }
.order-item-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

@media (max-width: 800px) {
    .product-detail, .order-detail-grid { grid-template-columns: 1fr; }
}
/* --- Mobilon a fejléc ne maradjon fixen a képernyő tetején görgetéskor --- */
@media (max-width: 640px) {
    .topbar {
        position: static;
    }
}

/* --- Fotós hero szekció a kezdőlapon --- */
.hero-photo {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background: url('../uploads/site/hero-allatok.jpg') center/cover no-repeat;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 48px;
}
.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,20,15,0.90) 0%, rgba(10,20,15,0.60) 42%, rgba(10,20,15,0.18) 72%, rgba(10,20,15,0) 100%);
}
.hero-photo-content {
    position: relative;
    z-index: 1;
    padding: 60px 50px;
    max-width: 620px;
    color: #fff;
}
/* --- Hero: cím a bal felső sarokban, gombok a bal alsó sarokban --- */
.hero-photo-content-minimal {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 44px;
    padding-bottom: 44px;
}
.hero-photo-content-minimal h1 {
    margin-bottom: 0;
}}
.eyebrow-line {
    display: flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8em; font-weight: 700;
    color: var(--primary); margin: 0 0 18px;
}
.eyebrow-dash { width: 28px; height: 2px; background: var(--primary); display: inline-block; }
.hero-photo-content h1 {
    font-family: Georgia, 'Times New Roman', serif; font-size: 2.6em; line-height: 1.15;
    margin: 0 0 20px; color: #fff;
}
.accent-text { color: var(--primary); }
.hero-lead-photo { color: rgba(255,255,255,0.85); font-size: 1.1em; margin: 0 0 30px; }

.btn-outline-light {
    background: transparent; border: 1px solid rgba(255,255,255,0.6); color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); text-decoration: none; }

@media (max-width: 800px) {
    .hero-photo { min-height: 460px; }
    .hero-photo-content { padding: 40px 24px; max-width: 100%; }
    .hero-photo-content h1 { font-size: 1.9em; }
}


/* Logó: kép / kép+szöveg / szöveg - méretek az admin Beállításokból (--logo-h, --logo-font) */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: var(--logo-font, 21px); }
.logo-img { height: var(--logo-h, 44px); width: auto; max-width: 320px; object-fit: contain; display: block; }
@media (max-width: 640px) {
    .logo { font-size: calc(var(--logo-font, 21px) * 0.85); }
    .logo-img { height: calc(var(--logo-h, 44px) * 0.8); max-width: 200px; }
}

/* Állataim: lenyíló űrlap + azonosító kártya */
.new-pet-toggle { margin-bottom: 20px; }
.new-pet-toggle > summary { list-style: none; display: inline-block; cursor: pointer; user-select: none; }
.new-pet-toggle > summary::-webkit-details-marker { display: none; }
.new-pet-toggle[open] > summary { margin-bottom: 14px; }
.pet-card .btn + .btn { margin-left: 6px; }
.pet-id-wrap { max-width: 720px; margin: 10px 0 18px; }
.pet-id-card { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }
.pet-id-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--border); }