/*
 * Terms & Conditions link + modal.
 *
 * Self-contained: only touches .terms-* selectors and #termsModal, so it is
 * safe to load on every view via partials/_head_i18n.php. Uses logical
 * properties (padding-inline-*, text-align:start) so most RTL mirroring is
 * automatic; the [dir="rtl"] block only patches what the shipped LTR Bootstrap
 * build and physical defaults get wrong (numeral style, close-button side).
 *
 * Palette mirrors the app theme: brand teal #77b0b7, heading ink #2d465e.
 */

/* ---- Trigger link ------------------------------------------------------- */
.terms-link-wrap {
    /* Match the primary button box (width:95%, left-aligned) so the centered
       link lines up under the button rather than the full container width. */
    width: 95%;
    margin-top: 0.85rem;
    margin-bottom: 0.25rem;
}

.terms-link,
.terms-link:hover,
.terms-link:focus,
.terms-link:active,
.terms-link:visited {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7580;
    text-decoration: none;
    letter-spacing: 0.01em;
}

/* ---- Modal shell -------------------------------------------------------- */
.terms-modal .modal-dialog {
    max-width: 540px;
}

.terms-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(20, 46, 108, 0.35);
}

/* Subtle lift on top of Bootstrap's .fade (respects reduced-motion). */
.terms-modal.fade .modal-dialog {
    transform: translateY(16px) scale(0.985);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.terms-modal.show .modal-dialog {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .terms-modal.fade .modal-dialog {
        transition: none;
    }
}

/* ---- Header ------------------------------------------------------------- */
.terms-modal .modal-header {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid #eef1f5;
    background: #fbfcfd;
    align-items: center;
}

.terms-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #2d465e;
}

.terms-modal .btn-close {
    padding: 0.6rem;
    margin: 0;
    /* Pin the close icon to the header's end (top-right in LTR, top-left in RTL).
       The shipped Bootstrap uses margin-left:auto for this; our reset above
       cleared it, so restore it as a logical property that also handles RTL. */
    margin-inline-start: auto;
    border-radius: 50%;
    opacity: 0.55;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.terms-modal .btn-close:hover {
    opacity: 1;
    background-color: #eef1f5;
}

/* ---- Body --------------------------------------------------------------- */
.terms-modal .modal-body {
    padding: 1.25rem 1.5rem 0.5rem;
    max-height: 65vh;
}

.terms-section-heading {
    margin: 1.4rem 0 0.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid #eef1f5;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #77b0b7;
}
/* No divider above a heading that opens the body. */
.terms-modal .modal-body > .terms-section-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.terms-list {
    margin: 0;
    padding-inline-start: 1.6rem;
    counter-reset: none;
}

.terms-list li {
    margin-bottom: 0.85rem;
    padding-inline-start: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.75;
    color: #3a4650;
    text-align: start;
}

.terms-list li::marker {
    color: #77b0b7;
    font-weight: 700;
}

/* Slim, on-brand scrollbar for the scrollable body. */
.terms-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}
.terms-modal .modal-body::-webkit-scrollbar-thumb {
    background: #cdd6df;
    border-radius: 3px;
}

/* ---- Footer ------------------------------------------------------------- */
.terms-modal .modal-footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #eef1f5;
}
.terms-modal .modal-footer .btn-info {
    background-color: #77b0b7;
    border-color: #77b0b7;
}

/* ---- RTL patches -------------------------------------------------------- */
/* Arabic-Indic numerals for the clause list. */
[dir="rtl"] .terms-list {
    list-style-type: arabic-indic;
}