/* IBM Plex Sans (Latin) */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Sans Arabic */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette extracted from logo.png */
    --ts-red: #E4141C;
    --ts-red-dark: #B90F16;
    --ts-red-light: #FDE8E9;
    --ts-green: #2FA84F;
    --ts-green-dark: #22803B;
    --ts-green-light: #EAF8EC;
    --ts-blue: #1414E0;
    --ts-dark: #12141A;
    --ts-dark-soft: #1D2027;
    --ts-gray: #6C757D;
    --ts-surface: #F7F8FA;

    --ts-radius-sm: .6rem;
    --ts-radius-md: 1rem;
    --ts-radius-lg: 1.5rem;
    --ts-radius-pill: 3rem;

    --ts-shadow-sm: 0 .25rem .75rem rgba(18, 20, 26, .06);
    --ts-shadow-md: 0 1rem 2.5rem rgba(18, 20, 26, .08);
    --ts-shadow-lg: 0 1.5rem 3.5rem rgba(18, 20, 26, .14);
    --ts-shadow-glow: 0 .5rem 1.5rem rgba(228, 20, 28, .18);

    --bs-primary: var(--ts-red);
    --bs-primary-rgb: 228, 20, 28;
    --bs-secondary: var(--ts-green);
    --bs-secondary-rgb: 47, 168, 79;
    --bs-link-color: var(--ts-red);
    --bs-link-hover-color: var(--ts-red-dark);
    --bs-body-font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, sans-serif;
    --bs-body-bg: #fff;
}

html[dir="ltr"] body,
html[dir="ltr"] :root {
    --bs-body-font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--ts-dark);
}

.section-py { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (max-width: 767.98px) {
    .section-py { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}

h1, h2, h3, h4, h5, h6, .fw-brand {
    font-weight: 700;
}

/* Buttons */
.btn {
    --bs-btn-border-radius: var(--ts-radius-pill);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .65rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: .85rem; }
.btn-sm { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .45rem; }

.btn-primary {
    --bs-btn-bg: var(--ts-red);
    --bs-btn-border-color: var(--ts-red);
    --bs-btn-hover-bg: var(--ts-red-dark);
    --bs-btn-hover-border-color: var(--ts-red-dark);
    --bs-btn-active-bg: var(--ts-red-dark);
    --bs-btn-active-border-color: var(--ts-red-dark);
    box-shadow: 0 .5rem 1.25rem rgba(228, 20, 28, .22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.75rem rgba(228, 20, 28, .3); }

.btn-secondary {
    --bs-btn-bg: var(--ts-green);
    --bs-btn-border-color: var(--ts-green);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ts-green-dark);
    --bs-btn-hover-border-color: var(--ts-green-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ts-green-dark);
    box-shadow: 0 .5rem 1.25rem rgba(47, 168, 79, .22);
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.75rem rgba(47, 168, 79, .3); }

.btn-outline-primary, .btn-outline-light, .btn-outline-secondary { --bs-btn-border-width: 1.5px; }
.btn-outline-light:hover { color: var(--ts-red); transform: translateY(-2px); }
.btn-outline-primary:hover, .btn-outline-secondary:hover { transform: translateY(-2px); }
.btn-light { box-shadow: var(--ts-shadow-sm); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--ts-shadow-md); }

/* Forms */
.form-control:focus, .form-select:focus {
    border-color: var(--ts-red);
    box-shadow: 0 0 0 .2rem rgba(228, 20, 28, .15);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--ts-red);
}

.text-ts-red { color: var(--ts-red) !important; }
.text-ts-green { color: var(--ts-green) !important; }
.text-ts-blue { color: var(--ts-blue) !important; }
.bg-ts-green-light { background-color: var(--ts-green-light) !important; }
.bg-ts-surface { background-color: var(--ts-surface) !important; }
.bg-ts-dark { background-color: var(--ts-dark) !important; }

/* Navbar */
.site-navbar {
    background-color: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(18, 20, 26, .06);
    transition: box-shadow .3s ease, padding .3s ease;
    padding-block: .85rem;
}
.site-navbar.is-scrolled {
    box-shadow: var(--ts-shadow-md);
    padding-block: .5rem;
}
.navbar-brand img {
    height: 44px;
    width: auto;
    transition: height .3s ease;
}
.site-navbar.is-scrolled .navbar-brand img { height: 36px; }
.navbar .nav-link {
    font-weight: 600;
    padding-inline: 1rem !important;
    border-radius: var(--ts-radius-pill);
    transition: background-color .2s ease, color .2s ease;
}
.navbar .nav-link:hover { background-color: var(--ts-surface); }
.navbar .nav-link.active {
    color: var(--ts-red) !important;
    background-color: var(--ts-red-light);
}
.navbar-cta { box-shadow: 0 .4rem 1rem rgba(47, 168, 79, .25); }
.dropdown-menu {
    border: none;
    border-radius: var(--ts-radius-md);
    box-shadow: var(--ts-shadow-lg);
    padding: .5rem;
}
.dropdown-item {
    border-radius: var(--ts-radius-sm);
    padding: .55rem .9rem;
    font-weight: 500;
}
.dropdown-item:hover { background-color: var(--ts-surface); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ts-red); }

/* Hero */
.hero-section {
    position: relative;
    background: radial-gradient(60rem 40rem at 15% -10%, rgba(47, 168, 79, .35), transparent 60%),
                radial-gradient(50rem 35rem at 110% 10%, rgba(228, 20, 28, .3), transparent 55%),
                linear-gradient(160deg, var(--ts-dark) 0%, var(--ts-dark-soft) 100%);
    color: #fff;
    padding: 7rem 0 6rem;
    overflow: hidden;
}
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .25;
    pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-section .highlight { color: var(--ts-green); }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: var(--ts-radius-pill);
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
}
.hero-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.hero-trust-pills span {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ts-radius-pill);
    padding: .4rem .9rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}
.hero-trust-pills i { color: var(--ts-green); }
.hero-visual {
    position: relative;
    display: inline-flex;
    padding: 2rem;
}
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(47, 168, 79, .35), transparent 70%);
    filter: blur(10px);
}
.hero-visual img { position: relative; filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, .35)); }

/* Section headings (kicker + title) */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ts-red);
    background: var(--ts-red-light);
    border-radius: var(--ts-radius-pill);
    padding: .35rem 1rem;
    margin-bottom: 1rem;
}
.section-kicker.on-dark {
    color: var(--ts-green);
    background: rgba(47, 168, 79, .14);
}

/* Icon tiles */
.icon-tile {
    width: 64px;
    height: 64px;
    border-radius: var(--ts-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ts-red) 0%, var(--ts-red-dark) 100%);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 .5rem 1.25rem rgba(228, 20, 28, .25);
}

.card-service, .card-sector, .card-why, .card-team, .card-stat {
    background-color: #fff;
    border: 1px solid rgba(18, 20, 26, .05);
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-service:hover, .card-sector:hover, .card-why:hover, .card-team:hover, .card-stat:hover {
    transform: translateY(-6px);
    box-shadow: var(--ts-shadow-md);
    border-color: rgba(228, 20, 28, .15);
}

/* Glass cards for dark sections */
.card-glass {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--ts-radius-lg);
    backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.card-glass:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.card-team img { box-shadow: 0 .5rem 1.25rem rgba(18, 20, 26, .18); }
.stat-card .stat-number { font-size: 2.25rem; }

/* Accordion inside a card */
.accordion-item {
    border: none;
    border-bottom: 1px solid rgba(18, 20, 26, .08);
    background: transparent;
}
.accordion-item:last-child { border-bottom: none; }
.accordion-button { background: transparent; font-weight: 600; padding-inline: 0; }
.accordion-button:not(.collapsed) { color: var(--ts-red); background: transparent; box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-body { padding-inline: 0; }

/* Methodology steps */
.step-number {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ts-red) 0%, var(--ts-red-dark) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 .5rem 1.25rem rgba(228, 20, 28, .25);
}

/* Stats */
.stat-number {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--ts-red);
    line-height: 1;
}

/* Quote CTA band */
.quote-cta {
    position: relative;
    background: linear-gradient(135deg, var(--ts-green) 0%, var(--ts-green-dark) 100%);
    color: #fff;
    overflow: hidden;
}
.quote-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .4;
}
.quote-cta .container { position: relative; z-index: 1; }

/* CKEditor5-rendered content */
.service-description {
    color: var(--ts-dark);
    line-height: 1.85;
}
.service-description img {
    border-radius: .5rem;
    max-width: 100%;
    height: auto;
}
.service-description h2, .service-description h3, .service-description h4 {
    font-weight: 700;
    margin-top: 1.5rem;
}
.service-description table {
    width: 100%;
    border-collapse: collapse;
}
.service-description table td, .service-description table th {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: .5rem .75rem;
}
.service-description blockquote {
    border-inline-start: 4px solid var(--ts-red);
    padding-inline-start: 1rem;
    color: var(--ts-gray);
    font-style: italic;
}

/* Page header banner (inner pages) */
.page-header-banner {
    position: relative;
    background: radial-gradient(45rem 25rem at 100% 0%, rgba(47, 168, 79, .28), transparent 60%),
                linear-gradient(160deg, var(--ts-dark) 0%, var(--ts-dark-soft) 100%);
    color: #fff;
    padding: 3.25rem 0;
    overflow: hidden;
}
.page-header-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .2;
}
.page-header-banner .container { position: relative; z-index: 1; }
.page-header-banner .breadcrumb-item a { color: rgba(255, 255, 255, .65); }
.page-header-banner .breadcrumb-item.active { color: #fff; }
.page-header-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }

/* Contact page */
.contact-info-card {
    position: relative;
    border-radius: var(--ts-radius-lg);
    background: radial-gradient(45rem 25rem at 100% 0%, rgba(47, 168, 79, .35), transparent 60%),
                linear-gradient(160deg, var(--ts-dark) 0%, var(--ts-dark-soft) 100%);
    box-shadow: var(--ts-shadow-md);
    overflow: hidden;
}
.contact-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .6;
}
.contact-info-card-body {
    position: relative;
    z-index: 1;
    width: 100%;
}
.icon-tile-green {
    background: linear-gradient(135deg, var(--ts-green) 0%, var(--ts-green-dark) 100%);
    box-shadow: 0 .5rem 1.25rem rgba(47, 168, 79, .25);
}

/* Footer */
footer.site-footer {
    background: linear-gradient(180deg, var(--ts-dark) 0%, #090a0d 100%);
    color: #aeb3bb;
}
footer.site-footer a {
    color: #aeb3bb;
    text-decoration: none;
    transition: color .2s ease;
}
footer.site-footer a:hover {
    color: #fff;
}
footer.site-footer h6 {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
    color: #fff;
}
.footer-newsletter {
    background-color: rgba(47, 168, 79, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-newsletter p { color: #aeb3bb; }
.footer-newsletter .form-control {
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
}
.footer-newsletter .form-control::placeholder { color: #aeb3bb; }
.footer-newsletter .form-control:focus {
    background-color: rgba(255, 255, 255, .1);
    border-color: var(--ts-green);
    color: #fff;
    box-shadow: none;
}

.footer-contact-strip {
    background-color: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-contact-strip .item {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.icon-pill {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(47, 168, 79, .16);
    color: var(--ts-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.social-icon:hover {
    background-color: var(--ts-red);
    border-color: var(--ts-red);
}
.footer-bottom {
    background-color: rgba(0, 0, 0, .2);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Back to top */
#back-to-top {
    position: fixed;
    inset-inline-end: 1.5rem;
    bottom: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ts-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ts-shadow-md);
    border: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 1040;
}
#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover { background: var(--ts-red-dark); }

/* Comment threads (blog & video pages) */
.comment-replies {
    margin-top: 1rem;
}
html[dir="rtl"] .comment-replies { margin-right: 3rem; }
html[dir="ltr"] .comment-replies { margin-left: 3rem; }
.comment-item + .comment-item,
.comment-reply + .comment-reply {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(18, 20, 26, .08);
}
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-red-light);
    color: var(--ts-red);
}

/* Reaction (like) buttons on blog/video detail pages */
.like-btn.is-liked {
    color: var(--ts-red);
    border-color: var(--ts-red);
}
.like-btn.is-liked i { font-weight: 900; }

/* "Rate Us" floating action button + popup */
.rate-us-fab {
    position: fixed;
    bottom: 1.5rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.1rem;
    border-radius: var(--ts-radius-pill);
    border: none;
    background: var(--ts-green);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--ts-shadow-md);
    transition: transform .2s ease, background-color .2s ease;
}
html[dir="ltr"] .rate-us-fab { left: 1.5rem; }
html[dir="rtl"] .rate-us-fab { right: 1.5rem; }
.rate-us-fab:hover { background: var(--ts-green-dark); transform: translateY(-2px); color: #fff; }
.rate-us-fab i { color: #FFD700; }

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: .35rem;
    font-size: 1.75rem;
}
.star-rating-input .star-choice {
    color: #E0E0E0;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.star-rating-input .star-choice:hover { transform: scale(1.1); }
.star-rating-input .star-choice.is-filled { color: #FFD700; }

/* Quote request wizard */
.quote-steps-nav {
    position: relative;
}
.quote-steps-nav::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: rgba(18, 20, 26, .1);
    z-index: 0;
}
.quote-steps-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
}
.quote-steps-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid rgba(18, 20, 26, .15);
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.quote-steps-item.is-active .quote-steps-circle {
    border-color: var(--ts-red);
    color: var(--ts-red);
}
.quote-steps-item.is-done .quote-steps-circle {
    background: var(--ts-green);
    border-color: var(--ts-green);
    color: #fff;
}
.quote-steps-item.is-active .quote-steps-label { color: var(--ts-red); font-weight: 600; }

.option-card {
    position: relative;
    display: block;
    border: 2px solid rgba(18, 20, 26, .08);
    border-radius: var(--ts-radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.option-card:hover { transform: translateY(-3px); border-color: rgba(228, 20, 28, .35); }
.option-card.is-selected,
.option-card:has(.option-card-input:checked) {
    border-color: var(--ts-red);
    background: var(--ts-red-light);
    box-shadow: var(--ts-shadow-sm);
}
.option-card:has(.option-card-input:focus-visible) {
    outline: 2px solid var(--ts-red);
    outline-offset: 2px;
}
.option-card-icon { font-size: 1.75rem; color: var(--ts-red); display: block; margin-bottom: .6rem; }
.option-card-title { font-weight: 600; }
.option-card-check {
    position: absolute;
    top: .6rem;
    inset-inline-end: .6rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(18, 20, 26, .15);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.option-card:has(.option-card-input:checked) .option-card-check {
    background: var(--ts-red);
    border-color: var(--ts-red);
    color: #fff;
}

.file-drop-zone {
    position: relative;
    border: 2px dashed rgba(18, 20, 26, .15);
    border-radius: var(--ts-radius-md);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
}
.file-drop-zone.is-dragover {
    border-color: var(--ts-red);
    background: var(--ts-red-light);
}
.file-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.file-drop-zone-icon { font-size: 2rem; color: var(--ts-red); margin-bottom: .75rem; }
.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: var(--ts-radius-sm);
    background: var(--ts-surface);
    font-size: .85rem;
}
.review-summary dt { font-weight: 600; color: var(--ts-dark); }
.review-summary dd { color: var(--bs-secondary-color, #6c757d); margin-bottom: .75rem; }

/* Page-load spinner: a theodolite-style dial with surveying icons orbiting the brand logo */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: #fff;
    transition: opacity .3s ease, visibility .3s ease;
}
#page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-orbit {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-dial-ticks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--ts-red) 0deg 1.4deg, transparent 1.4deg 30deg);
    opacity: .3;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px) calc(100% - 7px), transparent calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px) calc(100% - 7px), transparent calc(100% - 6px));
}
.loader-dial-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ts-red), transparent 55deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px) calc(100% - 7px), transparent calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px) calc(100% - 7px), transparent calc(100% - 6px));
    animation: page-loader-sweep 2.4s linear infinite;
}
.loader-orbit::before {
    content: "";
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(18, 20, 26, .12);
}
.loader-logo {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 1;
    animation: page-loader-pulse 1.8s ease-in-out infinite;
}
.loader-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--ts-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-red);
    font-size: .85rem;
    animation: page-loader-orbit 9s linear infinite;
}
.loader-icon-alt { color: var(--ts-green); }
.loader-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ts-dark);
    font-size: .95rem;
    text-transform: uppercase;
}
.loader-dots { display: inline-flex; gap: .3rem; }
.loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ts-red);
    animation: page-loader-dots 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { background: var(--ts-green); animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes page-loader-orbit {
    from { transform: rotate(var(--start)) translateX(84px) rotate(calc(-1 * var(--start))); }
    to { transform: rotate(calc(var(--start) + 360deg)) translateX(84px) rotate(calc(-1 * var(--start) - 360deg)); }
}
@keyframes page-loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes page-loader-sweep {
    to { transform: rotate(360deg); }
}
@keyframes page-loader-dots {
    0%, 60%, 100% { opacity: .25; transform: scale(.8); }
    30% { opacity: 1; transform: scale(1); }
}