* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(180deg, #fffdf8 0%, var(--stg-cream) 52%, #f6fbfc 100%);
color: var(--stg-text);
font-family: var(--stg-font);
font-size: 15px;
line-height: 1.7;
}
body::selection { color: #fff; background: var(--stg-primary); }
a { color: var(--stg-primary); text-decoration: none; transition: color var(--stg-transition); }
a:hover { color: var(--stg-primary-light); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { color: var(--stg-primary-dark); font-weight: 700; line-height: 1.4; }
h1 { margin: 0 0 1rem; font-size: clamp(1.55rem, 2vw, 2.15rem); }
h2 { font-size: clamp(1.25rem, 1.7vw, 1.7rem); }
h3 { font-size: 1.15rem; }
p { margin-top: 0; }
button, input, select, textarea { font: inherit; }
button, .btn, input[type="submit"], input[type="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
min-height: 42px;
padding: .6rem 1rem;
color: #fff;
background: var(--stg-primary);
border: 1px solid var(--stg-primary);
border-radius: 9px;
box-shadow: 0 4px 12px rgba(111, 57, 45, .15);
cursor: pointer;
font-weight: 700;
text-decoration: none;
transition: transform var(--stg-transition), background var(--stg-transition), box-shadow var(--stg-transition);
}
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
color: #fff;
background: var(--stg-primary-dark);
border-color: var(--stg-primary-dark);
transform: translateY(-1px);
box-shadow: 0 7px 18px rgba(111, 57, 45, .22);
}
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid rgba(118, 198, 223, .62);
outline-offset: 2px;
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
width: 100%;
min-height: 42px;
padding: .58rem .75rem;
color: var(--stg-text);
background: #fff;
border: 1px solid var(--stg-border);
border-radius: 9px;
box-shadow: inset 0 1px 2px rgba(48, 35, 24, .03);
transition: border-color var(--stg-transition), box-shadow var(--stg-transition);
}
textarea { min-height: 106px; resize: vertical; }
input:not([type="hidden"]):focus, select:focus, textarea:focus { border-color: var(--stg-sky); box-shadow: 0 0 0 3px rgba(118, 198, 223, .18); outline: 0; }
label { display: inline-block; margin-bottom: .42rem; color: var(--stg-primary-dark); font-weight: 700; }
fieldset { min-width: 0; padding: 1.25rem; border: 1px solid var(--stg-border); border-radius: var(--stg-radius-sm); }
legend { float: none; width: auto; padding: 0 .45rem; color: var(--stg-primary); font-size: 1rem; font-weight: 700; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 2rem 0 3rem; flex: 1; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.page-heading p { margin: .25rem 0 0; color: var(--stg-text-muted); }
.content-card, .form-card, .table-card, .dashboard-card, .members-index, .grades-table-container, .empty-report {
background: var(--stg-surface);
border: 1px solid rgba(230, 221, 211, .9);
border-radius: var(--stg-radius);
box-shadow: var(--stg-shadow-sm);
}
.content-card, .form-card, .table-card { padding: clamp(1rem, 2vw, 1.6rem); margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-grid .form-full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-top: 1.35rem; }
.form-actions .btn-secondary, .btn-secondary { color: var(--stg-primary); background: #fff; border-color: var(--stg-border); box-shadow: none; }
.form-actions .btn-secondary:hover, .btn-secondary:hover { color: var(--stg-primary-dark); background: var(--stg-surface-muted); border-color: var(--stg-primary-light); }
.btn-gold { color: #432c00; background: var(--stg-gold); border-color: var(--stg-gold); }
.btn-gold:hover { color: #432c00; background: #e7b94c; border-color: #e7b94c; }
.btn-danger { background: var(--stg-danger); border-color: var(--stg-danger); }
.btn-danger:hover { background: #8f302d; border-color: #8f302d; }
.flash-message, [data-flash-type] {
width: min(1180px, calc(100% - 32px));
display: flex;
align-items: flex-start;
gap: .65rem;
margin: 1rem auto 0;
padding: .85rem 1rem;
border: 1px solid;
border-radius: var(--stg-radius-sm);
font-weight: 600;
}
.flash-success, [data-flash-type="success"] { color: #155d3f; background: var(--stg-success-soft); border-color: #b9e3ce; }
.flash-error, [data-flash-type="error"] { color: #91332f; background: var(--stg-danger-soft); border-color: #f1c4c1; }
.flash-warning, [data-flash-type="warning"] { color: #80520f; background: var(--stg-warning-soft); border-color: #f3d69e; }
.flash-info, [data-flash-type="info"] { color: #1f647b; background: var(--stg-sky-soft); border-color: #bbe1eb; }
.table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--stg-border); border-radius: 11px; }
table { width: 100%; margin: 0; border-collapse: collapse; background: #fff; }
th, td { padding: .72rem .75rem; border-bottom: 1px solid #eee6dc; text-align: right; vertical-align: middle; }
th { color: var(--stg-primary-dark); background: linear-gradient(180deg, #fffaf3, #f9f1e8); font-size: .86rem; font-weight: 700; white-space: nowrap; }
tbody tr:nth-child(even) { background: #fffdfa; }
tbody tr:hover { background: #fff8e9; }
tbody tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.table-actions a, .table-actions button, .table-actions input[type="submit"] { min-height: 34px; padding: .35rem .65rem; font-size: .8rem; }
.badge, .status-badge {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: .16rem .55rem;
border-radius: 999px;
color: var(--stg-primary-dark);
background: var(--stg-gold-soft);
font-size: .78rem;
font-weight: 700;
white-space: nowrap;
}
.status-success { color: #155d3f; background: var(--stg-success-soft); }
.status-danger { color: #91332f; background: var(--stg-danger-soft); }
.status-warning { color: #80520f; background: var(--stg-warning-soft); }
.status-info { color: #1f647b; background: var(--stg-sky-soft); }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.stat-card { position: relative; overflow: hidden; padding: 1.25rem; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); background: var(--stg-surface); box-shadow: var(--stg-shadow-sm); }
.stat-card::after { content: ''; position: absolute; inset: auto -30px -35px auto; width: 100px; height: 100px; border-radius: 50%; background: rgba(214, 155, 45, .14); }
.stat-card .stat-label { display: block; color: var(--stg-text-muted); font-size: .86rem; font-weight: 600; }
.stat-card .stat-value { display: block; margin-top: .25rem; color: var(--stg-primary); font-family: 'Roboto', var(--stg-font); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 700; direction: ltr; text-align: right; }
.stat-card .stat-icon { position: absolute; top: 1rem; left: 1rem; color: var(--stg-gold); font-size: 1.35rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.75rem 0 .75rem; }
.empty-state { padding: 2rem 1.25rem; color: var(--stg-text-muted); text-align: center; background: var(--stg-surface-muted); border: 1px dashed #d8c9b9; border-radius: var(--stg-radius-sm); }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 1.25rem; background: radial-gradient(circle at top right, rgba(244, 197, 90, .48), transparent 34%), linear-gradient(145deg, #e8f7fb, #fffaf1 58%, #f7dba4); }
.auth-card { width: min(470px, 100%); padding: clamp(1.4rem, 4vw, 2.4rem); background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9); border-radius: var(--stg-radius-lg); box-shadow: var(--stg-shadow); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 1.4rem; text-align: center; }
.auth-brand-mark, .brand-mark { display: grid; width: 43px; height: 43px; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg, var(--stg-primary), var(--stg-primary-dark)); border: 3px solid var(--stg-gold); border-radius: 50%; box-shadow: 0 5px 14px rgba(72, 35, 29, .22); font-family: 'Roboto', sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: -.04em; }
.auth-brand strong { display: block; color: var(--stg-primary-dark); font-size: 1.08rem; }
.auth-brand span { display: block; color: var(--stg-text-muted); font-size: .78rem; }
.auth-card form { display: grid; gap: .95rem; }
.auth-card .form-actions { justify-content: stretch; }
.auth-card .form-actions > * { width: 100%; }
.site-header { position: sticky; top: 0; z-index: 1020; background: rgba(255, 253, 248, .94); border-bottom: 1px solid rgba(230, 221, 211, .88); backdrop-filter: blur(12px); }
.site-header__inner { width: min(1240px, calc(100% - 32px)); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 auto; }
.site-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--stg-primary-dark); text-decoration: none; }
.site-brand:hover { color: var(--stg-primary); }
.site-brand__copy { display: grid; line-height: 1.25; }
.site-brand__copy strong { font-size: .94rem; }
.site-brand__copy small { color: var(--stg-text-muted); font-size: .68rem; }
.site-nav { background: var(--stg-primary-dark); box-shadow: 0 5px 16px rgba(72, 35, 29, .16); }
.site-nav__inner { width: min(1240px, calc(100% - 32px)); display: flex; align-items: center; gap: .45rem; margin: 0 auto; overflow-x: auto; }
.site-nav__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: .58rem .75rem; color: rgba(255,255,255,.88); border-bottom: 3px solid transparent; font-size: .83rem; font-weight: 600; white-space: nowrap; }
.site-nav__link:hover, .site-nav__link.is-active { color: #fff; background: rgba(255,255,255,.08); border-bottom-color: var(--stg-gold); }
.site-nav__link--logout { margin-right: auto; color: #ffe6de; }
.site-footer { margin-top: auto; color: #f8f0e8; background: #38231f; }
.site-footer__inner { width: min(1180px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; }
.site-footer p { margin: 0; color: #e7dacf; font-size: .82rem; }
.social-links { display: flex; align-items: center; gap: .5rem; }
.social-links a { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: rgba(255,255,255,.1); border-radius: 50%; }
.social-links a:hover { color: #fff; background: var(--stg-primary-light); }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1rem; }
.product-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); box-shadow: var(--stg-shadow-sm); transition: transform var(--stg-transition), box-shadow var(--stg-transition); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--stg-shadow); }
.product-card__media { display: grid; min-height: 150px; place-items: center; color: var(--stg-primary); background: linear-gradient(135deg, #fff6e3, #e9f7fb); font-size: 3.3rem; }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.product-card__title { margin: 0 0 .4rem; font-size: 1.05rem; }
.product-card__description { flex: 1; margin: 0 0 1rem; color: var(--stg-text-muted); font-size: .86rem; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.points-price { color: var(--stg-primary); font-family: 'Roboto', var(--stg-font); font-size: 1.12rem; font-weight: 700; }
.products-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: .8rem; align-items: end; margin-bottom: 1.25rem; padding: 1rem; background: #fff; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); box-shadow: var(--stg-shadow-sm); }
.hero-panel { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3.3rem); color: #fff; background: linear-gradient(125deg, var(--stg-primary-dark), var(--stg-primary) 58%, #b8772e); border-radius: var(--stg-radius-lg); box-shadow: var(--stg-shadow); }
.hero-panel::after { content: ''; position: absolute; inset: auto -50px -85px auto; width: 230px; height: 230px; border: 28px solid rgba(244,197,90,.25); border-radius: 50%; }
.hero-panel h1, .hero-panel h2 { position: relative; color: #fff; }
.hero-panel p { position: relative; max-width: 650px; margin-bottom: 0; color: rgba(255,255,255,.87); }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.activity-card { padding: 1.3rem; background: #fff; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); box-shadow: var(--stg-shadow-sm); }
.activity-card__icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: .8rem; color: var(--stg-primary); background: var(--stg-gold-soft); border-radius: 14px; font-size: 1.35rem; }
.activity-card h3 { margin: 0 0 .45rem; }
.activity-card p { margin: 0; color: var(--stg-text-muted); font-size: .9rem; }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: 1rem; }
.pagination a, .pagination span { display: inline-grid; min-width: 35px; min-height: 35px; place-items: center; padding: .25rem .5rem; border: 1px solid var(--stg-border); border-radius: 8px; background: #fff; }
.pagination a:hover { background: var(--stg-gold-soft); }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .products-toolbar { grid-template-columns: 1fr 1fr; } .products-toolbar button { grid-column: 1 / -1; } }
@media (max-width: 640px) { body { font-size: 14px; } .page-main { width: min(100% - 22px, 1180px); padding: 1.15rem 0 2rem; } .site-header__inner, .site-nav__inner, .site-footer__inner { width: min(100% - 22px, 1240px); } .site-header__inner { min-height: 60px; } .site-brand__copy small { display: none; } .site-nav__link { min-height: 42px; padding-inline: .62rem; font-size: .78rem; } .site-footer__inner { align-items: flex-start; flex-direction: column; } .dashboard-grid, .activity-grid, .form-grid { grid-template-columns: 1fr; } .products-toolbar { grid-template-columns: 1fr; } .products-toolbar button { grid-column: auto; } th, td { padding: .6rem; } .table-actions { min-width: 150px; } .page-heading { align-items: stretch; flex-direction: column; } .check-container { font-size: 12px; } }
@media print { .site-header, .site-nav, .site-footer, .site-footer *, .no-print { display: none !important; } body { background: #fff; } .page-main { width: 100%; padding: 0; } }
.filter-form { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: .8rem; align-items: end; }
.filter-form__action { min-width: 105px; }
.filter-form__action button { width: 100%; }
.table-actions form { margin: 0; }
.page-main > form:not(.filter-form):not(.inline-form) { display: grid; gap: .75rem; max-width: 760px; padding: clamp(1rem, 2vw, 1.6rem); margin: 0 0 1.25rem; background: var(--stg-surface); border: 1px solid var(--stg-border); border-radius: var(--stg-radius); box-shadow: var(--stg-shadow-sm); }
.page-main > form:not(.filter-form):not(.inline-form) > br { display: none; }
.page-main > form:not(.filter-form):not(.inline-form) > button { width: fit-content; margin-top: .5rem; }
.page-main > .table-responsive { margin-bottom: 1.25rem; box-shadow: var(--stg-shadow-sm); }
.page-main > p > a:not(.btn) { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
@media (max-width: 900px) { .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-form__action { grid-column: 1 / -1; } }
@media (max-width: 640px) { .filter-form { grid-template-columns: 1fr; } .filter-form__action { grid-column: auto; } }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--stg-primary); font-weight: 800; font-size: .88rem; }
.store-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr); gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; padding: clamp(1.2rem, 3vw, 2.35rem); border-radius: var(--stg-radius-lg); color: #fff; background: radial-gradient(circle at 12% 0%, rgba(226, 191, 137, .28), transparent 34%), linear-gradient(125deg, var(--stg-primary-900), var(--stg-primary)); box-shadow: var(--stg-shadow); }
.store-hero h1 { color: #fff; margin: .5rem 0; }
.store-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.84); }
.points-balance-card { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 1.35rem; border: 1px solid rgba(255,255,255,.24); border-radius: var(--stg-radius); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.points-balance-card > span, .points-balance-card small { color: rgba(255,255,255,.8); }
.points-balance-card strong { display: block; margin: .1rem 0; color: #fff; font-size: 2rem; line-height: 1; font-family: var(--stg-font-display); }
.points-balance-card a { margin-top: .9rem; color: #fff; font-size: .88rem; font-weight: 800; }
.store-toolbar { display: flex; gap: 1rem; align-items: end; justify-content: space-between; }
.store-toolbar .filter-form { flex: 1; grid-template-columns: minmax(200px, 1fr) auto; }
.cart-link span { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 999px; color: var(--stg-primary); background: var(--stg-accent); font-size: .75rem; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.product-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); background: var(--stg-surface); box-shadow: var(--stg-shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--stg-shadow); }
.product-card__visual { display: grid; place-items: center; min-height: 126px; color: var(--stg-primary); background: linear-gradient(135deg, #fbf6ed, #f0dfc0); font-size: 2.8rem; }
.product-card__body { padding: 1rem 1rem .7rem; }
.product-card__body h2 { margin: .35rem 0 .55rem; font-size: 1.12rem; }
.product-card__body p { margin: 0; color: var(--stg-text-muted); font-size: .92rem; line-height: 1.75; }
.product-category { display: inline-flex; padding: .22rem .55rem; border-radius: 999px; color: var(--stg-primary); background: var(--stg-primary-100); font-size: .76rem; font-weight: 800; }
.product-card__footer { display: flex; gap: .75rem; align-items: end; justify-content: space-between; margin-top: auto; padding: .85rem 1rem 1rem; border-top: 1px solid var(--stg-border); }
.product-price { display: flex; flex-direction: column; }
.product-price strong { color: var(--stg-primary); font-size: 1.2rem; font-family: var(--stg-font-display); }
.product-price span { color: var(--stg-text-muted); font-size: .78rem; }
.product-card__form { display: grid; grid-template-columns: 50px auto; gap: .4rem; align-items: center; }
.product-card__form input { width: 50px; min-height: 38px; padding: .35rem; text-align: center; }
.product-card__form button { min-height: 38px; padding: .55rem .7rem; font-size: .85rem; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .store-hero { grid-template-columns: 1fr; } .store-toolbar { display: grid; align-items: stretch; } .store-toolbar .filter-form { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; } }
.wallet-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .7fr); gap: 1rem; margin-bottom: 1rem; }
.wallet-summary__balance, .wallet-summary__rate { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--stg-radius); }
.wallet-summary__balance { flex-direction: column; align-items: flex-start; color: #fff; background: linear-gradient(125deg, var(--stg-primary-900), var(--stg-primary)); box-shadow: var(--stg-shadow); }
.wallet-summary__balance span, .wallet-summary__balance small { color: rgba(255,255,255,.8); }
.wallet-summary__balance strong { color: #fff; font-family: var(--stg-font-display); font-size: 2.2rem; line-height: .9; }
.wallet-summary__rate { border: 1px solid var(--stg-border); background: var(--stg-surface); box-shadow: var(--stg-shadow-sm); }
.wallet-summary__rate > i { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: var(--stg-primary); background: var(--stg-primary-100); }
.wallet-summary__rate span, .wallet-summary__rate small { display: block; color: var(--stg-text-muted); font-size: .85rem; }
.wallet-summary__rate strong { display: block; margin: .12rem 0; color: var(--stg-text); }
.wallet-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 1rem; margin-bottom: 1.25rem; }
.wallet-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.wallet-form > div:first-of-type, .wallet-form > div:nth-of-type(2) { grid-column: span 1; }
.wallet-form > div:nth-of-type(3), .wallet-form .conversion-preview, .wallet-form .form-actions { grid-column: 1 / -1; }
.conversion-preview { display: flex; gap: .35rem; align-items: baseline; padding: .8rem 1rem; border: 1px dashed #d8b271; border-radius: .75rem; color: var(--stg-primary-900); background: #fff8ea; }
.conversion-preview strong { margin-inline-start: auto; font-family: var(--stg-font-display); font-size: 1.4rem; }
.conversion-preview small { color: var(--stg-text-muted); }
.wallet-tips h2 { margin-top: 0; font-size: 1.05rem; }
.wallet-tips ul { padding: 0 1.1rem 0 0; margin: .7rem 0 0; color: var(--stg-text-muted); }
.wallet-tips li + li { margin-top: .65rem; }
.points-positive { color: var(--stg-success); }.points-negative { color: var(--stg-danger); }
@media (max-width: 760px) { .wallet-summary, .wallet-layout { grid-template-columns: 1fr; } .wallet-form { grid-template-columns: 1fr; } .wallet-form > div:first-of-type, .wallet-form > div:nth-of-type(2) { grid-column: auto; } }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(255px, .6fr); gap: 1rem; align-items: start; }
.cart-form .form-actions { margin: 1rem 0 0; }
.quantity-input { width: 76px; min-height: 38px; text-align: center; }
.cart-summary h2 { margin-top: 0; font-size: 1.15rem; }.cart-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--stg-border); }.cart-summary > div strong { color: var(--stg-primary); font-family: var(--stg-font-display); }.cart-summary hr { border: 0; border-top: 1px solid var(--stg-border); margin: 1rem 0; }.cart-summary .w-100 { width: 100%; justify-content: center; }.cart-continue-link { display: block; margin-top: .9rem; text-align: center; font-weight: 800; font-size: .9rem; }.clear-cart-form { margin-top: 1rem; }.btn-link-danger { padding: 0; color: var(--stg-danger); background: transparent; border: 0; box-shadow: none; }.btn-link-danger:hover { color: #971f1f; background: transparent; transform: none; }
@media (max-width: 850px) { .cart-layout { grid-template-columns: 1fr; } }
.orders-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 1rem; margin-bottom: 1rem; }.orders-overview article { padding: 1rem 1.1rem; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); background: var(--stg-surface); box-shadow: var(--stg-shadow-sm); }.orders-overview span, .orders-overview small { display: block; color: var(--stg-text-muted); font-size: .82rem; }.orders-overview strong { display: block; margin: .25rem 0; color: var(--stg-primary); font-family: var(--stg-font-display); font-size: 1.45rem; }.order-items { max-width: 360px; line-height: 1.65; }.order-items small { display: block; margin-top: .25rem; color: var(--stg-text-muted); font-size: .78rem; }
@media (max-width: 520px) { .orders-overview { grid-template-columns: 1fr; } }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 1rem; align-items: start; }.checkout-summary h2 { margin-top: 0; font-size: 1.15rem; }.checkout-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .68rem 0; border-bottom: 1px solid var(--stg-border); }.checkout-summary > div strong { color: var(--stg-primary); font-family: var(--stg-font-display); }.checkout-summary .checkout-summary__total { margin-top: .3rem; border: 0; color: var(--stg-primary-900); }.checkout-summary .checkout-summary__total strong { font-size: 1.25rem; }.checkout-summary p { margin: 1rem 0; color: var(--stg-text-muted); font-size: .85rem; line-height: 1.7; }.checkout-summary .w-100 { width: 100%; justify-content: center; }
@media (max-width: 850px) { .checkout-layout { grid-template-columns: 1fr; } }
.public-page { max-width: 1180px; }.activities-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 1.5rem; align-items: stretch; margin-bottom: clamp(2.4rem, 6vw, 5rem); padding: clamp(1.4rem, 4vw, 3.5rem); border-radius: var(--stg-radius-lg); color: #fff; background: radial-gradient(circle at 5% 0%, rgba(255,255,255,.15), transparent 31%), linear-gradient(130deg, var(--stg-primary-900), var(--stg-primary)); box-shadow: var(--stg-shadow); }.activities-hero h1 { max-width: 700px; margin: .7rem 0; color: #fff; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.35; }.activities-hero > div > p { max-width: 680px; color: rgba(255,255,255,.84); font-size: 1.05rem; line-height: 1.85; }.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.35rem; }.hero-actions .btn-secondary { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }.hero-actions .btn-secondary:hover { color: var(--stg-primary); background: #fff; }.activities-hero__quote { display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--stg-radius); background: rgba(255,255,255,.1); }.activities-hero__quote > i { color: var(--stg-accent); font-size: 1.8rem; }.activities-hero__quote p { margin: .75rem 0; color: #fff; font-family: var(--stg-font-display); font-size: 1.12rem; line-height: 1.9; }.activities-hero__quote span { color: rgba(255,255,255,.72); font-size: .85rem; }.public-section { margin-bottom: clamp(2.4rem, 5vw, 4.25rem); }.public-section .section-heading { margin-bottom: 1.2rem; }.public-section .section-heading h2 { margin: .35rem 0; font-size: clamp(1.55rem, 3vw, 2.25rem); }.public-section .section-heading p { margin: 0; color: var(--stg-text-muted); }.activity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.activity-card { padding: 1.2rem; border: 1px solid var(--stg-border); border-radius: var(--stg-radius); background: var(--stg-surface); box-shadow: var(--stg-shadow-sm); }.activity-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .9rem; border-radius: 14px; color: var(--stg-primary); background: var(--stg-primary-100); font-size: 1.25rem; }.activity-card h3 { margin: 0 0 .45rem; font-size: 1.1rem; }.activity-card p { margin: 0; color: var(--stg-text-muted); line-height: 1.75; font-size: .9rem; }.how-it-works { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--stg-radius-lg); background: #fbf6ed; }.steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.steps-list article { display: flex; gap: .8rem; align-items: flex-start; }.steps-list article > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--stg-primary); font-weight: 800; }.steps-list h3 { margin: .25rem 0; font-size: 1rem; }.steps-list p { margin: 0; color: var(--stg-text-muted); font-size: .9rem; line-height: 1.7; }.public-cta { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: clamp(1.35rem, 3vw, 2.2rem); border-radius: var(--stg-radius-lg); color: #fff; background: linear-gradient(125deg, #ffff00, #ff0000); }.public-cta h2 { margin: .35rem 0; color: #fff; }.public-cta p { margin: 0; color: rgba(255,255,255,.8); }.btn-light { color: #173f38; background: #fff; white-space: nowrap; }.btn-light:hover { color: #173f38; background: #f8f5ee; }
@media (max-width: 900px) { .activities-hero { grid-template-columns: 1fr; }.activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.steps-list { grid-template-columns: 1fr; }.public-cta { align-items: flex-start; flex-direction: column; } }
@media (max-width: 560px) { .activity-grid { grid-template-columns: 1fr; }.hero-actions { flex-direction: column; }.hero-actions .btn { justify-content: center; }.public-cta .btn-light { width: 100%; justify-content: center; } }
:focus-visible { outline: 3px solid rgba(193, 139, 57, .78); outline-offset: 3px; }.skip-link { position: fixed; top: .75rem; right: .75rem; z-index: 100; padding: .6rem .9rem; color: #fff; background: var(--stg-primary-900); border-radius: .5rem; transform: translateY(-150%); }.skip-link:focus { transform: translateY(0); }@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }@media print { .site-header, .site-nav, .site-footer, .flash-message, .btn, button, .cart-link, .hero-actions, .clear-cart-form { display: none !important; } .page-main { max-width: none; padding: 0; } body { background: #fff; } .content-card, .table-card, .product-card { box-shadow: none; } }
/* الهوية الشبابية المعتمدة: نيلي + سيان + كورال + أصفر دافئ. */
body { background: radial-gradient(circle at 8% 3%, rgba(16, 185, 221, .16), transparent 24%), radial-gradient(circle at 92% 9%, rgba(122, 92, 255, .12), transparent 22%), linear-gradient(180deg, #fbfdff 0%, var(--stg-cream) 54%, #edf6ff 100%); }
button, .btn, input[type="submit"], input[type="button"] { background: linear-gradient(135deg, var(--stg-primary), var(--stg-primary-light)); border-color: var(--stg-primary); box-shadow: 0 7px 16px rgba(26, 47, 122, .2); }
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover { background: linear-gradient(135deg, var(--stg-primary-dark), var(--stg-primary)); border-color: var(--stg-primary-dark); box-shadow: 0 10px 22px rgba(26, 47, 122, .28); }
.content-card, .form-card, .table-card, .dashboard-card, .members-index, .grades-table-container, .empty-report { border-color: rgba(220, 229, 255, .98); }
th, td { border-bottom-color: #e5ebff; }
th { color: var(--stg-primary-dark); background: linear-gradient(180deg, #eff4ff, #e5efff); }
tbody tr:nth-child(even) { background: #fbfcff; }
tbody tr:hover { background: #ecfbff; }
.site-header { background: rgba(255, 255, 255, .9); border-bottom-color: rgba(220, 229, 255, .92); }
.brand-mark { overflow: hidden; background: #fff; border-color: var(--stg-accent); box-shadow: 0 6px 16px rgba(16, 185, 221, .24); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-nav { background: linear-gradient(100deg, var(--stg-primary-900), var(--stg-primary) 56%, #2348b9); box-shadow: 0 7px 18px rgba(11, 27, 88, .2); }
.site-nav__link:hover, .site-nav__link.is-active { background: rgba(16, 185, 221, .16); border-bottom-color: var(--stg-accent); }
.site-nav__link--logout { color: #ffd8d5; }
.site-footer { color: #f3f7ff; background: linear-gradient(100deg, var(--stg-primary-900), #172b75); }
.site-footer p { color: #d7e4ff; }
.site-footer .social-links a:hover { background: var(--stg-coral); }
.auth-page { background: radial-gradient(circle at 12% 8%, rgba(16, 185, 221, .32), transparent 30%), radial-gradient(circle at 88% 86%, rgba(255, 197, 66, .32), transparent 27%), linear-gradient(145deg, #edf5ff, #f7f9ff 55%, #f0edff); }
.stat-card::after { background: rgba(16, 185, 221, .13); }
.empty-state { border-color: #bcd5ff; background: #eef5ff; }
.product-card__media { color: var(--stg-primary); background: linear-gradient(135deg, #e4faff 0%, #eff2ff 48%, #fff3d2 100%); }
.hero-panel { background: linear-gradient(125deg, var(--stg-primary-900), var(--stg-primary) 48%, var(--stg-purple) 100%); }
.hero-panel::after { border-color: rgba(16, 185, 221, .3); }
.product-card__description h2, .product-card__description h3, .product-card__description h4 { margin: .15rem 0 .5rem; color: var(--stg-primary-dark); font-size: .98rem; }
.product-card__description ul, .product-card__description ol { padding-right: 1.1rem; margin: 0 0 .65rem; }
.product-card__description hr { border: 0; border-top: 1px solid var(--stg-border); margin: .65rem 0; }
/* الصفحة الرئيسية العامة النابضة بالحياة. */
.public-home { max-width: none; padding: 0; overflow: hidden; }
.public-hero { position: relative; min-height: 600px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: clamp(3rem, 7vw, 7rem) max(1.5rem, calc((100vw - 1160px) / 2)); overflow: hidden; color: #fff; background: radial-gradient(circle at 75% 18%, rgba(16, 185, 221, .42), transparent 22%), radial-gradient(circle at 18% 85%, rgba(255, 197, 66, .22), transparent 28%), linear-gradient(125deg, #09175c 0%, #172f94 50%, #573ac2 100%); }
.public-hero::before { content: ''; position: absolute; width: 48rem; height: 48rem; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; left: -26rem; bottom: -33rem; }
.public-hero__content, .public-hero__visual { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; gap: .55rem; align-items: center; padding: .46rem .88rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.1); color: #d8fbff; font-size: .9rem; font-weight: 700; }
.hero-kicker i { color: var(--stg-gold); }
.public-hero h1 { margin: 1rem 0 .9rem; color: #fff; font-size: clamp(2.1rem, 5vw, 4.45rem); line-height: 1.25; letter-spacing: -.05em; }
.public-hero h1 span { color: #78e9ff; font-size: .57em; letter-spacing: 0; }
.public-hero__content > p { max-width: 630px; margin: 0; color: #e6ecff; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-actions .btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .9rem 1.35rem; font-weight: 800; text-decoration: none; }
.hero-btn-primary { background: linear-gradient(135deg, var(--stg-coral), #ff7c62) !important; border-color: var(--stg-coral) !important; box-shadow: 0 12px 28px rgba(255, 93, 103, .32) !important; }
.hero-btn-secondary { border-color: rgba(255,255,255,.46) !important; background: rgba(255,255,255,.1) !important; color: #fff !important; box-shadow: none !important; }
.hero-signup { margin-top: 1rem !important; font-size: .92rem !important; color: #d8e4ff !important; }
.hero-signup a { color: #9ef2ff; font-weight: 800; }
.public-hero__visual { min-height: 350px; display: grid; place-items: center; }
.hero-logo-wrap { position: relative; z-index: 2; width: min(310px, 70vw); aspect-ratio: 1; padding: .45rem; border-radius: 35% 65% 53% 47% / 43% 38% 62% 57%; background: linear-gradient(145deg, #fff, #b6effb); box-shadow: 0 25px 65px rgba(1, 10, 59, .38), 0 0 0 14px rgba(255,255,255,.11); transform: rotate(-4deg); overflow: hidden; }
.hero-logo-wrap img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transform: rotate(4deg) scale(1.08); }
.hero-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.45); border-radius: 50%; }
.hero-orbit--one { width: min(430px, 82vw); aspect-ratio: 1; }
.hero-orbit--two { width: min(530px, 100vw); aspect-ratio: 1; border-color: rgba(120,233,255,.3); transform: rotate(24deg); }
.hero-float { position: absolute; z-index: 3; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; box-shadow: 0 9px 22px rgba(5, 12, 60, .25); }
.hero-float--star { top: 12%; right: 8%; background: var(--stg-gold); color: #684200; }
.hero-float--heart { bottom: 11%; left: 6%; background: var(--stg-coral); color: #fff; }
.hero-float--spark { top: 55%; right: -2%; background: var(--stg-accent); color: var(--stg-primary-900); }
.home-features { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: min(1100px, calc(100% - 2rem)); margin: -2.2rem auto 3rem; }
.home-feature { min-height: 180px; padding: 1.45rem; border: 1px solid rgba(221, 230, 255, .9); border-radius: 1.35rem; background: rgba(255,255,255,.95); box-shadow: 0 15px 35px rgba(12, 30, 100, .12); }
.home-feature > span { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 1rem; font-size: 1.25rem; }
.home-feature h2 { margin: .9rem 0 .35rem; color: var(--stg-primary-dark); font-size: 1.15rem; }
.home-feature p { margin: 0; color: var(--stg-muted); line-height: 1.8; font-size: .93rem; }
.home-feature--cyan > span { color: #006e87; background: #c9f8ff; }.home-feature--gold > span { color: #815900; background: #fff0bb; }.home-feature--coral > span { color: #a63145; background: #ffe0e1; }
.form-help { display: block; margin-top: .42rem; color: var(--stg-muted); line-height: 1.65; }
.dt-container { margin-top: 1rem; direction: rtl; }
.dt-container .dt-search { display: flex; align-items: center; gap: .55rem; color: var(--stg-primary-dark); font-weight: 700; }
.dt-container .dt-search input { min-width: min(100%, 240px); margin-right: 0 !important; margin-left: 0 !important; }
.dt-container .dt-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.dt-container .dt-button { margin: 0 !important; padding: .55rem .72rem !important; border: 1px solid #cbd9ff !important; border-radius: .6rem !important; background: #f6f8ff !important; color: var(--stg-primary-dark) !important; font-family: inherit !important; font-size: .84rem !important; box-shadow: none !important; }
.dt-container .dt-button:hover { background: #e6f9ff !important; border-color: var(--stg-accent) !important; }
.dt-container .dt-paging .dt-paging-button { border-radius: .5rem; font-family: inherit; }
.dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { color: #fff !important; border-color: var(--stg-primary) !important; background: var(--stg-primary) !important; }
@media (max-width: 760px) { .public-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 3.5rem; text-align: center; }.public-hero__content { display: flex; flex-direction: column; align-items: center; }.public-hero__visual { min-height: 270px; order: -1; }.hero-logo-wrap { width: 210px; }.hero-orbit--one { width: 280px; }.hero-orbit--two { width: 350px; }.hero-actions { justify-content: center; }.home-features { grid-template-columns: 1fr; margin-top: -1.25rem; }.dt-container .dt-layout-row { gap: .85rem; }.dt-container .dt-search { width: 100%; }.dt-container .dt-search input { flex: 1; min-width: 0; } }
/* الإعلانات والمحتوى المنسق. */
.mailbox-list { display: grid; gap: 1rem; max-width: 920px; }
.mailbox-item { padding: 1.4rem; }
.mailbox-item__header { display: flex; align-items: center; gap: .85rem; padding-bottom: 1rem; border-bottom: 1px solid #e7ecfb; }
.mailbox-item__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .95rem; color: #006e87; background: #c9f8ff; }
.mailbox-item h2 { margin: 0; color: var(--stg-primary-dark); font-size: 1.22rem; }
.mailbox-item time { display: inline-block; margin-top: .26rem; color: var(--stg-muted); font-size: .84rem; }
.mailbox-item time i { margin-left: .3rem; }
.mailbox-item__content { margin-top: 1rem; }
.rich-content { color: var(--stg-text); line-height: 1.95; }
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content h2, .rich-content h3, .rich-content h4 { color: var(--stg-primary-dark); font-weight: 800; line-height: 1.45; }
.rich-content h2 { font-size: 1.35rem; }
.rich-content h3 { font-size: 1.15rem; }
.rich-content h4 { font-size: 1.02rem; }
.rich-content p { margin: .62rem 0; }
.rich-content ul, .rich-content ol { margin: .6rem 0; padding-right: 1.45rem; }
.rich-content li { margin: .35rem 0; }
.rich-content hr { border: 0; border-top: 1px solid #dfe7ff; margin: 1rem 0; }
.rich-content--compact { max-width: 35rem; max-height: 6.8rem; overflow: auto; font-size: .9rem; line-height: 1.65; }
.mailbox-form-card { max-width: 850px; margin-bottom: 1.25rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.inline-form { display: inline; }
.table-actions { white-space: nowrap; }
.empty-state { text-align: center; padding: 2.5rem 1.25rem; color: var(--stg-muted); }
.empty-state > i { color: var(--stg-accent); font-size: 2.2rem; }
.empty-state h2 { margin: .75rem 0 .3rem; color: var(--stg-primary-dark); font-size: 1.25rem; }
.empty-state p { margin: 0; }
/* الصفحة الرئيسية المرجعية: بطاقة ترحيب، خدمات، ودرجات. */
.home-reference { width: min(1440px, calc(100% - 2rem)); margin: 1.25rem auto 3rem; }
.reference-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); min-height: 345px; overflow: hidden; border: 1px solid #e6ecfb; border-radius: 1.85rem; background: linear-gradient(108deg, #fff 0%, #fff 54%, #f0fbff 100%); box-shadow: 0 18px 45px rgba(20, 48, 125, .10); }
.reference-hero::before { content: ''; position: absolute; inset: 1.05rem; border: 1px dashed rgba(16, 185, 221, .22); border-radius: 1.22rem; pointer-events: none; }
.reference-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.25rem); }
.reference-hero .hero-kicker { border-color: #cbeff7; background: #effdff; color: #097f9b; width: fit-content; }
.reference-hero h1 { margin: .9rem 0 .55rem; color: var(--stg-primary-dark); font-size: clamp(2rem, 4.3vw, 3.8rem); font-weight: 900; line-height: 1.32; letter-spacing: -.045em; }
.reference-hero h1 span { position: relative; color: var(--stg-primary); }
.reference-hero h1 span::after { content: ''; position: absolute; right: 0; bottom: -.25rem; width: 57%; height: .22rem; border-radius: 99px; background: var(--stg-accent); }
.reference-hero__copy > p { max-width: 620px; margin: .7rem 0 0; color: #53617f; font-size: 1.05rem; line-height: 2; }
.reference-hero .hero-actions { margin-top: 1.45rem; }
.reference-hero .hero-btn-secondary { border-color: #d5def5 !important; background: #fff !important; color: var(--stg-primary) !important; }
.reference-hero__art { position: relative; min-height: 345px; overflow: hidden; background: radial-gradient(circle at 48% 37%, #fff 0 15%, transparent 15.2%), linear-gradient(135deg, #d5f9ff 0%, #f6ffff 55%, #fff1ba 100%); }
.reference-hero__art::before, .reference-hero__art::after { content: ''; position: absolute; width: 140%; height: 66%; bottom: -45%; right: -16%; border-radius: 50% 50% 0 0; transform: rotate(-6deg); }
.reference-hero__art::before { background: #0ab9dc; opacity: .95; }
.reference-hero__art::after { bottom: -53%; right: -24%; background: #ffc542; }
.reference-hero__logo { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(245px, 58%); aspect-ratio: 1; padding: .5rem; border: .45rem solid #102b76; border-radius: 47% 53% 49% 51% / 43% 48% 52% 57%; background: #fff; box-shadow: 0 19px 35px rgba(20, 42, 112, .24); transform: translate(-50%, -48%) rotate(-6deg); overflow: hidden; }
.reference-hero__logo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transform: rotate(6deg) scale(1.1); }
.reference-hero__cross { position: absolute; z-index: 2; top: 10%; left: 11%; color: var(--stg-coral); font-size: 2rem; transform: rotate(-16deg); }
.reference-hero__dot { position: absolute; z-index: 1; display: block; border-radius: 50%; }
.reference-hero__dot--coral { top: 15%; right: 9%; width: 1rem; height: 1rem; background: var(--stg-coral); box-shadow: 0 0 0 .45rem rgba(255, 98, 91, .13); }
.reference-hero__dot--cyan { bottom: 30%; left: 10%; width: .75rem; height: .75rem; background: var(--stg-accent); box-shadow: 0 0 0 .5rem rgba(16, 185, 221, .13); }
.reference-hero__wave { position: absolute; z-index: 2; bottom: -22%; width: 82%; height: 46%; border: .45rem solid currentColor; border-radius: 50%; transform: rotate(-22deg); }
.reference-hero__wave--yellow { right: -31%; color: #ffdf7e; }
.reference-hero__wave--cyan { right: -26%; bottom: -28%; color: #acf4ff; }
.home-summary { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, .9fr)) minmax(260px, 1.65fr); gap: 1rem; margin: 1.15rem 0; }
.summary-card, .summary-message { min-height: 132px; border: 1px solid #e6ecfb; border-radius: 1.25rem; background: #fff; box-shadow: 0 11px 28px rgba(20, 48, 125, .07); }
.summary-card { display: flex; align-items: center; gap: .9rem; padding: 1.05rem; }
.summary-card__icon { display: grid; place-items: center; flex: 0 0 auto; width: 3.45rem; height: 3.45rem; border-radius: 1rem; font-size: 1.5rem; }
.summary-card strong, .summary-card span:not(.summary-card__icon) { display: block; }
.summary-card strong { color: var(--stg-primary-dark); font-family: Roboto, Cairo, sans-serif; font-size: clamp(1.45rem, 2.25vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.summary-card div > span { margin-top: .25rem; color: var(--stg-muted); font-size: .86rem; }
.summary-card--cyan .summary-card__icon { color: #0087a6; background: #d8fbff; }.summary-card--gold .summary-card__icon { color: #926e04; background: #fff4ca; }.summary-card--coral .summary-card__icon { color: #c7434e; background: #ffebea; }
.summary-message { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.15rem 1.3rem; overflow: hidden; color: #fff; border: 0; background: linear-gradient(120deg, var(--stg-primary) 0%, #2455bd 100%); }
.summary-message::after { content: ''; position: absolute; width: 8rem; height: 8rem; left: -2.7rem; top: -4rem; border: 1.4rem solid rgba(255,255,255,.13); border-radius: 50%; }
.summary-message .eyebrow { color: #b8f7ff; font-size: .75rem; }
.summary-message h2 { margin: .25rem 0; color: #fff; font-size: 1.1rem; font-weight: 800; }
.summary-message p { margin: 0; color: #dce8ff; font-size: .8rem; line-height: 1.65; }
.summary-message > i { position: relative; z-index: 1; flex: 0 0 auto; color: #ffd45f; font-size: 2.25rem; transform: rotate(-14deg); }
.home-dashboard { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(400px, .82fr); gap: 1rem; align-items: stretch; }
.home-dashboard .content-card { margin: 0; padding: 1.35rem; }
.home-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 1.2rem; }
.home-panel-heading .eyebrow { color: #0589a5; }.home-panel-heading h2 { margin: .25rem 0 .25rem; color: var(--stg-primary-dark); font-size: 1.35rem; }.home-panel-heading p { max-width: 32rem; margin: 0; color: var(--stg-muted); font-size: .88rem; line-height: 1.65; }
.section-link { display: inline-flex; align-items: center; gap: .38rem; flex: 0 0 auto; color: #0b8eaa; font-size: .87rem; font-weight: 800; text-decoration: none; white-space: nowrap; }.section-link:hover { color: var(--stg-primary); }
.home-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.home-service-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e6ecfb; border-radius: 1rem; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.home-service-card:hover { border-color: #90eaf7; box-shadow: 0 13px 24px rgba(17, 76, 148, .12); transform: translateY(-3px); }
.home-service-card__media { position: relative; display: grid; place-items: center; height: 118px; overflow: hidden; background: linear-gradient(135deg, #ddfaff, #f4fbff 58%, #fff5d3); }.home-service-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }.product-media-fallback { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1.05rem; color: var(--stg-primary); background: rgba(255,255,255,.8); font-size: 1.55rem; box-shadow: 0 8px 18px rgba(7, 77, 129, .12); }.product-media-fallback--behind { position: absolute; z-index: 0; }.home-service-card__body { flex: 1; padding: .85rem .85rem .65rem; }.home-service-card__body > span { color: #0888a5; font-size: .73rem; font-weight: 800; }.home-service-card h3 { margin: .3rem 0 .38rem; color: var(--stg-primary-dark); font-size: .93rem; line-height: 1.5; }.home-service-card h3 a { color: inherit; text-decoration: none; }.home-service-card h3 a:hover { color: #0d94b0; }.home-service-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #64708b; font-size: .77rem; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.service-details-link { display: inline-flex; align-items: center; gap: .34rem; padding: .68rem .85rem .8rem; color: var(--stg-primary); border-top: 1px solid #edf1fb; font-size: .78rem; font-weight: 800; text-decoration: none; }.service-details-link:hover { color: #0788a5; background: #f4fcff; }
.compact-empty { display: grid; place-items: center; gap: .55rem; min-height: 190px; color: var(--stg-muted); text-align: center; }.compact-empty i { color: var(--stg-accent); font-size: 2rem; }.compact-empty p { margin: 0; }
.home-score-table-wrap { overflow-x: auto; }.home-score-table { width: 100%; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 .38rem !important; font-size: .84rem; }.home-score-table thead th { padding: .62rem .45rem !important; color: #fff !important; border: 0 !important; background: var(--stg-primary) !important; font-weight: 800; white-space: nowrap; }.home-score-table thead th:first-child { border-radius: 0 .55rem .55rem 0; }.home-score-table thead th:last-child { border-radius: .55rem 0 0 .55rem; }.home-score-table tbody td { padding: .6rem .45rem !important; color: #4c5872; border-top: 1px solid #eef2fa !important; border-bottom: 1px solid #eef2fa !important; background: #fbfcff; vertical-align: middle; white-space: nowrap; }.home-score-table tbody td:first-child { border-right: 1px solid #eef2fa; border-radius: 0 .55rem .55rem 0; }.home-score-table tbody td:last-child { border-left: 1px solid #eef2fa; border-radius: .55rem 0 0 .55rem; }.home-score-table tbody tr:hover td { background: #f0fcff; }.home-score-table strong { color: var(--stg-primary-dark); font-size: .82rem; }.rank-pill { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: .48rem; color: #936b00; background: #fff1bf; font-family: Roboto, Cairo, sans-serif; font-size: .76rem; font-weight: 800; }.score-total { color: #0087a3; font-weight: 800; }
.home-scores-panel .dt-container { margin-top: 0; }.home-scores-panel .dt-container .dt-layout-row:first-child { margin-bottom: .55rem; }.home-scores-panel .dt-container .dt-buttons { display: none; }.home-scores-panel .dt-container .dt-search label { display: none; }.home-scores-panel .dt-container .dt-search input { min-width: 160px; border-color: #dce7f7; background: #fbfdff; font-family: inherit; font-size: .8rem; }.home-scores-panel .dt-container .dt-info, .home-scores-panel .dt-container .dt-paging { font-size: .78rem; }
.home-join-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 1.7rem clamp(1.25rem, 4vw, 2.2rem); overflow: hidden; border-radius: 1.4rem; color: #fff; background: radial-gradient(circle at 90% 12%, rgba(16,185,221,.42), transparent 22%), linear-gradient(112deg, #142a73, #1c459f); }.home-join-cta .eyebrow { color: #b7faff; }.home-join-cta h2 { margin: .35rem 0; color: #fff; font-size: 1.4rem; }.home-join-cta p { margin: 0; color: #d9e6ff; }.home-join-cta .btn { flex: 0 0 auto; color: #832e36; border-color: #ffd5d1; background: #fff; box-shadow: 0 9px 20px rgba(0,0,0,.15); }
@media (max-width: 1120px) { .home-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.summary-message { grid-column: 1 / -1; min-height: auto; }.home-dashboard { grid-template-columns: 1fr; }.home-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .reference-hero { grid-template-columns: 1fr; }.reference-hero__copy { padding: 2.2rem 1.5rem; text-align: center; align-items: center; }.reference-hero__art { min-height: 250px; }.reference-hero__logo { width: 175px; }.reference-hero__cross { left: 19%; }.home-summary { grid-template-columns: 1fr; }.summary-message { grid-column: auto; }.home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-service-card__media { height: 145px; } }
@media (max-width: 520px) { .home-reference { width: min(100% - 1rem, 1440px); margin-top: .5rem; }.reference-hero { border-radius: 1.15rem; }.reference-hero::before { inset: .6rem; border-radius: .8rem; }.reference-hero__copy { padding: 1.75rem 1.15rem; }.reference-hero h1 { font-size: 2rem; }.reference-hero__copy > p { font-size: .93rem; }.reference-hero .hero-actions { width: 100%; justify-content: center; }.reference-hero .hero-actions .btn { justify-content: center; width: 100%; }.reference-hero__art { min-height: 215px; }.reference-hero__logo { width: 145px; border-width: .3rem; }.home-dashboard .content-card { padding: 1rem; }.home-panel-heading { align-items: flex-start; }.home-panel-heading p { font-size: .8rem; }.section-link { font-size: .75rem; }.home-service-grid { grid-template-columns: 1fr; }.home-service-card { display: grid; grid-template-columns: 94px 1fr; border-radius: .85rem; }.home-service-card__media { height: 100%; min-height: 115px; }.home-service-card__body { padding: .75rem .75rem .25rem; }.service-details-link { grid-column: 2; padding-top: .35rem; }.home-score-table { min-width: 495px; }.home-join-cta { align-items: flex-start; flex-direction: column; gap: 1rem; }.home-join-cta .btn { width: 100%; justify-content: center; } }
/* المتجر العام وتفاصيل المنتج. */
.public-store-page, .product-detail-page { width: min(1240px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.public-store-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; min-height: 240px; margin-bottom: 1rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.6rem; color: #fff; background: radial-gradient(circle at 83% 14%, rgba(16,185,221,.56), transparent 17%), radial-gradient(circle at 94% 90%, rgba(255,197,66,.45), transparent 24%), linear-gradient(120deg, #142a73, #1d4aa9 60%, #365dca); box-shadow: 0 18px 38px rgba(21, 48, 128, .17); }.public-store-hero::after { content: ''; position: absolute; width: 17rem; height: 17rem; left: -4.5rem; bottom: -9rem; border: 2rem solid rgba(255,255,255,.1); border-radius: 50%; }.public-store-hero > div { position: relative; z-index: 1; }.public-store-hero .eyebrow { color: #c6faff; }.public-store-hero h1 { margin: .45rem 0 .55rem; color: #fff; font-size: clamp(1.7rem, 3.3vw, 2.7rem); font-weight: 900; }.public-store-hero p { max-width: 675px; margin: 0; color: #e6eeff; line-height: 1.9; }.public-store-hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }.public-store-hero__actions .btn { display: inline-flex; align-items: center; gap: .4rem; border-color: #fff; color: #a13943; background: #fff; }.public-store-hero__actions .btn-secondary { border-color: rgba(255,255,255,.38); color: #fff; background: rgba(255,255,255,.1); }.public-store-hero__actions .btn span { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; border-radius: 99px; color: #fff; background: var(--stg-coral); font-size: .72rem; }.public-store-hero__icon { display: grid; place-items: center; flex: 0 0 auto; width: 9.5rem; height: 9.5rem; border: 1px solid rgba(255,255,255,.25); border-radius: 39% 61% 57% 43% / 44% 42% 58% 56%; color: #ffde78; background: rgba(255,255,255,.12); font-size: 4rem; transform: rotate(-10deg); }.public-store-hero__icon > i { transform: rotate(10deg); }.public-store-hero__icon span { position: absolute; top: .85rem; left: 1.2rem; color: #ff826e; font-size: 1.2rem; }.public-store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 0 0 1rem; padding: 1rem 1.3rem; }.public-store-toolbar .eyebrow { color: #078ba7; }.public-store-toolbar h2 { margin: .2rem 0 0; color: var(--stg-primary-dark); font-size: 1.05rem; }.category-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }.category-chip { padding: .5rem .82rem; border: 1px solid #dce6f7; border-radius: 99px; color: #586582; background: #fbfdff; font-size: .82rem; font-weight: 700; text-decoration: none; transition: .18s ease; }.category-chip:hover { border-color: #97eaf6; color: #007f9a; background: #f0fcff; }.category-chip.is-active { border-color: var(--stg-primary); color: #fff; background: var(--stg-primary); box-shadow: 0 6px 14px rgba(26,47,122,.18); }.public-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.public-product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e4ebf9; border-radius: 1.2rem; background: #fff; box-shadow: 0 10px 22px rgba(20,48,125,.06); transition: transform .2s ease, box-shadow .2s ease; }.public-product-card:hover { box-shadow: 0 16px 31px rgba(20,48,125,.13); transform: translateY(-4px); }.public-product-card__media { position: relative; display: grid; place-items: center; height: 180px; overflow: hidden; background: linear-gradient(135deg, #d9faff, #f5faff 57%, #fff1c5); }.public-product-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }.product-card-type { position: absolute; z-index: 2; top: .65rem; right: .65rem; padding: .28rem .55rem; border-radius: .45rem; color: #865100; background: #fff0b6; font-size: .72rem; font-weight: 800; }.product-card-type--service { color: #087890; background: #d9faff; }.public-product-card__body { flex: 1; padding: 1rem 1rem .75rem; }.product-category { display: inline-flex; color: #078ba6; font-size: .77rem; font-weight: 800; }.public-product-card h2 { margin: .32rem 0 .5rem; color: var(--stg-primary-dark); font-size: 1.02rem; line-height: 1.55; }.public-product-card h2 a { color: inherit; text-decoration: none; }.public-product-card h2 a:hover { color: #098da8; }.public-product-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #64708a; font-size: .84rem; line-height: 1.75; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }.public-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .55rem; padding: .75rem 1rem 1rem; border-top: 1px solid #edf1fa; }.product-price { display: flex; align-items: baseline; gap: .22rem; color: #8f6b00; }.product-price strong { font-family: Roboto, Cairo, sans-serif; font-size: 1.08rem; }.product-price span { font-size: .72rem; font-weight: 700; }.public-product-card__footer form { margin: 0; }.public-product-card__footer button, .details-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .52rem .7rem; border: 1px solid var(--stg-primary); border-radius: .62rem; color: #fff; background: var(--stg-primary); font: inherit; font-size: .78rem; font-weight: 800; text-decoration: none; cursor: pointer; }.public-product-card__footer button:hover, .details-button:hover { color: #fff; border-color: #0a9cb9; background: #0a9cb9; }.service-note { display: inline-flex; align-items: center; gap: .3rem; color: #09839d; font-size: .75rem; font-weight: 700; }.product-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; color: #74809a; font-size: .84rem; }.product-breadcrumb a { color: #098ba6; text-decoration: none; }.product-breadcrumb a:hover { color: var(--stg-primary); }.product-breadcrumb i { color: #a5b0c8; font-size: .68rem; }.product-detail-card { display: grid; grid-template-columns: minmax(320px, .87fr) minmax(0, 1.13fr); overflow: hidden; border: 1px solid #e4ebf9; border-radius: 1.5rem; background: #fff; box-shadow: 0 16px 38px rgba(20,48,125,.09); }.product-detail-media { position: relative; display: grid; place-items: center; min-height: 485px; overflow: hidden; background: radial-gradient(circle at 30% 22%, #fff, transparent 25%), linear-gradient(135deg, #cef7ff, #f5fbff 56%, #ffefbd); }.product-detail-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }.product-detail-media .product-media-fallback { width: 7rem; height: 7rem; border-radius: 2rem; font-size: 3rem; }.product-detail-content { padding: clamp(1.5rem, 4vw, 3rem); }.product-detail-content h1 { margin: .4rem 0 .65rem; color: var(--stg-primary-dark); font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 900; line-height: 1.35; }.product-detail-price { display: inline-flex; align-items: baseline; gap: .35rem; margin-bottom: 1rem; color: #996d00; }.product-detail-price strong { font-family: Roboto, Cairo, sans-serif; font-size: 1.65rem; }.product-detail-price span { font-weight: 800; }.product-detail-description { padding: 1rem 0; border-top: 1px solid #e9eef9; border-bottom: 1px solid #e9eef9; }.product-detail-description:empty::before { content: 'لا يوجد وصف إضافي لهذا المنتج حاليًا.'; color: var(--stg-muted); }.product-detail-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.3rem; }.product-detail-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }.product-detail-form { display: flex; align-items: center; gap: .55rem; margin: 0; }.product-detail-form label { margin: 0; color: #596580; font-size: .85rem; font-weight: 700; }.product-detail-form input { width: 4rem; min-height: 2.7rem; padding: .35rem; border: 1px solid #cfdcf2; border-radius: .55rem; text-align: center; font: inherit; }.product-detail-form button { display: inline-flex; align-items: center; gap: .38rem; min-height: 2.7rem; padding: .6rem .9rem; border: 1px solid var(--stg-coral); border-radius: .6rem; color: #fff; background: var(--stg-coral); font: inherit; font-weight: 800; cursor: pointer; }.product-detail-form button:hover { border-color: #e84e56; background: #e84e56; }.product-service-alert { display: flex; gap: .75rem; margin: .8rem 0 1rem; padding: .9rem; border: 1px solid #c9eff5; border-radius: .8rem; color: #136e83; background: #effdff; }.product-service-alert > i { font-size: 1.2rem; }.product-service-alert strong { display: block; margin-bottom: .18rem; color: #076f89; }.product-service-alert p { margin: 0; color: #4e7081; font-size: .88rem; line-height: 1.75; }.product-detail-reassurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }.product-detail-reassurance > div { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border: 1px solid #e4ebf9; border-radius: .9rem; background: #fff; }.product-detail-reassurance > div > i { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .7rem; color: #0687a2; background: #dbfaff; }.product-detail-reassurance strong, .product-detail-reassurance span { display: block; }.product-detail-reassurance strong { color: var(--stg-primary-dark); font-size: .82rem; }.product-detail-reassurance span { color: #6c7891; font-size: .74rem; line-height: 1.55; }
@media (max-width: 1040px) { .public-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.product-detail-card { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }.product-detail-media { min-height: 430px; } }
@media (max-width: 760px) { .public-store-hero { align-items: flex-start; min-height: 0; }.public-store-hero__icon { width: 6rem; height: 6rem; font-size: 2.5rem; }.public-store-toolbar { align-items: flex-start; flex-direction: column; }.category-chips { justify-content: flex-start; }.public-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.product-detail-card { grid-template-columns: 1fr; }.product-detail-media { min-height: 310px; }.product-detail-reassurance { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .public-store-page, .product-detail-page { width: min(100% - 1rem, 1240px); margin-top: .65rem; }.public-store-hero { padding: 1.35rem; border-radius: 1.15rem; }.public-store-hero__icon { display: none; }.public-store-hero h1 { font-size: 1.55rem; }.public-store-hero p { font-size: .87rem; }.public-store-hero__actions .btn { width: 100%; justify-content: center; }.public-product-grid { grid-template-columns: 1fr; }.public-product-card { display: grid; grid-template-columns: 120px 1fr; border-radius: .9rem; }.public-product-card__media { height: 100%; min-height: 146px; }.public-product-card__body { padding: .85rem .8rem .35rem; }.public-product-card__footer { grid-column: 2; padding: .5rem .8rem .8rem; }.product-detail-media { min-height: 255px; }.product-detail-content { padding: 1.25rem; }.product-detail-actions, .product-detail-form { align-items: stretch; flex-direction: column; }.product-detail-actions .btn, .product-detail-form button { justify-content: center; width: 100%; }.product-detail-form { display: grid; grid-template-columns: 1fr 5rem; }.product-detail-form button { grid-column: 1 / -1; }.product-detail-reassurance > div { padding: .8rem; } }
/* معاينة المنتج داخل سلة المشتريات. */
.cart-product { display: inline-flex; align-items: center; gap: .65rem; color: var(--stg-primary-dark); text-decoration: none; }.cart-product:hover { color: #078ba5; }.cart-product img, .cart-product__fallback { display: grid; place-items: center; flex: 0 0 auto; width: 2.55rem; height: 2.55rem; overflow: hidden; border-radius: .65rem; background: linear-gradient(135deg, #d9faff, #fff4c8); }.cart-product img { object-fit: cover; }.cart-product__fallback { color: var(--stg-primary); }
/* شريط التواصل الاجتماعي الموحد في جميع الصفحات. */
.social-footer { margin-top: auto; border-top: 1px solid rgba(207,220,247,.78); background: linear-gradient(100deg, #f8fbff, #eefbff 58%, #fff9e8); }.social-footer .site-footer__inner { align-items: center; gap: 1.5rem; }.social-footer__copy .eyebrow { color: #078ba6; }.social-footer__copy p { margin: .35rem 0 0; color: #6b7791; font-size: .8rem; }.social-footer__copy p strong { color: var(--stg-primary-dark); }.social-footer__links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }.social-footer__label { margin-left: .2rem; color: var(--stg-primary-dark); font-size: .82rem; font-weight: 800; }.social-footer__link { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid #d6e3f6; border-radius: .75rem; color: var(--stg-primary); background: #fff; font-size: .98rem; text-decoration: none; transition: .18s ease; }.social-footer__link:hover { border-color: var(--stg-accent); color: #fff; background: var(--stg-accent); transform: translateY(-2px); }.social-footer__link--placeholder { color: #aab7cc; background: #f7faff; cursor: default; }.social-footer__link--placeholder:hover { border-color: #d6e3f6; color: #aab7cc; background: #f7faff; transform: none; }.social-footer__link--activities { color: #bf8d00; background: #fff5ce; }.social-footer__link--activities:hover { color: #fff; background: var(--stg-gold); }
@media (max-width: 640px) { .social-footer .site-footer__inner { align-items: flex-start; flex-direction: column; }.social-footer__links { justify-content: flex-start; }.social-footer__label { width: 100%; margin: 0 0 .15rem; } }
/* شريط التنقل العلوي المستوحى من المرجع. */
.site-header__inner { gap: 1rem; }.public-primary-nav { display: flex; align-items: center; justify-content: center; gap: .2rem; margin-right: auto; margin-left: auto; }.public-primary-nav__link { position: relative; display: inline-flex; align-items: center; gap: .38rem; padding: .72rem .7rem; color: #52617e; font-size: .86rem; font-weight: 800; text-decoration: none; transition: color .18s ease; }.public-primary-nav__link::after { content: ''; position: absolute; right: 20%; bottom: .27rem; left: 20%; height: .18rem; border-radius: 99px; background: transparent; transform: scaleX(.25); transition: .18s ease; }.public-primary-nav__link:hover, .public-primary-nav__link.is-active { color: var(--stg-primary); }.public-primary-nav__link.is-active::after { background: var(--stg-accent); transform: scaleX(1); }.site-header__actions { display: flex; align-items: center; gap: .45rem; margin-right: auto; }.header-action-link, .header-login-link, .header-register-link { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; border-radius: .65rem; font-size: .77rem; font-weight: 800; text-decoration: none; }.header-action-link { width: 2.25rem; border: 1px solid #d8e3f6; color: var(--stg-primary); background: #fff; }.header-action-link:hover { color: #fff; border-color: var(--stg-accent); background: var(--stg-accent); }.header-login-link { padding: .55rem .72rem; color: var(--stg-primary); }.header-login-link:hover { color: #078ba6; }.header-register-link { padding: .55rem .85rem; color: #fff; background: var(--stg-coral); box-shadow: 0 6px 14px rgba(255,98,91,.2); }.header-register-link:hover { color: #fff; background: #e95055; }
@media (max-width: 980px) { .site-header__inner { flex-wrap: wrap; }.public-primary-nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid #edf1fa; }.site-header__actions { margin-right: auto; } }
@media (max-width: 560px) { .site-brand__copy small { display: none; }.site-brand__copy strong { max-width: 10rem; font-size: .82rem; }.public-primary-nav { justify-content: space-between; }.public-primary-nav__link { flex: 1; justify-content: center; padding: .6rem .2rem; font-size: .76rem; }.public-primary-nav__link span { display: none; }.public-primary-nav__link i { font-size: 1rem; }.header-login-link { display: none; }.header-register-link { padding-inline: .62rem; } }
/* جدول الفعاليات في الصفحة الرئيسية وفق المرجع البصري. */
.home-activity-table-wrap { overflow-x: auto; }.home-activity-table { width: 100%; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 .38rem !important; font-size: .78rem; }.home-activity-table thead th { padding: .62rem .42rem !important; color: #fff !important; border: 0 !important; background: var(--stg-primary) !important; font-size: .74rem; font-weight: 800; white-space: nowrap; }.home-activity-table thead th:first-child { border-radius: 0 .55rem .55rem 0; }.home-activity-table thead th:last-child { border-radius: .55rem 0 0 .55rem; }.home-activity-table tbody td { padding: .62rem .42rem !important; color: #5b6680; border-top: 1px solid #eef2fa !important; border-bottom: 1px solid #eef2fa !important; background: #fbfcff; vertical-align: middle; white-space: nowrap; }.home-activity-table tbody td:first-child { border-right: 1px solid #eef2fa; border-radius: 0 .55rem .55rem 0; }.home-activity-table tbody td:last-child { border-left: 1px solid #eef2fa; border-radius: .55rem 0 0 .55rem; }.home-activity-table tbody tr:hover td { background: #f0fcff; }.home-activity-table strong { color: var(--stg-primary-dark); font-size: .76rem; }.event-status { display: inline-flex; align-items: center; gap: .25rem; padding: .27rem .48rem; border-radius: .42rem; font-size: .7rem; font-weight: 800; }.event-status--available { color: #278447; background: #e5f7e6; }.event-status--completed { color: #747e91; background: #edf0f5; }.home-activities-panel .dt-container { margin-top: 0; }.home-activities-panel .dt-container .dt-buttons { display: none; }.home-activities-panel .dt-container .dt-search label { display: none; }.home-activities-panel .dt-container .dt-search input { min-width: 150px; border-color: #dce7f7; background: #fbfdff; font-family: inherit; font-size: .78rem; }.home-activities-panel .dt-container .dt-info, .home-activities-panel .dt-container .dt-paging { font-size: .75rem; }
@media (max-width: 520px) { .home-activity-table { min-width: 585px; } }
/* Rich Text Editor for product descriptions */
.product-rich-text-source {
width: 100%;
min-height: 180px;
display: block;
}
.product-rich-text-source--enhanced {
display: none;
}
.product-rich-editor {
display: none;
direction: rtl;
width: 100%;
margin-top: 0.5rem;
border-radius: 0.85rem;
overflow: hidden;
background: #fff;
}
.product-rich-editor--ready {
display: block;
}
.product-rich-editor .ql-toolbar.ql-snow {
direction: rtl;
border: 1px solid rgba(26, 47, 122, 0.18);
border-radius: 0.85rem 0.85rem 0 0;
background: #f7fbff;
}
.product-rich-editor .ql-container.ql-snow {
min-height: 220px;
border: 1px solid rgba(26, 47, 122, 0.18);
border-top: 0;
border-radius: 0 0 0.85rem 0.85rem;
font-family: "Cairo", sans-serif;
font-size: 1rem;
}
.product-rich-editor .ql-editor {
min-height: 220px;
direction: rtl;
text-align: right;
line-height: 1.9;
}
.product-rich-editor .ql-editor.ql-blank::before {
right: 1rem;
left: auto;
text-align: right;
font-style: normal;
color: #7b8799;
}
.product-rich-editor .ql-snow .ql-picker,
.product-rich-editor .ql-snow .ql-picker-label,
.product-rich-editor .ql-snow .ql-picker-options {
direction: ltr;
}
@media (max-width: 640px) {
.product-rich-editor .ql-toolbar.ql-snow {
padding: 0.45rem;
}
.product-rich-editor .ql-container.ql-snow,
.product-rich-editor .ql-editor {
min-height: 180px;
}
}
/* Product Quill editor: isolate vendor controls from global button styles. */
.product-rich-editor {
direction: rtl;
min-height: 260px;
background: #fff;
border: 1px solid rgba(26, 47, 122, .16);
border-radius: 0 0 14px 14px;
color: #1f2937;
}
.product-rich-editor .ql-toolbar.ql-snow {
direction: ltr;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
padding: 6px 7px;
background: #f8fbff;
border: 1px solid rgba(26, 47, 122, .16);
border-bottom: 0;
border-radius: 14px 14px 0 0;
}
.product-rich-editor .ql-toolbar.ql-snow .ql-formats {
display: inline-flex;
align-items: center;
gap: 1px;
margin-right: 5px;
margin-bottom: 2px;
}
.product-rich-editor .ql-toolbar.ql-snow button,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker-label,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
padding: 3px;
margin: 0;
border: 0;
border-radius: 5px;
background: transparent;
box-shadow: none;
line-height: 1;
}
.product-rich-editor .ql-toolbar.ql-snow button:hover,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker-label:hover,
.product-rich-editor .ql-toolbar.ql-snow button.ql-active,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active {
background: rgba(16, 185, 221, .15);
color: #1a2f7a;
}
.product-rich-editor .ql-toolbar.ql-snow button svg {
width: 18px;
height: 18px;
}
.product-rich-editor .ql-toolbar.ql-snow .ql-picker {
height: 26px;
font-size: 12px;
}
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-header,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-size {
width: auto;
min-width: 82px;
}
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-color,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-background {
width: 28px;
min-width: 28px;
}
.product-rich-editor .ql-container.ql-snow {
min-height: 230px;
border: 0;
font-family: inherit;
font-size: 15px;
line-height: 1.9;
}
.product-rich-editor .ql-editor {
min-height: 230px;
direction: rtl;
text-align: right;
padding: 16px 18px;
}
.product-rich-editor .ql-editor.ql-blank::before {
right: 18px;
left: auto;
font-style: normal;
color: #94a3b8;
}
.product-rich-editor .ql-editor img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.product-rich-editor .ql-editor video,
.product-rich-editor .ql-editor iframe {
display: block;
width: min(100%, 720px);
min-height: 260px;
margin: 12px auto;
border: 0;
border-radius: 10px;
}
.product-rich-editor .ql-tooltip {
direction: ltr;
z-index: 20;
}
.product-editor-status {
margin: 0 0 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: .9rem;
}
.product-editor-status--info { background: #e0f2fe; color: #075985; }
.product-editor-status--success { background: #dcfce7; color: #166534; }
.product-editor-status--error { background: #fee2e2; color: #991b1b; }
@media (max-width: 768px) {
.product-rich-editor .ql-toolbar.ql-snow { gap: 1px; padding: 5px; }
.product-rich-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 2px; }
.product-rich-editor .ql-toolbar.ql-snow button,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker-label { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }
.product-rich-editor .ql-toolbar.ql-snow button svg { width: 16px; height: 16px; }
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-header,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font,
.product-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-size { min-width: 66px; }
}
.product-rich-text-source--enhanced { display: none; }
.product-rich-editor:not(.product-rich-editor--ready) { display: none; }
.product-rich-editor--ready { display: block; }
/* Profile account identity */
.header-account-link {
display: inline-flex !important;
align-items: center !important;
gap: .55rem !important;
min-height: 42px !important;
padding: .15rem .35rem !important;
color: inherit !important;
text-decoration: none !important;
border-radius: 999px !important;
}
.header-account-link:hover,
.header-account-link:focus-visible {
background: rgba(16, 185, 221, .12) !important;
color: inherit !important;
}
.header-user-avatar {
display: block !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
object-fit: cover !important;
border: 2px solid rgba(255, 255, 255, .9) !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(10, 32, 78, .2) !important;
}
.header-user-name {
display: inline-block !important;
max-width: 180px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.profile-hero {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem;
color: #fff;
background: linear-gradient(135deg, #1a2f7a, #2354a5);
border-radius: 1.25rem;
box-shadow: 0 12px 30px rgba(26, 47, 122, .18);
}
.profile-hero h1 { color: #ffffff; }
.profile-hero p { color: rgba(255, 255, 255, .92); }
.profile-hero .profile-code strong { color: #ffffff; }
.profile-avatar-wrap { flex: 0 0 auto; }
.profile-avatar {
display: block;
width: 112px;
height: 112px;
object-fit: cover;
border: 4px solid rgba(255, 255, 255, .9);
border-radius: 50%;
background: #fff;
}
.profile-eyebrow {
margin-bottom: .35rem;
color: #b8eff9;
font-size: .85rem;
font-weight: 700;
}
.profile-code { color: rgba(255, 255, 255, .86); }
.profile-card {
border: 0;
border-radius: 1rem;
box-shadow: 0 8px 24px rgba(26, 47, 122, .09);
}
.profile-summary dt {
margin-top: .9rem;
color: #667085;
font-size: .85rem;
}
.profile-summary dt:first-child { margin-top: 0; }
.profile-summary dd { margin-bottom: 0; color: #1a2f7a; font-weight: 700; }
@media (max-width: 575.98px) {
.header-user-name { display: none !important; }
.profile-hero { align-items: flex-start; gap: .85rem; }
.profile-avatar { width: 82px; height: 82px; }
}
.login-options { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .85rem 0 1rem; color: #4b5568; font-size: .9rem; }
.login-options a { color: #1a2f7a; font-weight: 800; text-decoration: underline; }
.checkbox-label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.checkbox-label input { width: 1rem; height: 1rem; accent-color: #1a2f7a; }
@media (max-width: 520px) { .login-options { align-items: flex-start; flex-direction: column; } }