/* ===== Terms & Conditions page ===== */
.terms-page {
    --primary: #8b0a21;
    --primary-soft: rgba(139,10,33,0.08);
    --primary-foreground: #ffffff;
    --border: #E5E7EB;
    --muted: #6B7280;
    --bg: #F9FAFB;
    --card-bg: #ffffff;
    --secondary-bg: #F3E1D2;

    background: var(--bg);
    color: #1F2937;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

html { scroll-behavior: smooth; }
.terms-page section { scroll-margin-top: 24px; }

.terms-container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ===== Header ===== */
.terms-header {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 48px 0;
}
.header-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.terms-header h1 { font-size: 40px; font-weight: 700; margin: 0; }
.header-date { font-size: 16px; opacity: 0.9; margin: 0; }

/* ===== Layout ===== */
.terms-body { padding: 48px 24px 96px; }
.terms-sections { display: flex; flex-direction: column; gap: 48px; margin-top: 48px; }

/* ===== Cards ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}
.card--hover { transition: box-shadow .2s ease; }
.card--hover:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.card--gradient { background: linear-gradient(135deg, var(--secondary-bg) 0%, #fff 100%); }
.card--green { background: #F0FDF4; border-color: #BBF7D0; }
.card--red { background: #FEF2F2; border-color: #FECACA; }
.card--orange { background: #FFF7ED; border-color: #FED7AA; margin-top: 24px; }
.card--dark { background: var(--primary); color: #fff; border: none; }
.card-head { margin-bottom: 16px; }
.card-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--primary); margin: 0 0 4px; }
.card-title--lg { font-size: 24px; color: #fff; }
.card-desc { font-size: 14px; color: var(--muted); margin: 0; }
.card-desc--light { color: rgba(255,255,255,0.8); }
.text-green { color: #166534; }
.text-green-soft { color: #15803D; }
.text-red { color: #991B1B; }
.text-red-soft { color: #B91C1C; }
.text-orange { color: #9A3412; }

/* ===== Nav card ===== */
.nav-card { margin-bottom: 32px; }
.nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .nav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .nav-grid { grid-template-columns: repeat(4, 1fr); } }
.nav-btn {
    display: block;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1F2937;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.nav-btn:hover { background: var(--primary-soft); border-color: var(--primary); }

/* ===== Alerts ===== */
.alert {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.alert p { margin: 0; }
.alert--primary { background: var(--primary-soft); border: 1px solid rgba(139,10,33,0.2); color: var(--primary); margin-bottom: 32px; }
.alert--amber { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.alert--default { background: #F3F4F6; border: 1px solid var(--border); color: #374151; }
.alert--red { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.alert--dark { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.alert--margin-top { margin-top: 24px; }

/* ===== Section heading ===== */
.section-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.section-heading h2 { font-size: 26px; font-weight: 700; color: var(--primary); margin: 0; }
.divider { border: none; border-top: 1px solid var(--border); margin: 0 0 24px; }

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.badge--header { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.badge--outline { background: transparent; border: 1px solid var(--border); color: #374151; }
.badge--filled { background: var(--primary); color: #fff; }
.badge--secondary { background: var(--secondary-bg); color: #4A2E1E; }
.badge--destructive { background: #DC2626; color: #fff; }
.badge--circle { width: 22px; height: 22px; border-radius: 50%; padding: 0; justify-content: center; }
.badge--dark-pill { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* ===== Grids ===== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.grid-2--lg { gap: 24px; }

/* ===== Definitions term row ===== */
.term-row { display: flex; align-items: flex-start; gap: 12px; }
.term-row p { font-size: 14px; color: var(--muted); margin: 0; }

/* ===== Service items ===== */
.service-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(255,255,255,0.6); border-radius: 10px; }
.service-icon { font-size: 20px; color: var(--primary); margin-top: 2px; }
.service-item h4 { font-size: 14.5px; font-weight: 600; color: var(--primary); margin: 0 0 2px; }
.service-item p { font-size: 13px; color: var(--muted); margin: 0; }

/* ===== Accordion (native <details>) ===== */
.accordion-stack { display: flex; flex-direction: column; gap: 14px; }
.accordion-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.accordion-card summary {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 22px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.accordion-card summary::-webkit-details-marker { display: none; }
.accordion-title { flex: 1; }
.accordion-title--plain { font-size: 15px; color: #1F2937; }
.accordion-chevron { color: var(--muted); transition: transform .25s ease; }
.accordion-card[open] .accordion-chevron { transform: rotate(180deg); }
.accordion-body { padding: 0 22px 20px; }

/* ===== Lists ===== */
.dot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dot-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.dot-list--sm li { font-size: 13.5px; }
.dot-list--red li::before { background: #DC2626; }
.dot-list--red li { color: #991B1B; font-size: 12.5px; }

.scroll-list { max-height: 192px; overflow-y: auto; padding-right: 4px; }

.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.check-list--green li { color: #166534; }
.check-circle {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; margin-top: 1px;
}
.check-circle--green { background: #DCFCE7; border: 1px solid #86EFAC; color: #166534; }

.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--bg); border-radius: 8px; font-size: 13.5px; color: var(--muted); }

.warn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.warn-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.warn-list i { color: #DC2626; font-size: 12px; }

.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.plain-list li { font-size: 14px; color: var(--muted); padding-left: 14px; position: relative; }
.plain-list li::before { content: "•"; position: absolute; left: 0; }
.plain-list--sm li { font-size: 13px; }

.body-text { font-size: 15px; line-height: 1.75; color: #374151; margin: 0 0 16px; }
.body-text-sm { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.ack-lede { margin-bottom: 16px; }

/* ===== Links ===== */
.link { color: var(--primary); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link--light { color: #fff; }

/* ===== Dark contact card ===== */
.dark-contact-list { display: flex; flex-direction: column; gap: 14px; }
.dark-contact-row { display: flex; align-items: center; gap: 12px; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .terms-header { padding: 36px 0; }
    .terms-header h1 { font-size: 28px; }
    .terms-body { padding: 32px 16px 64px; }
    .section-heading h2 { font-size: 21px; }
    .card { padding: 18px; }
}

/* ============================================================
   Additions to terms.css — missing classes used by
   privacy-policy.blade.php
   Paste this block at the end of your existing terms.css
   ============================================================ */

/* ===== Highlight blocks (Consent / Service Providers / Legal) ===== */
.highlight-block {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.highlight-block--last {
    border-bottom: none;
    padding-bottom: 0;
}
.highlight-block h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 8px;
}
.highlight-block h4 i {
    font-size: 14px;
}

/* ===== Mini dot lists ===== */
.mini-dot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mini-dot-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    color: var(--muted);
}
.mini-dot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}
.mini-dot-list--xs li {
    font-size: 12.5px;
}

/* ===== Info name / description (accordion rows) ===== */
.info-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 2px;
}
.info-desc {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* ===== Bordered box (non-personal info grid) ===== */
.bordered-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== Dot row (cookies usage list) ===== */
.dot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--muted);
}
.dot-row .dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

/* ===== Rights grid (Your Rights and Choices) ===== */
.rights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
}
@media (min-width: 640px) {
    .rights-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .rights-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.right-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.right-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 8px;
}
.right-card h4 i {
    font-size: 13px;
}

/* ===== Cookie cards ===== */
.cookie-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.cookie-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.cookie-card-head h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

/* ===== Extra alert variants ===== */
.alert--green {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
}
.alert--blue {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E3A8A;
}
.alert--orange {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    color: #9A3412;
}
.alert--flex {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.alert--flex i {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.alert-title {
    font-weight: 700;
    margin: 0 0 4px;
}

/* ===== Blue link variant (used inside .alert--blue) ===== */
.link--blue {
    color: #1D4ED8;
}
.link--blue:hover {
    text-decoration: underline;
}

/* ===== Footer title (Jurisdiction section) ===== */
.footer-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 8px;
}

/* Safety net: force all inline icons to a consistent, small, brand-colored size
   even if a Font Awesome glyph fails to load */
.card-title i,
.highlight-block h4 i,
.right-card h4 i,
.alert--flex > i,
.cookie-card-head i,
.badge i {
    font-size: 0.95em;
    line-height: 1;
    color: currentColor;
    vertical-align: -0.05em;
}