/* Landing-specific styles for stitesting.balimedika.com (extends ../styles.css) */

/* language switcher */
.lang{display:flex;gap:2px;background:var(--card2);border:1px solid var(--stroke);border-radius:100px;padding:3px}
.lang a{font-size:13px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:100px;transition:background .2s,color .2s}
.lang a.on{background:var(--white);color:#111}
.lang a:not(.on):hover{color:var(--white)}

/* landing hero tweaks */
.lhero{padding:26px 0 10px;position:relative}
.lhero .glow{position:absolute;z-index:-1;filter:blur(80px);border-radius:50%;width:520px;height:520px;opacity:.16}
.lhero .gp{background:radial-gradient(circle,var(--pink),transparent 65%);top:-60px;left:-80px}
.lhero .gb{background:radial-gradient(circle,var(--blue),transparent 65%);top:20px;right:-120px;opacity:.13}
.lhero h1{font-size:clamp(40px,6.6vw,86px);font-weight:700;letter-spacing:-.04em;max-width:17ch}
.lhero .sub{font-size:clamp(17px,2vw,21px);color:var(--copy);max-width:58ch;margin-top:22px}
.lhero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.trust .t{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--stroke);background:var(--card);border-radius:100px;padding:10px 18px;font-size:13.5px;color:var(--copy)}
.trust .t b{color:var(--white);font-weight:600}
.trust .t .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}

/* urgent PEP banner */
.urgent{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--stroke);border-left:4px solid var(--pink);background:linear-gradient(120deg,rgba(255,158,199,.10),transparent 60%);border-radius:var(--r2);padding:24px 28px}
.urgent .txt h4{font-size:20px;margin-bottom:4px}
.urgent .txt p{font-size:14.5px;color:var(--copy);max-width:60ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--stroke);border-radius:var(--r2);padding:32px;background:var(--card)}
.step .n{font-size:14px;font-weight:700;color:var(--pink)}
.step h4{font-size:22px;margin:12px 0 8px}
.step p{font-size:15px;color:var(--copy)}

/* what we test grid */
.whatlist{display:flex;flex-wrap:wrap;gap:12px}
.whatlist .w{border:1px solid var(--stroke);background:var(--card);border-radius:100px;padding:11px 20px;font-size:15px;color:var(--white);font-weight:500}
.whatlist .w span{color:var(--muted);font-weight:400;font-size:13px}

/* appointment form */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:860px){.form-wrap{grid-template-columns:1fr}}
.form-card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r);padding:40px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;color:var(--copy);margin-bottom:8px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:var(--card2);border:1px solid var(--stroke);border-radius:14px;padding:14px 16px;color:var(--white);font-family:inherit;font-size:15px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink)}
.field textarea{min-height:96px;resize:vertical}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
@media(max-width:520px){.field.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 20px;font-size:13px;color:var(--muted);line-height:1.5}
.consent input{width:20px;height:20px;flex:none;accent-color:var(--pink);margin-top:2px}
.consent a{color:var(--pink)}
.form-card .btn{width:100%;justify-content:center}
.form-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center}
.form-side{display:flex;flex-direction:column;gap:16px}
.form-side .acard{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r2);padding:28px}
.form-side .acard h4{font-size:18px;margin-bottom:14px}
.form-side .crow{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--stroke)}
.form-side .crow:last-child{border-bottom:0}
.form-side .crow .ic{width:40px;height:40px;border-radius:11px;background:var(--card2);border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.form-side .crow .k{font-size:12px;color:var(--muted)}
.form-side .crow .v{font-size:15.5px;color:var(--white);font-weight:600}
.form-side .crow .v a:hover{color:var(--pink)}

/* faq */
.faq{max-width:820px}
.faq details{border:1px solid var(--stroke);border-radius:16px;background:var(--card);margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:17px;font-weight:600;color:var(--white);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pink);font-size:22px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 22px;font-size:15px;color:var(--copy);margin:0}

/* compliance disclaimer block */
.disclaimer{border:1px solid var(--stroke);border-radius:var(--r2);background:var(--card);padding:26px 30px;font-size:13px;color:var(--muted);line-height:1.7}
.disclaimer b{color:var(--copy)}
.pkgfoot{font-size:12.5px;color:var(--muted);margin-top:18px}

/* ---- colour-coded package grid ---- */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px}
.pcard2{position:relative;border:1px solid var(--stroke);border-radius:26px;background:var(--card);padding:32px 30px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.pcard2:hover{transform:translateY(-4px);border-color:var(--stroke2)}
.pcard2::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ac)}
.pcard2 .cat{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.pcard2 .cat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ac)}
.pcard2 .pname{font-size:23px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.05}
.pcard2 .amt2{font-size:32px;font-weight:800;color:#fff;margin:12px 0 2px;letter-spacing:-.03em;line-height:1}
.pcard2 .per2{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.pcard2 .feats2{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.pcard2 .feats2 li{display:flex;gap:11px;font-size:14px;color:var(--copy);align-items:flex-start}
.pcard2 .feats2 li .c{color:var(--ac);flex:none;font-weight:700}
.pcard2 .pbtn{margin-top:auto;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:13px 20px;border-radius:100px;background:transparent;border:1.5px solid var(--ac);color:#fff;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.pcard2 .pbtn:hover{background:var(--ac);color:#0b0b0b;transform:translateY(-2px)}
/* category legend */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.legend .lg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--copy)}
.legend .lg .sw{width:12px;height:12px;border-radius:4px}

/* checkbox group (I have sex with) */
.cbx-row{display:flex;flex-wrap:wrap;gap:10px}
.cbx{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--stroke);background:var(--card2);border-radius:100px;padding:10px 16px;font-size:14px;color:var(--copy);cursor:pointer;transition:border-color .2s,color .2s}
.cbx:hover{border-color:var(--stroke2);color:var(--white)}
.cbx input{width:17px;height:17px;accent-color:var(--pink);cursor:pointer}
/* form success */
.form-ok{display:none;background:var(--card);border:1px solid var(--stroke);border-left:4px solid var(--pink);border-radius:var(--r);padding:44px;box-shadow:var(--shadow);flex-direction:column;gap:12px}
.form-ok.show{display:flex}
.form-ok .tick{width:56px;height:56px;border-radius:50%;background:var(--pink);color:var(--pinkink);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800}
.form-ok h3{font-size:24px}
.form-ok p{font-size:15px;color:var(--copy);max-width:46ch}

/* ---- language dropdown (select) ---- */
.langsel{background:var(--card2);border:1px solid var(--stroke);color:var(--white);font-family:inherit;font-weight:600;font-size:13px;border-radius:100px;padding:9px 14px;cursor:pointer}
.langsel:focus{outline:none;border-color:var(--stroke2)}

/* checkboxes as text lines (I have sex with) */
.cbx-row{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.cbx{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--copy);cursor:pointer;border:none;background:none;padding:0}
.cbx:hover{color:var(--white)}
.cbx input{width:19px;height:19px;accent-color:var(--pink);cursor:pointer;flex:none}

/* thin plus bullet for package features */
.pcard2 .feats2 li .c{color:var(--ac);flex:none;font-weight:300;font-size:19px;line-height:1;margin-top:1px}

/* results info note */
.resnote{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--stroke);border-left:4px solid var(--pink);background:var(--card);border-radius:16px;padding:18px 22px;margin:-16px 0 30px;max-width:760px}
.resnote .ic{font-size:20px;flex:none}
.resnote p{font-size:14.5px;color:var(--copy);margin:0}
.resnote b{color:var(--white)}

/* form success tick as plus */
.form-ok .tick{font-weight:300}

/* RTL (Arabic) */
[dir="rtl"] .resnote{border-left:0;border-right:4px solid var(--pink)}
[dir="rtl"] .urgent{border-left:0;border-right:4px solid var(--ac,var(--pink))}
[dir="rtl"] .pcard2 .cat{flex-direction:row-reverse}
[dir="rtl"] .cbx{flex-direction:row-reverse;justify-content:flex-end}
[dir="rtl"] .consent{flex-direction:row-reverse}

/* multi-check dropdown (I have sex with) */
.msel{position:relative}
.msel-btn{width:100%;background:var(--card2);border:1px solid var(--stroke);border-radius:14px;padding:14px 16px;color:var(--white);font-family:inherit;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;text-align:left}
.msel-btn:hover{border-color:var(--stroke2)}
.msel .msel-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel.has .msel-label{color:var(--white)}
.msel-car{color:var(--muted);flex:none;transition:transform .2s}
.msel.open .msel-car{transform:rotate(180deg)}
.msel-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#101014;border:1px solid var(--stroke);border-radius:14px;padding:8px;z-index:30;display:none;box-shadow:var(--shadow)}
.msel.open .msel-panel{display:block}
.msel-opt{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:15px;color:var(--copy);cursor:pointer}
.msel-opt:hover{background:var(--card2);color:#fff}
.msel-opt input{width:18px;height:18px;accent-color:var(--pink);flex:none}