/* Billanz Skin: SupportHost */
/*
 * SupportHost look for the Billanz blocks. Colours and fonts are the theme's
 * own presets (theme.json), with the hex values as fallbacks.
 *
 * Covered so far: domain price table. Menu, auth nav, price cards and the rest
 * come later.
 */

.billanz-tld-table {
    --sh-black: var(--wp--preset--color--black, #09090b);
    --sh-text: var(--wp--preset--color--gray-text, #52525b);
    --sh-muted: #a1a1aa;
    --sh-lines: var(--wp--preset--color--gray-lines, #e4e4e7);
    --sh-hover: var(--wp--preset--color--section-bg, #f4f4f5);
    --sh-green: var(--wp--preset--color--green, #2dc799);
    --sh-green-dark: var(--wp--preset--color--green-dark, #1e8566);
    --sh-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Heading — only when the block sets one; the page usually has its own. */
.billanz-tld-table__heading {
    margin: 0 0 1rem;
    color: var(--sh-black);
    font-weight: 700;
    text-align: center;
}

/* Filter — centred search box with the magnifier drawn as a background. */
.billanz-tld-table__filter {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 24px;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--sh-lines);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a1a1aa'%3E%3Cpath d='M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z'/%3E%3C/svg%3E") no-repeat 14px 50% / 18px 18px;
    color: var(--sh-black);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease;
}
.billanz-tld-table__filter::placeholder { color: var(--sh-muted); }
.billanz-tld-table__filter:focus { border-color: var(--sh-green); outline: none; }

/* Card that holds the table and scrolls it. */
.billanz-tld-table__scroll {
    border: 1px solid var(--sh-lines);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    background: #fff;
}

.billanz-tld-table__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

/* "Prices per year, tax excluded." — a quiet line inside the card, above the header. */
.billanz-tld-table__caption {
    padding: 12px 16px 0;
    color: var(--sh-muted);
    font-size: 12px;
    text-align: left;
}

/* Header — small uppercase labels; opaque so it hides rows scrolling under it. */
.billanz-tld-table__table thead th {
    padding: 14px 16px;
    border-bottom: 2px solid var(--sh-lines);
    background: #fff;
    color: var(--sh-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Prices sit left like the TLD column, as on the original table. */
.billanz-tld-table__table th:not(:first-child),
.billanz-tld-table__table td:not(.billanz-tld-table__ext) {
    text-align: left;
}

.billanz-tld-table__table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sh-lines);
    background: transparent;
    color: var(--sh-black);
    font-size: 13px;
    font-family: var(--sh-mono);
    font-weight: 550;
    vertical-align: middle;
}
.billanz-tld-table__table tbody tr:last-child td { border-bottom: 0; }
.billanz-tld-table__table tbody tr:hover { background: var(--sh-hover); }

/* TLD column — body font, not the mono used by the prices. */
.billanz-tld-table__table tbody td.billanz-tld-table__ext {
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: 14px;
    font-weight: 700;
}

/* The amount is split in spans (integer/decimals/currency): keep them tight. */
.billanz-tld-table .billanz-amount__currency { margin-left: 0.15em; }

/* Coupon discount. */
.billanz-tld-table__original { color: var(--sh-muted); font-weight: 400; }
.billanz-tld-table__amount.is-discounted { color: var(--sh-green-dark); font-weight: 700; }
.billanz-tld-table__badge {
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--sh-green-dark);
    color: #fff;
    font-family: var(--wp--preset--font-family--body, inherit);
    letter-spacing: 0.5px;
}
.billanz-tld-table__loader { color: var(--sh-text); font-size: 13px; justify-content: center; }

.billanz-tld-table__empty,
.billanz-tld-table__noresults {
    margin: 16px 0 0;
    color: var(--sh-text);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 768px) {
    .billanz-tld-table__table thead th,
    .billanz-tld-table__table tbody td { padding: 10px 8px; }
    .billanz-tld-table__caption { padding: 10px 8px 0; }
    /* Like the original table: drop the optional columns (restore fee, grace…)
       on phones and keep TLD / registration / transfer / renewal. */
    .billanz-tld-table__table th:nth-child(n+5),
    .billanz-tld-table__table td:nth-child(n+5) { display: none; }
}

/*
 * The site's "Make Tables Responsive" plugin turns every table into stacked
 * label/value cards below 650px, with !important rules. For a 700-row price
 * list that is unreadable, so keep a real table here. Selectors are scoped to
 * this block and carry !important to win over the plugin's.
 */
@media (max-width: 650px) {
    .billanz-tld-table .mtr-table { display: table !important; }
    .billanz-tld-table .mtr-table thead { display: table-header-group !important; }
    .billanz-tld-table .mtr-table tbody { display: table-row-group !important; }
    .billanz-tld-table .mtr-table tr:nth-child(n) { display: table-row !important; background: transparent !important; }
    .billanz-tld-table .mtr-table tr:nth-child(n) .mtr-td-tag,
    .billanz-tld-table .mtr-table tr:nth-child(n) .mtr-th-tag {
        display: table-cell !important;
        width: auto !important;
        padding: 10px 6px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--sh-lines) !important;
        background: transparent !important;
        text-align: left !important;
        overflow: visible !important;
    }
    .billanz-tld-table .mtr-table thead tr:nth-child(n) .mtr-th-tag {
        border-bottom-width: 2px !important;
        background: #fff !important;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .billanz-tld-table .mtr-table tbody tr:nth-child(n):hover .mtr-td-tag { background: var(--sh-hover) !important; }
    .billanz-tld-table .mtr-table tr:nth-child(n) .mtr-td-tag:nth-child(n+5),
    .billanz-tld-table .mtr-table tr:nth-child(n) .mtr-th-tag:nth-child(n+5) { display: none !important; }
    /* A long TLD (IDN, second level) wraps instead of widening the column. */
    .billanz-tld-table .mtr-table tr:nth-child(n) td.billanz-tld-table__ext {
        min-width: 4.5em;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .billanz-tld-table .mtr-table td[data-mtr-content]::before,
    .billanz-tld-table .mtr-table th[data-mtr-content]::before { content: none !important; display: none !important; }
    .billanz-tld-table .mtr-cell-content {
        display: inline !important;
        max-width: none !important;
        text-align: left !important;
    }
}