/**
 * SwiftCartHB — Frontend Shortcode Styles
 *
 * Covers two shortcodes:
 *   [swiftcarthb_spec_tables]  — Feature Specification Table grids
 *   [swiftcarthb_all_features] — Horizontal feature label/value rows
 *
 * INHERITANCE DESIGN:
 *   All typography (font-family, color, font-size, line-height) uses
 *   `inherit` so Elementor's Active Site Settings flow through
 *   automatically. Only structural layout, borders, and spacing are
 *   declared here.
 *
 *   Override any --schb-* custom property inside Elementor →
 *   Advanced → Custom CSS on the widget, section, or page level.
 *
 * @package SwiftCartHB
 * @since   1.0.0
 */

/* ── CSS custom properties ─────────────────────────────────────────────────
   These control borders, backgrounds, and spacing only.
   No typography or text color values live here.
   ──────────────────────────────────────────────────────────────────────── */
:root {
    --schb-table-header-bg:     #f5f3ff;   /* Thead row fill              */
    --schb-table-header-color:  #3730a3;   /* Thead text accent           */
    --schb-table-border-color:  #e2e8f0;   /* Cell border lines           */
    --schb-table-cell-bg:       #ffffff;   /* Tbody cell background       */
    --schb-table-row-alt-bg:    #fafafa;   /* Alternating row background  */
    --schb-table-cell-padding:  10px 14px; /* Cell padding                */
    --schb-table-radius:        8px;       /* Table wrapper border radius */

    --schb-feature-row-border:  #e2e8f0;   /* Separator between feature rows */
    --schb-feature-label-weight:600;       /* Label font weight              */
    --schb-feature-gap:         1rem;      /* Gap between label and value    */
    --schb-feature-padding:     0.65rem 0; /* Vertical padding per row       */
    --schb-feature-label-width: 40%;       /* Label column width             */
}

/* ==========================================================================
   SPEC TABLE — [swiftcarthb_spec_tables]
   ========================================================================== */

/* Section wrapper */
.swiftcarthb-spec-table-section {
    margin-bottom: 2rem;
}

/* Optional h3 title — inherits font-family, color, size from Elementor */
.swiftcarthb-spec-table-title {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    margin: 0 0 0.75rem;
    padding: 0;
}

/* Horizontal scroll wrapper (mobile) */
.swiftcarthb-spec-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var( --schb-table-border-color );
    border-radius: var( --schb-table-radius );
}

/* Table base — typography fully inherited */
.swiftcarthb-frontend-grid-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* Header row */
.swiftcarthb-frontend-grid-table thead tr {
    background-color: var( --schb-table-header-bg );
}

/* Header cells — only structural and accent color */
.swiftcarthb-frontend-grid-table thead th.swiftcarthb-spec-th {
    padding: var( --schb-table-cell-padding );
    text-align: left;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    color: var( --schb-table-header-color );
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var( --schb-table-border-color );
    border-right: 1px solid var( --schb-table-border-color );
    white-space: nowrap;
    vertical-align: middle;
}

.swiftcarthb-frontend-grid-table thead th.swiftcarthb-spec-th:last-child {
    border-right: none;
}

/* Body rows */
.swiftcarthb-frontend-grid-table tbody tr.swiftcarthb-spec-tr {
    border-bottom: 1px solid var( --schb-table-border-color );
    transition: background-color 0.12s ease;
}

.swiftcarthb-frontend-grid-table tbody tr.swiftcarthb-spec-tr:last-child {
    border-bottom: none;
}

/* Alternating row background */
.swiftcarthb-frontend-grid-table tbody tr.swiftcarthb-spec-tr:nth-child(even) td {
    background-color: var( --schb-table-row-alt-bg );
}

/* Body cells — color and font fully inherited */
.swiftcarthb-frontend-grid-table tbody td.swiftcarthb-spec-td {
    padding: var( --schb-table-cell-padding );
    background-color: var( --schb-table-cell-bg );
    border-right: 1px solid var( --schb-table-border-color );
    vertical-align: top;
    word-break: break-word;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1.5;
}

.swiftcarthb-frontend-grid-table tbody td.swiftcarthb-spec-td:last-child {
    border-right: none;
}

/* Responsive */
@media ( max-width: 640px ) {
    .swiftcarthb-frontend-grid-table thead th.swiftcarthb-spec-th,
    .swiftcarthb-frontend-grid-table tbody td.swiftcarthb-spec-td {
        padding: 0.5rem 0.65rem;
    }
}

/* ==========================================================================
   FEATURES GRID — [swiftcarthb_all_features]
   ========================================================================== */

/* Outer wrapper — zero styling, fully transparent */
.swiftcarthb-features-wrapper {
    width: 100%;
    display: block;
}

/* Each label/value row — horizontal flexbox, no colors */
.swiftcarthb-feature-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var( --schb-feature-gap );
    padding: var( --schb-feature-padding );
    border-bottom: 1px solid var( --schb-feature-row-border );

    /* All typography inherited from Elementor site settings */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* Remove trailing divider on last row */
.swiftcarthb-feature-row:last-child {
    border-bottom: none;
}

/* Label — left column, bold weight only */
.swiftcarthb-feature-row .feature-label {
    flex: 0 0 var( --schb-feature-label-width );
    max-width: var( --schb-feature-label-width );
    font-weight: var( --schb-feature-label-weight );
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    word-break: break-word;
}

/* Value — right column, fills remaining space */
.swiftcarthb-feature-row .feature-value {
    flex: 1 1 auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    word-break: break-word;
    text-align: left;
}

/* Responsive — stack on small screens */
@media ( max-width: 480px ) {
    .swiftcarthb-feature-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .swiftcarthb-feature-row .feature-label,
    .swiftcarthb-feature-row .feature-value {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}