/**
 * Tip Calculator — Frontend styles
 *
 * Design tokens are CSS custom properties scoped to `.tipcalc` so the site
 * owner can override them at any selector depth without touching this file.
 * GeneratePress / GenerateBlocks variable names are used as the fallback
 * source where they match semantically; hard-coded hex values serve as the
 * final fallback on themes that don't supply those variables.
 *
 * Naming: BEM-light with `.tipcalc-` prefix.
 * Themes: `.tipcalc--theme-compact`, `.tipcalc--theme-minimal`.
 *
 * @package TipCalc\Frontend
 */

/* ── Root tokens ───────────────────────────────────────────────────────── */

/*
 * Hard-coded defaults — guaranteed readable on any theme.
 * To integrate with GeneratePress / GenerateBlocks tokens, add this to your
 * child-theme or Additional CSS and remove the block below:
 *
 *   .tipcalc {
 *     --tipcalc-color-text:      var(--base-2);
 *     --tipcalc-color-bg:        var(--base);
 *     --tipcalc-color-bg-subtle: var(--base-1);
 *     --tipcalc-color-primary:   var(--accent);
 *   }
 */
.tipcalc {
    --tipcalc-color-text:       #1f2933;
    --tipcalc-color-text-muted: #52606d;
    --tipcalc-color-bg:         #ffffff;
    --tipcalc-color-bg-subtle:  #f5f7fa;
    --tipcalc-color-border:     #cbd2d9;
    --tipcalc-color-primary:    #2563eb;
    --tipcalc-color-primary-fg: #ffffff;
    --tipcalc-color-error:      #dc2626;
    --tipcalc-color-success:    #16a34a;

    --tipcalc-radius:    0.5rem;
    --tipcalc-radius-sm: 0.25rem;
    --tipcalc-shadow:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --tipcalc-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);
    --tipcalc-transition: 150ms ease-in-out;
    --tipcalc-z-combobox: 50;

    box-sizing:  border-box;
    color:       var(--tipcalc-color-text);
    font-family: inherit;
    font-size:   1rem;
    line-height: 1.5;
}

.tipcalc *,
.tipcalc *::before,
.tipcalc *::after {
    box-sizing: inherit;
}

/* ── Dark mode token overrides ─────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .tipcalc {
        --tipcalc-color-text:       #e2e8f0;
        --tipcalc-color-text-muted: #94a3b8;
        --tipcalc-color-bg:         #1e293b;
        --tipcalc-color-bg-subtle:  #0f172a;
        --tipcalc-color-border:     #334155;
    }
}

/* ── Form layout ───────────────────────────────────────────────────────── */

.tipcalc-form {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
    overflow:       visible; /* never clip absolute-positioned dropdowns */
}

/* ── Country + City row (50/50) ────────────────────────────────────────── */

.tipcalc-location-row {
    display:  flex;
    gap:      0.75rem;
    overflow: visible; /* allow combobox dropdowns to escape */
}

.tipcalc-location-row .tipcalc-field {
    flex:      1;
    min-width: 0; /* prevent flex overflow */
}

/* ── Field ─────────────────────────────────────────────────────────────── */

.tipcalc-field {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
    overflow:       visible; /* never clip absolute-positioned dropdowns */
}

/* The flex display above otherwise overrides the [hidden] UA rule, leaving
   JS-toggled fields (mode, amount, quantity, city) visible when hidden. */
.tipcalc-field[hidden] {
    display: none;
}

.tipcalc-label {
    display:     block;
    font-weight: 600;
    font-size:   0.875rem;
    color:       var(--tipcalc-color-text);
}

/* ── Generic input / select ────────────────────────────────────────────── */

.tipcalc-input,
.tipcalc-select {
    display:       block;
    width:         100%;
    padding:       0.5rem 0.75rem;
    background:    var(--tipcalc-color-bg);
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
    color:         var(--tipcalc-color-text);
    font-family:   inherit;
    font-size:     1rem;
    line-height:   1.5;
    transition:    border-color var(--tipcalc-transition), box-shadow var(--tipcalc-transition);
    appearance:    none;
}

.tipcalc-input:focus,
.tipcalc-select:focus {
    outline:      none;
    border-color: var(--tipcalc-color-primary);
    box-shadow:   var(--tipcalc-shadow-focus);
}

.tipcalc-input[aria-invalid="true"],
.tipcalc-select[aria-invalid="true"] {
    border-color: var(--tipcalc-color-error);
}

/* ── Locked field ──────────────────────────────────────────────────────── */

.tipcalc-locked-field {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.5rem 0.75rem;
    background:    var(--tipcalc-color-bg-subtle);
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
}

.tipcalc-locked-note {
    font-size: 0.8125rem;
    color:     var(--tipcalc-color-text-muted);
}

/* ── Combobox widget ───────────────────────────────────────────────────── */

.tipcalc-combobox {
    position: relative;
}

.tipcalc-combobox__input {
    display:       block;
    width:         100%;
    padding:       0.5rem 0.75rem;
    background:    var(--tipcalc-color-bg);
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
    color:         var(--tipcalc-color-text);
    font-family:   inherit;
    font-size:     1rem;
    line-height:   1.5;
    transition:    border-color var(--tipcalc-transition), box-shadow var(--tipcalc-transition);
}

.tipcalc-combobox__input:focus {
    outline:      none;
    border-color: var(--tipcalc-color-primary);
    box-shadow:   var(--tipcalc-shadow-focus);
}

.tipcalc-combobox__input[aria-invalid="true"] {
    border-color: var(--tipcalc-color-error);
}

.tipcalc-combobox__listbox {
    position:      absolute;
    top:           calc(100% + 2px);
    left:          0;
    right:         0;
    z-index:       var(--tipcalc-z-combobox);
    max-height:    15rem;
    overflow-y:    auto;
    margin:        0;
    padding:       0.25rem 0;
    list-style:    none;
    background:    var(--tipcalc-color-bg);
    color:         var(--tipcalc-color-text); /* explicit — overrides theme inheritance */
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
    box-shadow:    var(--tipcalc-shadow);
}

.tipcalc-combobox__option {
    padding:    0.5rem 0.75rem;
    cursor:     pointer;
    font-size:  0.9375rem;
    color:      var(--tipcalc-color-text); /* must be explicit — li inherits from theme */
    background: transparent;              /* reset any theme li background */
    transition: background var(--tipcalc-transition);
}

.tipcalc-combobox__option:hover,
.tipcalc-combobox__option.is-active {
    background: var(--tipcalc-color-bg-subtle);
}

/* ── Service grid — always 3 columns, grows in rows ────────────────────── */

.tipcalc-service-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.5rem;
}

.tipcalc-service-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.375rem;
    padding:         0.875rem 0.5rem;
    min-height:      56px; /* WCAG 2.5.5 enhanced touch target */
    background:      var(--tipcalc-color-bg);
    border:          1px solid var(--tipcalc-color-border);
    border-radius:   var(--tipcalc-radius);
    cursor:          pointer;
    font-family:     inherit;
    font-size:       0.8125rem; /* 13px */
    font-weight:     500;
    color:           var(--tipcalc-color-text);
    transition:      border-color var(--tipcalc-transition), background var(--tipcalc-transition),
                     color var(--tipcalc-transition);
    appearance:      none;
    text-align:      center;
}

.tipcalc-service-card:hover {
    border-color: var(--tipcalc-color-primary);
    background:   var(--tipcalc-color-bg-subtle);
}

.tipcalc-service-card.is-active,
.tipcalc-service-card[aria-checked="true"] {
    background:   var(--tipcalc-color-primary);
    border-color: var(--tipcalc-color-primary);
    color:        #fff;
    font-weight:  600;
}

/* Explicit child rules so text remains legible in dark mode and on any theme. */
.tipcalc-service-card.is-active .tipcalc-service-card__icon,
.tipcalc-service-card[aria-checked="true"] .tipcalc-service-card__icon {
    color: #fff;
}

.tipcalc-service-card.is-active .tipcalc-service-card__name,
.tipcalc-service-card[aria-checked="true"] .tipcalc-service-card__name {
    color: #fff;
}

.tipcalc-service-card:focus-visible {
    outline:    none;
    box-shadow: var(--tipcalc-shadow-focus);
}

.tipcalc-service-card__icon {
    font-size:   1.5rem;
    line-height: 1;
}

.tipcalc-service-card__name {
    font-size: 0.8125rem; /* 13px */
}

/* ── Calculation-mode toggle (percentage ↔ flat) ────────────────────────── */

.tipcalc-mode-toggle {
    display:       inline-flex;
    align-self:    flex-start; /* don't stretch to the flex-column field width */
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
    overflow:      hidden;
}

.tipcalc-mode-option {
    appearance:  none;
    border:      none;
    margin:      0;
    padding:     0.5rem 1rem;
    min-height:  44px; /* WCAG 2.5.5 touch target */
    background:  var(--tipcalc-color-bg);
    color:       var(--tipcalc-color-text);
    cursor:      pointer;
    font-family: inherit;
    font-size:   0.9375rem;
    font-weight: 500;
    transition:  background var(--tipcalc-transition), color var(--tipcalc-transition);
}

.tipcalc-mode-option + .tipcalc-mode-option {
    border-left: 1px solid var(--tipcalc-color-border);
}

.tipcalc-mode-option:hover {
    background: var(--tipcalc-color-bg-subtle);
}

.tipcalc-mode-option.is-active,
.tipcalc-mode-option[aria-checked="true"] {
    background: var(--tipcalc-color-primary);
    color:      #fff;
}

.tipcalc-mode-option:focus-visible {
    outline:    none;
    box-shadow: var(--tipcalc-shadow-focus);
}

/* Flat-mode unit label shown beside the Quantity field label. */
.tipcalc-quantity-unit {
    margin-left: 0.375rem;
    color:       var(--tipcalc-color-text-muted);
    font-weight: 400;
    font-size:   0.875rem;
}

/* ── Amount field — integrated input group with inline prefix ───────────── */

.tipcalc-input-group {
    display:       flex;
    align-items:   stretch;
    border:        1px solid var(--tipcalc-color-border);
    border-radius: var(--tipcalc-radius-sm);
    overflow:      hidden;
    transition:    border-color var(--tipcalc-transition), box-shadow var(--tipcalc-transition);
}

.tipcalc-input-group:focus-within {
    border-color: var(--tipcalc-color-primary);
    box-shadow:   var(--tipcalc-shadow-focus);
}

.tipcalc-input-prefix {
    display:         flex;
    align-items:     center;
    padding:         0 1rem;
    border-right:    1px solid var(--tipcalc-color-border);
    background:      var(--tipcalc-color-bg-subtle);
    color:           var(--tipcalc-color-text-muted);
    font-size:       1rem;
    white-space:     nowrap;
    min-width:       2.75rem;
    justify-content: center;
    flex-shrink:     0;
}

.tipcalc-input-amount {
    flex:        1;
    border:      0;
    padding:     0.875rem;
    font-size:   22px;
    font-family: inherit;
    background:  transparent;
    min-width:   0;
    outline:     none;
    color:       var(--tipcalc-color-text);
    appearance:  none;
}

.tipcalc-field-hint {
    font-size: 0.8125rem;
    color:     var(--tipcalc-color-text-muted);
}

/* ── Result area ───────────────────────────────────────────────────────── */

.tipcalc-result {
    /* Container: visual chrome is provided by the inner .tipcalc-result__hero */
}

.tipcalc-result__hero {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.3rem;
    padding:        1.5rem 1.25rem;
    background:     var(--tipcalc-color-primary);
    color:          #fff;
    border-radius:  var(--tipcalc-radius);
    text-align:     center;
}

.tipcalc-result__hero-label {
    font-size:      0.6875rem; /* 11px */
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity:        0.85;
}

.tipcalc-result__hero-value {
    font-size:   2.25rem; /* 36px */
    font-weight: 500;
    line-height: 1.1;
}

.tipcalc-result__hero-sub {
    font-size: 0.8125rem;
    opacity:   0.85;
}

.tipcalc-result__notice {
    margin-block-start: 0.75rem;
    font-size:          0.8rem;
    color:              var(--tipcalc-color-text-muted);
    text-align:         center;
}

.tipcalc-result__error {
    padding:       0.75rem;
    background:    #fee2e2;
    border:        1px solid #fca5a5;
    border-radius: var(--tipcalc-radius-sm);
    color:         #991b1b;
    font-size:     0.875rem;
    margin:        0;
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.tipcalc-actions {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
}

/* Primary submit: full-width trigger (redirect mode + no-JS submit). */
.tipcalc-calc-submit {
    width:      100%;
    min-height: 56px; /* WCAG 2.5.5 enhanced touch target */
}

/* With JS active, inline mode calculates automatically — hide the explicit
   submit button so only auto-calc drives the result on country/city pages. */
.tipcalc--js[data-tipcalc-behavior="inline"] .tipcalc-calc-submit {
    display: none;
}

/* Reset as a discrete text link (no border, no background). */
.tipcalc-calc-reset {
    background:            none;
    border:                none;
    padding:               0.625rem 0.75rem;
    cursor:                pointer;
    font-family:           inherit;
    font-size:             1rem;
    color:                 var(--tipcalc-color-text-muted);
    text-decoration:       underline;
    text-underline-offset: 2px;
    transition:            color var(--tipcalc-transition);
    min-height:            44px;
    appearance:            none;
}

.tipcalc-calc-reset:hover {
    color: var(--tipcalc-color-text);
}

.tipcalc-calc-reset:focus-visible {
    outline:        2px solid var(--tipcalc-color-primary);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── Generic button (kept for potential external use) ───────────────────── */

.tipcalc-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.75rem 1.25rem;
    border:          2px solid transparent;
    border-radius:   var(--tipcalc-radius-sm);
    cursor:          pointer;
    font-family:     inherit;
    font-size:       1rem;
    font-weight:     600;
    line-height:     1.25;
    transition:      background var(--tipcalc-transition), border-color var(--tipcalc-transition),
                     filter var(--tipcalc-transition);
    appearance:      none;
    white-space:     nowrap;
    text-decoration: none;
}

.tipcalc-button--primary {
    background: var(--tipcalc-color-primary);
    color:      var(--tipcalc-color-primary-fg);
}

.tipcalc-button--primary:hover {
    filter: brightness(1.1);
}

.tipcalc-button--primary:focus-visible {
    outline:    none;
    box-shadow: var(--tipcalc-shadow-focus);
}

.tipcalc-button--reset {
    background:   transparent;
    border-color: var(--tipcalc-color-border);
    color:        var(--tipcalc-color-text);
}

.tipcalc-button--reset:hover {
    background: var(--tipcalc-color-bg-subtle);
}

.tipcalc-button--reset:focus-visible {
    outline:    none;
    box-shadow: var(--tipcalc-shadow-focus);
}

/* ── Visually hidden (screen-reader only) ──────────────────────────────── */

.tipcalc-sr-only {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: nowrap;
    border:      0;
}

/* ── Validation error messages ─────────────────────────────────────────── */

.tipcalc-field-error {
    display:    block;
    font-size:  0.8125rem;
    color:      var(--tipcalc-color-error);
    margin-top: 0.25rem;
}

.tipcalc-field-error[hidden] {
    display: none;
}

/* ── Theme: compact ────────────────────────────────────────────────────── */

.tipcalc--theme-compact .tipcalc-form {
    gap: 0.75rem;
}

.tipcalc--theme-compact .tipcalc-button {
    padding:   0.625rem 1rem;
    font-size: 0.9375rem;
}

.tipcalc--theme-compact .tipcalc-service-card {
    padding:    0.625rem 0.375rem;
    min-height: 48px;
}

/* ── Theme: minimal ────────────────────────────────────────────────────── */

.tipcalc--theme-minimal {
    --tipcalc-shadow:          none;
    --tipcalc-color-bg-subtle: transparent;
}

.tipcalc--theme-minimal .tipcalc-service-card {
    border-width: 1px;
}

/* ── Responsive (calculator) ───────────────────────────────────────────── */

@media (max-width: 767px) {
    .tipcalc-service-grid {
        gap: 0.375rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Country page (D5) — single-tip_country.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout ───────────────────────────────────────────────────────── */

.tipcalc-country-page {
    max-width: var(--tipcalc-width-max, 68rem);
    margin-inline: auto;
    padding-inline: 1rem;
}

.tipcalc-section {
    margin-block: 2.5rem;
}

.tipcalc-section__title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-block-end: 1rem;
}

/* ── Admin notices ─────────────────────────────────────────────────────── */

.tipcalc-admin-notice {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-block-end: 1rem;
    font-size: 0.9rem;
}

.tipcalc-admin-notice--warning {
    background: #fff3cd;
    border-left: 4px solid #f0ad4e;
    color: #5a4a00;
}

/* ── Hero section ──────────────────────────────────────────────────────── */

.tipcalc-hero {
    padding-block: 2rem;
    border-block-end: 1px solid var(--tipcalc-color-border, #e2e8f0);
}

.tipcalc-breadcrumb__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
}

.tipcalc-breadcrumb__item a {
    color: var(--tipcalc-color-primary, #2563eb);
    text-decoration: none;
}

.tipcalc-breadcrumb__item a:hover {
    text-decoration: underline;
}

.tipcalc-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tipcalc-hero__flag {
    font-size: 2.5rem;
    line-height: 1;
}

.tipcalc-hero__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    margin: 0;
}

.tipcalc-hero__lead {
    font-size: 1.05rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    margin: 0;
}

.tipcalc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-block-start: 0.5rem;
}

.tipcalc-hero__info-item {
    font-size: 0.9rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
}

.tipcalc-hero__info-label {
    font-weight: 600;
    margin-inline-end: 0.25rem;
}

/* ── Culture badge ─────────────────────────────────────────────────────── */

.tipcalc-culture-badge {
    display: inline-block;
    padding: 0.25em 0.65em;
    border-radius: 2em;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tipcalc-culture-badge--expected {
    background: #dcfce7;
    color: #166534;
}

.tipcalc-culture-badge--appreciated {
    background: #dbeafe;
    color: #1e40af;
}

.tipcalc-culture-badge--not_expected {
    background: #fef9c3;
    color: #854d0e;
}

.tipcalc-culture-badge--offensive {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Service table ─────────────────────────────────────────────────────── */

.tipcalc-service-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-block: 1rem;
}

.tipcalc-service-table th,
.tipcalc-service-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-block-end: 1px solid var(--tipcalc-color-border, #e2e8f0);
}

.tipcalc-service-table thead th {
    font-weight: 600;
    color: var(--tipcalc-color-text-muted, #6b7280);
    background: var(--tipcalc-color-bg-subtle, #f8fafc);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tipcalc-service-table__row:hover {
    background: var(--tipcalc-color-bg-subtle, #f8fafc);
}

.tipcalc-service-table__desc {
    display: block;
    font-size: 0.8rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    margin-block-start: 0.1rem;
}

.tipcalc-badge--warning {
    display: inline-block;
    padding: 0.15em 0.5em;
    background: #fef3c7;
    color: #92400e;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tipcalc-text-muted {
    color: var(--tipcalc-color-text-muted, #6b7280);
}

/* Responsive service table — card list on small screens */
@media (max-width: 767px) {
    .tipcalc-service-table thead {
        display: none;
    }

    .tipcalc-service-table,
    .tipcalc-service-table tbody,
    .tipcalc-service-table tr,
    .tipcalc-service-table td {
        display: block;
        width: 100%;
    }

    .tipcalc-service-table__row {
        border: 1px solid var(--tipcalc-color-border, #e2e8f0);
        border-radius: 6px;
        margin-block-end: 0.75rem;
        padding: 0.5rem;
    }

    .tipcalc-service-table td {
        border: none;
        padding: 0.3rem 0.5rem;
        display: flex;
        gap: 0.5rem;
    }

    .tipcalc-service-table td::before {
        content: attr(data-label) ":";
        font-weight: 600;
        min-width: 7rem;
        flex-shrink: 0;
        color: var(--tipcalc-color-text-muted, #6b7280);
        font-size: 0.8rem;
    }
}

/* ── FAQ accordion ─────────────────────────────────────────────────────── */

.tipcalc-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tipcalc-faq__item {
    border: 1px solid var(--tipcalc-color-border, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
}

.tipcalc-faq__item summary {
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--tipcalc-color-bg-subtle, #f8fafc);
    user-select: none;
}

.tipcalc-faq__item summary::-webkit-details-marker {
    display: none;
}

.tipcalc-faq__item summary::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.15s ease;
}

.tipcalc-faq__item[open] summary::after {
    content: "−";
}

.tipcalc-faq__item summary:focus-visible {
    outline:        2px solid var(--tipcalc-color-primary, #2563eb);
    outline-offset: 2px;
}

.tipcalc-faq__answer {
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    border-block-start: 1px solid var(--tipcalc-color-border, #e2e8f0);
}

/* ── City grid ─────────────────────────────────────────────────────────── */

.tipcalc-city-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.tipcalc-city-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--tipcalc-color-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tipcalc-city-card__link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--tipcalc-color-primary, #2563eb);
}

.tipcalc-city-card__thumb-wrap {
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--tipcalc-color-bg-subtle, #f8fafc);
}

.tipcalc-city-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tipcalc-city-card__body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tipcalc-city-card__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.tipcalc-city-card__excerpt {
    font-size: 0.8rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    line-height: 1.4;
}

/* ── Related countries grid ────────────────────────────────────────────── */

.tipcalc-related-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.tipcalc-related-card__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--tipcalc-color-border, #e2e8f0);
    border-radius: 8px;
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tipcalc-related-card__link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--tipcalc-color-primary, #2563eb);
}

.tipcalc-related-card__flag {
    font-size: 1.75rem;
    line-height: 1;
}

.tipcalc-related-card__name {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Page footer block ─────────────────────────────────────────────────── */

.tipcalc-page-footer {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--tipcalc-color-border, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
}

.tipcalc-page-footer__disclaimer {
    font-size: 0.8rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    margin: 0;
}

.tipcalc-page-footer__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.tipcalc-page-footer__action {
    background: none;
    border: 1px solid var(--tipcalc-color-border, #e2e8f0);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: background 0.1s;
}

.tipcalc-page-footer__action:hover {
    background: var(--tipcalc-color-bg-subtle, #f8fafc);
}

/* ── Result section (pre-populated / no-JS) ────────────────────────────── */

.tipcalc-result-section {
    margin-block: 1.5rem;
}

/* ── Responsive (country page) ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .tipcalc-city-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tipcalc-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tipcalc-page-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    .tipcalc-page-footer__actions,
    .tipcalc-admin-notice,
    .tipcalc-hero .tipcalc-breadcrumb {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   City page (D6) — delta styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── City page wrapper ──────────────────────────────────────────────────── */

.tipcalc-city-page {
    --tipcalc-override-higher: #15803d;
    --tipcalc-override-lower:  #b91c1c;
    max-width: var(--tipcalc-width-max, 68rem);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ── Back link to country overview ─────────────────────────────────────── */

.tipcalc-hero__country-link {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    text-decoration: none;
}

.tipcalc-hero__country-link:hover {
    text-decoration: underline;
}

/* ── "← Use country average instead" link below city calculator ─────────── */

.tipcalc-city-avg-link {
    margin-block-start: 0.75rem;
    font-size: 0.875rem;
    text-align: center;
}

.tipcalc-city-avg-link a {
    color: var(--tipcalc-color-text-muted, #6b7280);
    text-decoration: none;
}

.tipcalc-city-avg-link a:hover {
    text-decoration: underline;
}

/* ── Service table: override row highlight ──────────────────────────────── */

.tipcalc-service-table__row--override {
    background-color: var(--tipcalc-color-bg-subtle, #f8fafc);
}

/* ── Override arrows ────────────────────────────────────────────────────── */

.tipcalc-override-arrow {
    display: inline-block;
    font-weight: 700;
    margin-inline-start: 0.25rem;
    font-size: 0.9em;
    vertical-align: middle;
}

.tipcalc-override-arrow--higher {
    color: var(--tipcalc-override-higher, #15803d);
}

.tipcalc-override-arrow--lower {
    color: var(--tipcalc-override-lower, #b91c1c);
}

/* ── Override badges ────────────────────────────────────────────────────── */

.tipcalc-override-badge {
    display: inline-block;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: rgba(21, 128, 61, 0.1);
    color: var(--tipcalc-override-higher, #15803d);
    white-space: nowrap;
}

.tipcalc-override-badge--lower {
    background-color: rgba(185, 28, 28, 0.1);
    color: var(--tipcalc-override-lower, #b91c1c);
}

.tipcalc-override-badge--local {
    background-color: rgba(100, 116, 139, 0.12);
    color: var(--tipcalc-color-text-muted, #6b7280);
}

/* ── "Same as {country}" note in inherited rows ─────────────────────────── */

.tipcalc-override-note--same {
    font-size: 0.85rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
}

/* ── Table legend below the service table ───────────────────────────────── */

.tipcalc-table-legend {
    margin-block-start: 0.5rem;
    font-size: 0.8rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    font-style: italic;
}

/* ── D6.3 JS-rendered city override note inside result block ────────────── */

.tipcalc-result__override-note {
    margin-block-start: 0.75rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--tipcalc-color-bg-subtle, #f8fafc);
    border-inline-start: 3px solid var(--tipcalc-color-primary, #2563eb);
    border-radius: 0 4px 4px 0;
    font-size: 0.875rem;
    color: var(--tipcalc-color-text, #1e293b);
}

/* ── Related cities grid — country label for cross-country cards ─────────── */

.tipcalc-related-city-card__country {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.78rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
}

/* ── Responsive (city page) ─────────────────────────────────────────────── */

@media (max-width: 767px) {
    .tipcalc-city-avg-link {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Country archive (/{base_slug}/) — archive-tip_country.php
   A single, unpaginated, alphabetical grid of country cards that reuses the
   service-card visual language (centered icon above label).
   ═══════════════════════════════════════════════════════════════════════════ */

.tipcalc-archive {
    max-width: var(--tipcalc-width-max, 68rem);
    margin-inline: auto;
    padding-inline: 1rem;
}

.tipcalc-archive__header {
    margin-block: 1.5rem 2rem;
    text-align: center;
}

.tipcalc-archive__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.tipcalc-archive__intro {
    font-size: 1.05rem;
    color: var(--tipcalc-color-text-muted, #6b7280);
    margin: 0 auto;
    max-width: 42rem;
}

.tipcalc-archive__empty {
    text-align: center;
    color: var(--tipcalc-color-text-muted, #6b7280);
    padding-block: 2rem;
}

/* Grid — auto-fills as many equal columns as fit; grows in rows, never paginates. */
.tipcalc-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.tipcalc-country-grid__item {
    margin: 0;
    padding: 0;
}

/* Card — mirrors .tipcalc-service-card (centered, icon over name). */
.tipcalc-country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 100%;
    min-height: 96px;
    padding: 1rem 0.5rem;
    background: var(--tipcalc-color-bg, #ffffff);
    border: 1px solid var(--tipcalc-color-border, #cbd2d9);
    border-radius: var(--tipcalc-radius, 0.5rem);
    color: var(--tipcalc-color-text, #1f2933);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    transition: border-color var(--tipcalc-transition, 150ms ease-in-out),
                background var(--tipcalc-transition, 150ms ease-in-out),
                transform var(--tipcalc-transition, 150ms ease-in-out),
                box-shadow var(--tipcalc-transition, 150ms ease-in-out);
}

.tipcalc-country-card:hover,
.tipcalc-country-card:focus-visible {
    border-color: var(--tipcalc-color-primary, #2563eb);
    background: var(--tipcalc-color-bg-subtle, #f5f7fa);
    transform: translateY(-2px);
    box-shadow: var(--tipcalc-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.tipcalc-country-card:focus-visible {
    outline: none;
    box-shadow: var(--tipcalc-shadow-focus, 0 0 0 3px rgba(37, 99, 235, 0.25));
}

.tipcalc-country-card__flag {
    font-size: 2.25rem;
    line-height: 1;
}

.tipcalc-country-card__name {
    font-size: 0.9rem;
    line-height: 1.25;
    color: inherit;
}

/* ── Responsive (country archive) ───────────────────────────────────────── */

@media (max-width: 767px) {
    .tipcalc-country-grid {
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
        gap: 0.5rem;
    }

    .tipcalc-country-card {
        min-height: 84px;
        padding: 0.75rem 0.4rem;
    }

    .tipcalc-country-card__flag {
        font-size: 1.9rem;
    }
}