/*----------------------------------------*/
/*  INNER PAGES — SHARED LAYER             */
/*  Solutions, Where to buy, Services,     */
/*  About us, Resources, Contact.          */
/*  Figma has no frames for these, so they */
/*  borrow the language of the home,       */
/*  category and product pages: light      */
/*  ground, Encode Sans Condensed 42px     */
/*  headings with a solid word, 54px CTAs  */
/*  and 8px rounded white cards.           */
/*                                         */
/*  `body.rd-inner` is added in            */
/*  functions.php for those templates; the */
/*  extra class also outranks style.css /  */
/*  main.css, which load after this file.  */
/*----------------------------------------*/

body.rd-inner {
    --in-wide: 1860px;
    --in-text: 1234px;
    --in-section: clamp(80px, 7.3vw, 140px);
}

body.rd-inner main,
body.rd-inner main * {
    font-family: var(--rd-ff);
}

body.rd-inner main {
    background-color: var(--rd-surface);
}


/*--------------------*/
/* - PAGE HEAD        */
/*--------------------*/
/* `.banner-entry.small` without a photo: the page title on the light
   ground. style.css pins the block at 250px with !important and paints a
   blue gradient over it; the templates also set the grey inline. */
body.rd-inner .banner-entry.small.no-shadow {
    background: var(--rd-surface) !important;
}

body.rd-inner .banner-entry.small.no-shadow .banner-entry-align {
    display: block;
    width: 100%;
    height: auto !important;
    padding: clamp(60px, 5.2vw, 100px) 0 clamp(40px, 3.1vw, 60px);
}

body.rd-inner .banner-entry.small.no-shadow .banner-entry-align::before {
    content: none;
}

body.rd-inner .banner-entry.small.no-shadow .container {
    max-width: calc(var(--in-wide) + var(--rd-gutter) * 2);
    width: 100%;
    padding: 0 var(--rd-gutter);
}

/* left-aligned with the content under it, like the home section headings */
body.rd-inner .banner-entry.small.no-shadow .banner-entry-align.text-center {
    text-align: left;
}

body.rd-inner .banner-entry.small.no-shadow .row {
    margin: 0;
}

/* the template's .justify-content-center carries !important, so the column
   pins itself left with an auto margin instead */
body.rd-inner .banner-entry.small.no-shadow .row > [class*="col-"] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 0 0;
    padding: 0;
}

body.rd-inner .rd-page-title,
body.rd-inner .banner-entry.small.no-shadow .title {
    margin: 0;
    font-family: var(--rd-ff-head);
    font-size: clamp(34px, 3.55vw, 68px);
    line-height: 1.16;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner .rd-page-title *,
body.rd-inner .banner-entry.small.no-shadow .title * {
    font-family: inherit;
}

body.rd-inner .banner-entry.small.no-shadow .title b,
body.rd-inner .banner-entry.small.no-shadow .title strong {
    font-weight: 600;
}

body.rd-inner .banner-entry.small.no-shadow .title br {
    display: none;
}

body.rd-inner .banner-entry.small.no-shadow .row > [class*="col-"] > *:not(:last-child) {
    margin-bottom: 24px;
}

body.rd-inner .rd-page-lead,
body.rd-inner .banner-entry.small.no-shadow .h3 {
    max-width: 725px;
    margin: 0;
    font-family: var(--rd-ff-head);
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner .rd-page-lead *,
body.rd-inner .banner-entry.small.no-shadow .h3 * {
    font-family: inherit;
}


/*--------------------*/
/* - PHOTO HEAD       */
/*--------------------*/
/* `.banner-entry.small` with a `.banner-entry-bg` photo (Where to buy,
   Services, Resources): the category banner — a rounded dark plate inset
   by the gutter, the photo dimmed inside it and the title on a glass panel
   in the bottom-left corner. */
body.rd-inner .banner-entry.small:not(.no-shadow) {
    margin: 30px var(--rd-gutter) 0;
    background-color: var(--rd-dark);
    border-radius: var(--rd-radius);
    overflow: hidden;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(32, 32, 32, .15) 0%, rgba(32, 32, 32, .55) 100%);
}

body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-content {
    position: relative;
    z-index: 1;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-align {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 391px !important;
    padding: 30px;
    text-align: left;
    vertical-align: initial;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-align::before {
    content: none;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .container,
body.rd-inner .banner-entry.small:not(.no-shadow) .row {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .row {
    display: block;
}

/* glass panel */
body.rd-inner .banner-entry.small:not(.no-shadow) .row > [class*="col-"] {
    width: auto;
    max-width: 725px;
    margin: 0;
    padding: 30px;
    background-color: var(--rd-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rd-glass-border);
    border-radius: var(--rd-radius);
}

body.rd-inner .banner-entry.small:not(.no-shadow) .row > [class*="col-"] > *:not(:last-child) {
    margin-bottom: 12px;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .title {
    margin: 0;
    font-family: var(--rd-ff-head);
    font-size: clamp(30px, 2.2vw, 42px);
    line-height: 1.16;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner .banner-entry.small:not(.no-shadow) .title * {
    font-family: inherit;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .title b,
body.rd-inner .banner-entry.small:not(.no-shadow) .title strong {
    font-weight: 600;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .title br {
    display: none;
}

body.rd-inner .banner-entry.small:not(.no-shadow) .h3,
body.rd-inner .banner-entry.small:not(.no-shadow) .h6 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-muted);
    text-transform: none;
}

@media (max-width: 1199px) {
    body.rd-inner .banner-entry.small:not(.no-shadow) {
        margin-top: 20px;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-align {
        height: 320px !important;
        padding: 20px;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .row > [class*="col-"] {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    body.rd-inner .banner-entry.small:not(.no-shadow) {
        margin-top: 15px;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .banner-entry-align {
        height: auto !important;
        min-height: 280px;
        padding: 12px;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .row > [class*="col-"] {
        padding: 16px;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .title {
        font-family: var(--rd-ff-head);
        font-size: 26px;
    }

    /* inline marks inside the heading (b, strong, span) keep its face —
       the section's universal `*` rule would reset them to the text font */
    body.rd-inner .banner-entry.small:not(.no-shadow) .title * {
        font-family: inherit;
    }

    body.rd-inner .banner-entry.small:not(.no-shadow) .h3,
    body.rd-inner .banner-entry.small:not(.no-shadow) .h6 {
        font-size: 16px;
    }
}


/*--------------------*/
/* - BUTTONS          */
/*--------------------*/
/* Same 54px CTA as the home Solutions and product pages. Colour comes from
   the variant classes below, which each page maps its markup onto. */
body.rd-inner main .btn {
    gap: 16px;
    height: 54px;
    min-width: 0;
    padding: 0 20px;
    border-width: 1px;
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.rd-inner main .btn b {
    font-weight: inherit;
}

/* filled accent + arrow */
body.rd-inner main .rd-btn-accent {
    border-color: var(--rd-accent);
    background-color: var(--rd-accent);
    color: var(--rd-white);
}

body.rd-inner main .rd-btn-accent::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / contain;
}

/* outline on a photo / dark plate */
body.rd-inner main .rd-btn-glass {
    border-color: rgba(255, 255, 255, .4);
    background-color: transparent;
    color: var(--rd-white);
}

/* outline on the light ground */
body.rd-inner main .rd-btn-line {
    border-color: var(--rd-border-on-light);
    background-color: transparent;
    color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    body.rd-inner main .rd-btn-accent:hover {
        border-color: var(--rd-txt-on-light);
        background-color: var(--rd-txt-on-light);
        color: var(--rd-accent);
    }

    body.rd-inner main .rd-btn-accent:hover::after {
        background-image: url("../../img/redesign/icons/arrow-cta-accent.svg?v=3");
    }

    body.rd-inner main .rd-btn-glass:hover {
        border-color: var(--rd-white);
        background-color: var(--rd-white);
        color: var(--rd-txt-on-light);
    }

    body.rd-inner main .rd-btn-line:hover {
        border-color: var(--rd-txt-on-light);
        background-color: transparent;
        color: var(--rd-txt-on-light);
    }
}


/* text link with the accent arrow (legacy `.btn-link` in content) */
body.rd-inner main .rd-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    color: var(--rd-txt-on-light);
    cursor: pointer;
}

body.rd-inner main .rd-link::before {
    content: none;
}

body.rd-inner main .rd-link::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta-accent.svg?v=3") no-repeat center / contain;
    transition: transform var(--rd-transition);
}

@media (min-width: 1200px) {
    body.rd-inner main .rd-link:hover::after {
        transform: translateX(4px);
    }
}


/*--------------------*/
/* - SECTION HEADING  */
/*--------------------*/
body.rd-inner .rd-heading {
    margin: 0 0 clamp(30px, 3.1vw, 60px);
    font-family: var(--rd-ff-head);
    font-size: clamp(30px, 2.2vw, 42px);
    line-height: 1.16;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner .rd-heading * {
    font-family: inherit;
}

body.rd-inner .rd-heading b,
body.rd-inner .rd-heading strong {
    font-weight: 600;
}


/*--------------------*/
/* - STICKY TABS      */
/*--------------------*/
/* Plate tabs under the page head (Services anchors). `.fixed` is set by
   global.js once the row reaches the header. */
body.rd-inner .rd-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
}

body.rd-inner .rd-tabs::-webkit-scrollbar {
    display: none;
}

body.rd-inner .rd-tabs > li {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 46px;
    margin: 0;
    padding: 0 20px;
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--rd-txt-on-light-muted);
    cursor: pointer;
    transition: background-color var(--rd-transition), color var(--rd-transition);
}

body.rd-inner .rd-tabs > li.active {
    background-color: var(--rd-dark);
    color: var(--rd-white);
}

@media (min-width: 1200px) {
    body.rd-inner .rd-tabs > li:not(.active):hover {
        background-color: #E8E8E8;
        color: var(--rd-txt-on-light);
        text-decoration: none;
    }
}


/*--------------------*/
/* - ANCHOR TABS      */
/* `.navigation-panel` under the page head (Services, Application): the
   .rd-tabs plates, pinned under the header by global.js (.fixed). */
/*--------------------*/
body.rd-inner .navigation-panel {
    position: relative;
    z-index: 20;
    display: block;
    width: auto;
    height: auto;
    min-height: 76px;
    padding: 30px var(--rd-gutter) 0;
    background: none;
}

body.rd-inner .navigation-panel ul {
    position: static;
    max-width: var(--in-wide);
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: none;
    justify-content: flex-start;
    text-align: left;
}

body.rd-inner .navigation-panel.fixed ul {
    position: fixed;
    top: var(--rd-hdr-stick);
    left: 0;
    right: 0;
    max-width: none;
    padding: 12px var(--rd-gutter);
    background-color: rgba(246, 246, 246, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rd-line-on-light);
}


@media (max-width: 1199px) {
    body.rd-inner .navigation-panel {
        min-height: 66px;
        padding-top: 20px;
    }

}

@media (max-width: 767px) {
    body.rd-inner .navigation-panel {
        min-height: 57px;
        padding-top: 15px;
    }

    body.rd-inner .navigation-panel.fixed ul {
        padding: 8px var(--rd-gutter);
    }

}


/*--------------------*/
/* - THEME FORMS      */
/*--------------------*/
/* The theme's own forms (login, registration, password, account, quote
   request, project popups): `.input-field-wrapp` with a floating
   `.input-placeholder` (global.js adds .focus / .value), SumoSelect,
   `.checkbox-entry`, `.error-message`. Popups live outside <main>. */
body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .calendar-wrapp) .input-field-wrapp {
    position: relative;
    margin: 0 0 12px;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .calendar-wrapp) .input-field-wrapp::before {
    content: none;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .calendar-wrapp) .input {
    width: 100%;
    height: 58px;
    padding: 22px 16px 4px;
    background-color: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    transition: border-color var(--rd-transition);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) textarea.input {
    height: 140px;
    padding-top: 30px;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .calendar-wrapp) .input:focus {
    border-color: var(--rd-accent);
    outline: 0;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-placeholder {
    z-index: 2;
    left: 17px;
    right: 44px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(32, 32, 32, .6);
    text-align: left;
    transform: translateY(18px);
    pointer-events: none;
    transition: transform var(--rd-transition), font-size var(--rd-transition);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-placeholder span {
    color: rgba(32, 32, 32, .45);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-field-wrapp:is(.focus, .value) .input-placeholder {
    font-size: 13px;
    color: var(--rd-txt-on-light-muted);
    transform: translateY(8px);
}

/* selects keep their label above the value */
body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-placeholder.in-select {
    z-index: 5;
    opacity: 1;
    visibility: visible;
    font-size: 13px;
    color: var(--rd-txt-on-light-muted);
    transform: translateY(8px);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-field-wrapp.invalid:not(.focus) .input,
body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-field-wrapp.invalid-email:not(.focus) .input {
    border-color: #D9534F;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-field-wrapp::after {
    top: 19px;
    right: 16px;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .input-error {
    padding: 0 0 0 2px;
    font-size: 14px;
    color: #D9534F;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form) .password-control {
    top: 17px;
    right: 16px;
    opacity: .7;
}

/* SumoSelect in these forms */
body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .CaptionCont {
    display: flex;
    align-items: flex-end;
    height: 58px;
    padding: 0 44px 9px 16px;
    background-color: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
}

body.rd-inner :is(main, .popup-wrapper) .filter-block .SumoSelect > .CaptionCont {
    align-items: center;
    height: 54px;
    padding-bottom: 0;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .CaptionCont > span {
    padding: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .CaptionCont > label {
    width: 44px;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .CaptionCont > label > i {
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect.open > .CaptionCont > label > i {
    transform: translateY(-50%) rotate(-180deg);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .CaptionCont > label > i::before {
    width: 8px;
    height: 8px;
    border: solid var(--rd-txt-on-light);
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -75%) rotate(45deg);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect.open > .CaptionCont {
    border-color: var(--rd-accent);
    border-radius: var(--rd-radius);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .optWrapper {
    margin-top: 4px;
    background-color: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    overflow: hidden auto;
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .optWrapper > .options li.opt {
    padding: 0;
    background-color: var(--rd-white);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .optWrapper > .options li label {
    display: block;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .optWrapper > .options li.opt.selected {
    background-color: var(--rd-surface);
}

body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-form, .filter-block) .SumoSelect > .optWrapper > .options li.opt.selected label {
    font-weight: 500;
    color: var(--rd-accent);
}

body.rd-inner :is(main, .popup-wrapper) .SumoSelect.disabled > .CaptionCont {
    opacity: .5;
    border-color: rgba(32, 32, 32, .1);
}

/* checkbox */
body.rd-inner :is(main, .popup-wrapper) .checkbox-entry {
    margin: 0;
}

body.rd-inner :is(main, .popup-wrapper) .checkbox-entry span {
    padding-left: 32px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(main, .popup-wrapper) .checkbox-entry span::before {
    top: 0;
    width: 22px;
    height: 22px;
    background-color: var(--rd-white);
    border: 1px solid var(--rd-border-on-light);
    border-radius: 4px;
}

body.rd-inner :is(main, .popup-wrapper) .checkbox-entry input[type=checkbox] + span::after {
    top: 4px;
    left: 8px;
    border-color: var(--rd-white);
}

body.rd-inner :is(main, .popup-wrapper) .checkbox-entry input[type=checkbox]:checked + span::before {
    background-color: var(--rd-accent);
    border-color: var(--rd-accent);
}

/* error box (same as the CF7 one) */
body.rd-inner :is(main, .popup-wrapper) .error-message {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 16px 14px 48px;
    background-color: rgba(217, 83, 79, .08);
    border: 1px solid rgba(217, 83, 79, .35);
    border-radius: var(--rd-radius);
    font-size: 16px;
    line-height: 1.35;
    color: var(--rd-txt-on-light);
    text-align: left;
}

body.rd-inner :is(main, .popup-wrapper) .error-message.d-none {
    display: none;
}

body.rd-inner :is(main, .popup-wrapper) .error-message::before {
    content: '!';
    top: 13px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #D9534F;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--rd-white);
}

body.rd-inner :is(main, .popup-wrapper) .form-wrapp .separator {
    height: 1px;
    margin: 30px 0;
    background-color: var(--rd-line-on-light);
}


/*--------------------*/
/* - LEGACY BUTTONS   */
/*--------------------*/
/* Templates not rewritten for the redesign still print btn-fourth (filled)
   and btn-primary (outline); they take the redesigned variants. */
body.rd-inner :is(main, .popup-wrapper) .btn {
    gap: 16px;
    height: 54px;
    min-width: 0;
    padding: 0 24px;
    border-width: 1px;
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.rd-inner :is(main, .popup-wrapper) .btn b {
    font-weight: inherit;
}

body.rd-inner :is(main, .popup-wrapper) .btn.btn-fourth {
    border-color: var(--rd-accent);
    background-color: var(--rd-accent);
    color: var(--rd-white);
}

body.rd-inner :is(main, .popup-wrapper) :is(.btn.btn-primary, .btn.btn-secondary) {
    border-color: var(--rd-border-on-light);
    background-color: transparent;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(main, .popup-wrapper) .btn.disabled {
    opacity: .45;
    pointer-events: none;
}

@media (min-width: 1200px) {
    body.rd-inner :is(main, .popup-wrapper) .btn.btn-fourth:hover {
        border-color: var(--rd-dark);
        background-color: var(--rd-dark);
        color: var(--rd-accent);
    }

    body.rd-inner :is(main, .popup-wrapper) :is(.btn.btn-primary, .btn.btn-secondary):hover {
        border-color: var(--rd-txt-on-light);
        background-color: transparent;
        color: var(--rd-txt-on-light);
    }
}

/* text links inside the theme forms */
body.rd-inner :is(main, .popup-wrapper) :is(.form-wrapp, .account-wrapper, .account-form) a:not(.btn) {
    color: var(--rd-txt-on-light);
    text-decoration: underline;
    text-decoration-color: var(--rd-accent);
    text-underline-offset: 3px;
}


/*--------------------*/
/* - QUANTITY INPUTS  */
/*--------------------*/
/* `.in-wrap` steppers (quote basket, project table), as on the product page */
body.rd-inner main .in-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 0;
}

body.rd-inner main .in-wrap {
    margin: 0;
}

body.rd-inner main .in-placeholder {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(32, 32, 32, .6);
}

body.rd-inner main .in-inner input,
body.rd-inner main .in-input {
    height: 48px;
    padding: 0 16px;
    background: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    transition: border-color var(--rd-transition);
}

body.rd-inner main .in-inner input:focus {
    border-color: var(--rd-accent);
    outline: 0;
}

body.rd-inner main .in-inner input[readonly] {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

body.rd-inner main .in-inner input[type=number] {
    width: 110px;
    max-width: 110px;
    padding-right: 36px;
    -moz-appearance: textfield;
}

body.rd-inner main .in-inner input::-webkit-outer-spin-button,
body.rd-inner main .in-inner input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.rd-inner main .in-inner input[type=text] {
    width: 220px;
    max-width: 100%;
}

body.rd-inner main .in-btn-dec,
body.rd-inner main .in-btn-inc {
    right: 12px;
    width: 18px;
    height: 16px;
    border-radius: 4px;
}

body.rd-inner main .in-btn-dec { top: 7px; }
body.rd-inner main .in-btn-inc { bottom: 7px; }

body.rd-inner main .in-btn-dec::before,
body.rd-inner main .in-btn-inc::before {
    width: 6px;
    height: 6px;
    border-color: var(--rd-txt-on-light);
}

/* Touch screens: the chevrons stay 18x16, but each gets an invisible hit
   area — the top/bottom half of the field's right end (about 44x24). */
@media (max-width: 1199px) {
    body.rd-inner main .in-btn-dec::after,
    body.rd-inner main .in-btn-inc::after {
        content: '';
        position: absolute;
        left: -14px;
        right: -12px;
    }

    body.rd-inner main .in-btn-dec::after {
        top: -8px;
        bottom: -1px;
    }

    body.rd-inner main .in-btn-inc::after {
        top: -1px;
        bottom: -8px;
    }
}

@media (min-width: 1200px) {
    body.rd-inner main .in-btn-dec:hover,
    body.rd-inner main .in-btn-inc:hover {
        background-color: var(--rd-surface);
    }

    body.rd-inner main .in-btn-dec:hover::before,
    body.rd-inner main .in-btn-inc:hover::before {
        border-color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - ICON BUTTONS     */
/*--------------------*/
/* `.btn-icon` with an inline svg + `.btn-tooltip` (project actions) and
   `.btn-close.type-2` (remove from basket) */
body.rd-inner main .btn-icon:not(.btn-back) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background-color: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    cursor: pointer;
    transition: border-color var(--rd-transition), background-color var(--rd-transition);
}

body.rd-inner main .btn-icon:not(.btn-back) svg {
    width: 20px;
    height: 20px;
}

body.rd-inner main .btn-icon:not(.btn-back) svg path {
    fill: var(--rd-txt-on-light);
}

body.rd-inner main .btn-tooltip {
    padding: 6px 10px;
    background-color: var(--rd-dark);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--rd-white);
}

body.rd-inner main .btn-close.type-2 {
    width: 40px;
    height: 40px;
    background-color: var(--rd-white);
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    transition: border-color var(--rd-transition), background-color var(--rd-transition);
}

body.rd-inner main .btn-close.type-2::before,
body.rd-inner main .btn-close.type-2::after {
    width: 14px;
    height: 1.5px;
    background-color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    body.rd-inner main .btn-icon:not(.btn-back):hover,
    body.rd-inner main .btn-close.type-2:hover {
        background-color: var(--rd-surface);
        border-color: var(--rd-border-on-light);
    }
}


/*--------------------*/
/* - POPUPS           */
/*--------------------*/
/* The shared `.popup-content` shell (team members, resources): an 8px white
   card over a dark veil, with the square close button. */
body.rd-inner .popup-wrapper .bg-layer {
    background: rgba(32, 32, 32, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

body.rd-inner .popup-content {
    padding: 30px var(--rd-gutter);
}

body.rd-inner .popup-content .popup-container {
    max-width: 1100px;
    background-color: var(--rd-white);
    border-radius: var(--rd-radius);
    box-shadow: 0 24px 60px rgba(32, 32, 32, .2);
    font-family: var(--rd-ff);
    text-align: left;
}

body.rd-inner .popup-content .popup-container * {
    font-family: var(--rd-ff);
}

body.rd-inner .popup-content .popup-align {
    padding: 50px;
}

body.rd-inner .popup-content .btn-close {
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    background-color: var(--rd-white);
    border: 1px solid var(--rd-border-on-light);
    border-radius: var(--rd-radius);
    transition: border-color var(--rd-transition), background-color var(--rd-transition);
}

body.rd-inner .popup-content .btn-close::before,
body.rd-inner .popup-content .btn-close::after {
    width: 16px;
    height: 1.5px;
    background-color: var(--rd-txt-on-light);
}

/* popup contents printed by include/popups.php and the account templates */
body.rd-inner .popup-content .popup-container:is(.size-3, .size-4, .size-5) {
    max-width: 560px;
}

body.rd-inner .popup-content .popup-align:is(.type-2, .type-3, .type-4, .type-5, .type-6) {
    padding: 50px 40px 40px;
}

body.rd-inner .popup-content .popup-align > .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
}

body.rd-inner .popup-content .popup-align > .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.rd-inner .popup-content .popup-align .title {
    margin-bottom: 12px;
    font-family: var(--rd-ff-head);
    font-size: clamp(26px, 1.8vw, 32px);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner .popup-content .popup-align .title * {
    font-family: inherit;
}

body.rd-inner .popup-content .popup-align .text {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.45;
    color: var(--rd-txt-on-light-muted);
}

body.rd-inner .popup-content .popup-align .btn {
    margin-top: 24px;
}

body.rd-inner .popup-content .popup-align .form-wrapp .btn {
    margin-top: 8px;
    width: 100%;
}

body.rd-inner .popup-content .project-list {
    max-height: 330px;
    margin: 8px 0 0;
    text-align: left;
    text-transform: none;
}

body.rd-inner .popup-content .project-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 4px;
    padding: 8px 12px;
    border-radius: var(--rd-radius);
    cursor: pointer;
    transition: background-color var(--rd-transition);
}

body.rd-inner .popup-content .project-list .icon {
    width: 48px;
    height: 48px;
    margin: 0;
}

body.rd-inner .popup-content .project-list span {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    body.rd-inner .popup-content .project-list li:hover {
        background-color: var(--rd-surface);
        text-decoration: none;
    }
}

body.rd-inner .popup-content .project-list-btn {
    background-color: var(--rd-white);
    border-top: 1px solid var(--rd-line-on-light);
    border-radius: 0 0 var(--rd-radius) var(--rd-radius);
}

@media (min-width: 1200px) {
    body.rd-inner .popup-content .btn-close:hover {
        background-color: var(--rd-dark);
        border-color: var(--rd-dark);
    }

    body.rd-inner .popup-content .btn-close:hover::before,
    body.rd-inner .popup-content .btn-close:hover::after {
        background-color: var(--rd-white);
    }
}


/*--------------------*/
/* - PROSE            */
/*--------------------*/
/* Editor content: plain pages, blog posts, job descriptions. */
body.rd-inner .rd-prose,
body.rd-inner .single-post-content .text,
body.rd-inner .text.single-post-content,
body.rd-inner .oppt-desc.text {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) > * + * {
    margin-top: 16px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) > :is(h2, h3, h4, h5, h6) {
    margin-top: 40px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) > :is(h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(h2, h3, h4, h5, h6) + * {
    margin-top: 12px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) h2 {
    font-family: var(--rd-ff-head);
    font-size: clamp(26px, 1.8vw, 34px);
    line-height: 1.15;
    font-weight: 300;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner :is(.rd-prose *,
.single-post-content .text *,
.text.single-post-content *,
.oppt-desc.text) h2 * {
    font-family: inherit;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) h3 {
    font-family: var(--rd-ff-head);
    font-size: clamp(24px, 1.5vw, 28px);
    line-height: 1.2;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.rd-inner :is(.rd-prose *,
.single-post-content .text *,
.text.single-post-content *,
.oppt-desc.text) h3 * {
    font-family: inherit;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(h4, h5, h6) {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(b, strong) {
    font-weight: 600;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) a:not(.btn, .btn-link, .rd-link) {
    color: var(--rd-txt-on-light);
    text-decoration: underline;
    text-decoration-color: var(--rd-accent);
    text-underline-offset: 3px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(ul, ol) {
    padding-left: 0;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(ul, ol) :is(ul, ol) {
    margin-top: 8px;
    padding-left: 20px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) li {
    margin-top: 8px;
    padding-left: 22px;
    font-size: inherit;
    color: inherit;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) ul > li::before {
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--rd-accent);
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) blockquote {
    margin: 30px 0;
    padding: 20px 24px;
    background-color: var(--rd-surface);
    border-left: 3px solid var(--rd-accent);
    border-radius: 0 var(--rd-radius) var(--rd-radius) 0;
    font-size: 18px;
    color: var(--rd-txt-on-light);
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rd-radius);
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

body.rd-inner :is(.rd-prose, .single-post-content .text, .text.single-post-content, .oppt-desc.text) :is(th, td) {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rd-line-on-light);
    text-align: left;
}


/*--------------------*/
/* - BACK BUTTON      */
/*--------------------*/
/* `.btn-icon.btn-back` (posts, careers, solution details): the product
   page's 54px box with the arrow and an uppercase label. */
body.rd-inner main .btn-icon.btn-back {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
}

body.rd-inner main .btn-icon.btn-back i {
    position: static;
    display: block;
    width: 54px;
    height: 54px;
    background: var(--rd-white) url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / 20px 20px;
    border: 1px solid rgba(32, 32, 32, .1);
    border-radius: var(--rd-radius);
    transform: rotate(180deg);
    transition: border-color var(--rd-transition);
}

body.rd-inner main .btn-icon.btn-back i::before,
body.rd-inner main .btn-icon.btn-back i::after {
    content: none;
}

body.rd-inner main .btn-icon.btn-back b {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    body.rd-inner main .btn-icon.btn-back:hover i {
        border-color: var(--rd-border-on-light);
    }
}


/*--------------------*/
/* - PRODUCT TILE     */
/*--------------------*/
/* `.product-entry` in the product search and the solution sliders: the
   white tile of the category grid. */
body.rd-inner main .product-entry {
    height: 100%;
}

body.rd-inner main .product-entry .content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding: 16px 16px 20px;
    background-color: var(--rd-white);
    border: 1px solid transparent;
    border-radius: var(--rd-radius);
    box-shadow: none;
    transition: border-color var(--rd-transition);
}

body.rd-inner main .product-entry .preview {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 100%;
}

body.rd-inner main .product-entry .preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
}

body.rd-inner main .product-entry .title-wrapper {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto;
    padding: 0;
    text-align: center;
}

body.rd-inner main .product-entry .title-wrapper .title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

body.rd-inner main .product-entry .title-wrapper .caption {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: var(--rd-txt-on-light-muted);
}

body.rd-inner main .product-entry .product-label-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: auto;
    height: auto;
}

body.rd-inner main .product-entry .product-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--rd-surface);
    border-radius: var(--rd-radius-pill);
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: var(--rd-txt-on-light);
}

body.rd-inner main .product-entry .product-label-icon {
    width: 16px;
    height: 16px;
}

body.rd-inner main .product-entry .product-label-icon svg {
    width: 100%;
    height: 100%;
}

/* the old hover "View" plate — the whole tile is the link */
body.rd-inner main .product-entry .animation {
    display: none;
}

@media (min-width: 1200px) {
    body.rd-inner main .product-entry .content:hover {
        border-color: var(--rd-accent);
    }
}


/*--------------------*/
/* - PAGINATION       */
/*--------------------*/
body.rd-inner .blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    font-size: 0;
}

body.rd-inner .blog-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    background-color: var(--rd-white);
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--rd-txt-on-light);
    transition: background-color var(--rd-transition), color var(--rd-transition);
}

body.rd-inner .blog-pagination a + a {
    margin: 0;
}

body.rd-inner .blog-pagination a.active {
    background-color: var(--rd-dark);
    color: var(--rd-white);
}

@media (min-width: 1200px) {
    body.rd-inner .blog-pagination a:not(.active):hover {
        background-color: var(--rd-accent);
        color: var(--rd-white);
    }
}


/*--------------------*/
/* - CF7 FORMS        */
/*--------------------*/
/* Contact Form 7 on the inner pages (Contact, career applications): 58px
   white fields with floating labels (global.js adds .focus / .value to
   .input-field-wrapp), SumoSelect selects, the accent submit. */
body.rd-inner {
    --in-field-h: 58px;
    --in-line: rgba(32, 32, 32, .1);
}

/* CF7 rows */
body.rd-inner .wpcf7-form .row.m7 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 12px;
}

body.rd-inner .wpcf7-form .row.m7 > [class*="col-"] {
    padding: 0;
}

body.rd-inner .wpcf7-form .row.m7 > .col-sm-12 {
    grid-column: 1 / -1;
}

body.rd-inner .wpcf7-form > div:not(.row):not(.button) {
    margin: 0 0 12px;
}

/* fields */
body.rd-inner .wpcf7-form .input-field-wrapp,
body.rd-inner .wpcf7-form .SumoSelect {
    margin: 0;
}

body.rd-inner .wpcf7-form .input-field-wrapp::before {
    content: none;
}

body.rd-inner .wpcf7-form .input {
    width: 100%;
    height: var(--in-field-h);
    padding: 22px 16px 4px;
    background-color: var(--rd-white);
    border: 1px solid var(--in-line);
    border-radius: var(--rd-radius);
    font-size: 16px;
    line-height: 1.2;
    color: var(--rd-txt-on-light);
    transition: border-color var(--rd-transition);
}

body.rd-inner .wpcf7-form textarea.input {
    height: 150px;
    padding-top: 30px;
}

body.rd-inner .wpcf7-form .input:focus {
    border-color: var(--rd-accent);
    outline: 0;
}

body.rd-inner .wpcf7-form .input-placeholder {
    z-index: 2;
    left: 17px;
    right: 16px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(32, 32, 32, .6);
    transform: translateY(18px);
    pointer-events: none;
    transition: transform var(--rd-transition), font-size var(--rd-transition);
}

body.rd-inner .wpcf7-form .input-placeholder span {
    font-weight: 400;
    color: rgba(32, 32, 32, .45);
}

body.rd-inner .wpcf7-form .input-field-wrapp.focus .input-placeholder,
body.rd-inner .wpcf7-form .input-field-wrapp.value .input-placeholder {
    font-size: 13px;
    color: var(--rd-txt-on-light-muted);
    transform: translateY(8px);
}

body.rd-inner .wpcf7-form .input-field-wrapp .input.wpcf7-not-valid {
    border-color: #D9534F;
    box-shadow: none;
}

body.rd-inner .wpcf7-form .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 14px;
    color: #D9534F;
}

/* selects */
body.rd-inner .wpcf7-form .SumoSelect > .CaptionCont {
    display: flex;
    align-items: center;
    height: var(--in-field-h);
    padding: 0 44px 0 16px;
    background-color: var(--rd-white);
    border: 1px solid var(--in-line);
    border-radius: var(--rd-radius);
}

body.rd-inner .wpcf7-form .SumoSelect > .CaptionCont > span {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--rd-txt-on-light) !important;
}

body.rd-inner .wpcf7-form .SumoSelect > .CaptionCont > label {
    width: 44px;
}

body.rd-inner .wpcf7-form .SumoSelect > .CaptionCont > label > i {
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

body.rd-inner .wpcf7-form .SumoSelect.open > .CaptionCont > label > i {
    transform: translateY(-50%) rotate(-180deg);
}

body.rd-inner .wpcf7-form .SumoSelect > .CaptionCont > label > i::before,
body.rd-inner .wpcf7-form .SumoSelect.open > .CaptionCont > label > i::before {
    width: 8px;
    height: 8px;
    border: solid var(--rd-txt-on-light);
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -75%) rotate(45deg);
}

body.rd-inner .wpcf7-form .SumoSelect.open > .CaptionCont {
    border-color: var(--rd-accent);
}

body.rd-inner .wpcf7-form .SumoSelect > .optWrapper {
    margin-top: 4px;
    background-color: var(--rd-white);
    border: 1px solid var(--in-line);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    overflow: hidden auto;
}

body.rd-inner .wpcf7-form .SumoSelect > .optWrapper > .options li.opt {
    padding: 0;
    background-color: var(--rd-white);
}

body.rd-inner .wpcf7-form .SumoSelect > .optWrapper > .options li label {
    display: block;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--rd-txt-on-light);
}

body.rd-inner .wpcf7-form .SumoSelect > .optWrapper > .options li.opt.selected {
    background-color: var(--rd-surface);
}

body.rd-inner .wpcf7-form .SumoSelect > .optWrapper > .options li.opt.selected label {
    font-weight: 500;
    color: var(--rd-accent);
}

/* submit: the accent CTA with the arrow */
body.rd-inner .wpcf7-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 204px;
    height: 54px;
    margin: 18px 0 0;
    padding: 0 24px;
    background-color: var(--rd-accent);
    border: 1px solid var(--rd-accent);
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--rd-white);
}

body.rd-inner .wpcf7-form .btn p {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.rd-inner .wpcf7-form .btn b {
    font-weight: inherit;
}

body.rd-inner .wpcf7-form .btn p::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / contain;
}

body.rd-inner .wpcf7-form .btn .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 10px;
    margin: -12px 0 0;
}

body.rd-inner .wpcf7-form .wpcf7-response-output {
    margin: 16px 0 0 !important;
    padding: 14px 16px 14px 48px !important;
    position: relative;
    background-color: rgba(217, 83, 79, .08);
    border: 1px solid rgba(217, 83, 79, .35) !important;
    border-radius: var(--rd-radius);
    font-size: 16px;
    line-height: 1.35;
    color: var(--rd-txt-on-light);
}

/* "!" badge */
body.rd-inner .wpcf7-form .wpcf7-response-output::before {
    content: '!';
    position: absolute;
    top: 13px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #D9534F;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--rd-white);
}

body.rd-inner .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
}

@media (min-width: 1200px) {
    body.rd-inner .wpcf7-form .btn:hover {
        background-color: var(--rd-dark);
        border-color: var(--rd-dark);
        color: var(--rd-accent);
    }

    body.rd-inner .wpcf7-form .btn:hover p::after {
        background-image: url("../../img/redesign/icons/arrow-cta-accent.svg?v=3");
    }
}

/* resume upload (careers) */
body.rd-inner .wpcf7-form .input-file-wrapper {
    position: relative;
    margin: 0 0 12px;
    border-radius: var(--rd-radius);
}

body.rd-inner .wpcf7-form .input-file-wrapper .input {
    display: flex;
    align-items: center;
    height: auto;
    min-height: var(--in-field-h);
    padding: 12px 52px 12px 16px;
    background: var(--rd-white) url("../../img/redesign/icons/arrow-cta-accent.svg?v=3") no-repeat right 18px center / 20px 20px;
    border: 1px dashed var(--rd-border-on-light);
    white-space: normal;
}

body.rd-inner .wpcf7-form .input-file-wrapper .input p {
    font-size: 16px;
    line-height: 1.3;
    color: var(--rd-txt-on-light);
}

body.rd-inner .wpcf7-form .input-file-wrapper .attach-input-files {
    font-size: 16px;
    color: var(--rd-txt-on-light-muted);
}

body.rd-inner .wpcf7-form .input-file-wrapper.active .input {
    background-image: none;
    border-style: solid;
}

body.rd-inner .wpcf7-form .input-file-wrapper .file-remove {
    width: 52px;
}

body.rd-inner .wpcf7-form .empty-space {
    display: none;
}


@media (max-width: 767px) {
    body.rd-inner .wpcf7-form .row.m7 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.rd-inner .wpcf7-form .btn {
        width: 100%;
    }
}


/*--------------------*/
/* - PHONE            */
/*--------------------*/
@media (max-width: 767px) {
    body.rd-inner main .btn {
        height: 48px;
        font-size: 14px;
    }

    body.rd-inner .rd-tabs > li {
        height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }

    body.rd-inner .popup-content {
        padding: 15px;
    }

    body.rd-inner .popup-content .popup-align {
        padding: 70px 20px 24px;
    }

    body.rd-inner .popup-content .btn-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}