.phone-finder { direction:rtl; color:#232743; margin:12px 0 20px; border:1px solid #e1e3ed; border-radius:20px; background:#fff; overflow:hidden; }
.phone-finder .finder-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px 10px; }
.phone-finder .finder-heading { display:flex; align-items:center; gap:14px; min-width:0; }
.phone-finder .finder-header-icon { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:13px; background:#f1f1fb; color:#343891; font-size:23px; }
.phone-finder .finder-header h2 { margin:0 0 3px; font-size:21px; line-height:1.5; font-weight:400; color:#232743; }
.phone-finder .finder-header p { margin:0; color:#74788d; font-size:13px; line-height:1.8; }
.phone-finder .finder-steps { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; padding:8px 24px 18px; }
.phone-finder .finder-panel { min-width:0; }
.phone-finder h3 { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:#232743; font-size:15px; line-height:1.8; font-weight:400; }
.phone-finder h3 small { margin-inline-start:auto; color:#74788d; font-size:11px; font-weight:400; }
.phone-finder .finder-step { display:grid; place-items:center; flex-shrink:0; width:20px; height:20px; border:1px solid #dedff0; border-radius:50%; color:#343891; font-size:11px; }
.phone-finder .finder-budget-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.phone-finder .finder-budget-fields label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; min-width:0; margin:0; padding:7px 12px; border:1px solid #e4e6ee; border-radius:12px; color:#74788d; font-size:11px; line-height:1.8; }
.phone-finder .finder-budget-fields label:focus-within { border-color:#343891; outline:2px solid #343891; outline-offset:2px; }
.phone-finder .finder-budget-fields label > span { position:relative; display:flex; flex:0 0 100%; align-items:center; min-height:28px; }
.phone-finder .finder-budget-fields input { width:100%; min-width:0; border:0; background:transparent; font:inherit; font-size:17px; direction:ltr; text-align:right; color:transparent; caret-color:transparent; outline:none; appearance:textfield; -moz-appearance:textfield; }
.phone-finder .finder-budget-fields input::-webkit-inner-spin-button,.phone-finder .finder-budget-fields input::-webkit-outer-spin-button { appearance:none; -webkit-appearance:none; margin:0; }
.phone-finder .finder-budget-fields output { position:absolute; right:0; left:0; top:50%; transform:translateY(-50%); margin:0; padding:0; color:#232743; font-size:17px; line-height:1.8; direction:ltr; text-align:right; pointer-events:none; }
.phone-finder .finder-budget-fields label:focus-within input { color:#232743; caret-color:auto; }
.phone-finder .finder-budget-fields label:focus-within output { visibility:hidden; }
.phone-finder .finder-budget-fields small { flex-shrink:0; color:#74788d; font-size:10px; }
.phone-finder .finder-range { position:relative; height:44px; margin:8px 0 0; }
.phone-finder .finder-range-track { position:absolute; top:20px; right:20px; left:20px; height:4px; background:#e9eaf2; border-radius:4px; overflow:hidden; }
.phone-finder #finder-range-progress { position:absolute; height:100%; right:0; left:0; background:#343891; }
.phone-finder .finder-range input { position:absolute; top:0; right:0; width:100%; height:44px; margin:0; padding:0; direction:rtl; appearance:none; -webkit-appearance:none; background:none; pointer-events:none; outline:none; border:0; }
.phone-finder .finder-range input::-webkit-slider-runnable-track { height:4px; background:transparent; border:0; }
.phone-finder .finder-range input::-moz-range-track { height:4px; background:transparent; border:0; }
.phone-finder .finder-range input::-webkit-slider-thumb { -webkit-appearance:none; width:40px; height:44px; margin-top:-20px; border:0; border-radius:50%; background:radial-gradient(circle,#fff 0 7px,#343891 8px 10px,transparent 11px); cursor:ew-resize; pointer-events:auto; }
.phone-finder .finder-range input::-moz-range-thumb { width:40px; height:44px; border:0; border-radius:50%; background:radial-gradient(circle,#fff 0 7px,#343891 8px 10px,transparent 11px); cursor:ew-resize; pointer-events:auto; }
.phone-finder .finder-range input:focus-visible { z-index:2; }
.phone-finder .finder-range input:focus-visible::-webkit-slider-thumb { outline:2px solid #343891; outline-offset:-5px; }
.phone-finder .finder-range input:focus-visible::-moz-range-thumb { outline:2px solid #343891; outline-offset:-5px; }
.phone-finder .finder-range-limits { display:flex; justify-content:space-between; color:#85899b; font-size:11px; line-height:1.8; margin-top:-2px; }
.phone-finder .finder-choices { display:flex; flex-wrap:wrap; gap:8px; }
.phone-finder .finder-choice { position:relative; display:block; flex:0 0 auto; max-width:100%; margin:0; cursor:pointer; }
.phone-finder .finder-choice > input { position:absolute; width:1px; height:1px; opacity:0; }
.phone-finder .finder-choice-content { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 12px; border:1px solid #e4e6ee; border-radius:10px; background:#fff; color:#60677d; white-space:nowrap; }
.phone-finder .finder-choice-heading { display:inline-flex; align-items:center; gap:8px; }
.phone-finder .finder-choice-heading i { width:18px; text-align:center; font-size:17px; }
.phone-finder .finder-choice-heading strong { font-size:13px; line-height:1.8; font-weight:400; }
/* Overlay the tick: selecting an option cannot change its width or wrapping. */
.phone-finder .finder-choice-content::after { content:'\2713'; position:absolute; inset-inline-end:-4px; top:-4px; display:grid; place-items:center; width:15px; height:15px; border:2px solid #fff; border-radius:50%; background:#343891; color:#fff; visibility:hidden; font-family:Arial,sans-serif; font-size:9px; line-height:1; }
.phone-finder .finder-choice input:checked + span { border-color:#343891; background:#f0f1fb; color:#343891; box-shadow:inset 0 0 0 1px #343891; }
.phone-finder .finder-choice input:checked + span::after { visibility:visible; }
.phone-finder .finder-choice input:focus-visible + span { outline:2px solid #343891; outline-offset:3px; }
.phone-finder .finder-choice-detail { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:8px; margin-top:12px; color:#74788d; font-size:12px; line-height:1.8; }
.phone-finder .finder-choice-detail > i { margin-top:4px; color:#343891; font-size:14px; }
.phone-finder .finder-choice-detail strong { display:block; color:#444b68; font-size:13px; font-weight:400; }
/* Reserve two description lines to keep the footer still on selection. */
.phone-finder .finder-choice-detail p { min-height:3.6em; margin:0; color:#74788d; font-size:12px; line-height:1.8; }
/* RTL row: the button comes first, so it sits on the right and the summary on the left. */
.phone-finder .finder-result-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 24px; border-top:1px solid #e8e9f0; background:#fafafe; }
.phone-finder .finder-summary { display:flex; flex:1 1 0; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 14px; min-width:0; text-align:left; }
.phone-finder .finder-summary-caption { color:#7f8395; font-size:11px; line-height:1.8; }
.phone-finder .finder-summary-values { display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; min-height:24px; font-size:13px; line-height:1.8; }
.phone-finder .finder-summary-values b { font-weight:400; }
.phone-finder #finder-usecase-summary { padding-inline-start:10px; border-inline-start:1px solid #dcdfea; color:#343891; font-size:11px; }
.phone-finder .finder-submit { display:inline-flex; justify-content:center; align-items:center; flex:0 0 auto; gap:14px; width:max-content; max-width:100%; min-height:44px; border:0; border-radius:10px; padding:10px 18px; background:#343891; color:#fff; font:inherit; font-size:14px; font-weight:400; white-space:nowrap; cursor:pointer; }
.phone-finder .finder-submit i { font-size:15px; }
.phone-finder .finder-submit:hover { background:#292d7b; }
.phone-finder .finder-submit:focus-visible { outline:3px solid #343891; outline-offset:3px; }
.phone-finder .finder-submit:disabled { opacity:.5; cursor:not-allowed; }
.phone-finder .finder-empty { margin:10px 0 0; color:#656a80; font-size:12px; }
@media (min-width:768px) {
    .phone-finder .finder-budget-panel { grid-column:2; grid-row:1; }
    .phone-finder .finder-panel:not(.finder-budget-panel) { grid-column:1; grid-row:1; }
}
@media (max-width:767px) {
    .phone-finder .finder-header { padding:18px 18px 10px; }
    .phone-finder .finder-heading { gap:10px; }
    .phone-finder .finder-header-icon { width:36px; height:36px; border-radius:11px; font-size:21px; }
    .phone-finder .finder-header h2 { font-size:18px; line-height:1.6; }
    .phone-finder .finder-header p { font-size:12px; }
    .phone-finder .finder-steps { grid-template-columns:minmax(0,1fr); gap:12px; padding:8px 18px 14px; }
    .phone-finder .finder-panel + .finder-panel { border-top:1px solid #e8e9f0; padding-top:12px; }
    .phone-finder h3 { margin-bottom:10px; font-size:14px; }
    .phone-finder .finder-choice-content { min-height:44px; padding:8px 10px; gap:6px; }
    .phone-finder .finder-choice-heading { gap:6px; }
    .phone-finder .finder-choice-heading strong { font-size:12px; }
    .phone-finder .finder-choice-detail { margin-top:10px; }
    .phone-finder .finder-result-bar { padding:10px 18px; }
    .phone-finder .finder-summary-values { flex-direction:column; flex-wrap:nowrap; align-items:flex-end; gap:0; min-height:47px; justify-content:center; font-size:12px; }
    .phone-finder #finder-usecase-summary { padding-inline-start:0; border-inline-start:0; }
    .phone-finder .finder-summary-caption { display:none; }
    .phone-finder .finder-submit { gap:8px; padding:10px 12px; font-size:13px; }
}
/* Too narrow for a one-line button beside the summary. */
@media (max-width:374px) {
    .phone-finder .finder-submit { width:150px; white-space:normal; }
}
@media (max-width:350px) {
    .phone-finder .finder-header { padding-inline:12px; }
    .phone-finder .finder-steps { padding-inline:12px; }
    .phone-finder .finder-result-bar { padding-inline:12px; }
    .phone-finder .finder-header h2 { font-size:17px; }
    .phone-finder .finder-budget-fields label { padding-inline:9px; }
    .phone-finder .finder-budget-fields input,.phone-finder .finder-budget-fields output { font-size:16px; }
    .phone-finder .finder-choice-all { order:1; }
}