/* Website Worth Calculator - tool-specific overrides on top of the shared
 * tool primitives in code/assets/css/tools.css.
 *
 * Cross-tool primitives (mode toggle, input form, primary/ghost button,
 * progress region, errors region, results region, table base, sortable
 * headers, pagination, toasts, history region, sticky chrome, debug
 * panel, upgrade banner, modal chrome) live in tools.css. Only the bits
 * genuinely specific to this tool sit here:
 *
 *   1. The single-mode worth card (estimated-value range + revenue
 *      breakdown + disclaimer).
 *   2. Per-column widths on the 4-column bulk comparison table
 *      (Domain / Est. Monthly Visits / Est. Monthly Revenue /
 *      Estimated Worth) and the worth-range cell.
 *   3. The results-subhead context strip.
 */

/* ========================================================================
   Form layout - put the country dropdown alongside type select + submit
   ======================================================================== */
.input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
.input-row .text-input {
    flex: 1 1 240px;
    min-width: 200px;
}
.input-row .type-select {
    flex: 0 0 auto;
    min-width: 0;
}
.input-row .primary-btn {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .input-row {
        gap: 8px;
    }
    .input-row .text-input {
        flex-basis: 100%;
    }
    .input-row .type-select {
        flex: 1 1 0;
    }
    .input-row .primary-btn {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Single-mode worth card.

   A prominent estimated-value range over a revenue breakdown. The shared
   .results-region has no padding (sticky-header dependency), and this
   card is its own region anyway, so it sets its own chrome.
   ======================================================================== */
.worth-region {
    margin-top: 18px;
    scroll-margin-top: 16px;
}
.worth-region[hidden] {
    display: none;
}

.worth-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 26px 28px 22px;
    overflow: hidden;
}

.worth-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 6px;
}
.worth-card-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-500);
}
.worth-card-target {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-700);
    word-break: break-all;
}

.worth-card-range {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--brand-red);
    font-feature-settings: var(--tnum);
    margin: 4px 0 2px;
}
.worth-card-range.is-nodata {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--ink-500);
}
/* Iconic, not-for-sale sites: a playful "Priceless" instead of a (nonsense) range. */
.worth-card-range.is-priceless {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #b8860b;
}

.worth-card-note {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--ink-500);
}

/* Breakdown list: label on the left, value on the right, one per row. */
.worth-breakdown {
    margin: 0;
    border-top: 1px solid var(--ink-100);
}
.worth-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ink-100);
}
.worth-breakdown-row dt {
    font-size: 14px;
    color: var(--ink-700);
}
.worth-breakdown-row dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
    font-feature-settings: var(--tnum);
}

.worth-card-tools {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}
.worth-card-tools[hidden] {
    display: none;
}
.worth-card-tools-label {
    color: var(--ink-500);
    font-weight: 600;
}

/* Single-mode share/copy/export actions on the worth card (the bulk
   results-actions bar is hidden in single view). [hidden] override is
   mandatory because display:flex beats the UA rule. */
.worth-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.worth-actions[hidden] {
    display: none;
}

.worth-card-disclaimer {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--ink-25);
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-500);
}
.worth-card-disclaimer strong {
    color: var(--ink-700);
}

@media (max-width: 560px) {
    .worth-card {
        padding: 20px 18px 18px;
    }
    .worth-card-range {
        font-size: 30px;
    }
    .worth-breakdown-row {
        gap: 10px;
    }
    .worth-breakdown-row dt {
        font-size: 13px;
    }
}

/* ========================================================================
   Results-subhead context strip (between the sticky results-header and
   the table). Mirrors the Redirect Checker pattern; lift to shared on a
   second consumer.
   ======================================================================== */
.results-subhead {
    padding: 9px 18px;
    background: var(--ink-25);
    border-bottom: 1px solid var(--ink-100);
    font-size: 12.5px;
    color: var(--ink-500);
}

/* ========================================================================
   Bulk comparison table - per-column sizing.

   Four columns: Domain (the input), Est. Monthly Visits, Est. Monthly
   Revenue, Estimated Worth (a low-high range + midpoint).
   ======================================================================== */
.results-table th[data-col="target"] {
    width: 40%;
    min-width: 200px;
    text-align: left;
}
.results-table th[data-col="monthly_visits"] {
    width: 18%;
    min-width: 120px;
}
.results-table th[data-col="est_monthly_revenue"] {
    width: 19%;
    min-width: 130px;
}
.results-table th[data-col="worth_mid"] {
    width: 23%;
    min-width: 150px;
}

.results-table tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
}

.results-table .td-target {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.1px;
    word-break: break-all;
}
.results-table .td-target a {
    color: var(--ink);
    text-decoration: none;
}
.results-table .td-target a:hover {
    text-decoration: underline;
}
.results-table .td-monthly_visits,
.results-table .td-est_monthly_revenue {
    color: var(--ink);
    font-weight: 600;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}
.results-table .td-no-data {
    color: var(--ink-400);
    font-weight: 500;
}

/* Estimated Worth cell: range on top, midpoint underneath. */
.results-table .td-worth {
    font-feature-settings: var(--tnum);
}
.results-table .td-worth .worth-cell-range {
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-red);
    white-space: nowrap;
}
.results-table .td-worth .worth-cell-priceless {
    font-weight: 700;
    font-size: 15px;
    color: #b8860b;
    white-space: nowrap;
}
.results-table .td-worth .worth-cell-mid {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-400);
    white-space: nowrap;
}

/* Disabled state for "Continue with valid" when there are no valid
   lines to fall back to. The shared tools.css carries a
   `.primary-btn:disabled` rule already; this just adds the
   `[disabled]` attribute selector and the pointer-events:none
   tightening. */
.primary-btn:disabled,
.primary-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}