/*
 * Web Hosting Ninja custom overrides for the Tide theme.
 * Loaded via html/custom/head.extra.twig - safe from Tide theme upgrades.
 */

/* ---------------------------------------------------------------------
 * Responsive tables (.mobile-card-table) - shared by every client-panel
 * list table (invoices, services, hosting, domains, tickets, wallet...).
 * Desktop: a regular bordered table. Below 768px each row becomes a
 * stacked card (no horizontal scrolling), with each cell showing its
 * column header via a data-label attribute.
 *
 * NOTE: the row-title cell class is .mct-title, NOT .card-title -
 * Tabler defines .card-title with display:block, which would yank a
 * <td> out of table-cell layout on desktop and visibly break the
 * table's left-side borders.
 * ------------------------------------------------------------------- */

/* Suspended-service accent (desktop): thin danger stripe on the first
   cell only, so it doesn't compete with the status badge in the row. */
.table td.is-suspended {
    border-left: 3px solid var(--tblr-danger);
}

@media (max-width: 767.98px) {
    /* The desktop wrapper scrolls horizontally; in card view nothing
       overflows, so neutralize it to avoid a stray scrollbar. */
    .table-responsive:has(> .mobile-card-table) {
        overflow-x: visible;
    }

    .mobile-card-table thead {
        display: none;
    }
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tfoot,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }
    .mobile-card-table tbody tr,
    .mobile-card-table tfoot tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--tblr-border-color);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
    }
    .mobile-card-table tbody tr:last-child,
    .mobile-card-table tfoot tr:last-child {
        margin-bottom: 0;
    }
    .mobile-card-table td {
        border: none;
        padding: 0.3rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: right;
        /* table-striped fills alternating rows via an inset box-shadow (not
           background-color) - a subtle zebra stripe on a dense table, but once
           rows become standalone cards it reads as random cards having a gray
           fill and others not. Kill it in card view. */
        box-shadow: none !important;
    }
    .mobile-card-table td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--tblr-secondary-color, #6c757d);
        text-align: left;
        flex-shrink: 0;
    }
    .mobile-card-table td:not([data-label])::before {
        display: none;
    }
    .mobile-card-table td.mct-title {
        order: -1;
        padding-top: 0;
        padding-bottom: 0.5rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--tblr-border-color);
        font-size: 1.05rem;
        justify-content: flex-start;
        text-align: left;
    }
    .mobile-card-table td.actions {
        padding-top: 0.6rem;
        margin-top: 0.3rem;
        border-top: 1px solid var(--tblr-border-color);
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        text-align: left;
    }
    .mobile-card-table td.actions::before {
        display: none;
    }
    .mobile-card-table td.is-suspended {
        /* Desktop keeps the border-left accent on this cell (rule above);
           in card view the accent moves to the whole <tr> instead. */
        border-left: none;
    }
    .mobile-card-table tr.is-suspended {
        /* box-shadow (not border-left) so the accent stripe is clipped to the
           card's own border-radius instead of squaring off at the corner. */
        box-shadow: inset 3px 0 0 0 var(--tblr-danger);
    }
}

/* ---------------------------------------------------------------------
 * Table refinements shared by the client-panel list tables.
 * ------------------------------------------------------------------- */

/* Currency/quantity columns line up digit-for-digit instead of drifting. */
.hgn-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Action buttons stay on one line on desktop; a narrow (.w-1) actions column
   otherwise wraps each button onto its own row, which reads as a stack of
   loose chips instead of one control group. */
.table td.actions .btn-list {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Row-title links stay ink-colored so the table doesn't turn into a wall of
   blue, and reveal their affordance on hover. */
.table td.mct-title a:hover,
.table td.mct-title a:focus-visible {
    text-decoration: underline !important;
}

/* Icon-only buttons carry a visually hidden label on desktop (the tooltip and
   aria-label do the talking); the label becomes visible in mobile card view,
   where there is room and no hover to reveal a tooltip. */
.hgn-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .table td.actions .btn-list {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        width: 100%;
    }
    .hgn-pdf-btn {
        width: auto;
        padding-left: 0.5rem;
        padding-right: 0.75rem;
    }
    .hgn-pdf-btn .hgn-btn-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0 0.35rem;
        overflow: visible;
        clip: auto;
    }
}

/* ---------------------------------------------------------------------
 * Checkout (orderbutton) - Hostinger-style two-column flow:
 * step content on the left, a sticky order summary on the right.
 * ------------------------------------------------------------------- */
.hgn-checkout {
    max-width: 1140px;
    margin: 0 auto;
}

.hgn-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    margin-bottom: 1.5rem;
    font-size: .8125rem;
    color: var(--tblr-secondary);
}

.hgn-step {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hgn-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .06));
    color: var(--tblr-secondary);
    flex-shrink: 0;
}

.hgn-step-dot svg {
    width: 1rem;
    height: 1rem;
}

.hgn-step.is-active {
    color: var(--tblr-body-color);
    font-weight: 600;
}

.hgn-step.is-active .hgn-step-dot {
    background: var(--tblr-primary);
    color: #fff;
}

.hgn-step.is-done .hgn-step-dot {
    background: var(--tblr-success-lt);
    color: var(--tblr-success);
}

.hgn-step-sep {
    width: 2rem;
    height: 1px;
    background: var(--tblr-border-color);
}

.hgn-summary {
    position: sticky;
    top: 1.25rem;
}

.hgn-summary-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    font-size: .875rem;
}

.hgn-summary-item + .hgn-summary-item {
    border-top: 1px dashed var(--tblr-border-color);
}

.hgn-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .875rem;
    margin-top: .5rem;
    border-top: 1px solid var(--tblr-border-color);
}

.hgn-summary-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tblr-primary);
}

.hgn-gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: .625rem;
}

.hgn-gateway {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .75rem .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    margin: 0;
}

.hgn-gateway:hover {
    border-color: var(--tblr-primary);
}

.hgn-gateway input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.hgn-gateway:has(input:checked) {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
    box-shadow: 0 0 0 1px var(--tblr-primary) inset;
}

.hgn-gateway-label {
    font-size: .8125rem;
    font-weight: 500;
}

.hgn-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem 1.25rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--tblr-secondary);
}

.hgn-trust-item {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.hgn-trust-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.hgn-locked-note {
    display: flex;
    align-items: center;
    gap: .625rem;
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .75rem .875rem;
    font-size: .8125rem;
    color: var(--tblr-secondary);
}

.hgn-locked-note svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .hgn-summary {
        position: static;
    }
}

/* ---------------------------------------------------------------------
 * Domain configuration card - line-item style summary shown after a
 * successful domain search (name/period/price + privacy add-on toggle).
 * ------------------------------------------------------------------- */
.hgn-domain-card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.hgn-domain-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.hgn-domain-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tblr-border-radius, .5rem);
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .06));
    color: var(--tblr-secondary);
    flex-shrink: 0;
}

.hgn-domain-card-info {
    flex: 1 1 auto;
    min-width: 0;
}

.hgn-domain-card-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hgn-domain-card-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: var(--tblr-secondary);
    border-radius: var(--tblr-border-radius, .5rem);
    flex-shrink: 0;
}

.hgn-domain-card-remove:hover {
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .06));
    color: var(--tblr-danger);
}

.hgn-domain-card-period {
    border-top: 1px dashed var(--tblr-border-color);
    margin-top: .875rem;
    padding-top: .875rem;
}

/* No head section above it (e.g. the hosting order-form's domain price card) - drop the separator. */
.hgn-domain-card-period:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.hgn-domain-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .75rem .875rem;
}

.hgn-domain-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tblr-border-radius, .5rem);
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    flex-shrink: 0;
}

.hgn-domain-privacy-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--tblr-secondary);
    border-top: 1px dashed var(--tblr-border-color);
    padding-top: .875rem;
}

.hgn-domain-privacy-info {
    color: var(--tblr-secondary);
    cursor: help;
}

/* ---------------------------------------------------------------------
 * "Protect your brand" TLD cross-sell carousel, shown after a domain
 * search alongside the selected-domain summary card.
 * ------------------------------------------------------------------- */
.hgn-tld-carousel {
    border-top: 1px dashed var(--tblr-border-color);
    padding-top: .875rem;
}

.hgn-tld-carousel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .875rem;
}

.hgn-tld-carousel-nav {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.hgn-tld-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color);
}

.hgn-tld-carousel-arrow:hover {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
}

.hgn-tld-carousel-track {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: .25rem;
}

.hgn-tld-carousel-track::-webkit-scrollbar {
    display: none;
}

.hgn-tld-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 150px;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .875rem;
}

.hgn-tld-card-name {
    font-weight: 600;
    color: var(--tblr-primary);
    margin-bottom: .5rem;
}

.hgn-tld-card-price {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
    font-size: .8125rem;
}

.hgn-tld-card-price-now {
    font-weight: 700;
    font-size: 1rem;
    color: var(--tblr-body-color);
}

/* ---------------------------------------------------------------------
 * Domain search heading + icon-in-input styling.
 * ------------------------------------------------------------------- */
.hgn-domain-search-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.hgn-domain-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tblr-border-radius, .5rem);
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    flex-shrink: 0;
}

.hgn-domain-search-input {
    position: relative;
}

.hgn-domain-search-input-icon {
    position: absolute;
    top: 50%;
    left: .875rem;
    transform: translateY(-50%);
    color: var(--tblr-secondary);
    pointer-events: none;
}

.hgn-domain-search-input .form-control {
    padding-left: 2.5rem;
    border-radius: var(--tblr-border-radius-lg, .75rem);
}

/* ---------------------------------------------------------------------
 * "Domain not available" inline alert with alternate-TLD suggestions.
 * ------------------------------------------------------------------- */
.hgn-domain-alert {
    display: flex;
    gap: .75rem;
    border: 1px solid var(--tblr-warning);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: 1rem 1.25rem;
}

.hgn-domain-alert-icon {
    flex-shrink: 0;
    line-height: 0;
}

.hgn-domain-alt-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Hosting location picker - clickable server/location cards, styled to
 * match the existing payment-method (.hgn-gateway) card pattern above.
 * ------------------------------------------------------------------- */
.hgn-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .625rem;
}

.hgn-location {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .75rem .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    margin: 0;
}

.hgn-location:hover {
    border-color: var(--tblr-primary);
}

.hgn-location input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.hgn-location:has(input:checked) {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
    box-shadow: 0 0 0 1px var(--tblr-primary) inset;
}

.hgn-location-label {
    font-size: .8125rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
 * Plan switcher - "Change plan" toggle and the expandable package list
 * it reveals on the configure step.
 * ------------------------------------------------------------------- */
.hgn-change-plan .hgn-chevron {
    transition: transform .15s ease;
}

.hgn-change-plan[aria-expanded="true"] .hgn-chevron {
    transform: rotate(180deg);
}

.hgn-package-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.hgn-package-card,
.hgn-package-card:hover,
.hgn-package-card:focus {
    display: block;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .5rem);
    padding: .75rem 1rem;
    color: var(--tblr-body-color);
    text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}

.hgn-package-card:hover {
    border-color: var(--tblr-primary);
}

.hgn-package-card.is-active {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

.hgn-package-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.hgn-package-card-name {
    font-weight: 500;
}

.hgn-package-card-price {
    font-weight: 600;
    white-space: nowrap;
}

.hgn-package-card-locations {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}

.hgn-package-card-spec {
    font-size: .8125rem;
    color: var(--tblr-secondary);
    margin: .5rem 0 0;
}

.hgn-package-card-select {
    display: inline-block;
    margin-top: .625rem;
    padding: .25rem .625rem;
    border-radius: var(--tblr-border-radius, .5rem);
    font-size: .8125rem;
    font-weight: 500;
    border: 1px solid var(--tblr-primary);
    color: var(--tblr-primary);
}

.hgn-package-card-select.is-active {
    background: var(--tblr-primary);
    color: var(--tblr-inverse-primary, #fff);
}