/* =====================================================================
   XTREAM-MASTERS · WHITE-LABEL iOS IPTV APP
   Builds on ott_panel.css (shared light theme) and player_app.css
   (app product components). Only iOS-specific parts live here.
   ===================================================================== */

.xmi-kicker .fa-apple{margin-right:4px;font-size:14px}

/* grid variants for this page's item counts */
.trust-bar-inner.trust-4{grid-template-columns:repeat(4,1fr)}
.device-row.device-row-3{grid-template-columns:repeat(3,1fr)}
.related-grid.related-4{grid-template-columns:repeat(4,1fr)}
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ==================== APPLE DEVICE SHOWCASE ==================== */
.apple-show{margin:0}
.apple-devices{
    display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3vw,40px);
    padding:clamp(24px,4vw,44px) clamp(16px,3vw,40px) 0;
    background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 100%);
    border:1px solid var(--line);border-radius:24px;overflow:hidden;
}
.dev-ipad,.dev-iphone{position:relative;background:#0B0F17;box-shadow:var(--shadow-lg);overflow:hidden}
.dev-ipad{
    flex:0 0 auto;width:clamp(200px,24vw,300px);aspect-ratio:750/1000;
    border:12px solid #111827;border-bottom-width:0;border-radius:28px 28px 0 0;
}
.dev-iphone{
    flex:0 1 auto;width:clamp(320px,52vw,640px);aspect-ratio:900/416;margin-bottom:clamp(24px,4vw,44px);
    border:10px solid #111827;border-radius:34px;
}
.dev-iphone::before{ /* dynamic island, landscape */
    content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;
    width:7px;height:56px;border-radius:6px;background:#111827;
}
.dev-ipad img,.dev-iphone img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    opacity:0;transition:opacity .7s ease;
}
.dev-ipad img.is-active,.dev-iphone img.is-active{opacity:1}
.apple-show figcaption{margin-top:14px;text-align:center;font-size:14.5px;color:var(--muted)}

/* ==================== ACCOUNT OWNERSHIP ==================== */
.acct{margin:36px auto 0;max-width:760px}
.acct-box{
    background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:22px 24px;
    box-shadow:var(--shadow);
}
.acct-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.acct-head > i{font-size:30px;color:var(--ink)}
.acct-head b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.acct-head small{font-size:13px;color:var(--muted)}
.acct-owns{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.acct-owns li{
    display:flex;align-items:center;gap:9px;padding:12px;font-size:14px;font-weight:600;color:var(--ink);
    background:var(--bg);border:1px solid var(--line);border-radius:10px;
}
.acct-owns i{font-size:17px;width:18px;text-align:center}
.acct-guest{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;
    border:1.5px dashed #9DBFE3;border-radius:10px;background:#F5F9FE;
}
.acct-guest span{font-size:14px;font-weight:600;color:#1E6FB8;display:flex;align-items:center;gap:8px}
.acct-guest small{font-size:13px;color:var(--muted)}
.acct figcaption{margin-top:16px;text-align:center;font-size:14.5px;color:var(--text)}

/* firebase strip variant: positive note only */
.fb-server.fb-server-ok{background:var(--ok-soft);border:1px solid #BBF7D0}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1024px){
    .related-grid.related-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
    .trust-bar-inner.trust-4{grid-template-columns:repeat(2,1fr)}
    .trust-bar-inner.trust-4 .trust-item:nth-child(2)::after{display:none}
    .need-grid{grid-template-columns:1fr}
    .device-row.device-row-3{grid-template-columns:1fr}
}
@media(max-width:640px){
    .apple-devices{flex-direction:column;align-items:center;padding:20px 14px 0}
    .dev-iphone{width:100%;order:-1;margin-bottom:0;border-width:7px;border-radius:24px}
    .dev-iphone::before{height:40px;width:5px;left:7px}
    .dev-ipad{width:62%;border-width:9px;border-bottom-width:0;border-radius:22px 22px 0 0}
    .acct-owns{grid-template-columns:1fr}
    .related-grid.related-4{grid-template-columns:1fr}
    .trust-bar-inner.trust-4 .trust-item:last-child{grid-column:auto}
}