/*
 * RACH Connect – styles for the GP & RACH Connect program pages.
 * Values are taken 1:1 from the Figma file (CESPHN – GP - RACH Connect).
 */

.rachc-wrapper {
    --rachc-navy: #052440;
    --rachc-ink: #122447;
    --rachc-body: #444;
    --rachc-grey: #6b6f75;
    --rachc-placeholder: #aeb1b7;
    --rachc-border: #cbced3;
    --rachc-line: #e7e9ed;
    --rachc-bg: #f6f7f9;
    --rachc-teal: #008996;
    --rachc-teal-light: #dcf3f4;
    --rachc-orange: #ed6b0a;
    --rachc-tab-orange: #f57a21;
    --rachc-blue: #1489bd;
    --rachc-green: #25904e;
    --rachc-red: #c12121;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--rachc-bg);
    color: var(--rachc-body);
    line-height: normal;
}

.rachc-wrapper *,
.rachc-wrapper *::before,
.rachc-wrapper *::after { box-sizing: border-box; }

.rachc-wrapper h1, .rachc-wrapper h2, .rachc-wrapper h3, .rachc-wrapper p, .rachc-wrapper ul, .rachc-wrapper fieldset, .rachc-wrapper legend {
    margin: 0;
    padding: 0;
    border: 0;
}
.rachc-wrapper ul { list-style: none; }
.rachc-wrapper a { text-decoration: none; }

/* Icons inherit color via currentColor */
.rachc-icon-16 { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.rachc-icon-20 { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.rachc-icon-24 { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.rachc-icon-26 { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.rachc-icon-32 { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.rachc-icon-48 { width: 48px; height: 48px; flex-shrink: 0; display: block; }

.rachc-divider { height: 1px; width: 100%; background-color: var(--rachc-line); }

/* Matches the theme's .container so sections align with the site header */
.rachc-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1264px) {
    .rachc-container { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
    .rachc-container { padding-left: 26px; padding-right: 26px; }
}
@media (max-width: 375px) {
    .rachc-container { padding-left: 22px; padding-right: 22px; }
}

/* ------------------------------------------------------------ buttons */
.rachc-btn {
    display: inline-block;
    background-color: var(--rachc-teal);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.rachc-btn:hover { filter: brightness(1.08); color: #fff; }
.rachc-btn--sm { font-size: 13px; padding: 10px 20px; }
.rachc-btn--block { display: block; width: 100%; text-align: center; padding: 13px 32px; }
.rachc-btn--outline {
    background-color: #fff;
    border: 1.5px solid var(--rachc-teal);
    color: var(--rachc-teal);
}
.rachc-btn--outline:hover { color: var(--rachc-teal); filter: none; background-color: var(--rachc-teal-light); }

/* ------------------------------------------------------------ nav strip */
.rachc-nav-strip {
    background-color: #fff;
    padding: 16px 0;
}
.rachc-nav-strip .rachc-container { display: flex; flex-direction: column; gap: 10px; }
.rachc-nav-strip a { color: var(--rachc-navy); font-size: 13px; }
.rachc-nav-strip a:hover { text-decoration: underline; }
.rachc-breadcrumbs, .rachc-breadcrumbs span { color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-breadcrumbs a, .rachc-breadcrumbs span { display: inline; }
.rachc-breadcrumbs .carrot { display: inline-block; margin: 0 6px; color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-wrapper .rachc-breadcrumbs .breadcrumb_last { color: var(--rachc-navy); font-weight: 600; text-decoration: none !important; }

/* ------------------------------------------------------------ page header (register) */
.rachc-page-header { display: flex; align-items: stretch; }
.rachc-page-header__accent { width: 4px; flex-shrink: 0; }
.rachc-page-header__band {
    flex: 1;
    background-color: var(--rachc-navy);
    padding: 40px 0;
    min-width: 0;
}
.rachc-page-header__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rachc-page-header__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.rachc-page-header__title { color: #fff; font-size: 34px; font-weight: 700; }
.rachc-page-header__intro { color: #ccdee5; font-size: 15px; line-height: 24px; }

/* ------------------------------------------------------------ register layout */
.rachc-content-area { padding: 48px 0; }
.rachc-content-cols { display: flex; gap: 32px; align-items: flex-start; }
.rachc-form-col { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ form card */
.rachc-form-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    padding: 40px 48px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}
.rachc-hp { position: absolute !important; left: -9999px !important; opacity: 0; }

.rachc-form-error {
    background-color: #fdecec;
    border: 1px solid var(--rachc-red);
    color: var(--rachc-red);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 20px;
}
.rachc-form-error ul { margin-top: 6px; padding-left: 18px; list-style: disc; }

.rachc-sec-hdr { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rachc-sec-hdr p { color: var(--rachc-ink); font-size: 15px; font-weight: 700; }

.rachc-form-note { color: var(--rachc-grey); font-size: 13px; line-height: 20px; }

.rachc-row2 { display: flex; gap: 24px; width: 100%; }
.rachc-row2 .rachc-field { flex: 1; min-width: 0; }

.rachc-field { display: flex; flex-direction: column; gap: 6px; }
.rachc-field--full { width: 100%; }

.rachc-label {
    color: var(--rachc-ink);
    font-size: 13px;
    font-weight: 600;
    display: block;
}
.rachc-req { color: var(--rachc-red); }

.rachc-input {
    height: 44px;
    width: 100%;
    background-color: #fff;
    border: 1.5px solid var(--rachc-border);
    border-radius: 4px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rachc-ink);
}
.rachc-textarea {
    width: 100%;
    background-color: #fff;
    border: 1.5px solid var(--rachc-border);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rachc-ink);
    resize: vertical;
}
.rachc-input::placeholder, .rachc-textarea::placeholder { color: var(--rachc-placeholder); opacity: 1; }
.rachc-input:focus, .rachc-textarea:focus { outline: none; border-color: var(--rachc-teal); }
.rachc-field--error .rachc-input, .rachc-field--error .rachc-textarea { border-color: var(--rachc-red); }

/* radio / checkbox groups */
.rachc-cb-group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rachc-cb-group legend { margin-bottom: 8px; }
.rachc-cb-rows { display: grid; gap: 8px 24px; }
.rachc-cb-rows--2col { grid-template-columns: 1fr 1fr; }
.rachc-cb-rows--1col { grid-template-columns: 1fr; }
.rachc-cb-rows--colflow { grid-auto-flow: column; grid-template-rows: repeat(var(--rachc-rows, 1), auto); }

.rachc-cb { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rachc-cb span { color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-cb input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    background-color: #fff;
    border: 1.5px solid var(--rachc-border);
    cursor: pointer;
    display: grid;
    place-content: center;
}
.rachc-cb input[type="checkbox"] { border-radius: 3px; }
.rachc-cb input[type="radio"] { border-radius: 8px; }
.rachc-cb input:checked { border-color: var(--rachc-accent, var(--rachc-teal)); }
.rachc-cb input[type="radio"]:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rachc-accent, var(--rachc-teal));
}
.rachc-cb input[type="checkbox"]:checked {
    background-color: var(--rachc-accent, var(--rachc-teal));
}
.rachc-cb input[type="checkbox"]:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 4%, 39% 73%);
}

/* banners */
.rachc-info-banner {
    background-color: var(--rachc-teal-light);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    color: var(--rachc-teal);
}
.rachc-info-banner p { color: var(--rachc-ink); font-size: 13px; line-height: 20px; flex: 1; }
.rachc-info-banner--sidebar { padding: 14px 16px; }

.rachc-privacy-note {
    background-color: var(--rachc-bg);
    border: 1px solid var(--rachc-line);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    color: var(--rachc-grey);
}
.rachc-privacy-note p { color: var(--rachc-body); font-size: 13px; line-height: 20px; flex: 1; }

.rachc-declaration {
    background-color: var(--rachc-teal-light);
    border-radius: 6px;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    cursor: pointer;
}
.rachc-declaration p { color: var(--rachc-ink); font-size: 13px; line-height: 20px; flex: 1; }
.rachc-declaration input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    background-color: #fff;
    border: 2px solid var(--rachc-accent, var(--rachc-teal));
    border-radius: 3px;
    cursor: pointer;
    display: grid;
    place-content: center;
}
.rachc-declaration input:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--rachc-accent, var(--rachc-teal));
    clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 4%, 39% 73%);
}

.rachc-btn-row { display: flex; gap: 12px; }
.rachc-fine-print { color: var(--rachc-grey); font-size: 12px; }

/* ------------------------------------------------------------ register sidebar */
.rachc-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }

.rachc-tips-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .07);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rachc-tips-card__head { display: flex; gap: 12px; align-items: center; color: var(--rachc-ink); }
.rachc-tips-card__title { color: var(--rachc-ink); font-size: 14px; font-weight: 700; }
.rachc-tip { display: flex; gap: 8px; align-items: flex-start; }
.rachc-tip__bullet { font-weight: 700; font-size: 13px; }
.rachc-tip p { color: var(--rachc-body); font-size: 13px; line-height: 20px; flex: 1; }

.rachc-about-card {
    background-color: var(--rachc-ink);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rachc-about-card__title { color: #fff; font-size: 14px; font-weight: 700; }
.rachc-about-card__text { color: #ccdee5; font-size: 13px; line-height: 20px; }
.rachc-about-card__link { color: var(--rachc-teal); font-size: 13px; font-weight: 600; }
.rachc-about-card__link:hover { text-decoration: underline; color: var(--rachc-teal); }

/* ------------------------------------------------------------ landing */
.rachc-hero {
    background-color: var(--rachc-navy);
    padding: 56px 0;
}
.rachc-hero__inner { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.rachc-wrapper .rachc-hero__eyebrow { color: #fff; font-size: 12px; opacity: .55; }
.rachc-wrapper .rachc-hero__title { font-size: clamp(28px, 3.1vw, 39px); line-height: 1.2; font-weight: 700; color: #fff; }
.rachc-wrapper .rachc-hero__sub { color: #fff; font-size: 22px; line-height: 32px; font-weight: 500; opacity: .9; }

.rachc-cards-section { background-color: #fff; padding: 48px 0; }
.rachc-cta-cards { display: flex; gap: 17px; align-items: stretch; }
.rachc-cta-card {
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .09));
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rachc-cta-card__strip { height: 5px; border-radius: 8px 8px 0 0; }
.rachc-cta-card__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; flex: 1; }
.rachc-cta-card__title { color: var(--rachc-ink); font-size: 20px; line-height: 28px; font-weight: 700; }
.rachc-cta-card__text { color: var(--rachc-body); font-size: 14px; line-height: 22px; }
.rachc-cta-card__text a { color: var(--rachc-teal); text-decoration: underline; font-weight: 600; }
.rachc-cta-card__text a:hover { color: var(--rachc-ink); }
.rachc-cta-card__body .rachc-btn--sm { margin-top: auto; }

.rachc-how { background-color: var(--rachc-bg); padding: 56px 0; }
.rachc-how__inner { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.rachc-how__title { color: var(--rachc-ink); font-size: 28px; font-weight: 700; }
.rachc-how__sub { color: var(--rachc-body); font-size: 16px; line-height: 26px; }

.rachc-steps { display: flex; gap: 20px; width: 100%; align-items: stretch; }
.rachc-step {
    background-color: #fff;
    border-radius: 8px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .07));
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.rachc-step__top { display: flex; align-items: flex-start; }
.rachc-step__circle {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    display: grid;
    place-content: center;
    color: #fff;
}
.rachc-step__badge {
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 2px solid;
    border-radius: 10px;
    display: grid;
    place-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-left: -6px;
}
.rachc-step__title { color: var(--rachc-ink); font-size: 15px; font-weight: 700; }
.rachc-step__text { color: var(--rachc-body); font-size: 13px; line-height: 20px; }

.rachc-cta-strip {
    background-color: var(--rachc-teal-light);
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.rachc-cta-strip p { color: var(--rachc-ink); font-size: 15px; flex: 1; }

/* ------------------------------------------------------------ listings */
.rachc-listings__header { background-color: var(--rachc-ink); padding: 40px 0; }
.rachc-listings__header-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.rachc-listings__ht { display: flex; flex-direction: column; gap: 8px; }
.rachc-listings__ht h1 { color: #fff; font-size: 32px; font-weight: 700; }
.rachc-listings__ht p { color: #ccdee5; font-size: 15px; line-height: 24px; }

.rachc-tabs {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    padding-top: 40px;
}
.rachc-tabs__inner { display: flex; }
.rachc-tab { display: flex; flex-direction: column; align-items: center; padding: 0 24px; color: var(--rachc-grey); font-size: 14px; }
.rachc-tab span:first-child { padding-bottom: 10px; }
.rachc-tab.is-active { font-weight: 600; }
.rachc-tab__ul { height: 3px; width: 100%; background-color: transparent; }
.rachc-tab:not(.is-active):hover { color: var(--rachc-ink); }

.rachc-listings__content { padding: 32px 0; display: flex; flex-direction: column; gap: 24px; }

.rachc-search-bar {
    background-color: #fff;
    border-radius: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .05));
    padding: 12px 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}
.rachc-search {
    background-color: var(--rachc-bg);
    border: 1px solid var(--rachc-line);
    border-radius: 6px;
    height: 40px;
    width: 360px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--rachc-grey);
}
.rachc-search input {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--rachc-ink);
    width: 100%;
    outline: none;
}
.rachc-search input::placeholder { color: var(--rachc-placeholder); opacity: 1; }
.rachc-dropdown {
    flex: 1;
    min-width: 0;
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rachc-grey);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6f75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.rachc-search-bar__go {
    background-color: var(--rachc-teal);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}
.rachc-search-bar__clear { color: #006b75; font-size: 12px; padding: 0 12px; white-space: nowrap; }
.rachc-search-bar__clear--mobile { display: none; }

/* Wrapper around the filter dropdowns; on desktop it is layout-transparent
   so the search bar reads as one row, on mobile it collapses. */
.rachc-search-bar__filters { display: contents; }
.rachc-filter-row { display: none; }
.rachc-filters-toggle {
    background-color: var(--rachc-bg);
    border: 1px solid var(--rachc-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rachc-body);
    cursor: pointer;
}

.rachc-count-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.rachc-count-row p { color: var(--rachc-grey); }
.rachc-count-row__sort { color: #006b75; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.rachc-count-row__sort select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #006b75;
    cursor: pointer;
    padding-right: 14px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23006b75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

.rachc-main-row { display: flex; gap: 24px; align-items: flex-start; }
.rachc-list-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* listing card */
.rachc-card {
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 8px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .07));
    overflow: hidden;
    width: 100%;
}
.rachc-card__inner { display: flex; align-items: stretch; }
.rachc-card__accent { width: 4px; flex-shrink: 0; }
.rachc-card__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.rachc-card__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.rachc-tag {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 4px;
}
.rachc-tag--new { background-color: var(--rachc-green); }
.rachc-tag--urgent { background-color: var(--rachc-orange); }
.rachc-card__title { color: var(--rachc-ink); font-size: 17px; line-height: 24px; font-weight: 700; }
.rachc-card__title a { color: inherit; }
.rachc-card__title a:hover { text-decoration: underline; }
.rachc-card__subline { color: var(--rachc-grey); font-size: 13px; }
.rachc-card__name-row { display: flex; gap: 12px; align-items: center; }
.rachc-card__name-col { display: flex; flex-direction: column; gap: 2px; }
.rachc-card__name-col .rachc-card__subline { font-size: 12px; }
.rachc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--rachc-teal-light);
    color: var(--rachc-teal);
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-content: center;
    flex-shrink: 0;
}
.rachc-pills { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.rachc-pill {
    background-color: var(--rachc-bg);
    border-radius: 14px;
    padding: 6px 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--rachc-grey);
}
.rachc-pill span { color: var(--rachc-body); font-size: 12px; white-space: nowrap; }
.rachc-card__excerpt { color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-card__btn-row { display: flex; justify-content: flex-start; padding: 8px 0; }

.rachc-empty {
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 8px;
    padding: 40px 24px;
    text-align: center;
    color: var(--rachc-grey);
    font-size: 14px;
}

/* pagination */
.rachc-pagination {
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 6px;
    padding: 10px 20px;
    display: inline-flex;
    gap: 4px;
    align-self: flex-start;
}
.rachc-page-btn {
    display: inline-block;
    background-color: var(--rachc-bg);
    border: 1px solid var(--rachc-line);
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--rachc-grey);
    font-size: 13px;
}
.rachc-page-btn.is-current { color: #fff; font-weight: 700; border: 0; }

/* refine sidebar */
.rachc-refine {
    width: 264px;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .06));
    overflow: hidden;
}
.rachc-refine__head {
    background-color: var(--rachc-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 20px;
}
.rachc-refine__group { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.rachc-refine__label { color: var(--rachc-ink); font-size: 12px; font-weight: 600; }
.rachc-refine__cb { display: flex; gap: 8px; align-items: center; color: var(--rachc-body); font-size: 13px; }
.rachc-refine__box {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 1.5px solid var(--rachc-placeholder);
    border-radius: 2px;
    flex-shrink: 0;
    display: grid;
    place-content: center;
}
.rachc-refine__cb.is-checked .rachc-refine__box { border: 2px solid var(--rachc-blue); }
.rachc-refine__cb.is-checked .rachc-refine__box::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--rachc-blue);
    clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 4%, 39% 73%);
}
.rachc-refine__cb:hover { color: var(--rachc-ink); }

/* ------------------------------------------------------------ detail */
.rachc-detail__header { background-color: var(--rachc-ink); padding: 40px 0; }
.rachc-detail__header-inner h1 { color: #fff; font-size: 32px; font-weight: 700; }

.rachc-detail__content { padding: 32px 0; }
.rachc-main-row--detail { justify-content: space-between; }

.rachc-detail-card {
    background-color: #fff;
    border: 1px solid var(--rachc-line);
    border-radius: 8px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .07));
    flex: 1;
    min-width: 0;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 32px;
}
.rachc-detail-card__head { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.rachc-detail-card__section { padding: 0 27px; display: flex; flex-direction: column; gap: 17px; }
.rachc-detail-card__sec-title { color: var(--rachc-ink); font-size: 15px; font-weight: 700; }
.rachc-detail-card__text { color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-detail-card__text p { margin: 0 0 8px; }
.rachc-detail-card__text p:last-child { margin-bottom: 0; }

.rachc-kv { display: flex; flex-direction: column; gap: 8px; }
.rachc-kv__row { display: flex; align-items: center; }
.rachc-kv__label { width: 370px; flex-shrink: 0; color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-kv__value { color: var(--rachc-body); font-size: 13px; line-height: 20px; }

.rachc-checks { display: flex; flex-direction: column; gap: 9px; }
.rachc-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-check { color: var(--rachc-teal); width: 17px; height: 20px; margin-top: 0; }

.rachc-detail__side { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.rachc-side-card {
    background-color: #fff;
    border-radius: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .06));
    overflow: hidden;
}
.rachc-side-card__head {
    background-color: var(--rachc-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: 8px 8px 0 0;
}
.rachc-side-card__body { padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.rachc-side-card__body--cta { gap: 16px; }
.rachc-side-card__body--cta p { color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-summary-row { display: flex; gap: 8px; align-items: flex-start; color: var(--rachc-grey); }
.rachc-summary-row__label { width: 96px; flex-shrink: 0; color: var(--rachc-body); font-size: 13px; line-height: 20px; }
.rachc-summary-row__value { color: var(--rachc-body); font-size: 13px; line-height: 20px; flex: 1; min-width: 0; }

.rachc-help-banner {
    background-color: #d7e9ea;
    border-radius: 8px;
    padding: 20px 15px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.rachc-help-banner__icon { width: 38px; height: 38px; flex-shrink: 0; display: block; color: #003057; }
.rachc-help-banner__title { color: #003057; font-size: 14px; font-weight: 700; }
.rachc-help-banner__text { color: #003057; font-size: 13px; line-height: 20px; }
.rachc-help-banner__text a { color: #1aaab3; }
.rachc-help-banner__text a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ confirmed */
.rachc-success-header {
    background-color: #0f4d31;
    padding: 40px 0;
}
.rachc-success-header__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rachc-success-header__icon {
    width: 64px;
    height: 64px;
    border-radius: 30px;
    background-color: #e5f6ea;
    color: #0f4d31;
    display: grid;
    place-content: center;
    flex-shrink: 0;
}
.rachc-success-header__text { padding: 0 24px; display: flex; flex-direction: column; gap: 6px; }
.rachc-success-header__text h1 { color: #fff; font-size: 28px; font-weight: 700; }
.rachc-success-header__text p { color: #ccebd9; font-size: 15px; line-height: 24px; }

.rachc-confirmed__content { padding: 56px 0; display: flex; justify-content: center; }
.rachc-confirm-card {
    background-color: #fff;
    border-radius: 12px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .09));
    padding: 40px 48px;
    width: 700px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
.rachc-confirm-card__title { color: var(--rachc-ink); font-size: 18px; font-weight: 700; }

.rachc-next-step { display: flex; gap: 16px; align-items: flex-start; }
.rachc-next-step__icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--rachc-teal-light);
    color: var(--rachc-teal);
    display: grid;
    place-content: center;
    flex-shrink: 0;
}
.rachc-next-step__title { color: var(--rachc-ink); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.rachc-next-step__text { color: var(--rachc-body); font-size: 13px; line-height: 20px; }

.rachc-ref-box {
    background-color: var(--rachc-teal-light);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}
.rachc-ref-box__label { color: var(--rachc-grey); font-size: 12px; margin-bottom: 4px; }
.rachc-ref-box__number { color: var(--rachc-ink); font-size: 18px; font-weight: 700; }
.rachc-copy-btn {
    background-color: #fff;
    border: 1px solid var(--rachc-teal);
    border-radius: 5px;
    padding: 8px 14px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--rachc-teal);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ------------------------------------------------------------ popup */
.rachc-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(5, 18, 33, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.rachc-modal-overlay[hidden] { display: none; }
.rachc-modal {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    padding: 32px;
    width: 560px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}
.rachc-modal__icon {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    background-color: var(--rachc-teal-light);
    color: var(--rachc-teal);
    display: grid;
    place-content: center;
}
.rachc-modal__title { color: var(--rachc-ink); font-size: 20px; line-height: 26px; font-weight: 700; }
.rachc-modal__text { color: var(--rachc-body); font-size: 14px; line-height: 22px; }
.rachc-modal__note {
    background-color: var(--rachc-teal-light);
    border-radius: 6px;
    padding: 10px 16px;
    color: var(--rachc-ink);
    font-size: 12px;
    line-height: 18px;
    width: 100%;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1320px) {
    .rachc-content-cols { flex-direction: column; }
    .rachc-form-col { width: 100%; }
    .rachc-sidebar { width: 100%; }
    .rachc-cta-cards { flex-wrap: wrap; }
}

@media (max-width: 1100px) {
    .rachc-main-row { flex-direction: column-reverse; }
    .rachc-main-row--detail { flex-direction: column; }
    .rachc-refine, .rachc-detail__side { width: 100%; }
    .rachc-steps { flex-wrap: wrap; }
    .rachc-step { flex: 1 1 40%; }
    .rachc-search { width: 100%; }

    /* Folded filters (per the mobile design): search input + "Filters ▾" /
       "Clear ✕" row; dropdowns and Refine Results hidden until toggled. */
    .rachc-search-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .rachc-filter-row { display: flex; justify-content: space-between; align-items: center; }
    .rachc-search-bar__clear { display: none; }
    .rachc-search-bar__clear--mobile { display: inline; padding: 0; }
    .rachc-search-bar__filters { display: none; }
    .rachc-refine { display: none; }
    .rachc-listings.rachc-filters-open .rachc-search-bar__filters {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .rachc-listings.rachc-filters-open .rachc-search-bar__filters .rachc-search-bar__clear { display: none; }
    .rachc-listings.rachc-filters-open .rachc-refine { display: block; }
}

@media (max-width: 768px) {
    .rachc-tabs { padding-top: 24px; }
    .rachc-tabs__inner { overflow-x: auto; scrollbar-width: none; }
    .rachc-tabs__inner::-webkit-scrollbar { display: none; }
    .rachc-tab { padding: 0 12px; white-space: nowrap; }
    .rachc-cta-cards { flex-direction: column; }

    .rachc-hero__title { font-size: 32px; }
    .rachc-page-header__title { font-size: 26px; }
    .rachc-form-card { padding: 24px 20px 32px; }
    .rachc-row2 { flex-direction: column; }
    .rachc-cb-rows--2col { grid-template-columns: 1fr; }
    .rachc-cb-rows--colflow { grid-auto-flow: row; grid-template-rows: none; }
    .rachc-steps { flex-direction: column; }
    .rachc-step { flex: 1 1 100%; }
    .rachc-cta-strip { flex-direction: column; align-items: flex-start; }
    .rachc-listings__header-inner { flex-direction: column; }
    .rachc-kv__label { width: 45%; }
    .rachc-success-header { flex-direction: column; gap: 16px; text-align: center; }
    .rachc-success-header__text { align-items: center; }
    .rachc-confirm-card { padding: 28px 20px; }
    .rachc-btn-row { flex-wrap: wrap; }
}
