/*
 * Aqary State — Property Detail Page  v4-A.3
 * Requires home.css (design tokens, nav, footer, .as-container, .as-property-card)
 * Prefix: .pd-  (property detail — zero conflicts with home.css)
 */

/* ── Page wrapper ──────────────────────────────────────────────────────────── */
.pd-page {
    padding-top: 28px;
    padding-bottom: 80px;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────────── */
.pd-breadcrumb {
    padding: 0 0 18px;
    font-size: 0.8125rem;
    color: var(--c-muted);
}
.pd-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pd-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pd-breadcrumb li + li::before {
    font-family: 'remixicon';
    content: '\ea6e'; /* ri-arrow-right-s-line */
    font-size: 1rem;
    color: var(--c-subtle);
    flex-shrink: 0;
}
[dir="rtl"] .pd-breadcrumb li + li::before {
    content: '\ea64'; /* ri-arrow-left-s-line */
}
.pd-breadcrumb a {
    color: var(--c-muted);
    text-decoration: none;
    transition: color .15s;
}
.pd-breadcrumb a:hover { color: var(--c-primary); }
.pd-breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 500; }

/* ── Single-image gallery ───────────────────────────────────────────────────── */
/*
 * Completely separate markup (.pd-gallery-single <figure>) used when imgCount === 1.
 * Avoids the multi-image grid structure entirely — no black side panels, no empty cells.
 * padding-top trick for reliable cross-browser aspect-ratio + max-height capping.
 */
.pd-gallery-single {
    display: block;
    width: 100%;
    position: relative;
    /* 56.25% = 9/16 (16:9 ratio); min() caps at 520px on very wide viewports */
    padding-top: min(56.25%, 520px);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--c-bg-alt);
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.pd-gallery-single img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.pd-gallery-single:hover img { transform: scale(1.025); }

/* Broken image: replace with icon placeholder instead of black void */
.pd-gallery-single--broken {
    padding-top: 0;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-subtle);
    font-size: 4rem;
}

@media (max-width: 767px) {
    .pd-gallery-single {
        /* 56.25% of mobile width — naturally smaller; no cap needed */
        padding-top: 56.25%;
        border-radius: var(--r-md);
    }
}

/* ── Multi-image gallery ────────────────────────────────────────────────────── */
/*
 * Used when imgCount >= 2. Layout varies by count modifier class:
 *   --two   : main + 1 thumb — 2:1 split
 *   --few   : main + 2–3 thumbs — 3:2 split
 *   --multi : main + 4 thumbs — 3:2 split (premium template)
 * Desktop: explicit height (not max-height) so child height:100% resolves correctly.
 * Mobile: stacked — main image full width, thumbs become horizontal scroll strip.
 */
.pd-gallery {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--c-bg-alt);
}

@media (min-width: 768px) {
    .pd-gallery--multi,
    .pd-gallery--few {
        grid-template-columns: 3fr 2fr;
        height: 460px;
    }
    .pd-gallery--two {
        grid-template-columns: 2fr 1fr;
        height: 380px;
    }
}

/* Empty state */
.pd-gallery--empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-gallery--empty .pd-gallery__placeholder { min-height: 180px; }

.pd-gallery__main {
    position: relative;
    overflow: hidden;
    background: var(--c-bg-alt);
    min-height: 200px;
}
@media (min-width: 768px) {
    .pd-gallery--multi .pd-gallery__main,
    .pd-gallery--few   .pd-gallery__main,
    .pd-gallery--two   .pd-gallery__main { min-height: 0; }
}
.pd-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.pd-gallery__main:hover img { transform: scale(1.025); }

.pd-gallery__placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-subtle);
    font-size: 4rem;
}

/* "View all X photos" overlay pill — now a <button> lightbox trigger */
.pd-gallery__view-all {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(0,0,0,.52);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .15s;
    pointer-events: auto;
    z-index: 2;
}
.pd-gallery__view-all:hover { background: rgba(0,0,0,.72); }
[dir="rtl"] .pd-gallery__view-all { right: auto; left: 14px; }

/* Main image and thumbs are lightbox triggers — show pointer */
.pd-gallery__main[data-lightbox-idx],
.pd-gallery__thumb[data-lightbox-idx],
.pd-gallery-single[data-lightbox-idx] { cursor: pointer; }

/* Desktop thumbs: 2×2 sub-grid for multi/few; 1×1 for two-image */
.pd-gallery__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    padding-inline-start: 3px;
}
.pd-gallery--two .pd-gallery__thumbs {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.pd-gallery__thumb {
    overflow: hidden;
    position: relative;
    background: var(--c-bg-alt);
}
.pd-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .2s;
}
.pd-gallery__thumb:hover img { transform: scale(1.04); opacity: .88; }

/* "+N more" overlay on last thumb */
.pd-gallery__thumb-more {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.52);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}
.pd-gallery__thumb:last-child .pd-gallery__thumb-more { display: flex; }
.pd-gallery__thumb-more span {
    font-size: .75rem;
    font-weight: 400;
    opacity: .85;
}

/* Mobile: main image stacked, thumbs = horizontal scroll strip */
@media (max-width: 767px) {
    .pd-gallery__thumbs {
        display: flex;
        grid-template: none;
        gap: 4px;
        padding: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pd-gallery__thumbs::-webkit-scrollbar { display: none; }
    .pd-gallery__thumb {
        flex: 0 0 90px;
        height: 66px;
        border-radius: 6px;
    }
    .pd-gallery__thumb img { min-height: 66px; }
    .pd-gallery__thumb-more { border-radius: 6px; }
}

/* ── Main body: 2-col desktop ───────────────────────────────────────────────── */
.pd-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}
@media (min-width: 1024px) {
    .pd-body {
        grid-template-columns: 1fr 360px;
    }
}

/* ── Left column ────────────────────────────────────────────────────────────── */
.pd-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Property header */
.pd-header {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border);
}
.pd-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .025em;
}
.pd-badge--sale  { background: var(--c-primary); color: #fff; }
.pd-badge--rent  { background: var(--c-teal);    color: #fff; }
.pd-badge--type  {
    background: var(--c-bg-alt);
    color: var(--c-text-2);
    border: 1.5px solid var(--c-border);
}
html[data-theme="dark"] .pd-badge--type {
    background: var(--c-surface);
    border-color: var(--c-border);
}

.pd-header__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--c-text);
    line-height: var(--lh-tight);
    margin: 0 0 12px;
}
.pd-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: .875rem;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.pd-header__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pd-header__meta-item i { color: var(--c-primary); font-size: 1rem; }

.pd-header__price {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--c-primary);
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pd-header__currency {
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-muted);
}
.pd-header__price-na {
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-muted);
}

/* ── Facts grid ─────────────────────────────────────────────────────────────── */
.pd-facts {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 20px;
}
html[data-theme="dark"] .pd-facts { background: var(--c-bg-card); }

.pd-facts__title {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-muted);
    margin-bottom: 16px;
}
html[lang="ar"] .pd-facts__title { letter-spacing: 0; font-size: .75rem; }

.pd-facts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 540px) {
    .pd-facts__grid { grid-template-columns: repeat(3, 1fr); }
}

.pd-fact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    transition: border-color .15s, box-shadow .15s;
}
.pd-fact-item:hover {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-lt);
}
html[data-theme="dark"] .pd-fact-item { background: var(--c-surface); }

.pd-fact-item__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-xs);
    background: var(--c-primary-lt);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
html[data-theme="dark"] .pd-fact-item__icon {
    background: rgba(27,101,65,.18);
    color: var(--c-accent);
}

.pd-fact-item__value {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--c-text);
    display: block;
    line-height: 1.25;
}
.pd-fact-item__label {
    font-size: .7375rem;
    color: var(--c-muted);
    display: block;
    margin-top: 1px;
}

/* ── Description ─────────────────────────────────────────────────────────────── */
.pd-description {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 24px;
}
html[data-theme="dark"] .pd-description { background: var(--c-bg-card); }

.pd-description__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-description__heading::before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: var(--c-primary);
    border-radius: 2px;
    flex-shrink: 0;
}
[dir="rtl"] .pd-description__heading::before { order: 1; }

.pd-description__body {
    font-size: .9375rem;
    color: var(--c-text-2);
    line-height: var(--lh);
    white-space: pre-wrap;
    word-break: break-word;
}
html[lang="ar"] .pd-description__body { line-height: 1.9; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.pd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 1024px) {
    .pd-sidebar {
        position: sticky;
        top: calc(var(--nav-h) + 20px);
    }
}

/* Summary card — top accent border for premium feel */
.pd-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-primary);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--sh-md);
    transition: box-shadow .2s;
}
.pd-card:hover { box-shadow: var(--sh-lg); }
html[data-theme="dark"] .pd-card {
    background: var(--c-bg-card);
    border-color: var(--c-border);
    border-top-color: var(--c-primary);
}

.pd-card__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-primary);
    margin-bottom: 6px;
}
html[lang="ar"] .pd-card__eyebrow { letter-spacing: 0; font-size: .75rem; }

.pd-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 4px;
    line-height: var(--lh-snug);
}
.pd-card__price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pd-card__currency {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--c-muted);
}
.pd-card__location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--c-muted);
    font-size: .875rem;
    margin-bottom: 18px;
    line-height: 1.5;
}
.pd-card__location i { color: var(--c-primary); margin-top: 2px; flex-shrink: 0; }

.pd-card__divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 18px 0;
}

/* Compact facts inside sidebar card */
.pd-card__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.pd-card__fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 6px;
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
    gap: 3px;
    border: 1px solid transparent;
    transition: border-color .15s;
}
.pd-card__fact:hover { border-color: var(--c-border); }
html[data-theme="dark"] .pd-card__fact { background: var(--c-surface); }
.pd-card__fact i { color: var(--c-primary); font-size: 1.125rem; }
.pd-card__fact-value { font-size: .875rem; font-weight: 600; color: var(--c-text); }
.pd-card__fact-label { font-size: .6875rem; color: var(--c-muted); }

/* ── Contact CTA card ─────────────────────────────────────────────────────────── */
.pd-cta-card {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-teal) 100%);
    border-radius: var(--r-lg);
    padding: 24px;
    color: #fff;
    text-align: center;
    box-shadow: var(--sh-md);
}
.pd-cta-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 14px;
}
.pd-cta-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.pd-cta-card__sub {
    font-size: .8125rem;
    opacity: .85;
    line-height: 1.6;
    margin-bottom: 18px;
}
html[lang="ar"] .pd-cta-card__sub { line-height: 1.9; }
.pd-cta-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--r-sm);
    padding: 12px 20px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid transparent;
    line-height: 1.2;
}
.pd-cta-card__btn:hover { opacity: .9; transform: translateY(-1px); }
.pd-cta-card__btn i { font-size: 1.1rem; flex-shrink: 0; }

/* Phone reveal — primary white CTA, high contrast */
.pd-cta-card__btn--phone {
    background: #fff;
    color: var(--c-primary);
    border-color: transparent;
    font-size: .9375rem;
}
.pd-cta-card__btn--phone i { color: var(--c-primary); }
.pd-cta-card__btn--phone:hover:not(:disabled) {
    opacity: .94;
    transform: translateY(-1px);
}
.pd-cta-card__btn--phone:disabled {
    opacity: .7;
    cursor: wait;
}

/* Revealed state: stays white, shows phone number LTR */
.pd-cta-card__btn--revealed {
    background: #fff;
    color: var(--c-primary);
    border-color: transparent;
    letter-spacing: .04em;
    cursor: default;
    pointer-events: auto;
}
.pd-cta-card__btn--revealed:hover { opacity: 1; transform: none; }

/* Loading pulse */
.pd-cta-card__btn--loading {
    animation: pd-pulse .8s ease-in-out infinite alternate;
    cursor: wait;
}
@keyframes pd-pulse { from { opacity: .55; } to { opacity: 1; } }

/* Error state — brief red tint then auto-resets */
.pd-cta-card__btn--error {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.5);
    cursor: default;
}

/* No-phone message */
.pd-cta-no-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .8125rem;
    color: rgba(255,255,255,.65);
    text-align: center;
    padding: 10px 0 2px;
}
.pd-cta-no-phone i { font-size: 1rem; opacity: .75; }

/* ── Phone reveal: styles live in .pd-cta-card__btn--phone above ─────────────── */

/* ── Related properties ───────────────────────────────────────────────────────── */
.pd-related {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--c-border);
}
.pd-related__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.pd-related__eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
html[lang="ar"] .pd-related__eyebrow { letter-spacing: 0; font-size: .75rem; }
.pd-related__eyebrow::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-primary);
    border-radius: 1px;
}
[dir="rtl"] .pd-related__eyebrow::before { display: none; }
[dir="rtl"] .pd-related__eyebrow::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-primary);
    border-radius: 1px;
}
.pd-related__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.pd-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 540px)  { .pd-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pd-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .pd-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Gallery lightbox ───────────────────────────────────────────────────────── */
.pd-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
}
.pd-lb[hidden] { display: none; }

/* Stage */
.pd-lb__stage {
    position: relative;
    width: 100%;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 56px 72px 12px;
    box-sizing: border-box;
}
.pd-lb__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.pd-lb__broken {
    color: rgba(255,255,255,.35);
    font-size: 5rem;
    text-align: center;
}

/* Close button */
.pd-lb__close {
    position: fixed;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 9002;
    padding: 0;
}
.pd-lb__close:hover { background: rgba(255,255,255,.25); }
[dir="rtl"] .pd-lb__close { right: auto; left: 14px; }

/* Prev / Next */
.pd-lb__prev,
.pd-lb__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 9001;
    padding: 0;
}
.pd-lb__prev:hover,
.pd-lb__next:hover { background: rgba(255,255,255,.25); }
.pd-lb__prev { left: 10px; }
.pd-lb__next { right: 10px; }
[dir="rtl"] .pd-lb__prev { left: auto; right: 10px; }
[dir="rtl"] .pd-lb__next { right: auto; left: 10px; }

/* Counter */
.pd-lb__counter {
    color: rgba(255,255,255,.55);
    font-size: .8125rem;
    letter-spacing: .04em;
    padding: 4px 0;
    flex-shrink: 0;
}

/* Thumbnail strip */
.pd-lb__thumbs {
    display: flex;
    gap: 6px;
    padding: 8px 14px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    flex-shrink: 0;
    justify-content: center;
}
.pd-lb__thumb {
    width: 76px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .55;
    transition: opacity .15s, border-color .15s;
}
.pd-lb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.pd-lb__thumb:hover { opacity: .85; }
.pd-lb__thumb--active { border-color: #fff; opacity: 1; }

/* Hide nav/thumbs/counter for single image */
.pd-lb[data-count="1"] .pd-lb__prev,
.pd-lb[data-count="1"] .pd-lb__next,
.pd-lb[data-count="1"] .pd-lb__thumbs,
.pd-lb[data-count="1"] .pd-lb__counter { display: none; }

@media (max-width: 640px) {
    .pd-lb__stage { padding: 52px 54px 8px; }
    .pd-lb__prev  { left:  4px; width: 38px; height: 38px; font-size: 1.25rem; }
    .pd-lb__next  { right: 4px; width: 38px; height: 38px; font-size: 1.25rem; }
    [dir="rtl"] .pd-lb__prev { right: 4px; left: auto; }
    [dir="rtl"] .pd-lb__next { left: 4px; right: auto; }
    .pd-lb__thumb { width: 58px; height: 42px; }
}

/* ── Geo location links (Phase 5-A.2.4) ─────────────────────────────────── */
.pd-location__link {
    color: #1a6f3c;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #1a6f3c;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .15s, text-decoration-color .15s, text-decoration-thickness .15s;
}
.pd-location__link:hover {
    color: #155230;
    text-decoration-color: #155230;
    text-decoration-thickness: 2px;
}
.pd-location__link:focus-visible {
    outline: 2px solid #1a6f3c;
    outline-offset: 3px;
    border-radius: 4px;
}
html[data-theme="dark"] .pd-location__link {
    color: #32a067;
    text-decoration-color: #32a067;
}
html[data-theme="dark"] .pd-location__link:hover {
    color: #5ecb90;
    text-decoration-color: #5ecb90;
}
.pd-location__sep   { display: inline; }
.pd-location__plain { display: inline; }

/* ── Edit button (owner only) ─────────────────────────────────────────── */
.pd-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: var(--as-primary, #1a7a4a);
    border: 1.5px solid var(--as-primary, #1a7a4a);
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.pd-edit-btn:hover {
    background: #155f39;
    border-color: #155f39;
    color: #fff;
    text-decoration: none;
}
html[data-theme="dark"] .pd-edit-btn {
    background: #27ae60;
    border-color: #27ae60;
}
html[data-theme="dark"] .pd-edit-btn:hover {
    background: #1e8449;
    border-color: #1e8449;
}

/* ── Phone Reveal Lead-Capture Modal (prefix: prl-) ────────────────────────── */
.prl-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.prl-modal[hidden] { display: none; }

.prl-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.prl-modal__box {
    position: relative;
    z-index: 1;
    background: var(--as-bg, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    padding: 36px 32px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    animation: prl-slide-in .22s ease;
}

@keyframes prl-slide-in {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.prl-modal__close {
    position: absolute;
    top: 14px;
    inset-inline-end: 16px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--as-muted, #888);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.prl-modal__close:hover { background: var(--as-hover-bg, #f5f5f5); color: var(--as-text, #222); }

.prl-modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--as-text, #1a1a1a);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.prl-modal__title i { color: var(--as-primary, #236a3b); font-size: 1.25rem; }

.prl-modal__desc {
    font-size: .875rem;
    color: var(--as-muted, #666);
    margin: 0 0 24px;
    line-height: 1.55;
}

.prl-modal__field { margin-bottom: 16px; }

.prl-modal__label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--as-text, #333);
    margin-bottom: 6px;
}

.prl-modal__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--as-border, #ddd);
    border-radius: 8px;
    font-size: .9375rem;
    color: var(--as-text, #1a1a1a);
    background: var(--as-input-bg, #fff);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
}
.prl-modal__input:focus {
    border-color: var(--as-primary, #236a3b);
    box-shadow: 0 0 0 3px rgba(35,106,59,.12);
}
.prl-modal__input--err {
    border-color: #e53935;
    box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}

.prl-modal__err {
    display: block;
    font-size: .8rem;
    color: #e53935;
    margin-top: 4px;
    min-height: 1.1em;
}
.prl-modal__err--global {
    text-align: center;
    margin-bottom: 10px;
    font-size: .85rem;
}

.prl-modal__submit {
    width: 100%;
    padding: 12px;
    background: var(--as-primary, #236a3b);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .18s, opacity .15s;
    margin-top: 8px;
}
.prl-modal__submit:hover:not(:disabled) { background: #1a5430; }
.prl-modal__submit:disabled { opacity: .65; cursor: not-allowed; }

/* Success panel */
.prl-modal__success-icon {
    text-align: center;
    font-size: 2.5rem;
    color: var(--as-primary, #236a3b);
    margin-bottom: 12px;
}
.prl-modal__revealed-label {
    text-align: center;
    font-size: .85rem;
    color: var(--as-muted, #666);
    margin: 0 0 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.prl-modal__phone-link {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--as-text, #1a1a1a);
    text-decoration: none;
    letter-spacing: .03em;
    margin-bottom: 20px;
    transition: color .15s;
}
.prl-modal__phone-link:hover { color: var(--as-primary, #236a3b); }

.prl-modal__action-row {
    display: flex;
    gap: 10px;
}
.prl-modal__action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, opacity .15s;
}
.prl-modal__action-btn--call {
    background: var(--as-primary, #236a3b);
    color: #fff;
}
.prl-modal__action-btn--call:hover { background: #1a5430; color: #fff; }
.prl-modal__action-btn--wa {
    background: #25d366;
    color: #fff;
}
.prl-modal__action-btn--wa:hover { background: #1ebe5d; color: #fff; }

/* Dark mode */
html[data-theme="dark"] .prl-modal__box {
    background: var(--as-bg-dark, #1e2129);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
html[data-theme="dark"] .prl-modal__input {
    background: var(--as-input-bg-dark, #2a2d36);
    border-color: var(--as-border-dark, #3a3e4a);
    color: var(--as-text-dark, #e8e8e8);
}
html[data-theme="dark"] .prl-modal__close:hover {
    background: rgba(255,255,255,.08);
    color: #eee;
}

@media (prefers-color-scheme: dark) {
    .prl-modal__box {
        background: #1e2129;
        box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    .prl-modal__input {
        background: #2a2d36;
        border-color: #3a3e4a;
        color: #e8e8e8;
    }
    .prl-modal__close:hover { background: rgba(255,255,255,.08); color: #eee; }
}

@media (max-width: 480px) {
    .prl-modal__box { padding: 28px 18px 22px; }
    .prl-modal__action-row { flex-direction: column; }
}

/* =============================================================================
   PHASE 6-A.6.1b — Share Buttons, Sidebar Banner, Comments
   (appended to property.css v4-A.3)
   ============================================================================= */

/* -- Share buttons ----------------------------------------------------------- */
.pd-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 4px;
}
.pd-share__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--c-muted);
    margin-inline-end: 4px;
    white-space: nowrap;
}
.pd-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    font-size: .8125rem;
    font-weight: 600;
    border: 1.5px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
    white-space: nowrap;
    line-height: 1;
}
.pd-share__btn:hover  { transform: translateY(-1px); }
.pd-share__btn:active { transform: translateY(0); }
.pd-share__btn i      { font-size: 1rem; flex-shrink: 0; }

.pd-share__btn--wa           { border-color: #25d366; color: #128c5e; }
.pd-share__btn--wa:hover     { background: #25d366; color: #fff; border-color: #25d366; }
.pd-share__btn--twitter      { border-color: #1d9bf0; color: #1d9bf0; }
.pd-share__btn--twitter:hover{ background: #1d9bf0; color: #fff; }
.pd-share__btn--fb           { border-color: #1877f2; color: #1877f2; }
.pd-share__btn--fb:hover     { background: #1877f2; color: #fff; }
.pd-share__btn--copy:hover   { background: var(--c-bg-alt); border-color: var(--c-primary); color: var(--c-primary); }

html[data-theme="dark"] .pd-share__btn { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-2); }
@media (prefers-color-scheme: dark) { .pd-share__btn { background: #1e293b; border-color: #2d3748; color: #cbd5e1; } }

@media (max-width: 480px) {
    .pd-share__label-text { display: none; }
    .pd-share__btn { padding: 8px 10px; }
}

/* -- Sidebar banner ---------------------------------------------------------- */
.pd-sidebar-banner {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.pd-sidebar-banner__img-link { display: block; }
.pd-sidebar-banner__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 180px;
}
.pd-sidebar-banner__title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 16px 16px 4px;
    line-height: var(--lh-snug);
}
.pd-sidebar-banner__sub {
    font-size: .8125rem;
    color: var(--c-muted);
    margin: 0 16px 12px;
    line-height: 1.5;
}
.pd-sidebar-banner__cta {
    display: block;
    margin: 0 16px 16px;
    padding: 9px 16px;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--r-md);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}
.pd-sidebar-banner__cta:hover { background: var(--c-primary-dk); }
html[data-theme="dark"] .pd-sidebar-banner { background: var(--c-bg-card); border-color: var(--c-border); }
@media (prefers-color-scheme: dark) { .pd-sidebar-banner { background: #1e293b; border-color: #2d3748; } }

/* -- Comments section ------------------------------------------------------- */
.pd-comments {
    margin-top: 40px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--sh-sm);
}
html[data-theme="dark"] .pd-comments { background: var(--c-bg-card); border-color: var(--c-border); }
@media (prefers-color-scheme: dark) { .pd-comments { background: #1e293b; border-color: #2d3748; } }

.pd-comments__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-border);
}
html[data-theme="dark"] .pd-comments__header { border-bottom-color: var(--c-border); }
@media (prefers-color-scheme: dark) { .pd-comments__header { border-bottom-color: #2d3748; } }

.pd-comments__header-left { flex: 1; min-width: 0; }
.pd-comments__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 4px;
}
.pd-comments__title i { color: var(--c-primary); font-size: 1.2rem; flex-shrink: 0; }
.pd-comments__count { font-size: .8125rem; font-weight: 500; color: var(--c-muted); margin-inline-start: 2px; }
.pd-comments__sub { font-size: .875rem; color: var(--c-muted); margin: 0; line-height: 1.55; }

/* Empty state */
.pd-comments__empty { text-align: center; padding: 36px 20px 20px; color: var(--c-muted); }
.pd-comments__empty i { font-size: 2.5rem; color: var(--c-border); display: block; margin-bottom: 12px; }
.pd-comments__empty p { font-size: .9375rem; margin: 0; }

/* Skeleton loading */
.pd-comments__loading { padding: 12px 0; display: flex; flex-direction: column; gap: 20px; }
.pd-comments__loading[hidden] { display: none; }
.pd-comments__skeleton { display: flex; flex-direction: column; gap: 8px; }
.pd-comments__skel-row {
    height: 14px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--c-border) 25%, var(--c-bg-alt) 50%, var(--c-border) 75%);
    background-size: 200% 100%;
    animation: pd-skel-shimmer 1.4s infinite;
    width: 100%;
}
.pd-comments__skel-row--short { width: 55%; }
.pd-comments__skel-row--med   { width: 75%; }
@keyframes pd-skel-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
html[data-theme="dark"] .pd-comments__skel-row,
.pd-comments__loading[data-dark] .pd-comments__skel-row { background: linear-gradient(90deg,#2d3748 25%,#1e293b 50%,#2d3748 75%); background-size:200% 100%; animation:pd-skel-shimmer 1.4s infinite; }
@media (prefers-color-scheme: dark) { .pd-comments__skel-row { background:linear-gradient(90deg,#2d3748 25%,#1e293b 50%,#2d3748 75%); background-size:200% 100%; animation:pd-skel-shimmer 1.4s infinite; } }

/* Anonymous login card */
.pd-comments__login-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--c-primary-lt);
    border: 1px solid rgba(27,101,65,.15);
    border-radius: var(--r-md);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pd-comments__login-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.pd-comments__login-body { flex: 1; min-width: 140px; }
.pd-comments__login-title { font-size: .9375rem; font-weight: 700; color: var(--c-text); margin: 0 0 2px; }
.pd-comments__login-sub   { font-size: .8125rem; color: var(--c-muted); margin: 0; line-height: 1.5; }
.pd-comments__login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, transform .12s;
    flex-shrink: 0;
}
.pd-comments__login-btn:hover { background: var(--c-primary-dk); transform: translateY(-1px); }
.pd-comments__login-btn i     { font-size: .9rem; }
html[data-theme="dark"] .pd-comments__login-card { background: rgba(27,101,65,.12); border-color: rgba(27,101,65,.25); }
@media (prefers-color-scheme: dark) { .pd-comments__login-card { background: rgba(27,101,65,.12); border-color: rgba(27,101,65,.25); } }

/* Comment form (logged-in) */
.pd-comment-form { margin-bottom: 28px; }
.pd-comment-form__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pd-comment-form__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.pd-comment-form__username { font-size: .875rem; font-weight: 600; color: var(--c-text-2); }

.pd-comment-form__reply-ctx {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--c-primary-lt);
    border-radius: var(--r-sm);
    font-size: .8125rem;
    color: var(--c-primary);
    font-weight: 500;
    margin-bottom: 10px;
}
.pd-comment-form__reply-ctx[hidden] { display: none; }
.pd-comment-form__reply-ctx i       { font-size: 1rem; flex-shrink: 0; }
.pd-comment-form__cancel-reply {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--c-muted);
    font-size: .8125rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--r-xs);
    transition: color .12s;
    font-family: inherit;
}
.pd-comment-form__cancel-reply:hover { color: var(--c-text); }

.pd-comment-form__textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: .9375rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.pd-comment-form__textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-md);
}
.pd-comment-form__textarea::placeholder { color: var(--c-muted); }
html[data-theme="dark"] .pd-comment-form__textarea { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
@media (prefers-color-scheme: dark) { .pd-comment-form__textarea { background: #253347; border-color: #2d3748; color: #f1f5f9; } .pd-comment-form__textarea::placeholder { color: #64748b; } }

.pd-comment-form__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .75rem;
    color: var(--c-muted);
    margin: 8px 0 12px;
    line-height: 1.5;
}
.pd-comment-form__note i { font-size: .875rem; color: var(--c-primary); margin-top: 1px; flex-shrink: 0; }

.pd-comment-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
html[lang="ar"] .pd-comment-form__footer { justify-content: flex-start; }

.pd-comment-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    font-size: .9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .12s, opacity .15s;
    box-shadow: var(--sh-green);
}
.pd-comment-form__submit:hover:not(:disabled) { background: var(--c-primary-dk); transform: translateY(-1px); }
.pd-comment-form__submit:active               { transform: translateY(0); }
.pd-comment-form__submit:disabled             { opacity: .6; cursor: not-allowed; transform: none; }
.pd-comment-form__submit i                    { font-size: 1rem; }

.pd-comment-form__err { margin-top: 10px; font-size: .8125rem; color: #dc2626; display: none; }
.pd-comment-form__err--visible { display: block; }

/* Comment list */
.pd-comments__list { margin-top: 8px; }

/* Individual comment */
.pd-comment {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-border-l);
}
.pd-comment:last-child { border-bottom: none; }
html[data-theme="dark"] .pd-comment { border-bottom-color: var(--c-border); }
@media (prefers-color-scheme: dark) { .pd-comment { border-bottom-color: #1e293b; } }

.pd-comment__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    user-select: none;
}
.pd-comment--reply .pd-comment__avatar { width: 30px; height: 30px; font-size: .75rem; background: var(--c-teal); }
.pd-comment__body { flex: 1; min-width: 0; }
.pd-comment__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pd-comment__name { font-size: .875rem; font-weight: 700; color: var(--c-text); }
.pd-comment__time { font-size: .75rem; color: var(--c-muted); flex-shrink: 0; }
.pd-comment__text {
    font-size: .9375rem;
    color: var(--c-text-2);
    line-height: 1.65;
    margin: 0 0 8px;
    word-break: break-word;
    white-space: pre-wrap;
}
.pd-comment__reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--c-muted);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 0;
    transition: color .12s;
    font-family: inherit;
}
.pd-comment__reply-btn:hover { color: var(--c-primary); }
.pd-comment__reply-btn i     { font-size: .875rem; }

/* Reply indent — replies live inside .pd-comment__body so indent is automatic */
.pd-comment__replies {
    margin-top: 12px;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--c-primary-lt);
}
.pd-comment--reply {
    padding: 10px 0;
    border-bottom: 1px dashed var(--c-border-l);
}
.pd-comment--reply:first-child { padding-top: 6px; }
.pd-comment--reply:last-child  { border-bottom: none; padding-bottom: 0; }
.pd-comment--reply .pd-comment__avatar { width: 30px; height: 30px; font-size: .75rem; background: var(--c-teal, #0d9488); }
html[data-theme="dark"] .pd-comment__replies { border-inline-start-color: rgba(27,101,65,.4); }
@media (prefers-color-scheme: dark) { .pd-comment__replies { border-inline-start-color: rgba(27,101,65,.4); } }

/* Load more button */
.pd-comments__load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 11px 20px;
    background: none;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-pill);
    font-size: .875rem;
    font-weight: 600;
    color: var(--c-text-2);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    font-family: inherit;
}
.pd-comments__load-more:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-lt); }
.pd-comments__load-more[hidden] { display: none; }

/* Mobile */
@media (max-width: 640px) {
    .pd-comments                 { padding: 20px 16px 18px; margin-top: 28px; }
    .pd-comments__login-card     { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pd-comments__login-btn      { width: 100%; justify-content: center; }
    .pd-comment-form__submit     { width: 100%; justify-content: center; }
    .pd-comment-form__footer     { justify-content: stretch; }
    html[lang="ar"] .pd-comment-form__footer { justify-content: stretch; }
}