/*
 * Compatibility layer for existing service HTML.
 * It modernizes legacy W3.CSS markup without changing the PHP logic.
 */
.sa-tool-content, .sa-tool-content * { max-width: 100%; }
.sa-tool-content { --w3-theme: var(--sa-accent); }
.sa-tool-content > :first-child { margin-top: 0 !important; }
.sa-tool-content > :last-child { margin-bottom: 0 !important; }
.sa-tool-content .w3-container, .sa-tool-content .w3-panel, .sa-tool-content .w3-card, .sa-tool-content .w3-card-4,
.sa-tool-content .w3-row, .sa-tool-content .w3-row-padding { max-width: 100% !important; }
.sa-tool-content .w3-theme, .sa-tool-content .w3-theme-d1, .sa-tool-content .w3-theme-d2,
.sa-tool-content .w3-theme-d3, .sa-tool-content .w3-theme-d4, .sa-tool-content .w3-theme-d5 {
    background: var(--sa-accent) !important; color: #fff !important;
}
.sa-tool-content .w3-theme-light, .sa-tool-content .w3-theme-l1, .sa-tool-content .w3-theme-l2,
.sa-tool-content .w3-theme-l3, .sa-tool-content .w3-theme-l4, .sa-tool-content .w3-theme-l5 {
    background: var(--sa-accent-soft) !important; color: var(--sa-text) !important;
}
.sa-tool-content .w3-text-theme { color: var(--sa-accent) !important; }
.sa-tool-content .w3-border-theme { border-color: var(--sa-accent) !important; }
.sa-tool-content .w3-hover-theme:hover, .sa-tool-content .w3-hover-theme-light:hover { background: var(--sa-accent-soft) !important; color: var(--sa-accent) !important; }
.sa-tool-content .w3-white, .sa-tool-content .w3-light-grey { background: var(--sa-surface) !important; color: var(--sa-text) !important; }
.sa-tool-content .w3-card, .sa-tool-content .w3-card-2, .sa-tool-content .w3-card-4 { border: 1px solid var(--sa-line); border-radius: 15px; background: var(--sa-surface); box-shadow: var(--sa-shadow-sm); }
.sa-tool-content .w3-panel { margin-block: 12px; padding: 14px 16px; border: 1px solid var(--sa-line); border-radius: 13px; }
.sa-tool-content .w3-pale-red, .sa-tool-content .w3-red { border-color: rgba(214,69,80,.25) !important; background: #fff1f2 !important; color: #9f1239 !important; }
.sa-tool-content .w3-pale-green, .sa-tool-content .w3-green { border-color: rgba(22,138,91,.25) !important; background: #ecfdf5 !important; color: #065f46 !important; }
.sa-tool-content .w3-pale-blue, .sa-tool-content .w3-blue { border-color: rgba(36,117,199,.25) !important; background: #eff6ff !important; color: #1e40af !important; }
.sa-tool-content .w3-yellow, .sa-tool-content .w3-amber, .sa-tool-content .w3-orange { background: #fffbeb !important; color: #92400e !important; }
html[data-theme="dark"] .sa-tool-content .w3-pale-red, html[data-theme="dark"] .sa-tool-content .w3-red { background: rgba(159,18,57,.18) !important; color: #fda4af !important; }
html[data-theme="dark"] .sa-tool-content .w3-pale-green, html[data-theme="dark"] .sa-tool-content .w3-green { background: rgba(6,95,70,.22) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .sa-tool-content .w3-pale-blue, html[data-theme="dark"] .sa-tool-content .w3-blue { background: rgba(30,64,175,.20) !important; color: #93c5fd !important; }

.sa-tool-content form { width: 100%; max-width: 100%; }
.sa-tool-content label { display: block; margin-bottom: 7px; color: var(--sa-text); font-size: 12px; font-weight: 700; }
.sa-tool-content input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not([type="range"]),
.sa-tool-content textarea, .sa-tool-content select, .sa-tool-content .w3-input, .sa-tool-content .w3-select, .sa-tool-content .form-control {
    width: 100% !important; max-width: 100% !important; min-height: 50px; padding: 10px 13px !important;
    border: 1px solid var(--sa-line) !important; border-radius: 11px !important; outline: 0;
    background: var(--sa-surface) !important; color: var(--sa-text) !important; box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
}
.sa-tool-content textarea { min-height: 145px; resize: vertical; line-height: 1.75; }
.sa-tool-content input:focus, .sa-tool-content textarea:focus, .sa-tool-content select:focus, .sa-tool-content .form-control:focus {
    border-color: var(--sa-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sa-accent) 15%, transparent) !important;
}
.sa-tool-content input[type="file"] { padding: 8px !important; }
.sa-tool-content input[type="file"]::file-selector-button { margin-inline-end: 10px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--sa-accent-soft); color: var(--sa-accent); font-weight: 700; }
.sa-tool-content input[type="radio"], .sa-tool-content input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--sa-accent); vertical-align: middle; }
.sa-tool-content input[type="color"] { width: 70px; height: 44px; padding: 4px; border: 1px solid var(--sa-line); border-radius: 9px; background: var(--sa-surface); }
.sa-tool-content .w3-button, .sa-tool-content .w3-btn, .sa-tool-content button:not(.play-button),
.sa-tool-content input[type="submit"], .sa-tool-content input[type="button"], .sa-tool-content .btn, .sa-tool-content .sa-button {
    min-height: 45px; max-width: 100%; padding: 8px 16px !important; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0 !important; border-radius: 11px !important; background: var(--sa-accent) !important; color: #fff !important;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); font-weight: 700; line-height: 1.35; white-space: normal;
}
.sa-tool-content .w3-button:hover, .sa-tool-content .w3-btn:hover, .sa-tool-content button:not(.play-button):hover,
.sa-tool-content input[type="submit"]:hover, .sa-tool-content input[type="button"]:hover, .sa-tool-content .btn:hover { filter: brightness(.94); }
.sa-tool-content a.w3-button, .sa-tool-content a.w3-btn { text-decoration: none; }
.sa-tool-content .w3-block { width: 100% !important; }
.sa-tool-content .w3-tag { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; }

.sa-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--sa-line); border-radius: 13px; -webkit-overflow-scrolling: touch; }
.sa-tool-content table, .sa-article-content table { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-collapse: collapse; background: var(--sa-surface); font-size: 12px; }
.sa-tool-content table th, .sa-article-content table th { padding: 11px 10px !important; border: 1px solid var(--sa-line) !important; background: var(--sa-accent-soft) !important; color: var(--sa-text) !important; text-align: right; white-space: nowrap; }
.sa-tool-content table td, .sa-article-content table td { padding: 10px !important; border: 1px solid var(--sa-line) !important; color: var(--sa-text); vertical-align: middle; overflow-wrap: anywhere; }
.sa-tool-content table tr:nth-child(even) td, .sa-article-content table tr:nth-child(even) td { background: var(--sa-surface-2); }

.sa-tool-content img, .sa-tool-content video, .sa-tool-content iframe { max-width: 100% !important; height: auto; border-radius: 12px; }
.sa-tool-content iframe { width: 100% !important; }
.sa-tool-content video { display: block; background: #111; }
.sa-tool-content [style*="width:"] { max-width: 100% !important; }
.sa-tool-content [style*="float: right"], .sa-tool-content [style*="float:right"],
.sa-tool-content [style*="float: left"], .sa-tool-content [style*="float:left"] { max-width: 100%; }
.sa-tool-content .w3-row-padding { margin-inline: -6px; }
.sa-tool-content .w3-row-padding > * { padding-inline: 6px; }
.sa-tool-content hr { border: 0; border-top: 1px solid var(--sa-line); }
.sa-tool-content h1, .sa-tool-content h2, .sa-tool-content h3, .sa-tool-content h4 { color: var(--sa-text); line-height: 1.5; }
.sa-tool-content h2 { font-size: clamp(19px, 2.2vw, 25px); }
.sa-tool-content h3 { font-size: 17px; }
.sa-tool-content p { overflow-wrap: anywhere; }
.sa-tool-content a:not(.w3-button):not(.w3-btn):not(.btn) { color: var(--sa-accent); }
.sa-tool-content .w3-modal { z-index: 500; padding-top: 70px; background: rgba(10,14,22,.7); }
.sa-tool-content .w3-modal-content { width: min(94vw, 760px) !important; overflow: hidden; border-radius: 17px; background: var(--sa-surface); }

/* Calculator identity */
.sa-layout-calculator .sa-tool-content { background: radial-gradient(circle at top right, var(--sa-accent-soft), transparent 47%); }
.sa-layout-calculator .hollowcalculator, .sa-layout-calculator .filledcalculator, .sa-layout-calculator .buttoncalculator {
    min-height: 58px !important; border-radius: 14px !important; font-size: 18px !important; font-weight: 800 !important;
}
.sa-layout-calculator .hollowcalculator { background: var(--sa-surface) !important; color: var(--sa-text) !important; border: 1px solid var(--sa-line) !important; }
.sa-layout-calculator .filledcalculator { background: var(--sa-accent-soft) !important; color: var(--sa-accent) !important; }
.sa-layout-calculator #screen { min-height: 76px; direction: ltr; text-align: left; font-size: clamp(25px, 5vw, 42px); font-weight: 700; }

/* Converter and finance identities */
.sa-layout-converter .sa-tool-content form, .sa-layout-finance .sa-tool-content form, .sa-layout-date .sa-tool-content form, .sa-layout-health .sa-tool-content form {
    padding: clamp(14px, 2vw, 22px); border: 1px solid var(--sa-line); border-radius: 16px; background: var(--sa-surface-2);
}
.sa-layout-converter .sa-tool-content .w3-half, .sa-layout-finance .sa-tool-content .w3-half,
.sa-layout-date .sa-tool-content .w3-half, .sa-layout-health .sa-tool-content .w3-half { padding: 6px; }
.sa-layout-finance .sa-tool-content table td:first-child, .sa-layout-finance .sa-tool-content table th:first-child { font-weight: 700; }

/* Editor identity */
.sa-layout-editor .sa-tool-content textarea { min-height: 190px; font-size: 15px; }
.sa-layout-editor .sa-tool-content form { padding: 16px; border: 1px solid var(--sa-line); border-radius: 16px; background: var(--sa-surface-2); }

/* Gallery/design identity */
.sa-layout-gallery .sa-tool-content img, .sa-layout-design .sa-tool-content img { box-shadow: var(--sa-shadow-sm); }
.sa-layout-gallery .sa-tool-content .w3-third, .sa-layout-design .sa-tool-content .w3-third { padding: 7px; }
.sa-layout-gallery .sa-tool-content .w3-card, .sa-layout-design .sa-tool-content .w3-card { overflow: hidden; }
.sa-layout-design .sa-tool-content input[type="file"] { min-height: 64px; border-style: dashed !important; border-width: 2px !important; }

/* Calendar/timeline identity */
.sa-layout-calendar .sa-tool-content .w3-bar, .sa-layout-timeline .sa-tool-content .w3-bar { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; background: transparent !important; }
.sa-layout-calendar .sa-tool-content .w3-bar-item, .sa-layout-timeline .sa-tool-content .w3-bar-item { min-width: max-content; border-radius: 999px !important; }
.sa-layout-timeline .sa-tool-content table td:first-child { width: 90px; color: var(--sa-accent); font-weight: 800; white-space: nowrap; }

/* Spiritual identity */
.sa-layout-spiritual .sa-tool-content { line-height: 2; }
.sa-layout-spiritual .sa-tool-content .w3-panel { border-inline-start: 4px solid var(--sa-accent); background: var(--sa-accent-soft) !important; }

/* Names */
.sa-layout-names .sa-tool-content .w3-tag { margin: 4px; background: var(--sa-accent-soft) !important; color: var(--sa-accent) !important; }
.sa-layout-names .sa-tool-content img { object-fit: cover; }

/* Career */
.sa-layout-career .sa-tool-content form { padding: 18px; border: 1px solid var(--sa-line); border-radius: 16px; background: var(--sa-surface-2); }
.sa-layout-career .sa-tool-content .w3-panel { background: var(--sa-surface) !important; }

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .sa-tool-content input:focus, .sa-tool-content textarea:focus, .sa-tool-content select:focus, .sa-tool-content .form-control:focus { box-shadow: 0 0 0 4px rgba(40,120,208,.14) !important; }
}

@media (max-width: 700px) {
    .sa-tool-content .w3-half, .sa-tool-content .w3-third, .sa-tool-content .w3-quarter,
    .sa-tool-content .w3-col, .sa-tool-content .s4, .sa-tool-content .m2, .sa-tool-content .m5,
    .sa-tool-content .l2, .sa-tool-content .l5, .sa-tool-content [class*="col-md-"] {
        width: 100% !important; float: none !important; padding-inline: 0 !important;
    }
    .sa-tool-content .w3-row-padding { margin-inline: 0; }
    .sa-tool-content .w3-row-padding > * { padding-inline: 0; margin-bottom: 9px; }
    .sa-tool-content .w3-button, .sa-tool-content .w3-btn, .sa-tool-content input[type="submit"], .sa-tool-content .btn { min-height: 48px; }
    .sa-tool-content table { min-width: 560px; }
    .sa-tool-content .tabel-hml { min-width: 620px; }
    .sa-tool-content [style*="margin-right"], .sa-tool-content [style*="margin-left"] { margin-inline: 0 !important; }
}

/* Per-service finishing touches. These selectors only affect the named service. */
.sa-service-speed-test .sa-tool-content #speedValue {
    display: block; margin: 16px auto 4px; color: var(--sa-accent); font-size: clamp(52px, 10vw, 92px) !important;
    font-weight: 800; line-height: 1; letter-spacing: -3px;
}
.sa-service-speed-test .sa-tool-content #startBtn {
    min-width: min(100%, 240px); min-height: 58px; border-radius: 999px !important; font-size: 16px;
}
.sa-service-speed-test .sa-tool-content .status { min-height: 26px; }
.sa-service-qr-code-generator .sa-tool-content > .w3-center:first-child,
.sa-service-age-calculator .sa-tool-content > .w3-center:first-child,
.sa-service-pregnancy-calculator .sa-tool-content > .w3-center:first-child {
    display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.sa-service-qr-code-generator .sa-tool-content > .w3-center:first-child .w3-tag,
.sa-service-age-calculator .sa-tool-content > .w3-center:first-child .w3-tag,
.sa-service-pregnancy-calculator .sa-tool-content > .w3-center:first-child .w3-tag {
    margin: 0 !important; min-width: 130px; cursor: pointer; border: 1px solid var(--sa-line);
}
.sa-service-whatsapp .sa-tool-content { --sa-accent: #16a34a; --sa-accent-soft: #f0fdf4; }
.sa-service-whatsapp .sa-tool-content form { padding: 18px; border: 1px solid #bbf7d0; border-radius: 17px; background: #f0fdf4; }
html[data-theme="dark"] .sa-service-whatsapp .sa-tool-content form { border-color: rgba(34,197,94,.25); background: rgba(22,101,52,.15); }
.sa-service-currency .sa-tool-content #myInput { min-height: 58px; font-size: 16px; padding-inline-start: 44px !important; }
.sa-service-currency .sa-tool-content #myTable td:nth-child(2),
.sa-service-currency .sa-tool-content #myTable th:nth-child(2) { color: var(--sa-accent); font-weight: 800; }
.sa-service-names .sa-tool-content .w3-table-all { overflow: hidden; border-radius: 14px; box-shadow: var(--sa-shadow-sm); }
.sa-service-names .sa-tool-content .fa-thumbs-up,
.sa-service-names .sa-tool-content .fa-thumbs-down { border-radius: 50%; background: var(--sa-surface-2); }
.sa-service-photo .sa-tool-content .w3-container.w3-row-padding { display: flex; flex-wrap: wrap; align-items: stretch; }
.sa-service-photo .sa-tool-content .w3-third .w3-card { height: calc(100% - 14px); display: flex; flex-direction: column; }
.sa-service-photo .sa-tool-content .w3-third .w3-card .w3-container:last-child { margin-top: auto; }
.sa-service-cv-maker .sa-tool-content .w3-tag.w3-theme { min-width: 44px; justify-content: center; border-radius: 50% !important; }
.sa-service-cv-maker .sa-tool-content table + .w3-tag,
.sa-service-cv-maker .sa-tool-content .w3-table-all + .w3-tag { margin-top: 12px; }
.sa-service-saudicalendars .sa-tool-content .w3-panel.w3-card-4 { overflow: hidden; border: 0; box-shadow: var(--sa-shadow-md); }
.sa-service-saudicalendars .sa-tool-content [id^="countdown"] { font-variant-numeric: tabular-nums; font-weight: 800; }
.sa-service-bmi-calculator .sa-tool-content .result-box,
.sa-service-period-calculator .sa-tool-content .w3-theme-l3,
.sa-service-pregnancy-calculator .sa-tool-content .w3-theme-l3 {
    padding: 16px; border-radius: 14px; background: var(--sa-accent-soft) !important; color: var(--sa-text) !important;
}

@media (max-width: 700px) {
    .sa-service-qr-code-generator .sa-tool-content > .w3-center:first-child .w3-tag,
    .sa-service-age-calculator .sa-tool-content > .w3-center:first-child .w3-tag,
    .sa-service-pregnancy-calculator .sa-tool-content > .w3-center:first-child .w3-tag { flex: 1 1 140px; }
    .sa-service-speed-test .sa-tool-content #speedValue { letter-spacing: -1px; }
}