/* Saudiah Service Suite V19 — unified, responsive, icon-complete service layer */
:root {
  --sa-control-h: 52px;
  --sa-radius-xs: 10px;
  --sa-radius-sm: 14px;
  --sa-radius-md: 20px;
  --sa-radius-lg: 28px;
  --sa-shadow-soft: 0 10px 30px rgba(15, 23, 42, .07);
  --sa-shadow-lift: 0 20px 48px rgba(15, 23, 42, .12);
}
.sa-tool-content, .sa-tool-content * { box-sizing: border-box; }
.sa-tool-content { min-width: 0; overflow: hidden; }
.sa-tool-content form { width: 100%; max-width: 100%; }
.sa-tool-content form > * { min-width: 0; }
.sa-tool-content label:not(.sa-switch):not(.sa-choice) {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  color: var(--sa-text, #172033); font-weight: 700; line-height: 1.55;
}
.sa-tool-content label > i.fa { width: 22px; color: var(--sa-accent); text-align: center; }
.sa-tool-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.sa-tool-content select,
.sa-tool-content textarea {
  width: 100%; max-width: 100%; min-height: var(--sa-control-h); padding: 12px 15px;
  border: 1px solid #d9e1ec; border-radius: var(--sa-radius-sm); background: #fff;
  color: #172033; outline: 0; transition: border-color .2s, box-shadow .2s, transform .2s;
  font-family: Alexandria, Tahoma, Arial, sans-serif; font-size: 16px;
}
.sa-tool-content textarea { min-height: 145px; resize: vertical; }
.sa-tool-content input:focus, .sa-tool-content select:focus, .sa-tool-content textarea:focus {
  border-color: var(--sa-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sa-accent) 16%, transparent);
}
.sa-tool-content input[type="range"] { accent-color: var(--sa-accent); width: 100%; }
.sa-tool-content button, .sa-tool-content input[type="submit"], .sa-tool-content input[type="button"],
.sa-tool-content .w3-button, .sa-tool-content .w3-btn, .sa-tool-content a.sa-action {
  min-height: 46px; border-radius: 13px !important; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 11px 17px; border: 0; cursor: pointer; text-decoration: none;
  font-family: Alexandria, Tahoma, Arial, sans-serif; font-weight: 700; line-height: 1.35;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.sa-tool-content button:hover, .sa-tool-content input[type="submit"]:hover, .sa-tool-content .w3-button:hover,
.sa-tool-content .w3-btn:hover, .sa-tool-content a.sa-action:hover { transform: translateY(-2px); box-shadow: var(--sa-shadow-soft); }
.sa-tool-content button i.fa, .sa-tool-content a i.fa { flex: 0 0 auto; }
.sa-tool-content .w3-theme, .sa-tool-content .w3-blue, .sa-tool-content input[type="submit"],
.sa-tool-content button[type="submit"], .sa-primary-action {
  background: linear-gradient(135deg, var(--sa-accent), var(--sa-accent-2)) !important; color: #fff !important;
}
.sa-tool-content .w3-theme *, .sa-tool-content .w3-blue *, .sa-tool-content button[type="submit"] * { color: inherit !important; }
.sa-tool-content table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 15px; background: #fff; }
.sa-tool-content th { background: color-mix(in srgb, var(--sa-accent-soft) 78%, #fff); color: #172033; font-weight: 800; }
.sa-tool-content th, .sa-tool-content td { padding: 13px 14px; border-bottom: 1px solid #e7ecf3; text-align: right; vertical-align: middle; overflow-wrap: anywhere; }
.sa-tool-content tr:last-child td { border-bottom: 0; }
.sa-tool-content img, .sa-tool-content video, .sa-tool-content iframe, .sa-tool-content canvas, .sa-tool-content svg { max-width: 100%; height: auto; }
.sa-tool-content img { border-radius: 14px; }
.sa-tool-content .w3-panel, .sa-tool-content .sa-notice {
  border: 1px solid color-mix(in srgb, var(--sa-accent) 25%, #dbe3ed); border-radius: 15px; padding: 15px 17px !important;
  background: color-mix(in srgb, var(--sa-accent-soft) 72%, #fff); color: #1f2937;
}
.sa-input-group { display: grid; gap: 8px; min-width: 0; }
.sa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-form-section { padding: 20px; border: 1px solid #e1e7f0; border-radius: var(--sa-radius-md); background: #fff; box-shadow: var(--sa-shadow-soft); }
.sa-form-section + .sa-form-section { margin-top: 16px; }
.sa-form-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.sa-form-section__head > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: var(--sa-accent-soft); color: var(--sa-accent); font-size: 20px; }
.sa-form-section__head h3 { margin: 0; font-size: 18px; }
.sa-form-section__head p { margin: 3px 0 0; color: #6b7280; font-size: 13px; }
.sa-result-panel { margin-top: 20px; padding: 22px; border: 1px solid color-mix(in srgb, var(--sa-accent) 28%, #dce3ec); border-radius: var(--sa-radius-md); background: linear-gradient(145deg, color-mix(in srgb, var(--sa-accent-soft) 72%, #fff), #fff); box-shadow: var(--sa-shadow-soft); }
.sa-result-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.sa-result-panel__head h3 { margin: 0; }
.sa-result-value { font-size: clamp(28px, 6vw, 48px); font-weight: 900; color: var(--sa-accent-2); direction: ltr; unicode-bidi: plaintext; }
.sa-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sa-stat-card { min-width: 0; padding: 16px; border: 1px solid #e2e8f0; border-radius: 15px; background: #fff; }
.sa-stat-card i.fa { color: var(--sa-accent); font-size: 20px; }
.sa-stat-card strong, .sa-stat-card small { display: block; }
.sa-stat-card strong { margin-top: 8px; font-size: 20px; overflow-wrap: anywhere; }
.sa-stat-card small { color: #6b7280; font-size: 12px; }
.sa-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.sa-action-row > * { flex: 1 1 145px; }
.sa-segmented { display: grid; grid-template-columns: repeat(var(--sa-segments, 2), minmax(0, 1fr)); gap: 8px; padding: 7px; border: 1px solid #dce3ec; border-radius: 17px; background: #f3f6fa; }
.sa-segmented label { margin: 0 !important; cursor: pointer; }
.sa-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.sa-segmented span { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 12px; color: #596274; font-weight: 700; transition: .2s; }
.sa-segmented input:checked + span { background: #fff; color: var(--sa-accent-2); box-shadow: 0 5px 18px rgba(15, 23, 42, .1); }
.sa-service-hero__icon > i.fa { font-size: clamp(30px, 4vw, 46px); color: var(--sa-accent); }
.sa-child-services__list a > span i.fa, .sa-related-card__icon i.fa, .sa-sidebar-links a > span i.fa { color: var(--card-accent, var(--sa-accent)); }
.sa-related-card__icon, .sa-sidebar-links a > span { display: grid; place-items: center; }
.sa-service-main[data-sa-service="sadaka"] { --sa-accent:#0f766e; --sa-accent-2:#14532d; --sa-accent-soft:#ecfdf5; }
.sa-service-main[data-sa-service="calculator"], .sa-service-main[data-sa-service="fractions-calculator"] { --sa-accent:#6d28d9; --sa-accent-2:#4c1d95; --sa-accent-soft:#f5f3ff; }
.sa-service-main[data-sa-service="barcode-generator"], .sa-service-main[data-sa-service="qr-code-generator"] { --sa-accent:#0f172a; --sa-accent-2:#334155; --sa-accent-soft:#f1f5f9; }
.sa-service-main[data-sa-service="whatsapp"] { --sa-accent:#16a34a; --sa-accent-2:#087f5b; --sa-accent-soft:#f0fdf4; }
.sa-service-main[data-sa-service="vat"], .sa-service-main[data-sa-service="ca-calculator"] { --sa-accent:#047857; --sa-accent-2:#064e3b; --sa-accent-soft:#ecfdf5; }
.sa-service-main[data-sa-service="speed-test"] { --sa-accent:#2563eb; --sa-accent-2:#4338ca; --sa-accent-soft:#eff6ff; }
.sa-service-main[data-sa-service="tashkeel-remover"] { --sa-accent:#7c3aed; --sa-accent-2:#5b21b6; --sa-accent-soft:#f5f3ff; }
.sa-service-main[data-sa-service="wedding-invitation"] { --sa-accent:#be185d; --sa-accent-2:#881337; --sa-accent-soft:#fdf2f8; }
.sa-icon-only { width: 42px; min-width: 42px !important; padding-inline: 0 !important; }
.sa-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
[data-theme="dark"] .sa-tool-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] .sa-tool-content select, [data-theme="dark"] .sa-tool-content textarea,
[data-theme="dark"] .sa-form-section, [data-theme="dark"] .sa-result-panel, [data-theme="dark"] .sa-stat-card,
[data-theme="dark"] .sa-tool-content table { background:#171c24; color:#eef2f7; border-color:#303948; }
[data-theme="dark"] .sa-tool-content th { background:#202938; color:#f8fafc; }
[data-theme="dark"] .sa-tool-content td { border-color:#303948; }
[data-theme="dark"] .sa-tool-content label:not(.sa-switch):not(.sa-choice), [data-theme="dark"] .sa-form-section__head h3 { color:#f1f5f9; }
[data-theme="dark"] .sa-segmented { background:#121720; border-color:#303948; }
[data-theme="dark"] .sa-segmented input:checked + span { background:#252d3a; color:#fff; }
@media (max-width: 760px) {
  .sa-form-grid, .sa-form-grid--3, .sa-stat-grid { grid-template-columns: 1fr; }
  .sa-form-section, .sa-result-panel { padding: 16px; border-radius: 17px; }
  .sa-tool-content button, .sa-tool-content input[type="submit"], .sa-tool-content .w3-button, .sa-tool-content .w3-btn { width: 100%; }
  .sa-action-row { display: grid; grid-template-columns: 1fr 1fr; }
  .sa-action-row > * { width: 100%; min-width: 0; }
  .sa-segmented { grid-template-columns: 1fr; }
  .sa-tool-content table.sa-responsive-cards thead { display:none; }
  .sa-tool-content table.sa-responsive-cards, .sa-tool-content table.sa-responsive-cards tbody, .sa-tool-content table.sa-responsive-cards tr, .sa-tool-content table.sa-responsive-cards td { display:block; width:100%; }
  .sa-tool-content table.sa-responsive-cards tr { padding: 10px; border-bottom:1px solid #e5eaf1; }
  .sa-tool-content table.sa-responsive-cards td { display:grid; grid-template-columns:minmax(105px, 40%) minmax(0,1fr); gap:10px; border:0; padding:8px 5px; }
  .sa-tool-content table.sa-responsive-cards td::before { content:attr(data-label); font-weight:800; color:var(--sa-accent-2); }
}
@media (max-width: 420px) { .sa-action-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .sa-tool-content *, .sa-tool-content *::before, .sa-tool-content *::after { transition-duration:.001ms!important; animation-duration:.001ms!important; } }