/* ==========================================================
   More page: compact PWA installation guides
========================================================== */

.wmrInstallGuides{
    margin:18px 20px;
}

.wmrInstallGuidesHeading{
    margin-bottom:12px;
}

.wmrInstallGuidesHeading h3{
    margin:3px 0 0;
    font-size:22px;
}

.wmrInstallGuideList{
    display:grid;
    gap:10px;
}

.wmrInstallGuide{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    background:
        radial-gradient(circle at 96% 0%,rgba(217,31,61,.13),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.wmrInstallGuideButton{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:76px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto auto;
    gap:12px;
    align-items:center;
    margin:0;
    padding:14px 15px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    box-shadow:none;
    text-align:left;
    font:inherit;
    cursor:pointer;
}

.wmrInstallGuideButton:focus-visible{
    outline:3px solid rgba(255,83,110,.5);
    outline-offset:-3px;
}

.wmrInstallGuideIcon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:14px;
    background:linear-gradient(135deg,#d91f3d,#9f1239);
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.wmrInstallGuideText{
    min-width:0;
}

.wmrInstallGuideText strong,
.wmrInstallGuideText small{
    display:block;
}

.wmrInstallGuideText strong{
    margin-bottom:3px;
    color:#fff;
    font-size:16px;
}

.wmrInstallGuideText small{
    color:#aeb8c8;
    font-size:12px;
}

.wmrInstallGuideAction{
    color:#ff6a82;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.wmrInstallGuideChevron{
    color:#9aa6b8;
    font-size:22px;
    transition:transform .2s ease;
}

.wmrInstallGuideButton[aria-expanded="true"] .wmrInstallGuideChevron{
    transform:rotate(180deg);
}

.wmrInstallGuidePanel{
    padding:0 16px 16px 74px;
    border-top:1px solid rgba(255,255,255,.07);
}

.wmrInstallGuidePanel[hidden]{
    display:none !important;
}

.wmrInstallGuidePanel ol{
    margin:14px 0;
    padding-left:20px;
    color:#cbd5e1;
    font-size:13px;
    line-height:1.55;
}

.wmrInstallGuidePanel li{
    margin-bottom:8px;
}

.wmrInstallGuidePanel strong{
    color:#fff;
}

.wmrBrowserDemo{
    position:relative;
    overflow:hidden;
    min-height:145px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:#0a1220;
}

.wmrBrowserBar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    min-height:38px;
    padding:7px 9px;
    background:#e8edf5;
    color:#263247;
    font-size:9px;
}

.wmrBrowserTarget{
    display:grid;
    place-items:center;
    min-width:25px;
    min-height:25px;
    border-radius:8px;
    background:#d91f3d;
    color:#fff;
    font-size:17px;
    animation:wmrInstallPulse 1.6s ease-in-out infinite;
}

.wmrBrowserMenu{
    position:absolute;
    top:41px;
    right:8px;
    width:120px;
    display:grid;
    gap:5px;
    padding:9px;
    border-radius:10px;
    background:#f7f8fb;
    color:#253044;
    font-size:9px;
    box-shadow:0 10px 25px rgba(0,0,0,.38);
}

.wmrBrowserMenu span,
.wmrBrowserMenu strong{
    padding:6px;
    border-radius:6px;
}

.wmrBrowserMenu strong{
    background:rgba(217,31,61,.14);
    color:#b3122d;
}

.wmrSafariScreen{
    min-height:98px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.wmrSafariToolbar{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    min-height:42px;
    padding:5px 8px;
    border-top:1px solid rgba(255,255,255,.1);
    background:#eef2f8;
    color:#34425a;
    text-align:center;
}

.wmrSafariSheet{
    position:absolute;
    left:12px;
    right:12px;
    bottom:50px;
    padding:9px;
    border-radius:10px;
    background:#fff;
    color:#b3122d;
    font-size:9px;
    text-align:center;
    box-shadow:0 9px 24px rgba(0,0,0,.35);
}

.wmrDesktopPrompt{
    width:82%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:27px auto 0;
    padding:12px;
    border-radius:11px;
    background:#f7f8fb;
    color:#253044;
    font-size:9px;
}

.wmrDesktopPrompt span{
    border-radius:7px;
    background:#d91f3d;
    color:#fff;
    padding:7px 9px;
    font-weight:900;
}

@keyframes wmrInstallPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(217,31,61,.55)}
    50%{box-shadow:0 0 0 7px rgba(217,31,61,0)}
}

@media(max-width:600px){
    .wmrInstallGuides{
        margin:16px 12px;
    }

    .wmrInstallGuideButton{
        grid-template-columns:44px minmax(0,1fr) auto;
    }

    .wmrInstallGuideAction{
        display:none;
    }

    .wmrInstallGuidePanel{
        padding:0 14px 14px;
    }
}

@media(prefers-reduced-motion:reduce){
    .wmrBrowserTarget{
        animation:none;
    }

    .wmrInstallGuideChevron{
        transition:none;
    }
}