/* ==========================================================================
   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;
}

/* === OPERATOR REGION LINE ========================================
   Appended block. The line reuses .ato-op-loc for the icon+text row; this
   rule only stops the icon stretching the row.
   ====================================================================== */

/* Was .ato-op-licence. The licence badge was removed on 25 Sep 2026 and this
   slot now carries "East African tour operator" -- one line, no number, so the
   -num and -reg rules that used to follow are gone with it. */
.ato-op-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.ato-op-pager a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--ato-border, #ddd);
    border-radius: 4px;
    text-decoration: none;
}

.ato-op-pager-at {
    opacity: 0.75;
    font-size: 0.94em;
}

.ato-op-dir-note {
    display: block;
    margin-top: 6px;
    font-size: 0.94em;
    opacity: 0.82;
    max-width: 68ch;
}

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

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



/* ==========================================================================
   Tap targets -- operator profile
   ==========================================================================
   Measured with a LIVE HIT TEST (elementFromPoint walked out from each
   control's centre), not getBoundingClientRect. A transparent ::after zone
   enlarges what a finger can reach without changing the rect, so counting
   rects both over- and under-reports.

   Baseline failures on /safaris/operator/<slug>/, by live hit area, at 320:
     .ato-op-social        x6   90.6 x 35.6
     .ato-op-tab           x4   73.7 x 42      (44 only above 1100px)
     .ato-op-contact-link  x3  239.0 x 22.3
     .ato-op-reviews__link x1  239.0 x 41.8
     .ato-op-toolbar-go    x1  255.0 x 40
     .ato-op-toolbar input x1  255.0 x 42.4
     .ato-op-action        x2  138.0 x 41.6    (passes at 375 and up)
     .ato-op-chip         x28  115.5 x 43.88   -- passed only by rounding

   The .at-tour wishlist heart is NOT touched here. Its 44x44 ::after already
   lives in ato-marketplace.css and both directions still test clean: the
   button's live box is 44-45 square and resolves to the button, all four
   corners of that zone resolve to the button, and the card's image, body,
   bottom edge and left edge all still resolve to the card link.

   Every zone below is sized so that neighbouring zones abut and never
   overlap -- an overlapping zone puts the wrong control under the tap and
   is invisible in the markup.
   -------------------------------------------------------------------------- */

/* Social links: 90.6-145.2 x 35.6. Width already passes, so the zone only
   grows vertically: 44 centred on 35.6 reaches 4.2px above and below. The
   row wraps with a 9px gap, so two stacked zones stop 0.6px short of each
   other. The top row reaches 4.2px into .ato-op-socials' 16px padding-top,
   which holds only the divider rule. left/right -1px add the 1px border
   back, because an absolutely positioned child is laid out against the
   PADDING box and would otherwise come out 2px narrower than the control. */
.ato-op-social {
    position: relative;
}

.ato-op-social::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Chips: 43.88 tall, i.e. passing the 44px bar only because the hit walk
   rounds up. A fixed 44px zone makes it deterministic instead of leaving it
   to the font metrics. The chips wrap with a 10px gap (and .is-grid keeps
   that same gap), so the zone overhangs the box by 0.06px per side and
   neighbouring zones stay 9.88px apart. */
.ato-op-chip {
    position: relative;
}

.ato-op-chip::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Action buttons: 44.58 at 375 and up, but 41.6 at 320 where the row goes
   two-up and the labels re-flow. The zone covers both cases; the row's 12px
   gap leaves 10.8px between zones at the 320 worst case. */
.ato-op-action {
    position: relative;
}

.ato-op-action::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Tab strip: a ::after is NOT usable here. Below 1100px .ato-op-tabs is a
   horizontal scroller (overflow-x:auto, overflow-y:hidden), so it clips any
   zone that reaches past the tab's own box -- the fix would read as applied
   and measure as absent. The tab box itself has to grow.
   45px, not 44: the tab carries margin-bottom:-1px so its last pixel row
   sits under the strip's 1px border-bottom, outside the padding box the
   scroller clips to, and a 44px tab measures 43 live. The strip goes from
   42 to 45 at narrow widths and 44 to 45 above 1100px; the selected tab's
   underline still lands on the strip rule, because the negative margin is
   unchanged. */
.ato-op-tab {
    min-height: 45px;
}

/* Contact links (email / phone / website): 22.27 tall rows in a grid.
   A 44px zone needs a 44px pitch, and the list's 12px gap only gives 34.27
   -- three overlapping zones would have left each row hitting its
   neighbour. The gap carries the difference instead of the rows, so the
   text stays exactly where it was inside each row and only the block grows
   (91 -> 111 at 320). 22px gap = 44.27 pitch, so the zones abut with 0.27px
   to spare. */
.ato-op-contact-list {
    gap: 22px;
}

.ato-op-contact-link {
    position: relative;
}

.ato-op-contact-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Reviews link: 22.77 on one line, 41.75 when it wraps at 320. The 44px
   zone reaches at most 10.6px past the box, over .ato-op-reviews__note
   above and the card's own padding below -- neither holds a control. */
.ato-op-reviews__link {
    position: relative;
}

.ato-op-reviews__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Toolbar Apply button: 40 tall. 2px of overhang per side into the
   toolbar's 12px gap and 16px padding. */
.ato-op-toolbar-go {
    position: relative;
}

.ato-op-toolbar-go::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Search field: 42.4 tall. An <input> is a replaced element and renders no
   ::after, so this one has to be a real height. min-height rather than
   padding, so the adjacent <select> -- already exactly 44 -- is untouched
   and the two now line up. The toolbar grows 2px. */
.ato-op-toolbar input[type="search"],
.ato-op-toolbar input[type="text"] {
    min-height: 44px;
}

/* Breadcrumb links: 40 x 13.6 ("Home") and 81 x 13.6 ("Operators"), so this
   needs width as well as height. The equivalent .ato-safari-crumbs links on
   the single-safari template were given a zone in ato-single-safari.css and
   these were missed -- the same trail, the same size, fixed on one page type
   and not the other.

   min-width:44px widens the short crumb by 2px each side into the 13px gap
   that separates it from its "›", which is a non-interactive <span>, so no
   two crumb zones can meet. The trailing crumb is a <span> too, not a link,
   so it needs nothing.

   VERTICALLY THIS DIFFERS FROM THE SINGLE-SAFARI VERSION. There the zone sat
   inside the crumb row's own 26px/22px padding; .ato-op-crumbs has padding 0
   and a line box of 18.15px, so a centred 44px zone overflows the row by
   ~13px top and bottom. Probed before writing: the whole band resolves to
   .ato-op-crumbwrap, which is not interactive, and there is no interactive
   element within 40px in any direction, so the overflow steals nothing.

   inline-block gives the zone a box to hang off. It changes the link's own
   rect height from 13.6 to 18.15 but not the row's height, which the
   line-height had already reserved. */
.ato-op-crumbs a {
    position: relative;
    display: inline-block;
}

.ato-op-crumbs a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
}