/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: "CharlesWright";
    src: url("../fonts/CharlesWright-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.no-wrap { white-space: nowrap; }
.hidden-country { display: none; }
.showStatus { display: block !important; }

.disable-button {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.3;
    background-color: #8a8a8a;
    border-color: #8a8a8a;
}

.fa-arrow-right { margin-right: 10px; }

.start-claim_btn a { border-radius:5px; background-color:#F9C72C; color:#000000!important; padding:10px 15px!important; }
.start-claim_btn:hover a { background-color:#000000; color:#ffffff; }



/* ==========================================================================
   Homepage - new header, etc
   ========================================================================== */
.home-info h3 { padding: 5px 10px !important; margin-bottom: 20px !important; background-color:#FAC82B; font-weight:normal !important; }
.home-info .fl-icon i:before {color: #000000; }
.home-info .fl-callout-title-text { font-weight:normal !important; }

.home-header-info-slider i { color:green !important; font-size:28px !important; }

.emissions_facts  { background: url(../img/chevrons-left.svg) left center no-repeat; background-size: contain; }


/* Make sure nothing clips it */
.fl-row,
.fl-row-content-wrap,
.fl-row-content,
.fl-col,
.fl-col-content {
    overflow: visible;
}

.header-v2 { overflow:hidden; }
.header-v2 .reviews-link { z-index:5; position: relative; }




/*LEFT COL */

.fl-col.header_left_col{
    position: relative;
    z-index: 10;
}
.fl-col.header_left_col:before{
    content:"";
    position:absolute;
    top:-60px;
    bottom:0;

    left:0;
    transform: translateX(-105%);
    -webkit-transform: translateX(-105%);
    width: 2000px;
    height: 130%;

    background: url("../img/header_left_bkgrd.svg")
    no-repeat right center;
    background-size: cover;

    pointer-events:none;
    z-index: 1;
}


/* RIGHT COL */

.fl-col.header_right_col{
    position: relative;
    overflow: visible;
    z-index: 5;
}

.fl-col.header_right_col:before{
    content:"";
    position:absolute;

    /* allow bleed like you did on left */
    top: 0px;
    bottom: 0px;
    right: 0;

    transform: translate(25%,-11%);
    -webkit-transform: translate(25%,-11%);


    /* extend far right for ultra-wide screens */
    width: 1295px;
    height: 130%;

    background: url("../img/header_mid_bkgrd.svg")
    no-repeat left center;

    background-size: cover;

    pointer-events:none;
    z-index: 1;
}

/* Ensure column content stays above */
.fl-col.header_right_col > *{
    position: relative;
    z-index: 5;
}



@media (max-width: 991px) {

    .emissions_facts  { background: none; }

    .fl-col.header_right_col { background-color:#ffffff;
        display: flex;
        flex-direction: column-reverse;
    }

    .fl-col.header_left_col:before,
    .fl-col.header_right_col:before{ display: none;}



}



@media (max-width: 767px) {

    .emissions_facts  { background: none; }

    .fl-col.header_right_col { background-color:#ffffff; }

    .fl-col.header_left_col:before,
    .fl-col.header_right_col:before{ display: none;}

}


/* ==========================================================================
   News Pages
   ========================================================================== */
.wp-block-image { margin: 30px 0 20px 0; }
.single p a {color: #000000;}

.news-summary p {font-size:20px;}
.fl-module-fl-post-content p {font-size:18px;}



/* ==========================================================================
   Vehicle Details Page (layout + questions + CTAs)
   ========================================================================== */
.vehicle-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 20px;
    padding: 0 20px;
}

.vehicle-details-info { padding-bottom: 10px; }

.vehicleInfoContainer { padding-left: 15px; }
.vehicleImageContainer { padding-right: 15px; }
.marqueImage { max-width: 90px; }

.vehicle-details-questions {
    margin: 0 20px 20px;
    font-size: 16px;
    background-color: #f4f4f4;
    padding: 10px 20px;
}

.timeToComplete {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #dcdbdb;
    border-radius: 20px;
    display: inline-block;
    font-size: 15px;
}

/* CTAs live on vehicle details page */
#button-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 698px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 0 20px;
}

.addVehicleButton { width: 40%; }
.continueButton { width: 60%; }

a.continueButton,
a.addVehicleButton,
a.continueButtonSmall {
    padding: 20px;
    border: 1px solid #00b67a;
    background-color: #00b67a;
    color: #ffffff;
    display: block;
    text-align: center;
    transition: all 0.2s linear;
    width: 48%;
    border-radius: 8px;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    text-decoration: none;
    text-shadow: none;
}

a.addVehicleButton {
    border: 1px solid #8a8a8a;
    background-color: #8a8a8a;
}

a.continueButton span,
a.addVehicleButton span,
a.continueButtonSmall span { color: #ffffff; }

a.addVehicleButton:hover,
a.continueButton:hover,
a.continueButtonSmall:hover {
    background-color: #000000;
    border-color: #000000;
}

#addVehicleBtn-wrapper.disable-button a {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* “check” button variant */
button.check {
    background-color: #00aa6e !important;
    border-color: #00aa6e !important;
}

@media (min-width: 641px) {
    .vehicle-details { padding-bottom: 20px; }
}

@media (max-width: 640px) {
    .vehicle-details {
        font-size: 20px;
        padding: 0 20px 20px;
        text-align: left;
    }

    .vehicleInfoSubheading { font-size: 16px; }
    .vehicleInfoMarque { font-size: 24px; }

    .addVehicleButton { margin-bottom: 10px; }

    a.addVehicleButton,
    a.addVehicleButton:hover {
        border: 1px solid darkgray;
        background-color: transparent;
    }

    a.continueButton,
    a.addVehicleButton { width: 100%; }

    a.addVehicleButton span { color: #3b3b3b; }
    a.addVehicleButton span:hover { color: #000000; }

    #add-btn .fl-node-content { margin: 0; }
    #add-btn a { padding-top: 0; }
    .buttons > div { padding: 0; }

    #button-wrapper {
        flex-direction: column;
        padding-right: 0;
        padding-left: 0;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ==========================================================================
   Headline / page header
   ========================================================================== */
.headline-text p { padding-top: 5px; }

.page-header-slogan {
    max-width: 698px;
    text-align: center;
    padding: 20px;
    justify-self: center;
}

.page-header-slogan h3 { margin: 0; }

.vd-page-header .fl-row-fixed-width {
    max-width: 698px;
    text-align: center;
}

.vd-page-header .fl-row-fixed-width,
.vd-page-header .fl-row-fixed-width * {
    /* leaving as-is (safe), but you can remove if unnecessary */
}

@media (max-width: 640px) {
    .vd-page-header .fl-heading { font-size: 24px; }
}

.delay-animation .pp-headline--style-highlight svg {
    opacity: 0;
}

.heading1.startAnim .pp-headline--style-highlight svg,
.heading2.startAnim .pp-headline--style-highlight svg { opacity: 1; }


/* ==========================================================================
   Reg checker (VRM input + buttons + animation)
   ========================================================================== */
@keyframes reg-tada {
    0% { transform: scaleX(1); }
    10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
    100% { transform: scaleX(1); }
}

/* Apply to the reg box (or an inner wrapper if you prefer) */
.reg-check-container {
    animation: reg-tada 0.8s ease-out both;
    transform-origin: center;
}


.regchecker .regchecker-wrapper { position:relative;  padding-left: 50px; }

.regchecker .regchecker-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
    background: #365EA9 url(../img/ukregplate.svg) no-repeat right center;
    border-radius: 4px 0 0 4px;
    padding-left: 50px;
}


.regchecker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: 100%;
    flex-basis: 100%;
    padding: 20px;
}

/* Plate input */
.regchecker input {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    color: #0a0a0a;
    border: none;
    background-color: #ffcc00;
    background-image: url(../img/enterreg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    text-align: center;
    line-height: 16px;
    font-family: "CharlesWright", sans-serif;
    font-size: 64px;
    font-weight: 800;
    text-transform: uppercase;
    height: 90px;
    border-radius: 0 4px 4px 0 !important;
}

.regchecker input:focus,
.regchecker input:not(:placeholder-shown) {
    background-image: none;
}

.regchecker input:focus { background-color: #f9c72c; }
.regchecker input:not(:placeholder-shown) { background-color: #ffcc00; }

.regchecker input::placeholder { color: #e4e4e4 !important; }





/* White reg check box */

.regchecker.white input {
    background-image: url(../img/enterreg_20pc.svg);
    background-position: center;
    background-color: #ffffff;
    font-size: 50px;
    line-height: 12px;
    padding: 10px;
    height: 90px;
}

.regchecker.white input:focus,
.regchecker.white input:not(:placeholder-shown) {
    background-image: none;
    background-color: #ffffff;
}


/* Action button (icon or text) */
.regchecker button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: #ffffff;
    background-color: #969696;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 200ms linear;
    padding: 0 24px;
    font-size: 22px;
    line-height: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;
    height: 90px;
}


.regchecker.white button {
    padding: 30px;
}


/* Stacked variant */
.regchecker.stacked button {
    background-color: #00b67a;
    width: 100%;
    margin-left: 0;
    padding: 20px;
    margin-top: 10px;
    font-weight: bold;
    height: 60px;
}


.regchecker button:hover { background-color: #000000; }

/* Icon-only states: EDIT / DELETE */
.regchecker button[data-state="edit"],
.regchecker button[data-state="delete"] {
    width: 100px;
    padding: 0;
    font-size: 0;
}

.regchecker button i {
    font-size: 30px;
    pointer-events: none;
}

/* disabled state you already use */
.regchecker .disable-button {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: #969696;
}


/* Generic stacked utility (used elsewhere too) */
.stacked {
    display: flex;
    flex-wrap: wrap;
}

.stacked button {
    width: 100%;
    margin-left: 0;
    padding: 20px;
    margin-top: 10px;
}

button.green {
    background-color: #00b67a;
}

@media (max-width: 640px) {

    .regchecker {
        display: flex;
    }

    .inline {
        flex-wrap: nowrap;
    }

    .regchecker input {
        height: 90px;
        padding: 10px;
        line-height: 50px;
        font-size: 44px;
    }

    /* text button (CHECK / CONTINUE) */
    .regchecker button {
        height: 90px;
        padding: 0 16px !important;
        line-height: 12px;
    }

    /* icon-only button (EDIT / DELETE / CHECK if you use it) */
    .regchecker button[data-state="edit"],
    .regchecker button[data-state="check"],
    .regchecker button[data-state="delete"] {
        width: 90px;
        padding: 0;
    }

    .regchecker button i { font-size: 20px; }

    .regchecker.home { display: flex; }
    .regchecker.home input { width: 100%; }
    .regchecker.home button { padding: 0 16px; }
}

@media (max-width: 640px) {
    .blog-sidebar .regchecker.stacked input {
        height: 60px;
        padding: 15px 15px 15px 50px;
        font-size: 30px;
    }
}

/* ==========================================================================
   Questions / Private Plate Section (radio cards + row)
   ========================================================================== */
.questionsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px auto 16px;
}

/* hide radios (deduped) */
.questionsContainer input[type="radio"] {
    display: none !important;
}

/* match smaller date cards */
.questionsContainer label {
    width: 80%;
    min-height: 40px;
    padding: 15px 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background: #fff;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.questionsContainer label:hover { border-color: #000; }

.questionsContainer input[type="radio"]:checked + label {
    border-color: #000;
    background: #ffcc00;
    font-weight: 600;
}

.privatePlateRow { width: 80%; }

.privatePlateRow label {
    width: 100%;
    justify-content: space-between;
    text-align: left;
    padding: 10px 15px;
}

.privatePlate-container input:checked { accent-color: #f9c72c; }

.privatePlate-container p {
    text-align: center;
    margin: 0 20px 20px;
}

.privatePlate-container .date-link a { cursor: pointer; }

.privatePlate-container input:checked + label a {
    display: inline-block;
}

.privatePlate-container input[type="radio"]:checked + label {
    font-weight: 600 !important;
}

.privatePlate-container label .continueButtonSmall {
    padding: 10px;
    width: 100px;
    height: 38px;
    display: none;
    text-decoration: none;
}

.privatePlate-container label .continueButton {
    width: 38px;
    height: 38px;
}

@media (max-width: 640px) {
    .purchaseDate-container label,
    .purchaseType-container label {
        font-size: 18px;
        margin-left: 10px;
    }

    .privatePlate-container label .continueButtonSmall {
        width: 100px;
        height: 38px;
    }
}

/* ==========================================================================
   Gravity Forms / postcode lookup
   ========================================================================== */
#ukpl_postcode_lookup_select_label { display: none; }

.ukpl_postcode_lookup_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 25px !important;
}

.ukpl_postcode_lookup_container #ukpl_postcode_lookup {
    margin-right: 10px !important;
}

.ukpl_postcode_lookup_container input[type="submit"] {
    background-color: #969696;
    border-color: #969696;
    color: #fff;
}

.ukpl_postcode_lookup_results select {
    border: 5px solid;
    border-color: #ff0000 !important;
    margin-bottom: 30px !important;
}

.gform_page_footer { display: flex; flex-direction: row; }

.gform_wrapper.gravity-theme .ginput_complex .ginput_container_date { max-width: 35% !important; }
.gform_wrapper.gravity-theme .ginput_complex .ginput_container_date input,
.gform_wrapper.gravity-theme .ginput_complex .ginput_container_date select { min-width: 100px !important; }

.gform_previous_button { background-color: #969696 !important; }
.gform_heading .gform_required_legend { display: none !important; }

.gform_next_button,
.gform_button[type="submit"] { font-weight: bold !important; }

.pp-gf-content .gform_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.pp-gf-content .gform_wrapper .gfield_error .ginput_container select,
.pp-gf-content .gform_wrapper .gfield_error .ginput_container textarea {
    border-color: #ff0000 !important;
}

.gform_wrapper.gravity-theme .gfield_error .gfield_repeater_cell label,
.gform_wrapper.gravity-theme .gfield_error label,
.gform_wrapper.gravity-theme .gfield_error legend,
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message,
.gform_wrapper.gravity-theme [aria-invalid="true"] + label,
.gform_wrapper.gravity-theme label + [aria-invalid="true]"] {
    color: #ff0000 !important;
}

/* ==========================================================================
   Accept terms
   ========================================================================== */
.accept-terms input[type="checkbox"] {
    height: 30px !important;
    width: 30px !important;
}

.accept-terms .ginput_container { white-space: nowrap; }
.accept-terms .ginput_container input { vertical-align: top; }

.accept-terms .ginput_container label {
    white-space: break-spaces;
    margin-left: 10px;
    margin-right: 20px;
    font-weight: normal;
    font-size: 12px;
}

.accept-terms .gfield_required { display: none !important; }

@media (max-width: 640px) {
    .accept-terms .ginput_container label {
        max-width: 85% !important;
    }
}

/* ==========================================================================
   Datepicker
   ========================================================================== */
.ui-datepicker * { font-size: 16px !important; }

/* ==========================================================================
   Terms list numbering
   ========================================================================== */
.terms ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

.terms ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

.terms ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

.terms li ol > li { margin: 0; }

.terms li ol > li:before {
    content: counters(item, ".") " ";
}

/* ==========================================================================
   Misc / templates
   ========================================================================== */
.vrmBox {
    margin-bottom: 30px;
    max-width: 578px;
    background: #ffffff;
    justify-self: center;
    position: relative;
}

#confirmPrivatePlate { float: right; }

.grecaptcha-badge { display: none !important; }

.vehicle-details-section > .fl-node-content { margin-top: 0; }

.page-template-page-vehicledetails .fl-page-content { position: relative; }

.error404 .fl-search-input { display: none; }

.gfield_visibility_administrative { display: none !important; }

.gf_step_page_name { font-weight: bold; }

.partial_entry_warning { display: none !important; }

/* ==========================================================================
   Turnstile success
   ========================================================================== */
.turnstile-success {
    padding: 20px;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    height: 65px;
    width: 300px;
    margin-top: 15px;
}

.turnstile-success i {
    color: #00b67a;
    font-size: 22px;
    transform: translateY(10%);
    margin-right: 5px;
}

/* ==========================================================================
   Signature field
   ========================================================================== */
.gfield_signature_ui_container {
    width: 100%;
    position: relative;
}

.gfield_signature_container { width: 100%; }

#input_4_7 {
    height: 180px;
    width: 100%;
}

/* ==========================================================================
   Loader (animation lives with component)
   ========================================================================== */

.loader-wrapper {

    position:fixed;
    inset:0;
    z-index: 999999;

    display: none;

    justify-content: center;
    align-items: center;

    background-color: var(--brand-colour);
}

.loader-wrapper.loading {
    display: flex;
    overflow: hidden;
}

.loader {
    width: fit-content;
    font-size: 40px;
    font-family: "Archivo", sans-serif;
    font-weight: bold;
    color: #0000;
    -webkit-text-stroke: 1px var(--text-on-brand-colour);
    background: conic-gradient(var(--text-on-brand-colour) 0 0) 0 / 0% 100% no-repeat text;
    animation: l1 1s linear infinite;
}
.loader:before {
    content: "Checking vehicle...";
}
@keyframes l1 {
    to{background-size: 120% 100%}
}


.headline-text p {
    padding-top: 5px!important;
}

/* ==========================================================================
   Homepage Branding Colour Tweaks
   ========================================================================== */

header > div:first-of-type > div.fl-row-content-wrap {
  background-color:var(--header-background-colour) !important;
  background-image:var(--header-background-colour) !important;
  color:var(--header-text-colour) !important;  }

.highlight-color.svg { filter: var(--brand-colour-filter); }

.fl-col.header_left_col:before { background-image:var(--leftsvg) !important; }
.fl-col.header_right_col:before{ background-image:var(--rightsvg) !important; }

.header_left_col .heading1 svg path,
.header_left_col .heading2 svg path { stroke: var(--brand-colour)!important;  }

.home-info .fl-callout-title {background-color:var(--brand-colour);}
.home-info .fl-callout-title .fl-callout-title-text {color:var(--text-on-brand-colour) !important; }


@media (min-width: 768px) {
    .page-en .emissions_facts { background-image:var(--chevronsvg) !important; }
}


.why-claim-section a.fl-button,
.why-claim-section a.fl-button:visited { background: var(--button-background-colour); border-color: var(--button-background-colour); }

.why-claim-section a.fl-button .fl-button-text,
.why-claim-section a.fl-button:visited .fl-button-text { color:var(--button-text-colour) !important; }

.why-claim-section a.fl-button:hover { background-color: #000000 !important; border-color: #000000 !important; color:#ffffff !important; }
.why-claim-section a.fl-button:hover .fl-button-text { background-color: #000000 !important; border-color: #000000 !important; color:#ffffff !important; }

.dark-header-row-section > div {
  background-color: var(--row-background-colour) !important;
  background-image: var(--row-background-colour) !important;
}
.dark-header-row-section h2 { color: var(--text-on-brand-colour) !important; }

.home-icons .fl-icon i:before { color: var(--icon-colour) !important; }