:root {
    --darkred: #C61F2C;
    --red: #D71921;
    --pink: #FFC9C9;
    --lightpink: #FFEBEB;
    --darkgrey: #3B4141;
    --grey: #999999;
    --lightgrey: #DDDDDD;
    --lightgrey-2: #F3F4F5;
    --white: #FFFFFF;
}

/* ============================================================
   Widget Tabs (Custom.Umbraco.WidgetTabs) — NBTC brand accent.
   The package's accent defaults to --bs-primary (#0d6efd, blue);
   re-point its theming tokens at the brand red. Scoped to
   `html .widget-tabs` (specificity 0,1,1) so it beats both the
   package's `:root` and `.widget-tabs` token defaults, which are
   injected into the <body> after this file loads in <head>.
   ============================================================ */
html .widget-tabs {
    --wt-color-accent: var(--darkred, #C61F2C);
    --wt-color-bg-hover: var(--lightpink, #FFEBEB);
    --wt-color-border: var(--lightgrey, #DDDDDD);
}

/* ============================================================
   Widget Tabs — "segmented" transformation (Layout.segmented.cshtml)
   One grey capsule split into segments; active segment fills brand
   red with white text (per design). Package ships no .wt-segmented
   rules, so all styling is here.
   ============================================================ */
.wt-shell.wt-segmented {
    display: flex;
    flex-direction: column;
}

/* Header: title (left) + segmented tablist (right end), 6/6 split on lg+ */
.wt-segmented .wt-segmented-title {
    color: var(--darkgrey, #3B4141);
}

/* Grey capsule wrapping both segments */
.wt-segmented .wt-tablist {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    background: var(--lightgrey-2, #F3F4F5);
    border-radius: 9999px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
}

/* Each segment */
.wt-segmented .wt-tablist .wt-tab {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0.175rem 2rem;
    border: 0;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--darkgrey, #3B4141);
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Join the segments into one capsule: only the outer corners are rounded.
   First segment = square right corners; last segment = square left corners;
   any middle segment (3+ tabs) = square both sides. */
.wt-segmented .wt-tablist .wt-tab:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.wt-segmented .wt-tablist .wt-tab:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wt-segmented .wt-tablist .wt-tab:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wt-segmented .wt-tablist .wt-tab:hover:not(.wt-tab-active):not(.wt-tab-disabled) {
    color: var(--darkred, #C61F2C);
}

/* Active segment — solid brand red, white text.
   !important + higher specificity beats the package rule
   .wt-tab-active { color: var(--wt-color-accent) !important; } */
.wt-segmented .wt-tablist .wt-tab.wt-tab-active {
    background: var(--darkred, #C61F2C);
    color: #fff !important;
}

/* Mobile: long Thai labels + 2.5rem padding + nowrap make the capsule wider
   than the screen, so it scrolled and clipped the first tab. Instead, let the
   capsule fill the column, split into equal segments, and wrap each label so
   everything fits with no overflow and every tab stays fully visible. */
@media (max-width: 575.98px) {
    .wt-segmented .wt-tablist {
        width: 100%;
        max-width: 100%;
    }

    .wt-segmented .wt-tablist .wt-tab {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        padding: 0.4rem 0.75rem;
        line-height: 1.15;
    }

    /* override the fs-7 utility (declared !important) so the label shrinks to fit */
    .wt-segmented .wt-tablist .wt-tab .wt-tab-label {
        font-size: 0.8rem !important;
    }
}

.wt-segmented > .wt-panes {
    padding-top: 1rem;
}

/* Mobile: the "ดูทั้งหมด" (View All) button is rendered above the tab row in the
   header (.wt-segmented-vm-mobile in Layout.segmented.cshtml). Hide the in-pane copy
   so it isn't shown twice. Desktop keeps the in-pane button (the header copy is
   d-lg-none), so the desktop layout is unchanged. */
@media (max-width: 991.98px) {
    .wt-segmented .wt-pane .wt-view-more { display: none; }
    .wt-segmented-vm-mobile { margin-top: 0px !important; }
    .wt-segmented-vm-mobile .wt-view-more { justify-content: flex-start; }
}

/* ── news_doctype.TabCard grid: 3 columns instead of 4 ──────────────────────
   The WidgetRepeater grid is auto-fill (minmax(--wr-min-col, 260px)), so the
   column count follows the container width (~4 on a wide row). Pin the grids
   that contain TabCards to a fixed 3-up layout (2-up tablet, 1-up phone).
   Matched via :has(.tabcard) so it's independent of the transformation-name
   casing, and excludes custom (12-col span) grids so their spans still work.
   This rule is unlayered, so it beats the package's @layer widgetRepeater. */
.widget-repeater__grid:not(.widget-repeater__grid--custom):has(.tabcard) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991.98px) {
    .widget-repeater__grid:not(.widget-repeater__grid--custom):has(.tabcard) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .widget-repeater__grid:not(.widget-repeater__grid--custom):has(.tabcard) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Widget - Screen Capture (widgetScreenCapture.cshtml) ───────────────────
   Pill button that looks like a screen-capture control but simply downloads
   the image picked in the backoffice. Dusty-maroon fill per design mock. */
.widget-screen-capture {
    position: relative;
    /* Establish a stacking context so the ::before overlay's z-index:-1 sits
       above THIS element's own gradient (not behind the whole button). */
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 1.25rem;
    background-image: linear-gradient(178deg, #a8646a 39%, #64040c 127%);
    border: 1px solid #ddd;
    border-radius: 24px;
    color: var(--white, #FFFFFF);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* CSS can't transition between two background-image gradients directly, so the
   hover gradient lives on a stacked ::before and fades in via opacity instead. */
.widget-screen-capture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(178deg, #c61f2c 39%, #64040c 127%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.widget-screen-capture:hover,
.widget-screen-capture:focus {
    color: var(--white, #FFFFFF);
}

.widget-screen-capture:hover::before,
.widget-screen-capture:focus::before {
    opacity: 1;
}