/*
 * GCC-DOM-T2/T3 — Interactive TLD catalog foundation + pagination/visual
 * polish pass. Additive, isolated stylesheet. Every rule is scoped to the
 * "grafer-tld-catalog" prefix so nothing here can collide with or override
 * wisecp.css / navstylechange.css. Do not add rules outside this prefix.
 */

/* ---------------------------------------------------------------------
 * Toolbar container
 * T3 fix: box-sizing was previously only applied to *descendants* of
 * .grafer-tld-catalog, not the element itself, so its own padding (14/16px)
 * was added on top of max-width:100%, pushing the whole container wider
 * than its parent and causing the reported toolbar/count overflow. Setting
 * box-sizing on the element directly fixes that at the root.
 * ------------------------------------------------------------------ */
.grafer-tld-catalog {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 18px 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: #f7f8f9;
}

.grafer-tld-catalog * {
    box-sizing: border-box;
}

.grafer-tld-catalog__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.grafer-tld-catalog__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 220px;
}

.grafer-tld-catalog__search-label {
    font-size: 12px;
    font-weight: 600;
    color: #667;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * D. Borderless / soft inputs
 * GCC-DOM-T3A: wisecp.css (out of scope, not modified) styles plain text
 * inputs with a bottom-line/underline treatment — some themes do this as
 * a real border-bottom, others fake an animated underline via a
 * background-image/background-size trick. `border:none` alone doesn't
 * reliably beat that, so every relevant box-model property is reset
 * explicitly and with !important on these two exact input classes only.
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__search-input,
.grafer-tld-catalog__panel-sld-input {
    min-width: 0;
    width: 240px;
    max-width: 100%;
    padding: 9px 12px;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 8px;
    outline: none !important;
    box-shadow: none !important;
    background: #eceff1;
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: #2b2f33;
    font-size: 14px;
}

.grafer-tld-catalog__search-input::before,
.grafer-tld-catalog__search-input::after,
.grafer-tld-catalog__panel-sld-input::before,
.grafer-tld-catalog__panel-sld-input::after {
    display: none !important;
}

.grafer-tld-catalog__search-input::placeholder,
.grafer-tld-catalog__panel-sld-input::placeholder {
    color: #8a9096;
}

.grafer-tld-catalog__search-input:focus,
.grafer-tld-catalog__panel-sld-input:focus {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    background: #fff;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(52, 90, 108, 0.16) !important;
}

.grafer-tld-catalog__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.grafer-tld-catalog__filter-btn {
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: #eceff1;
    color: #45505a;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
}

.grafer-tld-catalog__filter-btn:hover {
    background: #dfe4e8;
}

.grafer-tld-catalog__filter-btn[aria-pressed="true"] {
    background: #345a6c;
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * A-Z filter
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__az {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
}

.grafer-tld-catalog__az-btn {
    min-width: 28px;
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    background: #eceff1;
    color: #45505a;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.grafer-tld-catalog__az-btn:hover {
    background: #dfe4e8;
}

/* GCC-DOM-T5: reuses the same "selected filter" token as
   .grafer-tld-catalog__filter-btn[aria-pressed="true"] (#345a6c) instead
   of its own green — A-Z and category are the same underlying meaning
   ("current filter"), and the previous #4caf6b competed visually with
   the #3f9d63 conversion CTA color used elsewhere in this feature. */
.grafer-tld-catalog__az-btn[aria-pressed="true"] {
    background: #345a6c;
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * B/C. Result count + pagination — a single "results row" fully
 * contained inside the toolbar, never allowed to overflow it.
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__results-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e6e8ea;
}

.grafer-tld-catalog__meta {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #666;
}

#graferTldCatalogCount {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.grafer-tld-catalog__pagination[hidden] {
    display: none !important;
}

.grafer-tld-catalog__pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.grafer-tld-catalog__page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #345a6c;
    font-size: 13px;
    cursor: pointer;
}

.grafer-tld-catalog__page-btn:hover:not(:disabled) {
    background: #eceff1;
}

.grafer-tld-catalog__page-btn.is-current {
    background: #345a6c;
    color: #fff;
    font-weight: 600;
}

.grafer-tld-catalog__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.grafer-tld-catalog__page-btn--nav {
    font-weight: 600;
    padding: 0 12px;
}

.grafer-tld-catalog__page-ellipsis {
    padding: 0 4px;
    color: #99a0a6;
}

/* ---------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__empty {
    margin-top: 12px;
    padding: 18px;
    text-align: center;
    border-radius: 8px;
    background: #fff;
}

.grafer-tld-catalog__empty[hidden] {
    display: none !important;
}

.grafer-tld-catalog__reset-btn {
    margin-top: 8px;
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: #eceff1;
    color: #345a6c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.grafer-tld-catalog__reset-btn:hover {
    background: #dfe4e8;
}

/* ---------------------------------------------------------------------
 * E. Row actions — compact, borderless pills, own line under the TLD
 * name/paperwork icon so they no longer read as a nested input field.
 * GCC-DOM-T4: "Search domain" and the new "Details" action share one
 * wrapper so they sit side by side and wrap together on narrow rows.
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.grafer-tld-catalog__row-action,
.grafer-tld-catalog__details-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
}

.grafer-tld-catalog__row-action {
    background: #eceff1;
    color: #345a6c;
}

/* GCC-DOM-T3A: neutralize any theme default border/box-shadow that
   generic <i>/<span> elements pick up inside a table cell — this is
   what produced the thin vertical line between the icon and the label.
   Deliberately does not touch `content`, so the Font Awesome glyph
   (rendered via the icon's own ::before content) is preserved. */
.grafer-tld-catalog__row-action i,
.grafer-tld-catalog__row-action .grafer-tld-catalog__row-action-text {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.grafer-tld-catalog__row-action:hover,
.grafer-tld-catalog__row-action[aria-expanded="true"] {
    background: #345a6c;
    color: #fff;
}

/* GCC-DOM-T4 §A: Details is visually secondary to the primary "Search
   domain" pill — a ghost/text-style control, not a second filled pill,
   so the row stays calm even with two actions in it. */
.grafer-tld-catalog__details-action {
    background: transparent;
    color: #667079;
    padding: 4px 8px;
}

.grafer-tld-catalog__details-action:hover,
.grafer-tld-catalog__details-action[aria-expanded="true"] {
    background: #eceff1;
    color: #345a6c;
}

/* Rows hidden by catalog filters/pagination — !important guarantees this
   wins regardless of any [display] rule wisecp.css sets on table rows. */
#graferTldTableBody tr[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------
 * GCC-DOM-T5 — Price table visual polish. Brings the table in line with
 * the toolbar's card language via CSS overrides only: the header's
 * bgcolor attribute is repainted (bgcolor has near-zero specificity, no
 * !important needed) and per-cell borders/hover are added on <td>, never
 * <tr> — domain.php's promo-row inline background lives on the <tr>, so
 * painting on <td> instead sits cleanly on top of it without needing to
 * fight it via !important. No domain.php markup, inline style, loop or
 * price value is touched.
 * ------------------------------------------------------------------ */
#graferTldCatalogTable thead th {
    background: #eef1f3;
    border-bottom: 2px solid #dde2e6;
    padding: 10px 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #45505a;
}

#graferTldTableBody tr:not(#graferTldCatalogPanelRow):not(#graferTldCatalogDetailsRow) > td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6e8ea;
    transition: background-color 150ms ease;
}

#graferTldTableBody tr:not(#graferTldCatalogPanelRow):not(#graferTldCatalogDetailsRow):hover > td {
    background-color: #f5f7f8;
}

/* ---------------------------------------------------------------------
 * F. Inline selected-TLD search panel — one <tr>, moved next to the
 * selected row by JS. The <td> itself stays visually neutral; the actual
 * "panel" look comes from the inner surface, so it reads as a compact
 * card rather than a full-width colored table row.
 * ------------------------------------------------------------------ */
#graferTldCatalogPanelRow[hidden] {
    display: none !important;
}

#graferTldCatalogPanelRow > td {
    background: transparent;
    border: none;
    padding: 8px !important;
}

.grafer-tld-catalog__panel-surface {
    background: #f2f4f5;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
}

.grafer-tld-catalog__panel-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.grafer-tld-catalog__panel-sld-label {
    font-size: 12px;
    font-weight: 600;
    color: #667;
    white-space: nowrap;
}

.grafer-tld-catalog__panel-sld-input {
    flex: 1 1 160px;
}

.grafer-tld-catalog__panel-ext {
    padding: 8px 14px;
    border-radius: 999px;
    background: #dfe6ea;
    color: #26404d;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.grafer-tld-catalog__panel-check-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    background: #3f9d63;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.grafer-tld-catalog__panel-check-btn:hover:not(:disabled) {
    background: #358753;
}

.grafer-tld-catalog__panel-check-btn:disabled {
    opacity: 0.6;
    cursor: no-drop;
}

.grafer-tld-catalog__panel-close-btn {
    padding: 4px 9px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #5a646c;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.grafer-tld-catalog__panel-close-btn:hover {
    background: #e3e7ea;
}

.grafer-tld-catalog__panel-error {
    margin-top: 8px;
    color: #c0392b;
    font-size: 13px;
}

.grafer-tld-catalog__panel-error[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------
 * GCC-DOM-T4 — Shared TLD details panel. Same "one <tr>, moved next to
 * the selected row, neutral <td> + inner surface card" pattern as the
 * search panel above, so it never reads as a giant colored table row.
 * ------------------------------------------------------------------ */
#graferTldCatalogDetailsRow[hidden] {
    display: none !important;
}

#graferTldCatalogDetailsRow > td {
    background: transparent;
    border: none;
    padding: 8px !important;
}

.grafer-tld-catalog__details-surface {
    background: #f2f4f5;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
}

.grafer-tld-catalog__details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.grafer-tld-catalog__details-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #26343d;
}

.grafer-tld-catalog__details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 18px;
    margin-bottom: 14px;
}

.grafer-tld-catalog__details-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grafer-tld-catalog__details-label {
    font-size: 11px;
    font-weight: 600;
    /* GCC-DOM-T5: was #7a828a (~3.5:1 on this #f2f4f5 surface, fails the
       4.5:1 AA minimum for 11px text); #5c6570 gives ~5.4:1. */
    color: #5c6570;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grafer-tld-catalog__details-value {
    font-size: 14px;
    color: #26343d;
    font-weight: 600;
}

/* §D. Status is conveyed by text, not color alone — the background tint
   is a restrained accent only. */
.grafer-tld-catalog__status-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #e3e7ea;
    color: #45505a;
}

.grafer-tld-catalog__status-chip[data-state="supported"] {
    background: #e1f3e6;
    color: #256a3f;
}

.grafer-tld-catalog__status-chip[data-state="not-supported"] {
    background: #f7e6e4;
    color: #9a3c30;
}

.grafer-tld-catalog__status-chip[data-state="not-specified"] {
    background: #e9ebec;
    color: #6a7178;
}

.grafer-tld-catalog__details-promo {
    padding-top: 12px;
    border-top: 1px solid #e3e6e8;
    margin-bottom: 14px;
}

.grafer-tld-catalog__details-promo-body p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #3c454c;
}

.grafer-tld-catalog__details-actions {
    display: flex;
    justify-content: flex-start;
}

.grafer-tld-catalog__details-cta {
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    background: #3f9d63;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.grafer-tld-catalog__details-cta:hover {
    background: #358753;
}

/* ---------------------------------------------------------------------
 * Visible focus states (keyboard operability requirement). Text inputs
 * use their own always-on soft-shadow focus style above; buttons use
 * :focus-visible so a mouse click doesn't show a ring.
 * ------------------------------------------------------------------ */
.grafer-tld-catalog__filter-btn:focus-visible,
.grafer-tld-catalog__az-btn:focus-visible,
.grafer-tld-catalog__row-action:focus-visible,
.grafer-tld-catalog__details-action:focus-visible,
.grafer-tld-catalog__reset-btn:focus-visible,
.grafer-tld-catalog__page-btn:focus-visible,
.grafer-tld-catalog__panel-check-btn:focus-visible,
.grafer-tld-catalog__panel-close-btn:focus-visible,
.grafer-tld-catalog__details-cta:focus-visible,
.grafer-tld-catalog__details-heading:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Mobile — toolbar/panel stacking
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .grafer-tld-catalog__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .grafer-tld-catalog__search-input {
        width: 100%;
    }

    .grafer-tld-catalog__az {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .grafer-tld-catalog__az-btn {
        flex: 0 0 auto;
    }

    /* GCC-DOM-T5 — Touch targets, mobile-only. Grows the tap area via
       padding/min-height/min-width toward ~44x44px; font-size and desktop
       sizing are untouched. display:flex is added here only to keep the
       enlarged box's label centered — it does not apply above 768px. */
    .grafer-tld-catalog__filter-btn,
    .grafer-tld-catalog__az-btn,
    .grafer-tld-catalog__page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .grafer-tld-catalog__filter-btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    .grafer-tld-catalog__az-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .grafer-tld-catalog__page-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .grafer-tld-catalog__row-action,
    .grafer-tld-catalog__details-action {
        min-height: 44px;
        padding: 10px 14px;
    }

    .grafer-tld-catalog__results-row {
        flex-direction: column;
        align-items: stretch;
    }

    .grafer-tld-catalog__panel-form {
        flex-direction: column;
        align-items: stretch;
    }

    .grafer-tld-catalog__panel-sld-input,
    .grafer-tld-catalog__panel-ext,
    .grafer-tld-catalog__panel-check-btn,
    .grafer-tld-catalog__panel-close-btn {
        width: 100%;
        text-align: center;
    }

    /* GCC-DOM-T4: details panel — one-column stacked layout (§I). */
    .grafer-tld-catalog__details-grid {
        grid-template-columns: 1fr;
    }

    .grafer-tld-catalog__details-cta {
        width: 100%;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------
 * J. Small screens — stack the existing price table into readable
 * cards instead of letting it overflow horizontally. Values are
 * untouched; only the layout changes, using the data-label attributes
 * already rendered by PHP (the exact same translated column headers).
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
    #graferTldCatalogTable thead {
        display: none;
    }

    #graferTldCatalogTable,
    #graferTldCatalogTable tbody,
    #graferTldCatalogTable tr,
    #graferTldCatalogTable td {
        display: block;
        width: 100%;
    }

    #graferTldTableBody tr:not(#graferTldCatalogPanelRow):not(#graferTldCatalogDetailsRow) {
        margin-bottom: 10px;
        border-radius: 8px;
        background: #fff;
        padding: 10px 12px;
    }

    #graferTldTableBody tr:not(#graferTldCatalogPanelRow):not(#graferTldCatalogDetailsRow) td {
        padding: 3px 0;
        /* GCC-DOM-T5: was "left" (a physical value that fights automatic
           mirroring under dir="rtl"); "start" preserves RTL compatibility. */
        text-align: start;
    }

    #graferTldTableBody tr td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #graferTldTableBody tr td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #667;
        font-size: 12px;
    }

    #graferTldCatalogPanelRow > td,
    #graferTldCatalogDetailsRow > td {
        padding: 6px !important;
    }
}