/* ═══════════════════════════════════════════════════════════
   Sari3 Guide — distinct from IQ Cars: red accent, magazine cards,
   hex brand rings, dark compare bar, accordion specs
   ═══════════════════════════════════════════════════════════ */

.g-page {
    background: transparent;
    padding-bottom: 5rem;
    min-height: 70vh;
}

.g-page-head {
    padding: 1.25rem 0 0.5rem;
    margin-bottom: 0.5rem;
}

.g-body { padding-top: 0.75rem; }
.g-page-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    color: var(--grey-900);
}
.g-page-sub { font-size: 0.9rem; color: var(--grey-500); margin-top: 0.35rem; }

.g-compare-dual {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.g-section--compare { margin-bottom: 2rem; }

.g-compare-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.g-compare-link:hover {
    border-color: rgba(227, 30, 36, 0.22);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.g-compare-link--accent {
    border-inline-start: 3px solid var(--primary);
}

.g-compare-link-text {
    flex: 1;
    min-width: 0;
}

.g-compare-link-text h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--grey-900);
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.g-compare-link-text p {
    font-size: 0.82rem;
    color: var(--grey-500);
    line-height: 1.45;
    margin: 0;
}

.g-compare-link-go {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--grey-400);
    line-height: 1;
    transform: rotate(180deg);
}

html[dir="ltr"] .g-compare-link-go { transform: none; }

.g-compare-link:hover .g-compare-link-go { color: var(--primary); }

/* Legacy class names */
.g-compare-card,
.g-compare-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
}
.g-compare-card-body,
.g-compare-option-body { flex: 1; min-width: 0; padding: 0; }
.g-compare-cta,
.g-compare-option-arrow { color: var(--grey-400); font-size: 1.15rem; }

/* Sections */
.g-section { margin-bottom: 2rem; }
.g-section--main { margin-bottom: 2.5rem; }
.g-section--muted {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--border);
}
.g-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 4px solid var(--primary);
}
.g-section-bar h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--grey-900);
}
.g-count { font-size: 0.8rem; color: var(--grey-500); font-weight: 600; }

.g-scroll-btns { display: flex; gap: 0.35rem; }
.g-scroll-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--grey-700);
    transition: border-color 0.15s, color 0.15s;
}
.g-scroll-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Scroll rows */
.g-scroll-row {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

/* Videos */
.g-video-card {
    flex: 0 0 min(280px, 75vw);
    border: none;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/10;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.g-video-bg {
    width: 100%;
    height: 100%;
    display: block;
}
.g-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 20px rgba(227,30,36,0.5);
}
.g-video-play .ico { margin-inline-start: 2px; }
.g-video-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1rem 0.85rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    text-align: start;
}
.g-video-meta h4 { font-size: 0.95rem; font-weight: 800; }
.g-video-meta span { font-size: 0.78rem; opacity: 0.8; }

/* Brands — hex ring style (different from IQ square boxes) */
.g-brands-row {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 0.75rem;
    scrollbar-width: thin;
}
.g-brand-ring {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    width: 92px;
}
.g-brand-ring-visual {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 2px rgba(227,30,36,0.25), 0 4px 14px rgba(0,0,0,0.06);
    display: grid;
    place-items: center;
    transition: box-shadow 0.2s, transform 0.15s;
    padding: 10px;
}
.g-brand-ring:hover .g-brand-ring-visual {
    box-shadow: 0 0 0 3px var(--primary), 0 8px 20px rgba(227,30,36,0.2);
    transform: scale(1.05);
}
.g-brand-ring-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.g-brand-ring span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--grey-700);
    text-align: center;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Model grid — magazine cards with red bottom accent */
.g-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 1rem;
}
@media (min-width: 900px) {
    .g-models-grid { grid-template-columns: repeat(4, 1fr); }
}
.g-model-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.g-model-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.25s;
}
.g-model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(227,30,36,0.12);
}
.g-model-card:hover::after { transform: scaleX(1); }
.g-model-card-img {
    aspect-ratio: 4/3;
    background: linear-gradient(160deg, #f0f1f5 0%, #e8eaef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}
.g-model-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.g-model-card-body {
    padding: 0.85rem 0.75rem;
    text-align: center;
}
.g-model-card-body h3 {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--grey-900);
}
.g-model-card-year {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 700;
    margin-top: 0.2rem;
}

/* Type chips */
.g-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.g-chip {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--grey-700);
    transition: all 0.15s;
}
.g-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff5f5;
}

/* Subpages */
.g-back-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grey-500);
    margin-bottom: 1rem;
}
.g-back-link:hover { color: var(--primary); }
.g-brand-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.g-brand-head img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(227,30,36,0.2);
}
.g-brand-head h1 { font-size: 1.35rem; font-weight: 800; }
.g-subtitle { font-size: 0.95rem; font-weight: 700; color: var(--grey-500); margin-bottom: 1.25rem; }
.g-model-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 1.25rem; }

/* Trims grid */
.g-trims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.g-trim-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.g-trim-card:hover { box-shadow: var(--shadow); }
.g-trim-card-img {
    height: 120px;
    background: linear-gradient(160deg, #f0f1f5, #e8eaef);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}
.g-trim-card-img img { max-height: 100%; object-fit: contain; }
.g-trim-card-body { padding: 1rem; }
.g-trim-card-body h3 { font-size: 0.9rem; font-weight: 800; }
.g-trim-card-body p { font-size: 0.78rem; color: var(--grey-500); margin-top: 0.25rem; }
.g-trim-card .btn { margin-top: 0.75rem; width: 100%; font-size: 0.82rem; }

/* Compare page */
.g-compare-page { padding-bottom: 4rem; }
.g-compare-page > .container:first-child {
    padding-top: 1rem;
    padding-bottom: 0.25rem;
}

.g-compare-bar {
    background: linear-gradient(135deg, #1a1d24 0%, #252932 100%);
    padding: 1.25rem 0;
    margin: 1rem 0 1.5rem;
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.g-compare-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 640px) {
    .g-compare-bar-inner { grid-template-columns: 1fr; }
    .g-compare-divider { display: none; }
}
.g-compare-slot {
    background: rgba(255,255,255,0.06);
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 16px;
    min-height: 200px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}
.g-compare-slot:hover { border-color: rgba(227,30,36,0.6); }
.g-compare-slot.filled {
    border-style: solid;
    border-color: var(--primary);
    background: #fff;
    cursor: pointer;
}
.g-compare-empty {
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 1rem;
}
.g-compare-plus {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.35);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: rgba(255,255,255,0.5);
}
.g-compare-divider {
    align-self: center;
    font-weight: 900;
    color: var(--primary-light);
    font-size: 0.9rem;
    padding: 0 0.25rem;
}
.g-compare-filled {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.g-compare-filled-img {
    flex: 1;
    min-height: 130px;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem;
    overflow: hidden;
}
.g-compare-filled-img img {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
}
.g-compare-filled-body {
    padding: 0.85rem;
    text-align: center;
}
.g-compare-filled-body h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--grey-900);
    line-height: 1.35;
}
.g-compare-filled-body p {
    font-size: 0.78rem;
    color: var(--grey-500);
    margin-top: 0.25rem;
}
.g-compare-offer {
    display: block;
    margin: 0.65rem 0.85rem 0.85rem;
    padding: 0.55rem;
    background: var(--grey-900);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: calc(100% - 1.7rem);
}
.g-compare-offer:hover { background: var(--primary); color: #fff; }

/* Spec accordion — 3 columns */
.g-spec-section {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 0.65rem;
    overflow: hidden;
}
.g-spec-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #fafafa;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--grey-900);
    text-align: start;
}
.g-spec-head:hover { background: #fff5f5; }
.g-spec-head span { color: var(--primary); font-size: 1.1rem; transition: transform 0.2s; }
.g-spec-section.open .g-spec-head span { transform: rotate(180deg); }
.g-spec-body { display: none; padding: 0 0 0.5rem; }
.g-spec-section.open .g-spec-body { display: block; }
.g-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.g-spec-table th,
.g-spec-table td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: start;
}
.g-spec-table th {
    font-weight: 600;
    color: var(--grey-500);
    width: 34%;
    background: #fcfcfc;
}
.g-spec-table td { font-weight: 700; color: var(--grey-900); }
.g-spec-table tr:last-child th,
.g-spec-table tr:last-child td { border-bottom: none; }
.g-spec-table .col-car { width: 33%; text-align: center; }

.g-compare-specs { padding-bottom: 3rem; }

/* Shared utilities */
.guide-loading { text-align: center; padding: 2rem; }
.guide-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--grey-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
.guide-empty { text-align: center; color: var(--grey-500); padding: 2rem; font-size: 0.9rem; }
.hidden { display: none !important; }

.guide-picker-modal .modal-panel { max-height: 85vh; overflow-y: auto; }
.guide-picker-field { margin-bottom: 1rem; }
.guide-picker-field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.35rem; }
.guide-picker-field select {
    width: 100%;
    padding: 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-family: inherit;
}

/* Variant detail (legacy classes kept) */
.catalog-page { background: var(--bg); min-height: 60vh; padding: 1.5rem 0 4rem; }
.catalog-spec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.catalog-spec-table th, .catalog-spec-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
}
.guide-block {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}
.guide-block-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.85rem; }

.guide-picker-search { margin-bottom: 1rem; }

.g-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(420px, 55vh);
    overflow-y: auto;
}

.g-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    transition: border-color 0.15s, background 0.15s;
}

.g-picker-item:hover {
    border-color: rgba(227, 30, 36, 0.35);
    background: rgba(227, 30, 36, 0.03);
}

.g-picker-item img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--grey-100);
}

.g-picker-item-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.g-picker-item-meta strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--grey-900);
}

.g-picker-item-meta span {
    font-size: 0.78rem;
    color: var(--grey-500);
}

@keyframes spin { to { transform: rotate(360deg); } }