/* /public_html/new.habeshacute.online/assets/css/terms.css */

:root {
--tp-bg:
radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(236, 72, 153, 0.12), transparent 28%),
linear-gradient(180deg, #0b1020 0%, #11162a 52%, #161d35 100%);

--tp-card: rgba(18, 24, 45, 0.78);
--tp-card-strong: rgba(18, 24, 45, 0.9);
--tp-border: rgba(255, 255, 255, 0.12);

--tp-text: #eef2ff;
--tp-text-soft: rgba(238, 242, 255, 0.78);
--tp-text-muted: rgba(226, 232, 240, 0.64);
--tp-title: #ffffff;

--tp-accent: #a855f7;
--tp-accent-2: #ec4899;
--tp-ok: #22c55e;
--tp-info: #38bdf8;
--tp-warn: #f59e0b;
--tp-danger: #ef4444;

--tp-shadow:
0 20px 60px rgba(0, 0, 0, 0.28),
0 8px 22px rgba(0, 0, 0, 0.16);

--tp-radius-xl: 28px;
--tp-radius-lg: 22px;
--tp-radius-md: 16px;
--tp-radius-sm: 12px;
--tp-max: 1040px;
}

/* ------------------------------------------------------------
 Page
------------------------------------------------------------ */
body.terms-page,
body.legal-page.terms-page {
background: var(--tp-bg);
color: var(--tp-text);
}

.terms-page .page-main,
.legal-page.terms-page .page-main,
.legal-page-main {
padding: 28px 16px 72px;
min-height: calc(100vh - 120px);
}

.terms-shell,
.terms-page .site-container {
max-width: calc(var(--tp-max) + 32px);
margin: 0 auto;
}

/* ------------------------------------------------------------
 Hero card
------------------------------------------------------------ */
.terms-hero-card {
position: relative;
max-width: var(--tp-max);
margin: 0 auto 22px;
padding: 30px 28px;
border: 1px solid var(--tp-border);
border-radius: var(--tp-radius-xl);
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
var(--tp-card-strong);
backdrop-filter: blur(14px);
box-shadow: var(--tp-shadow);
overflow: hidden;
}

.terms-hero-card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-2), var(--tp-ok));
}

.terms-hero-card::after {
content: "";
position: absolute;
top: -80px;
right: -60px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.16), transparent 68%);
pointer-events: none;
}

.terms-hero-card__badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.terms-hero-card h1 {
margin: 14px 0 10px;
color: var(--tp-title);
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 1.06;
font-weight: 900;
letter-spacing: -0.03em;
}

.terms-hero-card__meta {
margin: 0 0 12px;
color: var(--tp-text-muted);
font-size: 0.96rem;
}

.terms-hero-card__lead {
margin: 0;
max-width: 860px;
color: var(--tp-text-soft);
font-size: 1.03rem;
line-height: 1.82;
}

/* ------------------------------------------------------------
 Summary grid
------------------------------------------------------------ */
.terms-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 22px;
}

.terms-mini-card {
padding: 16px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--tp-radius-md);
background: rgba(255,255,255,0.045);
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.terms-mini-card strong {
display: block;
margin-bottom: 8px;
color: #fff;
font-size: 0.98rem;
}

.terms-mini-card span {
display: block;
color: var(--tp-text-soft);
font-size: 0.95rem;
line-height: 1.68;
}

/* ------------------------------------------------------------
 Section cards
------------------------------------------------------------ */
.terms-section-card,
.terms-footer-card {
max-width: var(--tp-max);
margin: 0 auto 18px;
padding: 22px 22px;
border: 1px solid var(--tp-border);
border-radius: var(--tp-radius-lg);
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
var(--tp-card);
backdrop-filter: blur(12px);
box-shadow: var(--tp-shadow);
}

.terms-section-card__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}

.terms-section-card__number {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: grid;
place-items: center;
font-weight: 900;
font-size: 1rem;
color: #fff;
background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-2));
box-shadow: 0 10px 20px rgba(168, 85, 247, 0.25);
}

.terms-section-card h2 {
margin: 0;
color: #fff;
font-size: clamp(1.12rem, 2vw, 1.42rem);
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.02em;
}

.terms-section-card__body p {
margin: 0 0 14px;
color: var(--tp-text-soft);
font-size: 1rem;
line-height: 1.82;
}

.terms-section-card__body p:last-child {
margin-bottom: 0;
}

.terms-section-card__body strong,
.terms-footer-card strong,
.terms-note-card strong,
.terms-mini-card strong {
color: #fff;
}

/* ------------------------------------------------------------
 Lists
------------------------------------------------------------ */
.terms-list {
margin: 0;
padding: 0;
list-style: none;
}

.terms-list li {
position: relative;
margin: 0 0 10px;
padding: 12px 14px 12px 40px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--tp-radius-md);
background: rgba(255,255,255,0.04);
color: var(--tp-text-soft);
line-height: 1.7;
}

.terms-list li:last-child {
margin-bottom: 0;
}

.terms-list li::before {
content: "✓";
position: absolute;
left: 14px;
top: 11px;
width: 18px;
height: 18px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(34,197,94,0.16);
color: #86efac;
font-size: 0.82rem;
font-weight: 900;
}

.terms-list--compact li {
padding-top: 10px;
padding-bottom: 10px;
}

/* ------------------------------------------------------------
 Note cards
------------------------------------------------------------ */
.terms-note-card {
margin-top: 16px;
padding: 16px 16px;
border-radius: var(--tp-radius-md);
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
}

.terms-note-card strong {
display: block;
margin-bottom: 8px;
font-size: 0.98rem;
}

.terms-note-card p {
margin: 0;
}

.terms-note-card--info {
border-color: rgba(56, 189, 248, 0.22);
background: linear-gradient(135deg, rgba(56,189,248,0.09), rgba(255,255,255,0.03));
}

.terms-note-card--warning {
border-color: rgba(245, 158, 11, 0.22);
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(255,255,255,0.03));
}

.terms-note-card--neutral {
border-color: rgba(168, 85, 247, 0.18);
background: linear-gradient(135deg, rgba(168,85,247,0.09), rgba(255,255,255,0.03));
}

.terms-note-card--danger {
border-color: rgba(239, 68, 68, 0.24);
background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(255,255,255,0.03));
}

.terms-note-card--danger-soft {
border-color: rgba(244, 114, 182, 0.18);
background: linear-gradient(135deg, rgba(244,114,182,0.11), rgba(255,255,255,0.03));
}

/* ------------------------------------------------------------
 Grids
------------------------------------------------------------ */
.terms-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

/* ------------------------------------------------------------
 Danger emphasis
------------------------------------------------------------ */
.terms-section-card--danger {
border-color: rgba(239, 68, 68, 0.18);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.28),
0 8px 22px rgba(0, 0, 0, 0.16),
0 0 0 1px rgba(239, 68, 68, 0.05) inset;
}

/* ------------------------------------------------------------
 Footer
------------------------------------------------------------ */
.terms-footer-card p {
margin: 8px 0 0;
color: var(--tp-text-soft);
line-height: 1.75;
}

/* ------------------------------------------------------------
 Light theme
------------------------------------------------------------ */
html[data-theme="light"] .terms-page,
body.theme-light.terms-page,
html[data-theme="light"] body.terms-page {
--tp-bg:
radial-gradient(circle at top left, rgba(168, 85, 247, 0.10), transparent 30%),
radial-gradient(circle at top right, rgba(236, 72, 153, 0.08), transparent 28%),
linear-gradient(180deg, #f8f7ff 0%, #f4f2ff 52%, #f8fbff 100%);

--tp-card: rgba(255, 255, 255, 0.92);
--tp-card-strong: rgba(255, 255, 255, 0.98);
--tp-border: rgba(139, 92, 246, 0.12);

--tp-text: #1e1b4b;
--tp-text-soft: rgba(30, 27, 75, 0.82);
--tp-text-muted: rgba(55, 48, 163, 0.62);
--tp-title: #140f35;

--tp-shadow:
0 20px 56px rgba(90, 60, 140, 0.10),
0 8px 20px rgba(90, 60, 140, 0.06);
}

html[data-theme="light"] .terms-hero-card,
body.theme-light .terms-hero-card,
html[data-theme="light"] .terms-section-card,
body.theme-light .terms-section-card,
html[data-theme="light"] .terms-footer-card,
body.theme-light .terms-footer-card {
backdrop-filter: blur(10px);
}

html[data-theme="light"] .terms-hero-card__badge,
body.theme-light .terms-hero-card__badge {
background: rgba(124, 58, 237, 0.08);
color: #5b21b6;
}

html[data-theme="light"] .terms-hero-card h1,
body.theme-light .terms-hero-card h1,
html[data-theme="light"] .terms-section-card h2,
body.theme-light .terms-section-card h2,
html[data-theme="light"] .terms-mini-card strong,
body.theme-light .terms-mini-card strong,
html[data-theme="light"] .terms-note-card strong,
body.theme-light .terms-note-card strong,
html[data-theme="light"] .terms-footer-card strong,
body.theme-light .terms-footer-card strong {
color: #140f35;
}

html[data-theme="light"] .terms-mini-card,
body.theme-light .terms-mini-card,
html[data-theme="light"] .terms-list li,
body.theme-light .terms-list li,
html[data-theme="light"] .terms-note-card,
body.theme-light .terms-note-card {
background: rgba(124, 58, 237, 0.035);
border-color: rgba(124, 58, 237, 0.10);
color: rgba(30, 27, 75, 0.82);
}

html[data-theme="light"] .terms-note-card--danger,
body.theme-light .terms-note-card--danger {
background: linear-gradient(135deg, rgba(239,68,68,0.07), rgba(255,255,255,0.85));
}

html[data-theme="light"] .terms-note-card--danger-soft,
body.theme-light .terms-note-card--danger-soft {
background: linear-gradient(135deg, rgba(244,114,182,0.06), rgba(255,255,255,0.85));
}

/* ------------------------------------------------------------
 Tablet
------------------------------------------------------------ */
@media (max-width: 860px) {
.terms-page .page-main,
.legal-page-main {
padding: 22px 12px 56px;
}

.terms-hero-card,
.terms-section-card,
.terms-footer-card {
padding: 22px 18px;
border-radius: 22px;
}

.terms-summary-grid,
.terms-two-col {
grid-template-columns: 1fr;
}

.terms-hero-card h1 {
font-size: 2rem;
}
}

/* ------------------------------------------------------------
 Mobile
------------------------------------------------------------ */
@media (max-width: 560px) {
.terms-page .page-main,
.legal-page-main {
padding: 16px 10px 42px;
}

.terms-hero-card,
.terms-section-card,
.terms-footer-card {
padding: 18px 14px;
border-radius: 18px;
}

.terms-hero-card__badge {
font-size: 0.7rem;
letter-spacing: 0.1em;
}

.terms-hero-card h1 {
font-size: 1.75rem;
line-height: 1.1;
}

.terms-hero-card__lead,
.terms-section-card__body p,
.terms-list li,
.terms-mini-card span,
.terms-footer-card p {
font-size: 0.95rem;
line-height: 1.72;
}

.terms-section-card__head {
align-items: flex-start;
gap: 12px;
}

.terms-section-card__number {
width: 36px;
height: 36px;
border-radius: 12px;
font-size: 0.95rem;
}

.terms-section-card h2 {
font-size: 1.04rem;
}

.terms-list li {
padding: 10px 10px 10px 34px;
border-radius: 13px;
}

.terms-list li::before {
left: 11px;
top: 10px;
width: 16px;
height: 16px;
font-size: 0.74rem;
}
}