/* ============================================================
Rakizah — "Purple Najmah" art direction (mirrors the store's
craft-heritage language, with an INDEPENDENT identity).
Lilac canvas · deep purple · violet · copper accent.
Eight-point star (najmah) geometric motif (not tatreez).
Headings use the site display serif via --farouq-font-display.
RTL-safe (logical properties only — this file is NOT run through
the SCSS RTL compiler, so it must work as-is in both directions).
Loaded ONLY on Rakizah surfaces (Farouq_Assets::enqueue_scripts):
the landing template + the four Rakizah CPT archives/singles.
Because the file never loads elsewhere, selectors can target the
shared page chrome (#content, .card, .form-control…) safely.
============================================================ */
/* ------------------------------------------------------------
1) TOKENS + identity recolor
Scoped to #content.site-content — the common ancestor of every
Rakizah surface (incl. the singles' #content.section-mesh) and
OUTSIDE the shared header/footer, so those keep the site green.
Redefining the site's --farouq-* / --gradient-primary / *-alpha
tokens here repaints every token-driven rule (hero gradient,
badges, stat cards, section-mesh, buttons) from green→purple.
------------------------------------------------------------ */
#content.site-content {
/* Rakizah's own palette */
--rk-lilac:#F3EFF7; --rk-paper:#FBF9FE; --rk-ink:#241733; --rk-muted:#6E6480; --rk-line:#E4DCEF;
--rk-purple:#4A2C6B; --rk-purple-700:#3A2154; --rk-purple-900:#2A1740;
--rk-violet:#7E5BA6;
--rk-copper:#B5651D; --rk-copper-bright:#D98E3D;
--rk-shadow:0 24px 50px rgba(58,33,84,.15);
--rk-display:var(--farouq-font-display,"Sakkal Majalla","Traditional Arabic",Georgia,serif);
--rk-najmah:url('data:image/svg+xml;utf8,');
--rk-najmah-copper:url('data:image/svg+xml;utf8,');
--rk-najmah-white:url('data:image/svg+xml;utf8,');
/* --- repaint the inherited site tokens (green→purple, gold→copper) --- */
--farouq-green:#4A2C6B; --farouq-green-light:#7E5BA6; --farouq-green-dark:#2A1740;
--farouq-green-50:#F0EAF7; --farouq-green-500:#5B3A8C; --farouq-green-600:#3A2154;
--farouq-gold:#B5651D; --farouq-gold-light:#D98E3D; --farouq-gold-dark:#8B4A14; --farouq-gold-50:#FBF1E6;
--gradient-primary:linear-gradient(135deg,#4A2C6B 0%,#2A1740 100%);
--green-alpha-10:rgba(74,44,107,.10); --green-alpha-15:rgba(74,44,107,.15);
--green-alpha-20:rgba(74,44,107,.20); --green-alpha-25:rgba(74,44,107,.25);
--green-alpha-30:rgba(74,44,107,.30); --green-alpha-40:rgba(74,44,107,.40);
--green-alpha-50:rgba(74,44,107,.50); --green-alpha-60:rgba(74,44,107,.60);
--green-alpha-70:rgba(74,44,107,.70); --green-alpha-80:rgba(74,44,107,.80); --green-alpha-90:rgba(74,44,107,.90);
--green-light-alpha-10:rgba(126,91,166,.10);
--green-dark-alpha-30:rgba(42,23,64,.30);
--gold-alpha-10:rgba(181,101,29,.10); --gold-alpha-20:rgba(181,101,29,.20); --gold-alpha-50:rgba(181,101,29,.50);
/* lilac canvas for the whole Rakizah content area */
background-color:var(--rk-lilac);
}
/* light section background → soft lilac mesh (radials recolored via
the *-alpha override above); covers BOTH the nested archive/landing
.section-mesh and the singles' #content.section-mesh element. */
.section-mesh { background-color:var(--rk-paper) !important; }
/* shared najmah divider strip (analogue of the store's .fq-stitch) */
.rk-najmah-strip{ height:22px; background-image:var(--rk-najmah); background-size:22px 22px; opacity:.55; }
/* ------------------------------------------------------------
2) HERO — deep purple, najmah-embroidered, copper-framed
(the inline `background:var(--gradient-primary)` now resolves
to the purple gradient thanks to the token override above)
------------------------------------------------------------ */
.rakizah-hero{ position:relative; overflow:hidden; color:#F3EFF7; }
.rakizah-hero::before{
content:""; position:absolute; inset:0; background-image:var(--rk-najmah);
background-size:46px 46px; opacity:.12; pointer-events:none;
}
.rakizah-hero::after{
content:""; position:absolute; inset-inline:0; inset-block-end:0; height:14px;
background-image:var(--rk-najmah-copper); background-size:18px 18px; opacity:.85; pointer-events:none;
}
.rakizah-hero .container{ position:relative; z-index:1; }
/* kicker badge → store's underline-kicker look (copper), not a pill */
.rakizah-hero .hero-badge{
background:transparent !important; border:none !important; border-radius:0 !important;
padding:0 !important; color:var(--rk-copper-bright) !important; font-weight:700;
font-size:13.5px; letter-spacing:.04em; gap:8px; align-items:center; margin-bottom:18px;
}
.rakizah-hero .hero-badge::before{
content:""; width:30px; height:2px; background:var(--rk-copper-bright); display:inline-block;
}
/* serif headline, exactly like the shop hero title */
.rakizah-hero h1{
font-family:var(--rk-display); font-weight:700; line-height:1.12;
font-size:clamp(30px,5vw,52px); text-wrap:balance;
}
.rakizah-hero .lead{ color:#e2d8ef !important; }
/* status pill inside the (single-vacancy) hero → copper so it reads on purple */
.rakizah-hero .text-bg-success{ background-color:var(--rk-copper) !important; color:#fff !important; }
/* ------------------------------------------------------------
3) BUTTONS — purple primary / copper action
------------------------------------------------------------ */
/* hero "white" CTA → copper action button (analogue of qirmizi) */
.rakizah-hero .btn-farouq--white{
background:var(--rk-copper) !important; color:#fff !important; border:none !important;
border-radius:2px !important; font-weight:700; box-shadow:0 12px 26px rgba(181,101,29,.3) !important;
}
.rakizah-hero .btn-farouq--white:hover{ background:var(--rk-copper-bright) !important; color:#fff !important; transform:translateY(-2px); }
/* hero outline CTA */
.rakizah-hero .btn-farouq--outline-light{
background:rgba(255,255,255,.08) !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.55) !important;
border-radius:2px !important; font-weight:700;
}
.rakizah-hero .btn-farouq--outline-light:hover{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
/* in-page outline buttons (view-all, card CTAs, share) → purple, crisp */
.btn-farouq--outline{
background:transparent !important; color:var(--rk-purple) !important;
border:1.5px solid var(--rk-line) !important; border-radius:2px !important; font-weight:700;
}
.btn-farouq--outline:hover{ border-color:var(--rk-copper) !important; color:var(--rk-copper) !important; background:transparent !important; }
/* primary action button (apply / register / search / contact) → copper */
.btn-farouq--primary{
background:var(--rk-copper) !important; color:#fff !important; border:none !important;
border-radius:2px !important; font-weight:700;
}
.btn-farouq--primary:hover{ background:var(--rk-copper-bright) !important; color:#fff !important; transform:translateY(-1px); }
/* ------------------------------------------------------------
4) SECTION HEADINGS + kicker badge
------------------------------------------------------------ */
#content.site-content h2{ font-family:var(--rk-display); color:var(--rk-purple); font-weight:700; }
/* page intro lead — a deliberate mission line, not a floating orphan */
.rakizah-intro p{ font-size:1.0625rem; line-height:1.95; color:var(--rk-ink); margin:0; }
/* skill chip (kept — used on the course/vacancy cards) */
.badge-farouq--green{
background:var(--gold-alpha-10) !important; color:var(--rk-copper) !important;
border:1px solid var(--gold-alpha-20) !important; border-radius:2px;
}
/* ------------------------------------------------------------
5) STAT CARDS — paper "gallery" cards w/ najmah top accent
------------------------------------------------------------ */
.page-rakizah .stat-card{
background:var(--rk-paper) !important; border:1px solid var(--rk-line) !important;
border-radius:4px !important; box-shadow:none !important; overflow:hidden; position:relative;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.page-rakizah .stat-card::before{
content:""; position:absolute; inset-block-start:0; inset-inline:0; height:8px; width:auto;
background-image:var(--rk-najmah); background-size:14px 14px; background-color:transparent;
opacity:.6; border-radius:0;
}
.page-rakizah .stat-card:hover{ transform:translateY(-5px); box-shadow:var(--rk-shadow) !important; border-color:rgba(181,101,29,.4) !important; }
.page-rakizah .stat-card__icon{
width:60px; height:60px; border-radius:14px; display:grid; place-items:center; margin-inline:auto;
background:linear-gradient(145deg,var(--rk-purple),var(--rk-purple-900)); color:#fff;
}
.page-rakizah .stat-card__icon i{ color:#fff; font-size:1.5rem; }
.page-rakizah .stat-card__number{ font-family:var(--rk-display); color:var(--rk-purple) !important; font-weight:800; }
.page-rakizah .stat-card__label{ color:var(--rk-muted); }
/* ------------------------------------------------------------
6) CONTENT CARDS — paper, line border, crisp 4px, serif title,
najmah accent under the image, hover lift (store card language)
------------------------------------------------------------ */
.card{
background:var(--rk-paper) !important; border:1px solid var(--rk-line) !important;
border-radius:4px !important; box-shadow:none !important; overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--rk-shadow) !important; border-color:rgba(181,101,29,.4) !important; }
/* najmah accent strip under any card image */
.card > a:has(> img)::after,
.course-card > a.d-block::after,
.vacancy-card > a.d-block::after{
content:""; display:block; height:9px; background-image:var(--rk-najmah);
background-size:14px 14px; background-position:center; background-repeat:repeat-x; opacity:.6;
}
.card > a:has(> img),
.course-card > a.d-block,
.vacancy-card > a.d-block{ display:block; position:relative; }
/* card titles → serif, deep purple */
.card h3 a, .card h2 a, .card .h5 a{ font-family:var(--rk-display); color:var(--rk-purple) !important; font-weight:700; }
.card h3 a:hover, .card h2 a:hover, .card .h5 a:hover{ color:var(--rk-copper) !important; }
/* status pills (light surface): "open" → purple, "closed" stays muted grey */
.text-bg-success{ background-color:var(--rk-purple) !important; color:#fff !important; }
/* card meta icons → copper */
.card .list-unstyled i, .vacancy-card .fa-building{ color:var(--rk-copper); }
/* image placeholder (no thumbnail) → purple gradient + najmah veil */
.rakizah-card__placeholder{
background:linear-gradient(145deg,var(--rk-purple),var(--rk-purple-900)) !important; color:#fff;
position:relative; overflow:hidden;
}
/* single centered najmah watermark (NOT tiled) → every placeholder identical,
no per-card tiling-phase drift; the icon stays on top via z-index */
.rakizah-card__placeholder::after{
content:""; position:absolute; inset:0;
background-image:var(--rk-najmah-white); background-repeat:no-repeat;
background-position:center; background-size:150px 150px; opacity:.12; pointer-events:none;
}
.rakizah-card__placeholder i{ position:relative; z-index:1; }
/* ------------------------------------------------------------
7) PARTNER TILES + generic white panels → paper, line, crisp
(single-page overview / apply / sidebar panels, job-alert box)
------------------------------------------------------------ */
.partner-tile,
#content.site-content .bg-white{
background-color:var(--rk-paper) !important; border:1px solid var(--rk-line) !important;
border-radius:4px !important; box-shadow:none !important;
}
.partner-tile{ transition:transform .25s, box-shadow .25s, border-color .25s; padding:0.6rem !important; min-height:64px; }
.partner-tile img{ max-height:40px !important; }
.partner-tile span{ font-size:12.5px; line-height:1.35; }
.partner-tile:hover{ transform:translateY(-4px); box-shadow:var(--rk-shadow) !important; border-color:rgba(181,101,29,.4) !important; }
/* ------------------------------------------------------------
7b) FOUNDING DONORS / FUNDERS band («الجهات المانحة المؤسِّسة»)
larger, prominent logo cards w/ najmah top accent
------------------------------------------------------------ */
.rakizah-funders .badge-farouq--green{ display:inline-block; }
.rakizah-funder-card{
background:var(--rk-paper); border:1px solid var(--rk-line); border-radius:4px;
padding:32px 24px; position:relative; overflow:hidden;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.rakizah-funder-card::before{
content:""; position:absolute; inset-block-start:0; inset-inline:0; height:9px;
background-image:var(--rk-najmah-copper); background-size:14px 14px; opacity:.6;
}
.rakizah-funder-card:hover{ transform:translateY(-5px); box-shadow:var(--rk-shadow); border-color:rgba(181,101,29,.4); }
.rakizah-funder-logo{
width:auto; max-width:160px; max-height:110px; object-fit:contain; margin:8px auto 16px;
}
.rakizah-funder-name{
font-family:var(--rk-display); color:var(--rk-purple); font-weight:700; font-size:18px; line-height:1.45;
}
.rakizah-funder-desc{
color:var(--rk-muted); font-size:13px; line-height:1.7; margin-top:8px; max-width:46ch;
}
/* sidebar detail icons → copper */
.rakizah-detail-ico{ color:var(--rk-copper) !important; }
/* ------------------------------------------------------------
7c) RAKIZAH FUND — "build the center" simulation + donation
------------------------------------------------------------ */
/* section heading → larger display + copper kicker */
.rakizah-fund h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.18; }
.rakizah-fund .rk-kicker{ display:inline-flex; align-items:center; gap:10px; color:var(--rk-copper);
font-weight:800; font-size:13px; letter-spacing:.05em; margin-bottom:10px; }
.rakizah-fund .rk-kicker::before{ content:""; width:30px; height:2px; background:var(--rk-copper); display:inline-block; }
/* USD campaign progress */
.rk-fund-progress{ background:var(--rk-paper); border:1px solid var(--rk-line); border-radius:4px; padding:14px 16px; margin-bottom:0; }
.rk-fund-progress__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--rk-muted); margin-bottom:11px; }
.rk-fund-progress__row b{ color:var(--rk-purple); font-family:var(--rk-display); font-size:24px; }
.rk-fund-bar{ position:relative; height:18px; background:var(--rk-line); border-radius:99px; overflow:hidden; }
.rk-fund-bar__fill, .rk-fund-bar__alfanar{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:99px; transition:width .6s ease; }
.rk-fund-bar__fill{ background:linear-gradient(90deg,var(--rk-copper),var(--rk-copper-bright)); z-index:1; }
.rk-fund-bar__alfanar{ background:linear-gradient(90deg,#4A60AE,#34488F); z-index:2; }
.rk-fund-progress__meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--rk-muted); margin-top:8px; }
.rk-legend{ display:inline-flex; align-items:center; gap:5px; }
.rk-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.rk-dot--alfanar{ background:#34488F; }
.rk-dot--community{ background:var(--rk-copper); }
/* the building stage — cap the building width so its (aspect-locked) height
never overshoots the donation column on wide screens; sky-tinted bg so the
centered scene blends when capped. */
.rk-fund-stage{ background:linear-gradient(180deg,#efe7f6,#faf4ec); border:1px solid var(--rk-line); border-radius:4px; overflow:hidden; position:relative; }
.rk-fund-stage svg{ width:95%; max-height:380px; margin-inline:auto; }
.rk-fund-stage__hint{ font-size:12px; color:var(--rk-muted); text-align:center; padding:6px 8px; border-block-start:1px solid var(--rk-line); }
.rk-fund-stage__hint i{ color:var(--rk-copper); }
/* training-floor windows: dark → lit (gold) by community progress; preview pulse on amount */
.rk-win{ fill:#2e2540; transition:fill .6s ease, opacity .6s ease, filter .6s ease; }
.rk-win.lit{ fill:url(#rkWinLit); filter:drop-shadow(0 0 5px rgba(243,181,77,.85)); }
.rk-win.preview{ fill:url(#rkWinLit); filter:drop-shadow(0 0 5px rgba(243,181,77,.85)); animation:rkWinPulse 1.1s ease-in-out infinite; }
@keyframes rkWinPulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
/* collective share chips (25 / 50) + program sponsorship cards */
.rk-flow__lead{ font-size:13.5px; color:var(--rk-muted); margin:0 0 4px; line-height:1.6; }
.rk-sublabel{ font-size:12px; font-weight:700; color:var(--rk-purple); margin-top:2px; }
.rk-shares{ display:flex; gap:8px; align-items:stretch; }
.rk-share{ flex:1; border:1.5px solid var(--rk-line); background:#fff; border-radius:4px; padding:10px 6px; font-weight:800;
font-size:15px; color:var(--rk-purple); cursor:pointer; font-family:var(--rk-display); transition:all .2s; }
.rk-share:hover{ border-color:var(--rk-copper); }
.rk-share.is-active{ border-color:var(--rk-copper); background:#fbf3ea; color:var(--rk-copper); }
.rk-share-custom{ flex:1.4; }
.rk-share-custom input{ padding:9px 10px; font-size:14px; font-weight:700; font-family:var(--rk-display); }
.rk-share-custom .rk-amount__cur{ padding:0 9px; }
.rk-or{ display:flex; align-items:center; gap:10px; color:var(--rk-muted); font-size:12px; }
.rk-or::before, .rk-or::after{ content:""; flex:1; height:1px; background:var(--rk-line); }
/* عمود واحد ببطاقات أكبر وأوضح (كانت شبكة 2×2 مزدحمة) */
.rk-prog-list{ display:grid; grid-template-columns:1fr; gap:10px; }
.rk-prog{ display:flex; align-items:center; gap:14px; text-align:start; width:100%; background:#fff; border:1.5px solid var(--rk-line);
border-radius:10px; padding:15px 17px; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; position:relative; font-family:inherit; }
.rk-prog:hover{ border-color:var(--rk-copper); transform:translateY(-1px); }
.rk-prog__ic{ width:50px; height:50px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
background:linear-gradient(145deg,var(--rk-purple),var(--rk-purple-900)); color:#fff; font-size:21px; }
.rk-prog__body{ min-width:0; flex:1; }
.rk-prog__name{ display:block; font-family:var(--rk-display); color:var(--rk-purple); font-weight:700; font-size:16px; line-height:1.25; }
/* عدد المتدرّبات كشارة مستقلّة */
.rk-prog__meta{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--rk-purple);
background:var(--rk-lilac); border:1px solid var(--rk-line); border-radius:99px; padding:2px 10px; margin-top:6px; }
.rk-prog__meta i{ color:var(--rk-copper); font-size:11px; }
/* سعر الرعاية كرقم نحاسي بارز */
.rk-prog__price{ flex:0 0 auto; font-family:var(--rk-display); font-weight:800; color:var(--rk-copper);
font-size:15.5px; white-space:nowrap; text-align:center; line-height:1.2; }
.rk-prog__price small{ display:block; font-size:10.5px; color:var(--rk-muted); font-weight:600; }
.rk-prog__chk{ width:24px; height:24px; border-radius:50%; background:var(--rk-line); color:#fff;
display:grid; place-items:center; font-size:11px; flex:0 0 auto; transition:background .2s; }
.rk-prog.is-active{ border-color:var(--rk-copper); background:#fbf3ea; animation:rkPick .35s ease; }
.rk-prog.is-active .rk-prog__ic{ background:linear-gradient(145deg,var(--rk-copper),var(--rk-copper-bright)); }
.rk-prog.is-active .rk-prog__chk{ background:var(--rk-copper); }
@keyframes rkPick{ 0%{transform:scale(.99)} 60%{transform:scale(1.015)} 100%{transform:scale(1)} }
.rk-fund-impact{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--rk-copper);
background:var(--gold-alpha-10); border-inline-start:3px solid var(--rk-copper); border-radius:0 6px 6px 0; padding:10px 12px; }
/* the self-contained donation flow (wizard) — everything happens here */
.rk-flow{ background:var(--rk-paper); border:1px solid var(--rk-line); border-radius:4px; padding:16px; position:relative; overflow:hidden; }
.rk-flow::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:8px; background-image:var(--rk-najmah-copper); background-size:14px 14px; opacity:.55; }
.rk-steps{ list-style:none; display:flex; gap:6px; padding:0; margin:6px 0 16px; }
.rk-steps li{ flex:1; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--rk-muted); font-weight:600; }
.rk-steps li span{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:12px; background:var(--rk-line); color:#fff; }
.rk-steps li.is-active{ color:var(--rk-purple); }
.rk-steps li.is-active span{ background:var(--rk-purple); }
.rk-steps li.is-done span{ background:var(--rk-copper); }
.rk-step{ display:flex; flex-direction:column; gap:10px; }
.rk-step[hidden]{ display:none; }
.rk-amount label, .rk-field label{ display:block; font-size:13px; font-weight:600; color:var(--rk-purple); margin-bottom:5px; }
.rk-field label span{ color:var(--rk-copper); }
.rk-amount__box{ display:flex; align-items:center; border:1.5px solid var(--rk-line); border-radius:4px; background:#fff; overflow:hidden; }
.rk-amount__box input{ flex:1; border:none; background:transparent; padding:11px 12px; font-size:18px; font-weight:700; color:var(--rk-ink); font-family:var(--rk-display); }
.rk-amount__box input:focus{ outline:none; }
.rk-amount__box:focus-within{ border-color:var(--rk-copper); box-shadow:0 0 0 1px var(--rk-copper); }
.rk-amount__cur{ padding:0 12px; color:var(--rk-muted); font-weight:700; }
.rk-field input, .rk-field textarea{ width:100%; border:1.5px solid var(--rk-line); border-radius:4px; background:#fff; padding:10px 12px; font-size:14px; color:var(--rk-ink); font-family:inherit; }
.rk-field input:focus, .rk-field textarea:focus{ outline:none; border-color:var(--rk-copper); box-shadow:0 0 0 1px var(--rk-copper); }
.rk-freq{ display:flex; gap:8px; }
.rk-freq__opt{ flex:1; border:1.5px solid var(--rk-line); background:#fff; border-radius:4px; padding:9px; font-weight:700; font-size:13.5px; color:var(--rk-purple); cursor:pointer; font-family:inherit; transition:all .2s; }
.rk-freq__opt.is-active{ border-color:var(--rk-copper); background:#fbf3ea; color:var(--rk-copper); }
.rk-freq__opt i{ margin-inline-end:4px; }
.rk-confirm{ border:1px solid var(--rk-line); border-radius:4px; overflow:hidden; }
.rk-confirm__row{ display:flex; justify-content:space-between; padding:11px 14px; font-size:14px; color:var(--rk-muted); border-block-end:1px solid var(--rk-line); }
.rk-confirm__row:last-child{ border-block-end:none; }
.rk-confirm__row b{ color:var(--rk-purple); font-family:var(--rk-display); }
.rk-terms{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--rk-muted); line-height:1.6; cursor:pointer; }
.rk-terms input{ margin-top:3px; accent-color:var(--rk-purple); flex:0 0 auto; }
.rk-terms a{ color:var(--rk-purple); }
.rk-nav{ display:flex; gap:10px; align-items:center; }
.rk-nav .rk-next, .rk-nav .rk-pay{ margin-inline-start:auto; }
.rk-feedback{ font-size:13px; }
.rk-feedback.is-error{ color:#b3261e; }
.rk-feedback.is-info{ color:var(--rk-purple); }
.rk-secure-note{ font-size:12px; color:var(--rk-muted); margin:6px 0 0; }
.rk-secure-note i{ color:var(--rk-copper); }
/* ------------------------------------------------------------
8) FILTER BAR — store category-chip language
(active = copper fill, inactive = line border → copper on hover)
------------------------------------------------------------ */
.rakizah-filterbar .btn-farouq{ border-radius:2px !important; font-weight:700; }
.rakizah-filterbar .btn-farouq--outline-light{
background:transparent !important; border:1.5px solid var(--rk-line) !important; color:var(--rk-purple) !important;
}
.rakizah-filterbar .btn-farouq--outline-light:hover{ border-color:var(--rk-copper) !important; color:var(--rk-copper) !important; }
.rakizah-filterbar .btn-farouq--white{
background:var(--rk-copper) !important; border:1.5px solid var(--rk-copper) !important; color:#fff !important;
}
/* ------------------------------------------------------------
9) FORMS — paper fields, line borders, copper focus
(vacancy search form + job-application / course-enrollment forms)
------------------------------------------------------------ */
#content.site-content .form-control,
#content.site-content .form-select{
border:1.5px solid var(--rk-line) !important; border-radius:2px !important;
background:var(--rk-paper) !important; color:var(--rk-ink) !important;
}
#content.site-content .form-control:focus,
#content.site-content .form-select:focus{
border-color:var(--rk-copper) !important; box-shadow:0 0 0 1px var(--rk-copper) !important;
}
#content.site-content .form-label{ color:var(--rk-purple); font-weight:600; }
#content.site-content .form-check-input:checked{ background-color:var(--rk-purple) !important; border-color:var(--rk-purple) !important; }
#content.site-content .form-control::placeholder{ color:var(--rk-muted); }
/* ------------------------------------------------------------
10) PAGINATION — crisp purple/copper page chips
------------------------------------------------------------ */
.rakizah-pagination .page-numbers{
border:1.5px solid var(--rk-line); color:var(--rk-purple); border-radius:2px;
padding:8px 14px; margin:0 3px; text-decoration:none;
}
.rakizah-pagination .page-numbers.current{ background:var(--rk-purple); border-color:var(--rk-purple); color:#fff; }
.rakizah-pagination a.page-numbers:hover{ border-color:var(--rk-copper); color:var(--rk-copper); }