/* ==========================================================================
   saipmarket-ui.css — institutional layout layer
   Loaded AFTER theme-saipmarket.css (which holds the tokens + the legacy
   t26-* components still used by the member dashboard).
   Visual language modelled on saip.gov.sa: government top strip, white nav
   with a solid green active tab, image hero with an overlapping search card,
   flat bordered cards with small radii, and a deep-green multi-column footer.
   ========================================================================== */

:root {
    --saip-radius-sm: 6px;
    --saip-radius: 10px;
    --saip-radius-lg: 16px;
    --saip-container: 1240px;
    --saip-gutter: clamp(1rem, 4vw, 3rem);
    --saip-ring: 0 0 0 3px rgba(7, 148, 85, 0.18);
    --saip-elev-1: 0 1px 2px rgba(16, 24, 40, 0.05);
    --saip-elev-2: 0 4px 12px rgba(7, 77, 49, 0.07);
    --saip-elev-3: 0 12px 32px rgba(7, 77, 49, 0.12);
    --saip-header-h: 76px;
}

html,
body {
    font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
    background: var(--t26-bg);
    color: var(--t26-text);
    scroll-behavior: smooth;
}

body.saip-body {
    display: block;
    min-height: 100vh;
}

.saip-container {
    width: 100%;
    max-width: var(--saip-container);
    margin-inline: auto;
    padding-inline: var(--saip-gutter);
}

.saip-main {
    display: block;
    min-height: 50vh;
}

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.saip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--saip-radius);
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.saip-btn i {
    font-size: 0.9em;
}

.saip-btn--primary {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.saip-btn--primary:hover {
    background: var(--saip-green-700);
    border-color: var(--saip-green-700);
    color: #fff;
}

.saip-btn--outline {
    background: transparent;
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
}

.saip-btn--outline:hover {
    background: var(--saip-green-50);
    color: var(--saip-green-700);
}

.saip-btn--neutral {
    background: #fff;
    border-color: var(--t26-border);
    color: var(--t26-text);
}

.saip-btn--neutral:hover {
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
}

.saip-btn--onDark {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.saip-btn--onDark:hover {
    background: #fff;
    border-color: #fff;
    color: var(--saip-green-900);
}

.saip-btn--white {
    background: #fff;
    border-color: #fff;
    color: var(--saip-green-700);
}

.saip-btn--white:hover {
    background: var(--saip-green-50);
    color: var(--saip-green-900);
}

.saip-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.saip-btn--block {
    width: 100%;
}

.saip-btn:focus-visible {
    outline: none;
    box-shadow: var(--saip-ring);
}

/* ==========================================================================
   2. Government top strip
   ========================================================================== */

.saip-topbar {
    background: var(--saip-gray-50);
    border-bottom: 1px solid var(--t26-border);
    font-size: 0.8rem;
    color: var(--saip-gray-600);
}

.saip-topbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 38px;
    flex-wrap: wrap;
}

.saip-topbar__note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.saip-topbar__note i {
    color: var(--saip-green-600);
}

.saip-topbar__links {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.saip-topbar a {
    color: var(--saip-gray-600);
    text-decoration: none;
}

.saip-topbar a:hover {
    color: var(--saip-green-700);
}

.saip-topbar__sep {
    width: 1px;
    height: 14px;
    background: var(--t26-border);
}

/* ==========================================================================
   3. Header + navigation
   ========================================================================== */

.saip-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fff;
    border-bottom: 1px solid var(--t26-border);
    box-shadow: var(--saip-elev-1);
}

.saip-header__inner {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    min-height: var(--saip-header-h);
}

.saip-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    padding-block: 0.75rem;
}

.saip-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: var(--saip-radius-sm);
    background: #fff;
}

.saip-brand__text strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--t26-text);
}

.saip-brand__text span {
    display: block;
    font-size: 0.75rem;
    color: var(--saip-gray-600);
}

.saip-nav {
    margin-inline-start: auto;
    display: flex;
    align-items: stretch;
}

.saip-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 1.15rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--t26-text);
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}

.saip-nav a:hover {
    color: var(--saip-green-700);
    background: var(--saip-green-50);
}

/* solid green active tab, flush to the header edges — the SAIP signature */
.saip-nav a.is-active {
    background: var(--saip-green-600);
    color: #fff;
}

.saip-nav a.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    background: var(--saip-green-900);
}

.saip-nav .saip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-inline-start: 0.4rem;
    border-radius: 999px;
    background: var(--saip-green-600);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.saip-nav a.is-active .saip-badge {
    background: #fff;
    color: var(--saip-green-700);
}

.saip-header__tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
}

.saip-iconbtn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-sm);
    background: #fff;
    color: var(--t26-text);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.saip-iconbtn:hover {
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
    background: var(--saip-green-50);
}

.saip-navtoggle {
    display: none;
}

/* ==========================================================================
   4. Hero + overlapping search card
   ========================================================================== */

.saip-hero {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(115deg, rgba(7, 77, 49, 0.95) 0%, rgba(6, 118, 71, 0.88) 55%, rgba(7, 148, 85, 0.78) 100%),
        radial-gradient(120% 140% at 85% 10%, #0d6b46 0%, #05341f 70%);
    color: #fff;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
    overflow: hidden;
}

/* faint geometric pattern, echoing the SAIP hero imagery */
.saip-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px),
        linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.05) 45% 55%, transparent 55%);
    background-size: 26px 26px, 180px 180px;
    opacity: 0.7;
}

.saip-hero__inner {
    position: relative;
    text-align: center;
    max-width: 820px;
    margin-inline: auto;
}

.saip-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(4px);
}

.saip-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.saip-hero p {
    margin: 1rem auto 0;
    max-width: 640px;
    font-size: clamp(0.98rem, 1.6vw, 1.15rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.86);
}

.saip-hero__actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* the search card overlaps the hero's bottom edge */
.saip-searchwrap {
    position: relative;
    z-index: 10;
    margin-top: clamp(-3.5rem, -5vw, -2.5rem);
}

.saip-search {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    box-shadow: var(--saip-elev-3);
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 2fr 1.2fr auto;
    gap: 0.85rem;
    align-items: end;
}

.saip-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.saip-field > span,
.saip-field > label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--saip-gray-600);
}

.saip-input,
.saip-select,
.saip-textarea {
    width: 100%;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius);
    background: #fff;
    color: var(--t26-text);
    padding: 0.8rem 0.95rem;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.saip-textarea {
    resize: vertical;
    min-height: 110px;
}

.saip-input:focus,
.saip-select:focus,
.saip-textarea:focus {
    outline: none;
    border-color: var(--saip-green-600);
    box-shadow: var(--saip-ring);
}

.saip-input::placeholder,
.saip-textarea::placeholder {
    color: var(--saip-gray-400);
}

/* ==========================================================================
   5. Stat band
   ========================================================================== */

.saip-statband {
    background: #fff;
    border-block: 1px solid var(--t26-border);
    margin-top: 3rem;
}

.saip-statband__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.saip-stat {
    padding: 1.75rem 1rem;
    text-align: center;
    border-inline-start: 1px solid var(--t26-border);
}

.saip-stat:first-child {
    border-inline-start: none;
}

.saip-stat b {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--saip-green-700);
    line-height: 1.2;
}

.saip-stat span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--saip-gray-600);
}

/* ==========================================================================
   6. Sections
   ========================================================================== */

.saip-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.saip-section--tint {
    background: var(--saip-gray-25);
    border-block: 1px solid var(--t26-border);
}

.saip-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.saip-section__head h2 {
    position: relative;
    margin: 0;
    padding-inline-start: 0.9rem;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: var(--t26-text);
}

/* green rule beside the section title */
.saip-section__head h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: 2px;
    background: var(--saip-green-600);
}

.saip-section__head p {
    margin: 0.5rem 0 0;
    color: var(--saip-gray-600);
    font-size: 0.95rem;
}

.saip-section__link {
    color: var(--saip-green-700);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.saip-section__link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   7. Category strip
   ========================================================================== */

.saip-catstrip {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.saip-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--t26-border);
    border-radius: 999px;
    background: #fff;
    color: var(--t26-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s ease;
}

.saip-cat:hover {
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
    background: var(--saip-green-50);
}

.saip-cat.is-active {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.saip-cat b {
    font-weight: 700;
}

/* ==========================================================================
   8. Brand cards
   ========================================================================== */

.saip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 1.25rem;
}

.saip-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.saip-card:hover {
    border-color: var(--saip-green-300);
    box-shadow: var(--saip-elev-2);
    transform: translateY(-2px);
}

.saip-card__media {
    position: relative;
    display: block;
    height: 190px;
    background: var(--saip-gray-50);
    border-bottom: 1px solid var(--t26-border);
    cursor: pointer;
}

.saip-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.1rem;
}

.saip-card__tag {
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-start: 0.7rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--saip-radius-sm);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--t26-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--saip-gray-600);
}

.saip-card__body {
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.saip-card__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--t26-text);
    line-height: 1.5;
}

.saip-card__meta {
    font-size: 0.83rem;
    color: var(--saip-gray-600);
}

.saip-card__foot {
    margin-top: auto;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--t26-border);
    background: var(--saip-gray-25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.saip-card__price {
    font-weight: 700;
    color: var(--saip-green-700);
    font-size: 0.98rem;
    white-space: nowrap;
}

.saip-card__price small {
    font-weight: 500;
    color: var(--saip-gray-600);
}

/* sold overlay */
.saip-card.is-sold .saip-card__media::after {
    content: attr(data-sold-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 77, 49, 0.62);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.saip-empty {
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--t26-border);
    border-radius: var(--saip-radius-lg);
    background: #fff;
    color: var(--saip-gray-600);
}

.saip-empty i {
    display: block;
    font-size: 2rem;
    color: var(--saip-gray-400);
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   9. Steps / services
   ========================================================================== */

.saip-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    counter-reset: saipstep;
}

.saip-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    padding: 1.75rem 1.5rem 1.5rem;
}

.saip-step__num {
    width: 46px;
    height: 46px;
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.saip-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.saip-step p {
    margin: 0;
    color: var(--saip-gray-600);
    font-size: 0.92rem;
    line-height: 1.8;
}

.saip-step::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--saip-green-600);
    border-start-start-radius: var(--saip-radius-lg);
    border-start-end-radius: var(--saip-radius-lg);
    opacity: 0;
    transition: opacity .2s ease;
}

.saip-step:hover::after {
    opacity: 1;
}

/* ==========================================================================
   10. CTA band
   ========================================================================== */

.saip-cta {
    background: linear-gradient(115deg, var(--saip-green-900), var(--saip-green-700));
    color: #fff;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.saip-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.saip-cta h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 700;
    color: #fff;
}

.saip-cta p {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

/* ==========================================================================
   11. Page head (inner pages)
   ========================================================================== */

.saip-pagehead {
    background: var(--saip-gray-25);
    border-bottom: 1px solid var(--t26-border);
    padding-block: 2rem 2.25rem;
}

.saip-pagehead--green {
    background: linear-gradient(115deg, var(--saip-green-900), var(--saip-green-700));
    border-bottom: none;
    color: #fff;
}

.saip-pagehead h1 {
    margin: 0.6rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 700;
}

.saip-pagehead--green h1 {
    color: #fff;
}

.saip-pagehead p {
    margin: 0.6rem 0 0;
    color: var(--saip-gray-600);
    font-size: 0.95rem;
    max-width: 70ch;
}

.saip-pagehead--green p {
    color: rgba(255, 255, 255, 0.85);
}

.saip-crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--saip-gray-600);
    flex-wrap: wrap;
}

.saip-crumbs a {
    color: var(--saip-green-700);
    text-decoration: none;
}

.saip-crumbs a:hover {
    text-decoration: underline;
}

.saip-crumbs li + li::before {
    content: "/";
    margin-inline-end: 0.45rem;
    color: var(--saip-gray-400);
}

.saip-pagehead--green .saip-crumbs,
.saip-pagehead--green .saip-crumbs a {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   12. Toolbar / filters (listing page)
   ========================================================================== */

.saip-toolbar {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1.5fr) auto auto;
    gap: 0.85rem;
    align-items: end;
    box-shadow: var(--saip-elev-1);
}

/* budget range: two boxes that read as a single control */
.saip-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
}

.saip-range .saip-input {
    padding-inline: 0.7rem;
    text-align: center;
    -moz-appearance: textfield;
}

.saip-range .saip-input::-webkit-outer-spin-button,
.saip-range .saip-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.saip-range__sep {
    color: var(--saip-gray-400);
    font-weight: 700;
    user-select: none;
}

/* chip summarising the budget currently applied */
.saip-activefilters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: -0.4rem 0 1.25rem;
}

.saip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--saip-green-50);
    border: 1px solid var(--saip-green-300);
    color: var(--saip-green-700);
    font-size: 0.86rem;
    font-weight: 700;
}

.saip-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(6, 118, 71, 0.12);
    color: var(--saip-green-700);
    text-decoration: none;
    transition: background .18s ease;
}

.saip-chip a:hover {
    background: rgba(6, 118, 71, 0.24);
}

.saip-activefilters__note {
    color: var(--saip-gray-600);
    font-size: 0.84rem;
}

.saip-empty__action {
    margin-top: 1.1rem;
}

.saip-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.75rem 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--t26-border);
}

.saip-resultbar strong {
    color: var(--saip-green-700);
}

.saip-resultbar span {
    color: var(--saip-gray-600);
    font-size: 0.92rem;
}

/* ==========================================================================
   13. Brand detail
   ========================================================================== */

.saip-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.saip-panel {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    overflow: hidden;
}

.saip-panel__head {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--t26-border);
    background: var(--saip-gray-25);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.saip-panel__head h2,
.saip-panel__head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.saip-panel__body {
    padding: 1.35rem;
}

.saip-figure {
    height: 340px;
    background: var(--saip-gray-50);
    border-bottom: 1px solid var(--t26-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saip-figure img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    padding: 1.5rem;
}

/* definition rows instead of a bordered table */
.saip-specs {
    width: 100%;
    border-collapse: collapse;
}

.saip-specs th,
.saip-specs td {
    padding: 0.9rem 1.35rem;
    text-align: start;
    font-size: 0.93rem;
    border-bottom: 1px solid var(--t26-border);
    vertical-align: top;
}

.saip-specs tr:last-child th,
.saip-specs tr:last-child td {
    border-bottom: none;
}

.saip-specs th {
    width: 42%;
    font-weight: 600;
    color: var(--saip-gray-600);
    background: var(--saip-gray-25);
}

.saip-specs td {
    font-weight: 600;
    color: var(--t26-text);
}

.saip-sticky {
    position: sticky;
    top: calc(var(--saip-header-h) + 1rem);
}

.saip-pricebox {
    padding: 1.35rem;
    background: linear-gradient(115deg, var(--saip-green-900), var(--saip-green-700));
    color: #fff;
}

.saip-pricebox span {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.saip-pricebox b {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.saip-facts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.saip-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid var(--t26-border);
    font-size: 0.92rem;
}

.saip-facts li:last-child {
    border-bottom: none;
}

.saip-facts .k {
    color: var(--saip-gray-600);
}

.saip-facts .v {
    font-weight: 700;
    text-align: end;
}

.saip-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.saip-share a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--t26-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--saip-gray-600);
    text-decoration: none;
    transition: all .18s ease;
}

.saip-share a:hover {
    border-color: var(--saip-green-600);
    background: var(--saip-green-50);
    color: var(--saip-green-700);
}

.saip-notice {
    display: flex;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    border: 1px solid var(--saip-green-100);
    color: var(--saip-green-900);
    font-size: 0.9rem;
    line-height: 1.7;
}

.saip-notice i {
    color: var(--saip-green-600);
    margin-top: 0.2rem;
}

/* ==========================================================================
   14. Status chips
   ========================================================================== */

.saip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.saip-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.saip-status--active {
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    border-color: var(--saip-green-100);
}

.saip-status--sold {
    background: #FFFAEB;
    color: #B54708;
    border-color: #FEDF89;
}

.saip-status--danger {
    background: #FEF3F2;
    color: #B42318;
    border-color: #FECDCA;
}

/* ==========================================================================
   15. Auth pages
   ========================================================================== */

.saip-authwrap {
    padding-block: clamp(2rem, 5vw, 3.5rem);
    background:
        linear-gradient(180deg, var(--saip-green-50) 0%, transparent 320px),
        var(--t26-bg);
    min-height: 60vh;
}

.saip-authcard {
    max-width: 980px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    box-shadow: var(--saip-elev-2);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.saip-authcard--single {
    max-width: 520px;
    grid-template-columns: 1fr;
}

.saip-authcard__form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.saip-authcard__form h2 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.saip-authcard__form > p {
    margin: 0 0 1.5rem;
    color: var(--saip-gray-600);
    font-size: 0.92rem;
}

.saip-authcard__aside {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(160deg, var(--saip-green-900), var(--saip-green-700));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
}

.saip-authcard__aside h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.saip-authcard__aside p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    line-height: 1.9;
}

.saip-authcard__aside ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
    display: grid;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
}

.saip-authcard__aside li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.saip-authcard__aside li i {
    color: var(--saip-green-300);
    margin-top: 0.25rem;
}

.saip-form {
    display: grid;
    gap: 1rem;
}

.saip-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.saip-form__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.saip-form__meta a {
    color: var(--saip-green-700);
    font-weight: 600;
    text-decoration: none;
}

.saip-form__meta a:hover {
    text-decoration: underline;
}

.saip-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--saip-gray-600);
    line-height: 1.7;
}

.saip-check input {
    margin-top: 0.28rem;
    accent-color: var(--saip-green-600);
    width: 16px;
    height: 16px;
}

.saip-check a {
    color: var(--saip-green-700);
    font-weight: 600;
}

/* ==========================================================================
   16. Content pages
   ========================================================================== */

.saip-prose {
    line-height: 2;
    color: var(--t26-text);
}

.saip-prose h1,
.saip-prose h2,
.saip-prose h3 {
    color: var(--t26-text);
    font-weight: 700;
    margin-top: 1.75rem;
}

.saip-prose p {
    margin: 0 0 1rem;
}

.saip-prose ul,
.saip-prose ol {
    padding-inline-start: 1.5rem;
    margin: 0 0 1rem;
}

.saip-prose li {
    margin-bottom: 0.4rem;
}

.saip-prose a {
    color: var(--saip-green-700);
}

.saip-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--saip-radius);
}

.saip-infogrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.saip-infocard {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.saip-infocard__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.saip-infocard h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.saip-infocard p {
    margin: 0;
    color: var(--saip-gray-600);
    font-size: 0.92rem;
    line-height: 1.8;
}

.saip-infocard__actions {
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.saip-footer {
    background: var(--saip-green-900);
    color: rgba(255, 255, 255, 0.78);
    border-top: 4px solid var(--saip-green-600);
    margin-top: 0;
}

.saip-footer__main {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.saip-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.saip-footer__brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--saip-radius-sm);
    padding: 4px;
}

.saip-footer__brand strong {
    color: #fff;
    font-size: 1.02rem;
}

.saip-footer p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.72);
}

.saip-footer h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.saip-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.saip-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color .18s ease;
}

.saip-footer a:hover {
    color: var(--saip-green-300);
}

.saip-footer__social {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.saip-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.saip-footer__social a:hover {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.saip-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-block: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
}

.saip-footer__legal b {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
}

/* ==========================================================================
   18. Modal / chat (kept compatible with the existing JS hooks)
   ========================================================================== */

.t26-modal .modal-card {
    border-radius: var(--saip-radius-lg);
    border: 1px solid var(--t26-border);
}

.t26-message-stream {
    border-radius: var(--saip-radius);
}

.t26-message {
    border-radius: var(--saip-radius);
}

/* ==========================================================================
   19. Dark mode
   ========================================================================== */

[data-theme="dark"] .saip-topbar {
    background: #04241A;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .saip-topbar a {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .saip-header,
[data-theme="dark"] .saip-card,
[data-theme="dark"] .saip-panel,
[data-theme="dark"] .saip-step,
[data-theme="dark"] .saip-toolbar,
[data-theme="dark"] .saip-search,
[data-theme="dark"] .saip-infocard,
[data-theme="dark"] .saip-authcard,
[data-theme="dark"] .saip-statband,
[data-theme="dark"] .saip-cat,
[data-theme="dark"] .saip-empty {
    background: var(--t26-surface);
    border-color: var(--t26-border);
    color: var(--t26-text);
}

[data-theme="dark"] .saip-chip {
    background: rgba(84, 192, 138, 0.14);
    border-color: rgba(84, 192, 138, 0.4);
    color: var(--saip-green-300);
}

[data-theme="dark"] .saip-chip a {
    background: rgba(84, 192, 138, 0.2);
    color: var(--saip-green-300);
}

[data-theme="dark"] .saip-range__sep {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .saip-brand__text strong,
[data-theme="dark"] .saip-nav a,
[data-theme="dark"] .saip-card__title,
[data-theme="dark"] .saip-section__head h2,
[data-theme="dark"] .saip-pagehead h1 {
    color: #fff;
}

[data-theme="dark"] .saip-card__media,
[data-theme="dark"] .saip-card__foot,
[data-theme="dark"] .saip-panel__head,
[data-theme="dark"] .saip-specs th,
[data-theme="dark"] .saip-pagehead,
[data-theme="dark"] .saip-section--tint {
    background: var(--t26-surface-alt);
    border-color: var(--t26-border);
}

[data-theme="dark"] .saip-input,
[data-theme="dark"] .saip-select,
[data-theme="dark"] .saip-textarea,
[data-theme="dark"] .saip-iconbtn,
[data-theme="dark"] .saip-btn--neutral {
    background: var(--t26-surface-alt);
    border-color: var(--t26-border);
    color: #fff;
}

[data-theme="dark"] .saip-step__num,
[data-theme="dark"] .saip-infocard__icon,
[data-theme="dark"] .saip-notice {
    background: rgba(84, 192, 138, 0.14);
    color: var(--saip-green-300);
    border-color: rgba(84, 192, 138, 0.25);
}

[data-theme="dark"] .saip-stat b,
[data-theme="dark"] .saip-card__price,
[data-theme="dark"] .saip-crumbs a,
[data-theme="dark"] .saip-section__link,
[data-theme="dark"] .saip-form__meta a {
    color: var(--saip-green-300);
}

[data-theme="dark"] .saip-authwrap {
    background: var(--t26-bg);
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .saip-detail {
        grid-template-columns: 1fr;
    }

    .saip-sticky {
        position: static;
    }
}

@media (max-width: 992px) {
    .saip-navtoggle {
        display: inline-flex;
    }

    .saip-nav {
        position: fixed;
        inset-inline: 0;
        top: var(--saip-header-h);
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid var(--t26-border);
        box-shadow: var(--saip-elev-3);
        padding: 0.5rem;
        gap: 0.15rem;
        transform: translateY(-130%);
        transition: transform .22s ease;
        max-height: calc(100vh - var(--saip-header-h));
        overflow-y: auto;
        z-index: 90;
    }

    [data-theme="dark"] .saip-nav {
        background: var(--t26-surface);
    }

    .saip-nav.is-open {
        transform: translateY(0);
    }

    .saip-nav a {
        padding: 0.85rem 1rem;
        border-radius: var(--saip-radius-sm);
    }

    .saip-nav a.is-active::after {
        display: none;
    }

    .saip-search,
    .saip-toolbar {
        grid-template-columns: 1fr;
    }

    .saip-range {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .saip-searchwrap {
        margin-top: -2rem;
    }

    .saip-topbar__note span {
        display: none;
    }

    .saip-authcard {
        grid-template-columns: 1fr;
    }

    .saip-authcard__aside {
        order: 2;
    }
}

@media (max-width: 640px) {
    .saip-brand__text span {
        display: none;
    }

    .saip-stat {
        border-inline-start: none;
        border-top: 1px solid var(--t26-border);
    }

    .saip-stat:first-child {
        border-top: none;
    }

    .saip-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.85rem;
    }

    .saip-card__media {
        height: 140px;
    }

    .saip-card__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .saip-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .saip-footer__main {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ==========================================================================
   21. Member area
   ========================================================================== */

.saip-account {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.saip-account__side {
    position: sticky;
    top: calc(var(--saip-header-h) + 1rem);
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    overflow: hidden;
}

.saip-account__user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--t26-border);
    background: var(--saip-gray-25);
}

.saip-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--saip-radius);
    background: var(--saip-green-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.saip-account__user strong {
    display: block;
    font-size: 0.95rem;
}

.saip-sidenav {
    display: grid;
    padding: 0.5rem;
}

.saip-sidenav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--saip-radius-sm);
    color: var(--t26-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

.saip-sidenav a i {
    width: 18px;
    text-align: center;
    color: var(--saip-gray-400);
}

.saip-sidenav a:hover {
    background: var(--saip-green-50);
    color: var(--saip-green-700);
}

.saip-sidenav a:hover i {
    color: var(--saip-green-600);
}

.saip-sidenav a.active {
    background: var(--saip-green-600);
    color: #fff;
}

.saip-sidenav a.active i {
    color: #fff;
}

.saip-sidenav .saip-badge {
    margin-inline-start: auto;
}

.saip-account__foot {
    padding: 0.9rem;
    border-top: 1px solid var(--t26-border);
}

.saip-account__main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

/* ---- metric cards ---- */
.saip-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}

.saip-metric {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.saip-metric__icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.saip-metric b {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ---- tabs ---- */
.saip-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0 1.35rem;
    border-bottom: 1px solid var(--t26-border);
    background: var(--saip-gray-25);
}

.saip-tabs button {
    border: none;
    background: transparent;
    color: var(--saip-gray-600);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.9rem 1rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .16s ease, border-color .16s ease;
}

.saip-tabs button:hover {
    color: var(--saip-green-700);
}

.saip-tabs button.active {
    color: var(--saip-green-700);
    border-bottom-color: var(--saip-green-600);
}

.saip-tabpanel {
    display: none;
}

.saip-tabpanel.active {
    display: block;
}

/* ---- data table ---- */
.saip-tablewrap {
    overflow-x: auto;
}

.saip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.saip-table th,
.saip-table td {
    padding: 0.85rem 1.35rem;
    text-align: start;
    border-bottom: 1px solid var(--t26-border);
    white-space: nowrap;
}

.saip-table thead th {
    background: var(--saip-gray-25);
    color: var(--saip-gray-600);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: none;
}

.saip-table tbody tr:last-child td {
    border-bottom: none;
}

.saip-table tbody tr:hover {
    background: var(--saip-green-50);
}

.saip-table td.is-clickable {
    cursor: pointer;
}

.saip-table .row-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.saip-table__empty {
    padding: 2.5rem 1.35rem;
    text-align: center;
    color: var(--saip-gray-600);
}

/* ---- toggle rows ---- */
.saip-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.saip-checkline {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--t26-border);
    cursor: pointer;
}

.saip-checklist li:last-child .saip-checkline {
    border-bottom: none;
}

.saip-checkline input {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--saip-green-600);
    flex: none;
}

.saip-checkline strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
}

.saip-checkline p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    color: var(--saip-gray-600);
    line-height: 1.7;
}

/* ---- copy field ---- */
.saip-copyfield {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.saip-copyfield input {
    flex: 1 1 240px;
    min-width: 0;
}

/* ---- pagination ---- */
.saip-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.saip-pagination a,
.saip-pagination span {
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-sm);
    background: #fff;
    color: var(--t26-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.saip-pagination a:hover {
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
    background: var(--saip-green-50);
}

.saip-pagination .is-current {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.saip-pagination .is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ---- skip link (accessibility) ---- */
.saip-skiplink {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 200;
    background: var(--saip-green-700);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--saip-radius) var(--saip-radius);
    font-weight: 600;
}

.saip-skiplink:focus {
    inset-inline-start: 1rem;
    color: #fff;
}

/* ---- member area, dark mode ---- */
[data-theme="dark"] .saip-account__side,
[data-theme="dark"] .saip-metric,
[data-theme="dark"] .saip-pagination a,
[data-theme="dark"] .saip-pagination span {
    background: var(--t26-surface);
    border-color: var(--t26-border);
    color: var(--t26-text);
}

[data-theme="dark"] .saip-account__user,
[data-theme="dark"] .saip-tabs,
[data-theme="dark"] .saip-table thead th {
    background: var(--t26-surface-alt);
}

[data-theme="dark"] .saip-sidenav a,
[data-theme="dark"] .saip-metric b {
    color: #fff;
}

[data-theme="dark"] .saip-table tbody tr:hover {
    background: rgba(84, 192, 138, 0.10);
}

@media (max-width: 992px) {
    .saip-account {
        grid-template-columns: 1fr;
    }

    .saip-account__side {
        position: static;
    }
}

/* ==========================================================================
   22. Small utilities (so the public pages do not need Bootstrap at all)
   ========================================================================== */

.saip-only-lg {
    display: none;
}

@media (min-width: 992px) {
    .saip-only-lg {
        display: inline-flex;
    }
}

/* ==========================================================================
   23. Legacy adapter
   The two long ad forms (new_ads / edit_ads) and a few older fragments still
   use the previous class names plus the Bootstrap grid. Rather than rewrite
   several hundred lines of form markup and risk breaking the field names,
   those classes are re-skinned here so they render in the new design system.
   ========================================================================== */

.t26-card,
.t26-metric-card,
.dashboard-widget,
.t26-message-thread,
.t26-conversation-panel,
.t26-account-sidebar {
    background: #fff;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    box-shadow: none;
    padding: 1.35rem;
}

.t26-account-heading,
.t26-account-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--t26-border);
}

.t26-account-heading h2,
.t26-account-heading h3,
.t26-account-pagehead h2,
.t26-account-pagehead h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---- buttons ---- */
.t26-button,
.custom-button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--saip-radius);
    padding: 0.7rem 1.35rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.t26-button.primary,
.custom-button,
.btn-primary {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.t26-button.primary:hover,
.custom-button:hover,
.btn-primary:hover {
    background: var(--saip-green-700);
    border-color: var(--saip-green-700);
    color: #fff;
}

.t26-button.ghost,
.btn-warning,
.btn-secondary {
    background: transparent;
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
}

.t26-button.ghost:hover,
.btn-warning:hover,
.btn-secondary:hover {
    background: var(--saip-green-50);
    border-color: var(--saip-green-600);
    color: var(--saip-green-700);
}

.btn-danger {
    background: #B42318;
    border-color: #B42318;
    color: #fff;
}

.btn-sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.84rem;
}

/* ---- form controls (Bootstrap + legacy) ---- */
.form-control,
.form-select,
.t26-form input,
.t26-form select,
.t26-form textarea {
    width: 100%;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius);
    background: #fff;
    color: var(--t26-text);
    padding: 0.8rem 0.95rem;
    font-family: inherit;
    font-size: 0.95rem;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus,
.form-select:focus,
.t26-form input:focus,
.t26-form select:focus,
.t26-form textarea:focus {
    border-color: var(--saip-green-600);
    box-shadow: var(--saip-ring);
    outline: none;
}

.form-label,
.t26-form label {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
    color: var(--t26-text);
}

.form-check-input:checked {
    background-color: var(--saip-green-600);
    border-color: var(--saip-green-600);
}

.form-check-input:focus {
    border-color: var(--saip-green-600);
    box-shadow: var(--saip-ring);
}

/* ---- tables / chips / alerts ---- */
.t26-table {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.t26-table th,
.t26-table td {
    border-bottom: 1px solid var(--t26-border);
    text-align: start;
    padding: 0.85rem 1rem;
}

.t26-table thead th {
    background: var(--saip-gray-25);
    color: var(--saip-gray-600);
    font-size: 0.82rem;
    font-weight: 700;
}

.t26-chip {
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.t26-alert {
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    border: 1px solid var(--saip-green-100);
    color: var(--saip-green-900);
}

.t26-metric-card strong,
.t26-stat span {
    color: var(--saip-green-700);
}

/* ---- Bootstrap modals in the new palette ---- */
.modal-content {
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--t26-border);
    background: var(--saip-gray-25);
}

/* ---- select2, used by the ad forms ---- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--t26-border) !important;
    border-radius: var(--saip-radius) !important;
    min-height: 46px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--saip-green-600) !important;
}

[data-theme="dark"] .t26-card,
[data-theme="dark"] .dashboard-widget,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .modal-content {
    background: var(--t26-surface);
    border-color: var(--t26-border);
    color: var(--t26-text);
}

/* ==========================================================================
   24. Long forms (add / edit an ad)
   ========================================================================== */

.saip-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    background: #fff;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.saip-stepper__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-inline-start: 1px solid var(--t26-border);
    color: var(--saip-gray-600);
}

.saip-stepper__item:first-child {
    border-inline-start: none;
}

.saip-stepper__num {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--saip-gray-50);
    color: var(--saip-gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--t26-border);
}

.saip-stepper__item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: inherit;
}

.saip-stepper__item.is-active {
    background: var(--saip-green-50);
    color: var(--saip-green-900);
}

.saip-stepper__item.is-active .saip-stepper__num {
    background: var(--saip-green-600);
    border-color: var(--saip-green-600);
    color: #fff;
}

.saip-stepper__item.is-done .saip-stepper__num {
    background: var(--saip-green-50);
    border-color: var(--saip-green-300);
    color: var(--saip-green-700);
}

/* ---- numbered section panel ---- */
.saip-fieldset {
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    background: #fff;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.saip-fieldset__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.35rem;
    background: var(--saip-gray-25);
    border-bottom: 1px solid var(--t26-border);
}

.saip-fieldset__head i {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--saip-radius-sm);
    background: var(--saip-green-50);
    color: var(--saip-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.saip-fieldset__head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.saip-fieldset__head p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--saip-gray-600);
}

.saip-fieldset__body {
    padding: 1.35rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.saip-fieldset__body .is-full {
    grid-column: 1 / -1;
}

.saip-req {
    color: #B42318;
    font-weight: 700;
}

.saip-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--saip-gray-600);
    line-height: 1.7;
}

.saip-hint--warn {
    color: #B54708;
}

/* ---- segmented radio / choice groups ---- */
.saip-choices {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.saip-choice {
    position: relative;
    display: inline-flex;
}

.saip-choice input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.saip-choice span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.62rem 1.15rem;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius);
    background: #fff;
    color: var(--t26-text);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all .16s ease;
    user-select: none;
}

.saip-choice input:hover + span {
    border-color: var(--saip-green-300);
    background: var(--saip-green-50);
}

.saip-choice input:checked + span {
    border-color: var(--saip-green-600);
    background: var(--saip-green-600);
    color: #fff;
}

.saip-choice input:focus-visible + span {
    box-shadow: var(--saip-ring);
}

.saip-choice input.is-invalid + span {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #B42318;
}

/* ---- checkbox card ---- */
.saip-checkcard {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius);
    background: var(--saip-gray-25);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.saip-checkcard:hover {
    border-color: var(--saip-green-300);
}

.saip-checkcard input {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--saip-green-600);
}

.saip-checkcard input:checked ~ span strong {
    color: var(--saip-green-700);
}

.saip-checkcard strong {
    display: block;
    font-size: 0.93rem;
    font-weight: 700;
}

.saip-checkcard p {
    margin: 0.25rem 0 0;
    font-size: 0.83rem;
    color: var(--saip-gray-600);
    line-height: 1.7;
}

.saip-checkcard.is-invalid {
    border-color: #FDA29B;
    background: #FEF3F2;
}

/* ---- file upload ---- */
.saip-file {
    position: relative;
    display: block;
    border: 1.5px dashed var(--t26-border);
    border-radius: var(--saip-radius);
    background: var(--saip-gray-25);
    padding: 1.35rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.saip-file:hover {
    border-color: var(--saip-green-600);
    background: var(--saip-green-50);
}

.saip-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.saip-file i {
    display: block;
    font-size: 1.4rem;
    color: var(--saip-green-600);
    margin-bottom: 0.45rem;
}

.saip-file b {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.saip-file small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--saip-gray-600);
}

.saip-file.has-file {
    border-style: solid;
    border-color: var(--saip-green-600);
    background: var(--saip-green-50);
}

.saip-file.is-invalid {
    border-color: #FDA29B;
    background: #FEF3F2;
}

/* ---- price preview ---- */
.saip-pricehint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--saip-radius);
    background: var(--saip-green-50);
    border: 1px solid var(--saip-green-100);
    font-size: 0.9rem;
    color: var(--saip-green-900);
}

.saip-pricehint b {
    font-size: 1.05rem;
}

/* ---- sticky action bar ---- */
.saip-formactions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.35rem;
    border: 1px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: var(--saip-elev-3);
}

.saip-formactions p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--saip-gray-600);
}

/* ---- invalid state for plain inputs ---- */
.saip-input.is-invalid,
.form-control.is-invalid,
.saip-textarea.is-invalid {
    border-color: #FDA29B;
    background: #FEF3F2;
}

/* ---- agreement card ---- */
.saip-agreement ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.7rem;
}

.saip-agreement li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--t26-text);
}

.saip-agreement li i {
    color: var(--saip-green-600);
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

[data-theme="dark"] .saip-stepper,
[data-theme="dark"] .saip-fieldset,
[data-theme="dark"] .saip-choice span,
[data-theme="dark"] .saip-formactions {
    background: var(--t26-surface);
    border-color: var(--t26-border);
    color: var(--t26-text);
}

[data-theme="dark"] .saip-fieldset__head,
[data-theme="dark"] .saip-file,
[data-theme="dark"] .saip-checkcard {
    background: var(--t26-surface-alt);
    border-color: var(--t26-border);
}

@media (max-width: 768px) {
    .saip-stepper {
        flex-direction: column;
    }

    .saip-stepper__item {
        border-inline-start: none;
        border-top: 1px solid var(--t26-border);
    }

    .saip-stepper__item:first-child {
        border-top: none;
    }

    .saip-formactions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   25. File upload preview
   ========================================================================== */

.saip-file {
    display: block;
    text-align: center;
}

.saip-file__empty i {
    display: block;
    font-size: 1.4rem;
    color: var(--saip-green-600);
    margin-bottom: 0.45rem;
}

.saip-file__empty b {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.saip-file__empty small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--saip-gray-600);
}

.saip-file__preview {
    display: none;
    align-items: center;
    gap: 0.9rem;
    text-align: start;
}

.saip-file.has-file .saip-file__empty {
    display: none;
}

.saip-file.has-file .saip-file__preview {
    display: flex;
}

.saip-file__thumb {
    width: 68px;
    height: 68px;
    flex: none;
    border-radius: var(--saip-radius-sm);
    border: 1px solid var(--t26-border);
    background: #fff;
    object-fit: contain;
    padding: 4px;
}

.saip-file__doc {
    width: 68px;
    height: 68px;
    flex: none;
    border-radius: var(--saip-radius-sm);
    border: 1px solid var(--t26-border);
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #B42318;
}

.saip-file__meta {
    min-width: 0;
    flex: 1;
}

.saip-file__meta b {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    word-break: break-all;
    line-height: 1.5;
}

.saip-file__meta small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--saip-gray-600);
}

.saip-file__change {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--saip-green-700);
}

.saip-file__badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--saip-gray-50);
    border: 1px solid var(--t26-border);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--saip-gray-600);
    margin-bottom: 0.3rem;
}

/* a file the user just picked reads as confirmed; the pre-existing one stays neutral */
.saip-file.has-file {
    border-style: solid;
    border-color: var(--saip-green-600);
    background: var(--saip-green-50);
}

.saip-file.has-file.is-current {
    border-color: var(--t26-border);
    background: var(--saip-gray-25);
}

.saip-file.has-file.is-current .saip-file__change {
    color: var(--saip-gray-600);
}

/* the validation scripts flag the input itself */
.saip-file:has(input.is-invalid) {
    border-color: #FDA29B;
    background: #FEF3F2;
}

[data-theme="dark"] .saip-file__thumb,
[data-theme="dark"] .saip-file__doc,
[data-theme="dark"] .saip-file__badge {
    background: var(--t26-surface);
    border-color: var(--t26-border);
}

/* ==========================================================================
   26. "Load more" — button state + card entrance
   ========================================================================== */

.saip-loadmore {
    margin-top: 2.5rem;
    text-align: center;
}

.saip-loadmore__note {
    margin: 0.85rem 0 0;
    font-size: 0.9rem;
    color: var(--saip-gray-600);
}

.saip-btn[disabled],
.saip-btn.is-loading {
    cursor: not-allowed;
    opacity: 0.7;
}

.saip-btn.is-loading {
    pointer-events: none;
}

.saip-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: saipSpin 0.7s linear infinite;
    display: inline-block;
    flex: none;
}

@keyframes saipSpin {
    to { transform: rotate(360deg); }
}

/* newly appended cards rise into place, staggered by their index */
@keyframes saipCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.saip-card--enter {
    animation: saipCardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* a short green edge so the eye lands on what just arrived */
@keyframes saipCardFlash {
    0%   { box-shadow: 0 0 0 0 rgba(7, 148, 85, 0.35); border-color: var(--saip-green-600); }
    100% { box-shadow: 0 0 0 10px rgba(7, 148, 85, 0); border-color: var(--t26-border); }
}

.saip-card--flash {
    animation: saipCardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both,
               saipCardFlash 1.1s ease-out 0.45s both;
}

@media (prefers-reduced-motion: reduce) {
    .saip-card--enter,
    .saip-card--flash {
        animation: none;
    }
    .saip-spinner {
        animation-duration: 2s;
    }
}

/* the home page hides prices, so its card footer holds the button alone */
.saip-card__foot--single {
    justify-content: stretch;
}

.saip-card__foot--single .saip-btn {
    width: 100%;
    justify-content: center;
}


/* ==========================================================================
   27. Sold brand — the detail page carries the stamp
   The page stays fully readable and clickable: the watermark is a separate
   layer with pointer-events disabled, so nothing underneath is blocked.
   ========================================================================== */

.saip-detail {
    position: relative;
}

.saip-soldmark {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* an even grid, not a flex wrap: flex clustered the words and left the
   corners of a tall page bare */
.saip-soldmark__inner {
    position: absolute;
    inset: -25%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    place-items: center;
    transform: rotate(-24deg);
}

.saip-soldmark span {
    font-size: clamp(1.25rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #B54708;
    opacity: .075;
}

/* the seal, sitting on the brand image */
.saip-figure {
    position: relative;
}

.saip-seal {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6%;
    z-index: 3;
    transform: translateY(-50%) rotate(-15deg);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .65rem 1.5rem;
    border: 3px double #B54708;
    border-radius: 6px;
    background: rgba(255, 250, 235, 0.85);
    color: #B54708;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(181, 71, 8, 0.14);
}

.saip-seal b {
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
}

.saip-seal small {
    font-size: .68rem;
    font-weight: 700;
    opacity: .75;
}

[data-theme="dark"] .saip-soldmark span {
    color: #FEDF89;
    opacity: .10;
}

/* no dark variant for the seal: it always sits on the figure, which keeps a
   light background in both modes, so the light-mode colours stay correct */

@media (max-width: 600px) {
    .saip-seal {
        inset-inline-end: 50%;
        transform: translate(50%, -50%) rotate(-15deg);
        padding: .5rem 1.1rem;
    }
}

/* ==========================================================================
   28. Mark-type chooser (step 2 of the add-ad flow)
   Two large cards instead of plain radios: this is a fork in the form, so it
   deserves more weight than a row of pills.
   ========================================================================== */

.saip-typecards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.saip-typecard {
    position: relative;
    display: block;
    cursor: pointer;
}

/* the radio stays in the accessibility tree but never paints */
.saip-typecard input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.saip-typecard__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.6rem 1.25rem;
    border: 2px solid var(--t26-border);
    border-radius: var(--saip-radius-lg);
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.saip-typecard__box i {
    font-size: 1.7rem;
    color: var(--saip-gray-400);
    transition: color .18s ease;
}

.saip-typecard__box b {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--t26-text);
}

.saip-typecard__box small {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--saip-gray-600);
}

.saip-typecard:hover .saip-typecard__box {
    border-color: var(--saip-green-300);
}

.saip-typecard input:checked + .saip-typecard__box {
    border-color: var(--saip-green-600);
    background: var(--saip-green-50);
    box-shadow: var(--saip-elev-2);
}

.saip-typecard input:checked + .saip-typecard__box i {
    color: var(--saip-green-700);
}

.saip-typecard input:focus-visible + .saip-typecard__box {
    box-shadow: var(--saip-ring);
}

[data-theme="dark"] .saip-typecard__box {
    background: var(--t26-surface);
}

[data-theme="dark"] .saip-typecard input:checked + .saip-typecard__box {
    background: rgba(84, 192, 138, 0.12);
    border-color: var(--saip-green-300);
}

/* both step buttons sit on one row */
.saip-formactions {
    flex-wrap: wrap;
}

.saip-formactions__buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .saip-formactions__buttons {
        width: 100%;
    }

    .saip-formactions__buttons .saip-btn {
        flex: 1;
        justify-content: center;
    }
}

/*
 * `.saip-field { display: flex }` is an author rule, so it outranks the user
 * agent's `[hidden] { display: none }` and a hidden field kept showing.
 * Scoped to these wrappers rather than a blanket `!important`, which would
 * break jQuery's .show() elsewhere in the member forms.
 */
.saip-field[hidden],
[data-word-only][hidden],
[data-figurative-only][hidden] {
    display: none;
}

/* ==========================================================================
   Commission agreement — opening, platform definition and the acknowledgements
   ========================================================================== */

.saip-agreement__opening {
    margin: 0 0 1rem;
    line-height: 2.1;
    color: var(--saip-gray-600);
    text-align: center;
}

/* the Qur'anic verse stays in Arabic in every language, so it always reads RTL */
.saip-agreement__verse {
    display: inline-block;
    margin-block: 0.35rem;
    font-weight: 700;
    line-height: 2.3;
    color: var(--saip-green-700);
}

.saip-agreement__def {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-inline-start: 3px solid var(--saip-green-700);
    background: var(--saip-gray-25);
    line-height: 2;
    font-size: 0.92rem;
    color: var(--t26-text);
}

/* the two ☑️ items close the agreement, so they get a separating rule */
.saip-agreement__acks {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--t26-border);
}

.saip-agreement__acks i {
    color: var(--saip-green-700);
}

.saip-agreement__acks span {
    font-weight: 600;
}

/* ==========================================================================
   Dark mode — buttons
   The outline button was drawn with green-600/700, which are the palette's
   DARK greens. On the dark surfaces they sit on (#074D31 and #052E1F) the
   text and border all but vanished. Dark mode needs the LIGHT green, the same
   inversion the rest of the theme already makes.
   ========================================================================== */

[data-theme="dark"] .saip-btn--outline {
    background: transparent;
    border-color: var(--saip-green-300);
    /* green-300 clears 3:1 as a border but only reaches 3.6:1 as text on the
       card foot; the lighter accent reaches 5.8:1 there and 7.1:1 on a panel */
    color: #A6E9C5;
}

[data-theme="dark"] .saip-btn--outline:hover {
    background: rgba(84, 192, 138, 0.16);
    border-color: #A6E9C5;
    color: #ffffff;
}

[data-theme="dark"] .saip-btn--primary {
    background: var(--saip-green-600);
    border-color: var(--saip-green-300);
    color: #ffffff;
}

[data-theme="dark"] .saip-btn--primary:hover {
    background: var(--saip-green-300);
    border-color: var(--saip-green-300);
    color: var(--saip-green-900);
}

[data-theme="dark"] .saip-btn--neutral:hover {
    border-color: var(--saip-green-300);
    color: var(--saip-green-300);
}

/* a white button keeps its light face, but its label must stay the dark green */
[data-theme="dark"] .saip-btn--white {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--saip-green-900);
}

[data-theme="dark"] .saip-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(84, 192, 138, 0.45);
}

/* the same inversion for the two links that used the dark green */
[data-theme="dark"] .saip-section__link,
[data-theme="dark"] .saip-crumbs a {
    color: #A6E9C5;
}

/*
 * Two more labels that kept their light-mode colour on a dark surface:
 * the secondary (English) name was drawn in gray-600 — 1.35:1 — and the price
 * in green-300, which clears 3:1 but not the 4.5:1 needed for text.
 */
[data-theme="dark"] .saip-card__meta,
[data-theme="dark"] .saip-card__price small {
    color: rgba(255, 255, 255, 0.74);
}

[data-theme="dark"] .saip-card__price {
    color: #A6E9C5;
}

/* ==========================================================================
   Dark mode — the muted greys
   --saip-gray-400 and --saip-gray-600 are used ONLY as text colours (6 and 40
   rules, no background or border uses), so redefining the two tokens inside
   the dark scope fixes every secondary label, breadcrumb, hint and
   placeholder at once instead of patching forty selectors.
   ========================================================================== */

[data-theme="dark"] {
    --saip-gray-600: rgba(255, 255, 255, 0.76);
    --saip-gray-400: rgba(255, 255, 255, 0.56);
}

/*
 * Two exceptions to the token override above.
 *
 * The category tag keeps a near-white background in dark mode (it sits on the
 * uploaded logo, which is usually light), so its label must stay dark — the
 * translucent-white grey turned it into white-on-white.
 *
 * The result count was drawn in green-700, a light-mode green, and disappeared
 * against the dark page.
 */
[data-theme="dark"] .saip-card__tag {
    color: var(--saip-gray-900);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .saip-resultbar strong {
    color: #A6E9C5;
}

/*
 * The agreement block in dark mode. Every one of these carried a light-mode
 * colour: the verse and the acknowledgement ticks were drawn in the dark brand
 * green, the definition paragraph kept a near-white background under white
 * text (1.05:1), and the policy link had its colour inline in the markup —
 * that inline style is now a class so it can be themed at all.
 */
.saip-agreement__link {
    color: var(--saip-green-700);
    font-weight: 700;
}

[data-theme="dark"] .saip-agreement__link,
[data-theme="dark"] .saip-agreement__verse,
[data-theme="dark"] .saip-agreement__acks i {
    color: #A6E9C5;
}

[data-theme="dark"] .saip-agreement__def {
    background: rgba(255, 255, 255, 0.06);
    border-inline-start-color: #A6E9C5;
    color: var(--t26-text);
}

/*
 * The last two places still wearing a light-mode green on a dark surface:
 * the label of a *checked* agreement box, and the active tab in the member
 * area. Both measured 1.42:1 — effectively invisible.
 */
[data-theme="dark"] .saip-checkcard input:checked ~ span strong {
    color: #A6E9C5;
}

[data-theme="dark"] .saip-tabs button.active {
    color: #A6E9C5;
    border-bottom-color: var(--saip-green-300);
}

[data-theme="dark"] .saip-tabs button:hover {
    color: #ffffff;
}