/* ==========================================================================
   Safaris — Operator profile & operator directory
   Companion sheet to ato-public.css. NEW components only; anything that
   already exists in ato-public.css is reused, not redefined.

   Hard rules honoured here:
   - Zero hex literals. Every colour is an --ato-* / theme token, or an
     rgba()/color tint built on the green-dark triplet 12,51,43.
   - Radii 3–14px only (--ato-radius-sm … --ato-radius-xl).
   - Display face (--ato-font-heading) for display numerals + names. It is no
     longer a serif: the token names are historical, see the theme's :root.
   - Uppercase tracking labels: the text face (--ato-font-label) 600–700,
     11–11.5px, .14–.2em.
   - Container 1180px / 28px gutters (inherited from .ato-container).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Profile shell
   -------------------------------------------------------------------------- */

.ato-op-profile {
    background: var(--ato-bg-light);
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-base);
    color: var(--ato-text-main);
}

.ato-op-profile *,
.ato-op-directory * {
    box-sizing: border-box;
}

/* Breadcrumbs — mirrors the theme's .pp-crumbs, scoped so the plugin page
   reads identically whether or not the theme sheet loaded first. */
.ato-op-crumbwrap {
    padding: 22px 0 18px;
}

.ato-op-crumbs {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-main);
    margin: 0;
}

.ato-op-crumbs a {
    color: var(--ato-text-main);
    text-decoration: none;
}

.ato-op-crumbs a:hover,
.ato-op-crumbs a:focus-visible {
    color: var(--ato-primary);
}

.ato-op-crumbs .sep {
    margin: 0 8px;
    color: var(--ato-rule);
}

.ato-op-crumbs [aria-current="page"] {
    color: var(--ato-primary);
}

/* --------------------------------------------------------------------------
   2. Cover banner + identity card
   -------------------------------------------------------------------------- */

.ato-op-banner {
    position: relative;
    min-height: clamp(300px, 40vw, 440px);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
    background-color: var(--ato-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--ato-shadow-md);
}

/* Dark scrim, keyed to green-dark so it never reads blue */
.ato-op-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--shadow), 0.88) 0%,
        rgba(var(--shadow), 0.46) 45%,
        rgba(var(--shadow), 0.14) 100%
    );
    pointer-events: none;
}

.ato-op-banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 28px;
}

.ato-op-idcard {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 560px;
    padding: 22px 26px;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    box-shadow: var(--ato-shadow-lg);
}

.ato-op-idcard-logo {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: var(--ato-radius-md);
    overflow: hidden;
    background: var(--ato-bg-light);
    border: 1px solid var(--ato-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ato-op-idcard-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ato-op-idcard-body {
    min-width: 0;
}

.ato-op-name {
    font-family: var(--ato-font-heading);
    font-weight: 600;
    font-size: clamp(24px, 2.9vw, 34px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--ato-title-color);
    margin: 0 0 8px;
}

.ato-op-loc {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin: 0 0 8px;
}

.ato-op-loc .dashicons {
    color: var(--ato-primary);
    font-size: 17px;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.ato-op-idcard .ato-badge-verified {
    margin-left: 10px;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. Action row
   -------------------------------------------------------------------------- */

.ato-op-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 6px;
}

.ato-op-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid var(--ato-primary);
    border-radius: var(--ato-radius-md);
    background: var(--ato-primary);
    color: var(--ato-bg-white);
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ato-transition);
}

.ato-op-action .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.ato-op-action:hover,
.ato-op-action:focus-visible {
    background: var(--ato-secondary);
    border-color: var(--ato-secondary);
    color: var(--ato-dark);
    box-shadow: var(--ato-shadow-sm);
}

.ato-op-action[aria-pressed="true"] {
    background: var(--ato-secondary);
    border-color: var(--ato-secondary-hover);
    color: var(--ato-dark);
}

/* --------------------------------------------------------------------------
   4. Sub-nav tab strip
   -------------------------------------------------------------------------- */

/* JS-free fallback: the strip stays hidden until the enhancement script
   removes [hidden], and every panel renders stacked. */
.ato-op-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 30px 0 0;
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-op-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 14px 20px;
    margin-bottom: -1px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    cursor: pointer;
    transition: var(--ato-transition);
}

.ato-op-tab:hover {
    color: var(--ato-primary);
}

.ato-op-tab[aria-selected="true"] {
    color: var(--ato-primary);
    border-bottom-color: var(--ato-secondary);
}

.ato-op-tab:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: -2px;
}

.ato-op-panel {
    padding-top: 34px;
}

.ato-op-panel-title {
    font-family: var(--ato-font-heading);
    font-size: 27px;
    font-weight: 600;
    color: var(--ato-title-color);
    margin: 0 0 18px;
}

/* Only once JS is on do we hide the inactive panels. */
.ato-op-tabbed.is-enhanced .ato-op-panel[hidden] {
    display: none;
}

.ato-op-tabbed.is-enhanced .ato-op-panel > .ato-op-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   5. Stat strip
   -------------------------------------------------------------------------- */

.ato-op-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 30px 0 0;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
}

.ato-op-stat {
    padding: 26px 20px;
    text-align: center;
    border-right: 1px solid var(--ato-border-color);
}

.ato-op-stat:last-child {
    border-right: 0;
}

.ato-op-stat-num {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    color: var(--ato-primary);
    margin-bottom: 10px;
}

.ato-op-stat-label {
    display: block;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

/* --------------------------------------------------------------------------
   6. Two-column body
   -------------------------------------------------------------------------- */

.ato-op-body {
    display: grid;
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    gap: 44px;
    align-items: start;
    padding: 8px 0 64px;
}

.ato-op-main {
    min-width: 0;
}

.ato-op-aside {
    min-width: 0;
    position: sticky;
    /* Clears the theme's sticky header (--navbar-h: 104px). */
    top: calc(var(--navbar-h, 104px) + 22px);
}

.ato-op-block {
    margin-bottom: 38px;
}

.ato-op-block:last-child {
    margin-bottom: 0;
}

.ato-op-h {
    font-family: var(--ato-font-heading);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ato-title-color);
    margin: 0 0 16px;
}

.ato-op-prose {
    font-size: var(--ato-fs-reading);
    line-height: 1.8;
    color: var(--ato-text-main);
}

.ato-op-prose > *:last-child {
    margin-bottom: 0;
}

.ato-op-empty {
    padding: 26px;
    background: var(--ato-bg-white);
    border: 1px dashed var(--ato-border-color);
    border-radius: var(--ato-radius-md);
    color: var(--ato-text-muted);
    font-size: var(--ato-fs-small);
}

/* Chips */
.ato-op-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ato-op-chips.is-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ato-op-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    text-decoration: none;
    transition: var(--ato-transition);
}

a.ato-op-chip:hover,
a.ato-op-chip:focus-visible {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
    box-shadow: var(--ato-shadow-sm);
}

.ato-op-chip .dashicons {
    color: var(--ato-secondary);
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Checkmark list */
.ato-op-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 26px;
}

.ato-op-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    line-height: 1.5;
}

.ato-op-check .dashicons {
    flex: 0 0 auto;
    color: var(--ato-success);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   7. Sidebar cards
   -------------------------------------------------------------------------- */

.ato-op-card {
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    box-shadow: var(--ato-shadow-sm);
    padding: 24px;
    margin-bottom: 22px;
}

.ato-op-card:last-child {
    margin-bottom: 0;
}

.ato-op-card-title {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ato-title-color);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ato-border-color);
}

/* Reuses .ato-detail-item / .ato-detail-icon / .ato-detail-content from
   ato-public.css, but stacked one-per-row for a narrow column. */
.ato-op-detail-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.ato-op-detail-list .ato-detail-item {
    padding: 0;
    gap: 14px;
}

.ato-op-detail-list .ato-detail-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: var(--ato-radius-md);
}

.ato-op-detail-list .ato-detail-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ato-op-detail-value {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    line-height: 1.45;
    word-break: break-word;
}

.ato-op-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ato-op-contact-link {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    text-decoration: none;
    word-break: break-word;
    transition: var(--ato-transition);
}

.ato-op-contact-link .dashicons {
    flex: 0 0 auto;
    color: var(--ato-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ato-op-contact-link:hover,
.ato-op-contact-link:focus-visible {
    color: var(--ato-primary);
}

.ato-op-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ato-border-color);
}

.ato-op-social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    font-size: var(--ato-fs-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ato-text-main);
    text-decoration: none;
    transition: var(--ato-transition);
}

.ato-op-social:hover,
.ato-op-social:focus-visible {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
}

/* CTA card */
.ato-op-cta {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: var(--ato-on-dark);
}

.ato-op-cta .ato-op-cta-title {
    font-family: var(--ato-font-heading);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ato-bg-white);
    margin: 0 0 10px;
}

.ato-op-cta p {
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-on-dark);
    margin: 0 0 18px;
}

.ato-op-cta-buttons {
    display: grid;
    gap: 10px;
}

.ato-op-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--ato-secondary);
    border-radius: var(--ato-radius-md);
    background: var(--ato-secondary);
    color: var(--ato-dark);
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ato-transition);
}

.ato-op-cta-btn:hover,
.ato-op-cta-btn:focus-visible {
    background: var(--ato-secondary-hover);
    border-color: var(--ato-secondary-hover);
    color: var(--ato-dark);
}

.ato-op-cta-btn.is-ghost {
    background: transparent;
    border-color: var(--ato-on-dark);
    color: var(--ato-bg-white);
}

.ato-op-cta-btn.is-ghost:hover,
.ato-op-cta-btn.is-ghost:focus-visible {
    background: var(--ato-bg-white);
    border-color: var(--ato-bg-white);
    color: var(--ato-primary);
}

/* --------------------------------------------------------------------------
   8. "Their safaris" toolbar + grid
   -------------------------------------------------------------------------- */

.ato-op-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 26px;
    padding: 16px;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-md);
}

.ato-op-toolbar-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}

.ato-op-toolbar-search .dashicons {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ato-text-muted);
    font-size: 18px;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.ato-op-toolbar input[type="search"],
.ato-op-toolbar input[type="text"],
.ato-op-toolbar select {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    transition: var(--ato-transition);
}

.ato-op-toolbar-search input {
    padding-left: 40px !important;
}

.ato-op-toolbar select {
    flex: 0 1 220px;
    width: auto;
    min-width: 190px;
}

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

.ato-op-toolbar-label {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-op-toolbar-go {
    flex: 0 0 auto;
    padding: 12px 22px;
    border: 1px solid var(--ato-primary);
    border-radius: var(--ato-radius-sm);
    background: var(--ato-primary);
    color: var(--ato-bg-white);
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--ato-transition);
}

.ato-op-toolbar-go:hover,
.ato-op-toolbar-go:focus-visible {
    background: var(--ato-secondary);
    border-color: var(--ato-secondary);
    color: var(--ato-dark);
}

.ato-op-resultcount {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   9. Operator directory (archive)
   -------------------------------------------------------------------------- */

.ato-op-directory {
    background: var(--ato-bg-light);
    padding: 40px 0 70px;
    font-family: var(--ato-font-body);
    color: var(--ato-text-main);
}

.ato-op-dir-intro {
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: center;
    font-size: var(--ato-fs-reading);
    line-height: 1.75;
    color: var(--ato-text-main);
}

/* #ato-operators-grid keeps its .ato-operators-grid class (the AJAX handler
   replaces only its contents), so we widen it here rather than redefining it. */
.ato-operators-grid.ato-op-dir-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--ato-grid-gap);
}

@media (max-width: 700px) {
    .ato-operators-grid.ato-op-dir-grid {
        grid-template-columns: 1fr;
    }
}

/* Corrective override: ato-public.css leaves a hardcoded rust hover border
   on the modern operator card. Bring it back on-palette. */
.ato-operator-card-modern:hover,
.ato-operator-card-horizontal:hover {
    border-color: var(--ato-primary);
}

.ato-operator-card-modern .ato-verified-tag {
    color: var(--ato-primary);
    background: var(--ato-bg-white);
    border-radius: var(--ato-radius-sm);
    letter-spacing: 0.14em;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
}

.ato-operator-card-modern .ato-card-cover {
    background-color: var(--ato-bg-light);
}

.ato-operator-card-modern .ato-card-cover::after {
    background: linear-gradient(to top, rgba(var(--shadow), 0.55), rgba(var(--shadow), 0));
}

.ato-operator-card-modern .ato-card-avatar {
    border-color: var(--ato-bg-white);
    border-radius: var(--ato-radius-md);
    box-shadow: var(--ato-shadow-md);
}

.ato-operator-card-modern .ato-card-title {
    font-family: var(--ato-font-heading);
    font-size: 23px;
    font-weight: 600;
}

.ato-operator-card-modern .ato-card-stat .count {
    font-family: var(--ato-font-heading);
    font-size: 24px;
    font-weight: 600;
}

.ato-operator-card-modern .ato-card-stat .label {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    letter-spacing: 0.14em;
}

.ato-operator-card-modern .ato-card-footer {
    border-top-color: var(--ato-border-color);
}

.ato-op-card-price {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin: 0 0 14px;
}

.ato-op-card-price strong {
    font-family: var(--ato-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--ato-primary);
}

.ato-op-card-tours {
    list-style: none;
    margin: 0 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--ato-border-color);
    display: grid;
    gap: 8px;
}

.ato-op-card-tours a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    text-decoration: none;
    transition: var(--ato-transition);
}

.ato-op-card-tours a:hover,
.ato-op-card-tours a:focus-visible {
    color: var(--ato-primary);
}

.ato-op-card-tours .tour-meta {
    flex: 0 0 auto;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ato-secondary-hover);
}

/* --------------------------------------------------------------------------
   10. Filter panel restyle (operator directory)
   -------------------------------------------------------------------------- */

.ato-sidebar-filters .ato-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ato-sidebar-filters .ato-filters-header h3 {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ato-title-color);
    margin: 0;
}

.ato-op-filter-reset {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    cursor: pointer;
    transition: var(--ato-transition);
}

.ato-op-filter-reset:hover,
.ato-op-filter-reset:focus-visible {
    color: var(--ato-primary);
}

.ato-filter-form .ato-filter-group {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-filter-form .ato-filter-group:last-of-type {
    border-bottom: 0;
}

.ato-filter-form .ato-filter-title {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-title-color);
    margin: 0 0 14px;
    cursor: default;
}

.ato-filter-form .ato-form-control {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    transition: var(--ato-transition);
}

.ato-filter-form .ato-form-control:focus {
    outline: none;
    border-color: var(--ato-primary);
    box-shadow: var(--ato-shadow-sm);
}

.ato-filter-form .ato-search-input-wrapper {
    position: relative;
}

.ato-filter-form .ato-search-input-wrapper .dashicons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ato-text-muted);
    font-size: 17px;
    width: 17px;
    height: 17px;
    pointer-events: none;
}

.ato-filter-form .ato-search-input-wrapper .ato-form-control {
    padding-left: 38px;
}

.ato-filter-form .ato-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ato-filter-form .ato-price-separator {
    color: var(--ato-text-muted);
}

.ato-filter-form .ato-checkbox-list {
    display: grid;
    gap: 9px;
}

.ato-filter-form .ato-checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
    cursor: pointer;
    margin: 0;
}

.ato-filter-form .ato-checkbox-label input {
    accent-color: var(--ato-primary);
    margin: 0;
    flex: 0 0 auto;
}

.ato-filter-form .ato-filter-actions {
    display: grid;
    gap: 10px;
    padding: 20px 24px;
    background: var(--ato-bg-light);
    border-top: 1px solid var(--ato-border-color);
}

.ato-filter-form .ato-filter-actions .ato-button {
    padding: 12px 20px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-sm);
}

.ato-filter-form .ato-button-text {
    background: transparent;
    color: var(--ato-text-muted);
    border: 1px solid var(--ato-border-color);
}

.ato-filter-form .ato-button-text:hover {
    color: var(--ato-primary);
    border-color: var(--ato-primary);
}

.ato-mobile-filter-toggle {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-sm);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .ato-op-stat-num {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .ato-op-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .ato-op-aside {
        position: static;
        top: auto;
    }

    .ato-op-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ato-op-stat:nth-child(2n) {
        border-right: 0;
    }

    .ato-op-stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--ato-border-color);
    }
}

@media (max-width: 640px) {
    .ato-op-banner {
        min-height: 260px;
    }

    .ato-op-banner-inner {
        padding: 16px;
    }

    .ato-op-idcard {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
    }

    .ato-op-idcard-logo {
        width: 60px;
        height: 60px;
    }

    .ato-op-actions .ato-op-action {
        flex: 1 1 46%;
        justify-content: center;
    }

    .ato-op-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .ato-op-tab {
        flex: 0 0 auto;
        padding: 13px 15px;
    }

    .ato-op-toolbar select {
        flex: 1 1 100%;
        width: 100%;
    }

    .ato-op-toolbar-go {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------- reviews card
   A route to reviews the operator itself points at — not a rating, and not a
   review. There is deliberately no star graphic, no score and no count here:
   nothing of the sort was ever read from the source, so printing one would be
   inventing it. If verified figures are ever obtained FROM the review platform
   (never from the operator's own markup, which has been wrong by 0.6 of a star
   in at least one case), they can be added; until then this stays a link.
   ---------------------------------------------------------------------- */
.ato-op-reviews__note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ato-text-muted);
    margin: 0 0 12px;
}

.ato-op-reviews__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ato-primary);
    border-bottom: 1px solid var(--ato-secondary);
    padding-bottom: 3px;
    transition: var(--ato-transition);
}

.ato-op-reviews__link:hover,
.ato-op-reviews__link:focus-visible {
    color: var(--ato-primary-hover);
}

.ato-op-reviews__ext {
    font-size: 13px;
    line-height: 1;
}

/* ==========================================================================
   Verification badge
   Replaces the flat uppercase chip that read as an admin status label. A
   scalloped gold seal with a knocked-out tick, on a soft tint, with the label
   in ink rather than reversed out of a solid block.
   The old .ato-badge-verified rules are deliberately kept — admin columns and
   other templates still use that class.
   ========================================================================== */
.ato-vbadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: rgba(var(--shadow, 36, 22, 9), .055);
    border: 1px solid var(--ato-border-color, rgba(var(--shadow, 36, 22, 9), .18));
    color: var(--ato-dark, #241609);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.ato-vbadge-mark {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    display: block;
}

/* the rosette body */
.ato-vbadge-mark path:first-child {
    fill: var(--ato-accent, #a8750f);
}

/* the tick, knocked out as a stroke so it stays crisp at any size */
.ato-vbadge-mark .ato-vbadge-tick {
    fill: none;
    stroke: var(--ato-bg-white, #fffaf0);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ato-vbadge-text {
    display: inline-block;
}

/* compact variant for the sidebar's Marketplace Status row */
.ato-vbadge--sm {
    font-size: 11.5px;
    padding: 3px 10px 3px 7px;
    gap: 6px;
}

.ato-vbadge--sm .ato-vbadge-mark {
    width: 16px;
    height: 16px;
}

/* On the operator id card the badge follows a large serif name, so it needs to
   sit on the text baseline rather than the line box. */
.ato-op-idcard .ato-vbadge {
    margin-left: 12px;
    position: relative;
    top: -2px;
}

@media (max-width: 600px) {
    /* the name wraps on a phone; the badge drops under it rather than squeezing */
    .ato-op-idcard .ato-vbadge {
        margin-left: 0;
        margin-top: 8px;
        top: 0;
    }
}

/* --- badge variants: one mark, four placements -------------------------- */

/* Beside an operator name in body copy: no tinted pill, just the seal and the
   words, because it sits inside a sentence rather than beside a heading. */
.ato-vbadge--inline {
    background: none;
    border: 0;
    padding: 0;
    gap: 6px;
    font-size: 12px;
}

.ato-vbadge--inline .ato-vbadge-mark {
    width: 16px;
    height: 16px;
}

/* Over a photograph. The soft tint is invisible on an image, so this variant is
   opaque, and the border goes because the fill already separates it. */
.ato-vbadge--on-image {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--ato-bg-white, #fffaf0);
    border: 0;
    box-shadow: 0 2px 8px rgba(var(--shadow, 36, 22, 9), .22);
    padding: 5px 11px 5px 8px;
    font-size: 11.5px;
}

/* Tight card furniture: the seal alone, with the label for assistive tech only.
   No pill — at this size a background would read as a smudge. */
.ato-vbadge--mark {
    background: none;
    border: 0;
    padding: 0;
    gap: 0;
}

.ato-vbadge--mark .ato-vbadge-mark {
    width: 15px;
    height: 15px;
}

/* The safari card's operator line is small and tight, so pull the seal onto the
   text baseline rather than letting it stretch the row. */
a.at-tour.ato-tour-card .at-tour-op .ato-vbadge--mark {
    vertical-align: middle;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

/* === ROUND 17G — OPERATOR LICENCE LINE ===========================
   Appended block. The licence line reuses .ato-op-loc for the icon+text row;
   these rules only handle the number itself and the registered-name note.
   ====================================================================== */

.ato-op-licence {
    align-items: flex-start;
}

.ato-op-licence .dashicons {
    position: relative;
    top: 1px;
}

/* The number sits on its own line under the label. Inline, "…Uganda Tourism
   Board UTB/RTT/TO/2022/100284" runs together and needs a separator to be
   readable; as a block it needs none, and nowrap is then safe because the
   line holds nothing but the number. */
.ato-op-licence-num {
    display: block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ato-op-licence-num a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ato-op-licence-num a:hover,
.ato-op-licence-num a:focus {
    color: var(--ato-primary);
}

.ato-op-licence-reg {
    display: block;
    font-size: 0.92em;
    opacity: 0.85;
}