@font-face {
    font-family: "Tesco";
    src: url("../css/TESCOModern-Regular-web.woff") format('woff');
}

@font-face {
    font-family: "Tesco-icons";
    src: url("../css/Tesco-icons.woff") format('woff');
}

/* Apply Tesco font to all text content without overriding icon fonts */
body {
    font-family: Tesco, Avenir, Roboto, Calibri, sans-serif;
}

html, body {
    overflow-x: hidden;
}

/* ── CSS VARIABLES ── */
#container_12 {
    --color-background-1: #E4F3FF;
    --color-background-2: #003ADC;
    --color-text-1: #1C1C1C;
    --color-text-2: #FFFFFF;
    --corner-radius-button: 1.875rem;
    --corner-radius-input: 0.375rem;
    --corner-radius-card: 0.75rem;
    --panelist-home-color-background: #003ADC;
    --panelist-home-color-text: #FFFFFF;
    --panelist-home-color-background-gradient-stop: #003ADC;
    --custom-home-color-primary: #003ADC;
    --custom-home-color-button-selected: #003ADC;
}

/* ── LOGIN PAGE HEADER ── */
.logo-container {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Cancel the framework's auto-margins on the logo image */
#loginPageLayoutContainer .hdrlogo {
    margin-left: 0;
    margin-right: 0;
}

/* Divider + text group to the right of the logo */
.header-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #cccccc;
}

.header-panel-title {
    font-size: 18px;
    font-weight: 500;
    color: #003ADC;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
}

/* Move logo-container to full-width header row in the grid */
.logo-container.hp-full-header {
    grid-column: 1 / -1;
    grid-row: 1;
    box-sizing: border-box;
    justify-content: center;
}

/* Break the header out of the centred 1200px grid to span full viewport width */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .logo-container.hp-full-header {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    box-sizing: border-box;
}

#loginPageLayoutContainer:has(.logo-container.hp-full-header) {
    grid-template-areas:
        "header header header"
        "first-box login _"
        "image login _"
        "contact login _" !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-columns: 1fr 1fr !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* ── WELCOME TEXT ── */
.welcome-text {
    font-family: Tesco, Avenir, Roboto, Calibri, sans-serif;
    color: #003ADC;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: left;
}

.sub-text {
    text-align: left;
    color: #1C1C1C;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Remove background image from container so it doesn't show outside the capped layout width, and set light blue background to match other pages */
#container_12:has(#loginPageElement) {
    background-image: none;
    background-color: #f3f9ff;
}

/* The framework overrides --color-background-1 to #fff on the login page layout container, */
/* so we need to target it directly to get the correct light blue background. */
#container_12:has(#loginPageElement) #loginPageLayoutContainer {
    background-color: #f3f9ff;
}

/* ── WELCOME TEXT BLOCK – vertical centring to match login card height ── */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-first-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    padding: 48px 10% 48px 12% !important;
}

#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-first-block .welcome-text {
    text-align: left !important;
    margin-bottom: 16px !important;
}

#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-first-block .sub-text {
    text-align: left !important;
    margin: 0 !important;
}

/* ── LOGIN CARD ── */
/* Beat main.min.css's blue gradient on the login+appform wrapper */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container .login-and-appform-layout-container {
    background: #FFFFFF !important;
}

#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container {
    background: transparent !important;
}

.loginBox {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 40px;
    color: #1C1C1C;
}

.loginBox h2 {
    color: #1C1C1C;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    font-family: Tesco, Avenir, Roboto, Calibri, sans-serif;
}

/* ── INPUT FIELDS ── */
.loginBox input[type="text"],
.loginBox input[type="password"] {
    border-radius: 6px;
    border: 1.5px solid #CCCCCC;
    background-color: #FFFFFF;
    color: #1C1C1C;
}

/* ── LANGUAGE SELECTOR ── */
.change-language-control {
    border-radius: 6px;
    border: 1.5px solid #CCCCCC;
}

/* ── SIGN IN BUTTON ── */
/* High-specificity base rule to beat main.min.css's button:not(:disabled) override */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button[type="submit"]:not(:disabled) {
    background-color: #003ADC !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    width: 100% !important;
    padding: 12px !important;
}

/* High-specificity hover/focus/active override to beat main.min.css */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button[type="submit"]:hover,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button[type="submit"]:focus,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button[type="submit"]:active,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button[type="submit"]:focus-visible {
    background-color: #002AAD !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* ── FORGOTTEN PASSWORD ── */
/* High-specificity base rule to beat main.min.css's btn-secondary:not(:disabled) override */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):not(:disabled) {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #003ADC !important;
    text-decoration: underline !important;
    font-weight: 400 !important;
    padding: 4px 0 !important;
}

/* Disabled state – greyed out plain text, not a button */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):disabled {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #AAAAAA !important;
    text-decoration: underline !important;
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* High-specificity hover/focus/active override to beat main.min.css */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):hover,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):focus,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):active,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-form button.btn-secondary:not(.back-to-login):focus-visible {
    background: transparent !important;
    color: #003ADC !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── APPFORM PANEL ── */
.appform-button-container {
    background-color: #003ADC !important;
    border-radius: 0 12px 12px 0 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

.appform-button-container .applyQuestion {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* High-specificity base rule to beat main.min.css's a.apply:not(:focus):not(:hover) override */
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container .login-and-appform-layout-container .appform-button-container a.apply {
    background-color: #FFFFFF !important;
    color: #003ADC !important;
    border: 2px solid #FFFFFF !important;
    outline: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    text-decoration: none !important;
    text-align: center !important;
}

#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container .login-and-appform-layout-container .appform-button-container a.apply:hover,
#container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container .login-and-appform-layout-container .appform-button-container a.apply:focus {
    background-color: rgba(255, 255, 255, 0.88) !important;
    color: #003ADC !important;
}

/* ── MODAL ── */
.modal-backdrop {
    background-color: #003ADC;
    opacity: 0.4 !important;
}

/* Rounder corners and shadow to match mock */
#dialog-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 37, 148, 0.18);
}

#dialog-modal .modal-dialog {
    width: calc(100vw - 5rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#dialog-modal .modal-header {
    background-color: #003ADC;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 20px 24px;
}

#dialog-modal .modal-title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.1rem;
}

/* White ✕ close button */
#dialog-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

#dialog-modal .modal-body {
    padding: 24px;
    color: #1C1C1C;
}

#dialog-modal .modal-body h1,
#dialog-modal .modal-body h2,
#dialog-modal .modal-body h3 {
    color: #003ADC;
}

#dialog-modal .modal-body h2:not(:first-child),
#dialog-modal .modal-body h3:not(:first-child) {
    margin-top: 2rem;
}

#dialog-modal .modal-body a,
#appformPageElement a {
    color: #000;
    font-weight: bold;
}

#dialog-modal .modal-footer {
    border-top: 1px solid #E8E8E8;
    padding: 16px 24px;
    justify-content: flex-end;
    background: transparent;
    border-radius: 0 0 20px 20px;
}

/* Close button – blue pill to match mock */
#dialog-modal .modal-footer .btn {
    background-color: #003ADC;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    padding: 10px 28px;
    font-size: 0.95rem;
}

#dialog-modal .modal-footer .btn:hover,
#dialog-modal .modal-footer .btn:focus {
    background-color: #002AAD;
    color: #FFFFFF;
}

/* ── FOOTER ── */
#footerwrapper {
    background-color: #003ADC;
}

/* Footer: single flex row, links centred, powered-by pinned right */
#footerwrapper .footerNavigation {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    position: relative;
}

/* "Powered by" text — direct child of footerNavigation */
#footerwrapper .footerNavigation > span {
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 400;
    display: inline !important;
    white-space: nowrap;
}

/* Compusense logo — direct child of footerNavigation */
#footerwrapper .footerNavigation > img {
    height: 20px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

/* Links row */
#footerwrapper #footerlinks {
    display: flex;
    align-items: center;
    gap: 24px;
}

#footerwrapper #footerlinks a {
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

#footerwrapper #footerlinks a:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

/* Powered by — pinned to the right on wide screens */
#footerwrapper #copyright {
    position: absolute;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFFFFF;
    font-size: 0.8rem;
    white-space: nowrap;
}

#footerwrapper #copyright img {
    height: 18px;
    width: auto;
    vertical-align: middle;
}

/* Stack footer when links + powered-by would overlap */
@media screen and (max-width: 1024px) {
    #footerwrapper .footerNavigation {
        flex-direction: column;
        gap: 8px;
    }

    #footerwrapper #copyright {
        position: static;
        justify-content: center;
        width: 100%;
    }

    #footerwrapper #footerlinks {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── HOME PAGE NAV BAR ── */
#panelist_home_header_wrapper,
#panelist_home_header_wrapper .main-header-content {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0 !important;
}

/* Nav menu group: desktop only – remove dark pill background and outline */
#panelist_home_header_wrapper .bigger-screen .btn-group.header-menu {
    background-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* Nav menu group: mobile dropdown – white background so it isn't see-through */
#panelist_home_header_wrapper .smaller-screen .btn-group.header-menu {
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    outline: none !important;
}

/* All nav links – base style, excluding sign out */
#panelist_home_header_wrapper .header-menu .btn:not(.signOutBut) {
    background-color: transparent !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #003ADC !important;
}

/* Active nav link: light blue pill */
#panelist_home_header_wrapper .header-menu .btn.navon,
#panelist_home_header_wrapper .header-menu .special-dropdown-toggle.navon {
    background-color: #E8F0FB !important;
    color: #003ADC !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
}

/* Inactive nav link hover */
#panelist_home_header_wrapper .header-menu .btn:not(.navon):not(.signOutBut):hover {
    background-color: #F0F0F0 !important;
    color: #002AAD !important;
    border-radius: 30px !important;
}

/* Welcome text */
#panelist_home_header_wrapper .panelist-welcome-text-right p,
#panelist_home_header_wrapper .panelist-welcome-text-left span {
    color: #1C1C1C !important;
}

/* Sign Out button: blue outline */
#panelist_home_header_wrapper .signOutBut {
    background-color: transparent !important;
    color: #003ADC !important;
    border: 2px solid #003ADC !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}

#panelist_home_header_wrapper .signOutBut:hover {
    background-color: #003ADC !important;
    color: #FFFFFF !important;
}

/* Greeting heading above slideshow */
#homePageElement .hp-greeting {
    color: #003ADC;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    font-family: Tesco, Avenir, Roboto, Calibri, sans-serif;
}

/* ── HOME PAGE BODY ── */
#bodywrapper.panelist-home-area {
    background-color: #f3f9ff !important;
    background-image: none !important;
    color: #1C1C1C !important;
}

/* Page headings: Tesco blue */
#bodywrapper h1,
#bodywrapper h2,
#bodywrapper h3,
#bodywrapper h4 {
    color: #003ADC;
}

/* ── SLIDESHOW ── */
/* Outer slide: rounded corners + clip – this is the only element that needs radius */
#homePageElement .slideshow .slide {
    border-radius: 16px;
    overflow: hidden;
}

/* Left text panel: round left corners only, flat on the right where it meets the image */
#homePageElement .slideshow .card.slide-text {
    border-radius: 16px 0 0 16px !important;
    border: none;
    overflow: hidden;
    padding: 24px;
}

/* Centre the body text vertically between the category header and Read more button */
#homePageElement .slideshow .card.slide-text .description.highlights {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right image panel: flat on the left where it meets the card, round right corners only */
#homePageElement .slideshow .slide-image {
    border-radius: 0 16px 16px 0 !important;
    overflow: hidden;
}

#homePageElement .slideshow .read-more,
#homePageElement .slideshow a.btn,
#homePageElement .slideshow button:not(.slideshow-button) {
    background-color: #FFFFFF !important;
    color: #003ADC !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
}

/* Slide navigation dots – inactive only */
#homePageElement .slideshow-buttons .slideshow-button:not(.slideshow-forward):not(.slideshow-backward):not(.slideshow-pause-play):not(.selected) {
    border: 2px solid #003ADC;
    background: transparent;
    border-radius: 50%;
}

/* Slide navigation dot – active */
#homePageElement .slideshow-buttons .slideshow-button.selected {
    background-color: #003ADC !important;
    border: 2px solid #003ADC;
    border-radius: 50%;
}

/* ── HOME PAGE INFO CARDS ── */
#homePageElement .home-page-boxes .card {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px solid #E8E8E8;
    box-shadow: none;
    overflow: hidden !important;
}

/* ── HOME PAGE INFO CARDS – LAYOUT ── */
/* Force all 4 cards into a single row (beats Bootstrap's .col flex-grow overflow) */
#homePageElement .home-page-boxes > .col {
    flex: 0 0 calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    min-width: 0;
}

#homePageElement .home-page-boxes .card h2 {
    color: #1C1C1C;
    font-size: 1.05rem;
    font-weight: 700;
}

#homePageElement .home-page-boxes .card .description {
    color: #5a5a5a;
    font-size: 0.875rem;
}

#homePageElement .home-page-boxes .card a {
    color: #003ADC;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ── CARD HEADER BARS ── */
/* Hide teal accent bar on all pages – full selector needed to beat framework specificity */
#testListPageElement .test-list-of-cards .card .card-header,
#messagesPageElement .message-card .message-card-header,
#rewardsPageElement .rewards-card .rewards-card-header,
#pointHistoryPage .point-history-card .point-history-card-header {
    display: none !important;
}

/* ── TEST LIST PAGE ── */
/* Container: transparent – bubble is on the paragraph only, not the heading */
#testListPageElement .testListHeader-container {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
}

/* Intro paragraph bubble – soft sky blue, rounded to match card radius */
#testListPageElement .testListHeader-container .testListHeader-description {
    background-color: #E4F3FF;
    border-radius: 32px;
    padding: 16px 20px;
    margin-top: 12px;
}

/* Test card: white background, tighter padding to match mock */
#testListPageElement .test-list-of-cards .card {
    background-color: #FFFFFF;
}

#testListPageElement .test-list-of-cards .card .card-body {
    padding: 10px 16px;
}

/* Test icon: smaller chip to match mock proportions */
#testListPageElement .test-list-of-cards .card .test-name-wrapper .test-icon {
    color: #003ADC;
    background-color: #E4F3FF;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width: 52px;
    height: 52px;
    font-size: 36px;
}

/* Start / Resume button: green outline → solid blue pill */
#testListPageElement .test-list-of-cards .card .goToTest {
    background-color: #003ADC;
    border-color: #003ADC;
    color: #FFFFFF;
    border-radius: 30px;
}

#testListPageElement .test-list-of-cards .card .goToTest:hover,
#testListPageElement .test-list-of-cards .card .goToTest:focus {
    background-color: #002AAD;
    border-color: #002AAD;
    color: #FFFFFF;
}

/* ── MESSAGES PAGE ── */
/* Card: white with border */
#messagesPageElement .message-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
}

#messagesPageElement .messageLinkWrapper .msgsummary.row {
    align-items: center;
}

#messagesPageElement .message-card .message-card-body-wrapper {
    margin: 0;
}

#messagesPageElement .message-card .message-card-body-wrapper .messageLinkWrapper:nth-child(odd) {
    background-color: #FFFFFF;
}

#messagesPageElement .message-card .message-card-body-wrapper .messageLinkWrapper:nth-child(even) {
    background-color: #E4F3FF;
}

/* Row dividers */
#messagesPageElement .messageLinkWrapper {
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 16px;
}

#messagesPageElement .messageLinkWrapper:last-child {
    border-bottom: none;
}

/* ── REWARDS PAGE ── */
/* Intro paragraph bubble – matches test list style */
#rewardsPageElement > p:first-of-type {
    background-color: #E4F3FF;
    border-radius: 32px;
    padding: 16px 20px;
    margin-top: 12px;
}

#rewardsPageElement .rewards-card .rewards-card-body {
    margin: 0;
}

/* Card: white with border */
#rewardsPageElement .rewards-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
}

/* Redeem button: Tesco blue */
#rewardsPageElement .rewards-card-body .action-button-primary {
    background-color: #003ADC;
    border-color: #003ADC;
    border-radius: 30px;
}

/* Gift card body row: white – match full framework selector chain */
#rewardsPageElement .rewards-card .rewards-card-body-wrapper .rewards-card-body .row:not(.header-row) {
    background-color: #FFFFFF;
}

/* Remove inner card-body shadow, radius and margin */
#rewardsPageElement .rewards-card .rewards-card-body {
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}

/* Remove body wrapper padding so gift card area fills edge-to-edge */
#rewardsPageElement .rewards-card .rewards-card-body-wrapper {
    padding: 0 12px 12px 0;
}

/* ── POINTS BALANCE PAGE ── */
/* Intro paragraph bubble – matches test list style */
#pointHistoryPage > p:first-of-type {
    background-color: #E4F3FF;
    border-radius: 32px;
    padding: 16px 20px;
    margin-top: 12px;
}

/* Card: white with border */
#pointHistoryPage .point-history-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
}

/* Remove body wrapper radius and margin */
#pointHistoryPage .point-history-card .point-history-card-body-wrapper {
    margin: 0;
    border-radius: 0;
}

/* Table header row: Tesco blue + white text */
#pointHistoryPage .point-history-card-body .row.header-row {
    background-color: #003ADC !important;
    color: #FFFFFF !important;
}

#pointHistoryPage .point-history-card-body .row.header-row > div {
    color: #FFFFFF !important;
}

/* Data rows: white with dividers – exclude header-row (also has .padding class) */
#pointHistoryPage .point-history-card-body .row.padding:not(.header-row) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0;
}

#pointHistoryPage .point-history-card-body .row.padding:not(.header-row):last-child {
    border-bottom: none;
}

/* ── SCHEDULE PAGE ── */
/* Hide teal accent bar */
#schedules_page_element .schedule-center-card .schedule-center-card-header {
    display: none;
}

/* Card: transparent so button area shows page bg, keep border and radius */
#schedules_page_element .schedule-center-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* White background on table body only */
#schedules_page_element .schedule-center-card .schedule-center-card-body {
    background-color: #FFFFFF;
    margin: 0;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    overflow: hidden;
}

/* Remove body wrapper padding/margin/radius so table fills edge-to-edge */
#schedules_page_element .schedule-center-card .schedule-center-card-body-wrapper {
    background-color: #f3f9ff;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

/* Table header row: Tesco blue + white text */
#schedules_page_element .schedule-center-card-body .row.header-row {
    background-color: #003ADC;
    color: #FFFFFF;
}

#schedules_page_element .schedule-center-card-body .row.header-row > div {
    color: #FFFFFF;
}

/* Data rows: white with dividers – exclude header-row (also has .padding class) */
#schedules_page_element .schedule-center-card-body .row.padding:not(.header-row) {
    background-color: #FFFFFF;
    border-top: none;
    border-bottom: 1px solid #E0E0E0;
}

#schedules_page_element .schedule-center-card-body .row.padding:not(.header-row):last-child {
    border-bottom: none;
}

/* Button area: page background colour, spacing and divider from table */
#schedules_page_element .schedule-center-card .float-end {
    background-color: transparent;
    padding: 12px 16px;
}

/* Decline button: blue outline pill */
#schedules_page_element .schedule-center-card .btn.action-button:not(.action-button-primary) {
    background-color: transparent;
    border: 1.5px solid #003ADC;
    color: #003ADC;
    border-radius: 30px;
}

/* Reschedule button: solid blue pill */
#schedules_page_element .schedule-center-card .btn.action-button-primary {
    background-color: #003ADC;
    border-color: #003ADC;
    color: #FFFFFF;
    border-radius: 30px;
}

/* ── PAGE CONTENT WRAPPERS ── */
/* Framework applies semi-transparent white overlays that wash out the page
background colour – override to transparent so the bg shows through */
#testListPageElement .test-list-of-cards {
    background-color: transparent;
}

/* ── PROFILE PAGE ── */
/* Profile intro message: match Tesco brand blue */
.profile-message {
    background-color: #E4F3FF;
    border-radius: var(--corner-radius-card);
    padding: 1rem;
}

/* ── ACCOUNT PAGE ── */
/* Hide teal header bar */
#profilePageElement .card-wrapper .card .card-header,
#security_challenge .card-wrapper .card .card-header,
#modify_password_page .card-wrapper .card .card-header,
#force_password_reset_page_element .card-wrapper .card .card-header,
#unsubscribe_panelist_page_element .card-wrapper .card .card-header {
    display: none !important;
}

/* Card: white background */
#profilePageElement .card-wrapper .card,
#security_challenge .card-wrapper .card,
#modify_password_page .card-wrapper .card,
#force_password_reset_page_element .card-wrapper .card,
#unsubscribe_panelist_page_element .card-wrapper .card {
    background: #FFFFFF !important;
}

/* Card wrapper: remove semi-transparent overlay */
#profilePageElement .card-wrapper,
#security_challenge .card-wrapper,
#modify_password_page .card-wrapper,
#force_password_reset_page_element .card-wrapper,
#unsubscribe_panelist_page_element .card-wrapper {
    background: transparent !important;
}

/* ── ACTION BUTTONS → brand blue #003ADC ── */
/* Covers: Profile, SecurityChallenge, AppFormLanding, ModifyPassword, Unsubscribe, Apply Now (appform) */

:is(#profilePageElement, #security_challenge, #appFormLandingPageElement, #modify_password_page, #unsubscribe_panelist_page_element) .action-button-primary,
:is(#profilePageElement, #security_challenge, #appFormLandingPageElement, #modify_password_page, #unsubscribe_panelist_page_element) .action-button-primary:disabled,
#bApply {
    background-color: #003ADC;
    border-color: #003ADC;
    color: #ffffff;
    opacity: 1;
}

:is(#profilePageElement, #security_challenge, #appFormLandingPageElement, #modify_password_page, #unsubscribe_panelist_page_element) .action-button:not(.action-button-primary) {
    background-color: transparent;
    border-color: #003ADC;
    color: #003ADC;
}

:is(#profilePageElement, #security_challenge, #appFormLandingPageElement, #modify_password_page, #unsubscribe_panelist_page_element) .action-button-primary:hover:not(:disabled),
#bApply:hover:not(:disabled) {
    background-color: #002db0;
    border-color: #002db0;
}

#bApply:disabled {
  background-color: #bababa;
  border-color: #888;
  color: #555;
  cursor: not-allowed;
}

:is(#profilePageElement, #security_challenge, #appFormLandingPageElement, #modify_password_page, #unsubscribe_panelist_page_element) .action-button:not(.action-button-primary):hover {
background-color: rgba(0, 58, 220, 0.08);
}

/* ── SLIDESHOW VERTICAL LAYOUT (≤767px) ── */
@media screen and (max-width: 767px) {
    /* Hide image panel when slide is stacked vertically */
    #homePageElement .slideshow .slide-image {
        display: none !important;
    }

    /* Restore full-radius on text card now that image panel is gone */
    #homePageElement .slideshow .card.slide-text {
        border-radius: 16px !important;
        width: 100% !important;
    }
}

/* ── INFO CARDS 2×2 GRID (≤600px) ── */
@media screen and (max-width: 600px) {
    #homePageElement .home-page-boxes > .col {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* ── MOBILE (≤576px) ── */
@media screen and (max-width: 576px) {
    #container_12:has(#loginPageElement) #loginPageLayoutContainer .login-box-container {
        padding-top: 16px;
    }

    /* Reorder grid: logo → login card → welcome heading → blurb */
    #container_12:has(#loginPageElement) #loginPageLayoutContainer {
        grid-template-areas:
            "logo"
            "login"
            "first-box"
            "text" !important;
        grid-template-rows: auto auto auto auto !important;
    }

    /* Dissolve login-first-block so children participate in the parent grid */
    #container_12:has(#loginPageElement) #loginPageLayoutContainer .login-first-block {
        display: contents !important;
    }

    #container_12:has(#loginPageElement) #loginPageLayoutContainer .logo-container {
        grid-area: logo !important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #E0E0E0;
        width: auto;
    }

    #container_12:has(#loginPageElement) #loginPageLayoutContainer .welcome-text {
        grid-area: first-box;
        padding: 16px 16px 0;
        /* Scale heading down sensibly on mobile */
        font-size: 2rem !important;
    }

    #container_12:has(#loginPageElement) #loginPageLayoutContainer .sub-text {
        grid-area: text !important;
        padding: 0 16px 16px;
        /* Keep consistent with desktop colour */
        color: #1C1C1C !important;
    }

    /* Appform panel: full-width stacked bottom corners on mobile */
    .appform-button-container {
        border-radius: 0 0 12px 12px !important;
    }
}

/* ── MEDIUM WIDTHS: layout stacks, appform needs flat top corners ── */
@media screen and (min-width: 577px) and (max-width: 68.75rem) {
  .appform-button-container {
    border-radius: 0 0 12px 12px !important;
  }
}