/* ═══════════════════════════════════════════════════════════════════
   Giant WiFi — WordPress Plugin Styles v3
   Every element uses gwpp- prefix to prevent theme CSS overrides
   ═══════════════════════════════════════════════════════════════════ */

.gwpp-widget{--gwpp-accent:#00d084;--gwpp-accent-dark:#059669;--gwpp-text:#111827;--gwpp-muted:#6b7280;--gwpp-border:#e5e7eb;--gwpp-bg-subtle:#f9fafb;--gwpp-radius:14px;--gwpp-t:.25s cubic-bezier(.4,0,.2,1);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--gwpp-text);line-height:1.5;max-width:1200px;margin:0 auto}
.gwpp-widget *,.gwpp-widget *::before,.gwpp-widget *::after{box-sizing:border-box;margin:0;padding:0}

/* ═══ TOOLBAR — full width bar: logo | devices | colours ═══════ */
.gwpp-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--gwpp-border);border-radius:var(--gwpp-radius);margin-bottom:16px;flex-wrap:wrap}
.gwpp-toolbar-left{flex-shrink:0}
.gwpp-toolbar-center{flex:1;display:flex;justify-content:center}
.gwpp-toolbar-right{flex-shrink:0}

/* Logo upload inline */
.gwpp-toolbar-logo{cursor:pointer}
.gwpp-toolbar-logo-drop{display:flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px dashed var(--gwpp-border);border-radius:8px;font-size:.78rem;color:var(--gwpp-muted);transition:all var(--gwpp-t);white-space:nowrap}
.gwpp-toolbar-logo-drop i{color:#d1d5db;font-size:.85rem}
.gwpp-toolbar-logo-drop:hover{border-color:var(--gwpp-accent);color:var(--gwpp-accent-dark)}
.gwpp-toolbar-logo-preview{display:flex;align-items:center;gap:8px;position:relative}
.gwpp-toolbar-logo-preview img{height:30px;border-radius:6px}
.gwpp-toolbar-logo-rm{width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:.55rem;cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-4px}

/* Device switcher */
.gwpp-device-switch{display:flex;gap:2px;background:var(--gwpp-bg-subtle);border-radius:8px;padding:3px}
.gwpp-dev-btn{width:36px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--gwpp-muted);font-size:.85rem;cursor:pointer;transition:all var(--gwpp-t);display:flex;align-items:center;justify-content:center}
.gwpp-dev-btn:hover{color:var(--gwpp-text)}
.gwpp-dev-btn.active{background:#fff;color:var(--gwpp-accent-dark);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Quick colour pickers */
.gwpp-quick-colours{display:flex;gap:8px;align-items:center}
.gwpp-qc{display:flex;flex-direction:column;align-items:center;gap:2px}
.gwpp-qc input[type="color"]{width:28px;height:28px;border:2px solid var(--gwpp-border);border-radius:6px;cursor:pointer;padding:1px;background:#fff}
.gwpp-qc input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.gwpp-qc input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}
.gwpp-qc-label{font-size:.55rem;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.5px}

@media(max-width:900px){
    .gwpp-dev-btn[data-device="desktop"]{display:none}
}
@media(max-width:700px){
    .gwpp-toolbar{flex-direction:column;gap:10px}
    .gwpp-toolbar-center{order:-1}
    .gwpp-toolbar-logo-text{display:none}
}
@media(max-width:600px){
    .gwpp-dev-btn[data-device="tablet"]{display:none}
    .gwpp-dev-btn[data-device="desktop"]{display:none}
}

/* ═══ MAIN — preview + sidebar ═════════════════════════════════ */
.gwpp-main{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
@media(max-width:900px){.gwpp-main{grid-template-columns:1fr}}

/* ═══ PREVIEW AREA ═════════════════════════════════════════════ */
.gwpp-preview-area{display:flex;justify-content:center;align-items:flex-start}

.gwpp-device{background:#1a1a2e;border-radius:14px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.08);transition:all .4s;position:relative;width:100%}
.gwpp-device.phone{max-width:320px;border-radius:36px;padding:10px}
.gwpp-device.tablet{max-width:520px;border-radius:28px;padding:8px}
.gwpp-device.desktop{max-width:100%;border-radius:14px;padding:6px 6px 24px}

.gwpp-notch{width:80px;height:20px;background:#1a1a2e;border-radius:0 0 12px 12px;margin:0 auto}
.gwpp-device.desktop .gwpp-notch{display:none}
.gwpp-device.desktop::after{content:'';display:block;width:6px;height:6px;background:#333;border-radius:50%;margin:6px auto 0}

.gwpp-screen{border-radius:8px;overflow:hidden;min-height:380px;transition:all .4s}
.gwpp-device.phone .gwpp-screen{border-radius:26px;min-height:520px}
.gwpp-device.tablet .gwpp-screen{border-radius:18px;min-height:460px}

/* ═══ PORTAL MOCK ══════════════════════════════════════════════ */
.gwpp-portal-bg{width:100%;min-height:100%;padding:28px 16px;display:flex;align-items:flex-start;justify-content:center;background:var(--gwpp-portal-bg,#f0f2f5);transition:background var(--gwpp-t)}
.gwpp-portal-card{background:var(--gwpp-portal-card,#ffffff);border-radius:var(--gwpp-portal-radius,16px);padding:28px 24px;width:100%;max-width:380px;box-shadow:0 8px 32px rgba(0,0,0,.07);transition:all var(--gwpp-t)}
.gwpp-portal-logo{text-align:center;margin-bottom:16px}
.gwpp-portal-logo-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--gwpp-portal-accent,#00d084),var(--gwpp-portal-accent-dark,#00b872));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem}
.gwpp-portal-logo img{max-height:48px;display:block;margin:0 auto}
.gwpp-portal-heading{font-size:1.15rem;font-weight:800;text-align:center;color:var(--gwpp-portal-text,#1f2937);margin:0 0 6px!important;padding:0!important;line-height:1.3}
.gwpp-portal-desc{font-size:.8rem;text-align:center;color:var(--gwpp-portal-text-muted,#6b7280);margin:0 0 18px!important;padding:0!important}

.gwpp-portal-social{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.gwpp-social-icon{width:42px;height:42px;border-radius:10px;border:1.5px solid rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;color:#6b7280;background:transparent}
.gwpp-fb{color:#1877f2;border-color:rgba(24,119,242,.15)}.gwpp-g{color:#ea4335;border-color:rgba(234,67,53,.15)}.gwpp-ig{color:#e4405f;border-color:rgba(228,64,95,.15)}.gwpp-ms{color:#00a4ef;border-color:rgba(0,164,239,.15)}

.gwpp-portal-divider{text-align:center;margin:14px 0;font-size:.72rem;color:var(--gwpp-portal-text-muted,#9ca3af)}
.gwpp-portal-fields{margin-bottom:14px}
.gwpp-portal-input{background:rgba(0,0,0,.02);border:1.5px solid rgba(0,0,0,.06);border-radius:var(--gwpp-portal-field-radius,8px);padding:11px 14px;font-size:.82rem;color:#9ca3af;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.gwpp-portal-input i{font-size:.78rem;width:14px;text-align:center;color:#ccc}
.gwpp-portal-input span{color:#9ca3af}
.gwpp-portal-terms{margin-bottom:16px}
.gwpp-portal-terms small{font-size:.72rem;color:var(--gwpp-portal-text-muted,#6b7280);display:flex;align-items:flex-start;gap:6px}
.gwpp-portal-terms small i{color:var(--gwpp-portal-accent,#00d084);margin-top:1px;font-size:.8rem}
.gwpp-portal-terms a{color:var(--gwpp-portal-accent,#00d084)!important;text-decoration:none!important}
.gwpp-portal-btn{width:100%;padding:13px;border:none!important;border-radius:var(--gwpp-portal-field-radius,8px);background:linear-gradient(135deg,var(--gwpp-portal-accent,#00d084),var(--gwpp-portal-accent-dark,#00b872));color:var(--gwpp-portal-btn-text,#fff);font-size:.9rem;font-weight:700;cursor:default;font-family:inherit}
.gwpp-portal-footer{text-align:center;margin-top:16px;font-size:.65rem;color:var(--gwpp-portal-text-muted,#9ca3af)}

/* ═══ SIDEBAR CONTROLS ═════════════════════════════════════════ */
.gwpp-sidebar{display:flex;flex-direction:column;gap:12px}
@media(max-width:900px){.gwpp-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:600px){.gwpp-sidebar{grid-template-columns:1fr}}

.gwpp-sb-section{background:#fff;border:1px solid var(--gwpp-border);border-radius:var(--gwpp-radius);padding:16px}
.gwpp-sb-title{font-size:.82rem;font-weight:800;color:var(--gwpp-text);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.gwpp-sb-title i{color:var(--gwpp-accent);font-size:.8rem}

/* Theme grid — compact */
.gwpp-theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.gwpp-theme-btn{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--gwpp-bg-subtle);border:1.5px solid transparent;border-radius:7px;color:var(--gwpp-text);font-size:.7rem;font-weight:600;cursor:pointer;transition:all var(--gwpp-t);font-family:inherit}
.gwpp-theme-btn:hover{border-color:#ddd}
.gwpp-theme-btn.active{border-color:var(--gwpp-accent);background:rgba(0,208,132,.06)}
.gwpp-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.gwpp-theme-icon{font-size:.65rem;width:12px;text-align:center;flex-shrink:0}
.gwpp-theme-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwpp-sb-cat{font-size:.6rem;font-weight:800;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin:10px 0 5px;padding:0}
.gwpp-sb-cat:first-child{margin-top:0}

/* Text fields */
.gwpp-sb-field{margin-bottom:8px}
.gwpp-sb-label{display:block;font-size:.68rem;color:var(--gwpp-muted);font-weight:600;margin-bottom:2px}
.gwpp-sb-input{width:100%!important;background:var(--gwpp-bg-subtle)!important;border:1px solid var(--gwpp-border)!important;border-radius:7px!important;padding:8px 10px!important;color:var(--gwpp-text)!important;font-size:.82rem!important;font-family:inherit!important}
.gwpp-sb-input:focus{outline:none!important;border-color:var(--gwpp-accent)!important}

/* Toggles */
.gwpp-sb-toggle{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem;color:var(--gwpp-text);cursor:pointer;font-weight:500}
.gwpp-sb-toggle:last-child{margin-bottom:0}
.gwpp-sb-toggle input{display:none}
.gwpp-sb-toggle-track{width:36px;height:19px;background:#d1d5db;border-radius:10px;position:relative;transition:background var(--gwpp-t);flex-shrink:0}
.gwpp-sb-toggle-track::after{content:'';position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left var(--gwpp-t);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.gwpp-sb-toggle input:checked+.gwpp-sb-toggle-track{background:var(--gwpp-accent)}
.gwpp-sb-toggle input:checked+.gwpp-sb-toggle-track::after{left:19.5px}

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.gwpp-hero{text-align:center;padding:60px 20px;max-width:700px;margin:0 auto}
.gwpp-hero-badge{display:inline-block;background:rgba(0,208,132,.1);color:var(--gwpp-accent-dark);padding:8px 18px;border-radius:50px;font-size:.82rem;font-weight:700;margin-bottom:20px;border:1px solid rgba(0,208,132,.2)}
.gwpp-hero-title{font-size:clamp(2rem,4vw,3rem)!important;font-weight:900!important;letter-spacing:-1.5px;line-height:1.1!important;margin:0 0 16px!important;padding:0!important;color:var(--gwpp-text)}
.gwpp-hero-title span{background:linear-gradient(135deg,#00d084,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gwpp-hero-sub{font-size:1.05rem;color:var(--gwpp-muted);max-width:540px;margin:0 auto 28px!important;padding:0!important;line-height:1.7}
.gwpp-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.gwpp-hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--gwpp-border)}
.gwpp-hero-stat{text-align:center}
.gwpp-hero-stat strong{display:block;font-size:1.3rem;font-weight:900;color:var(--gwpp-text)}
.gwpp-hero-stat span{font-size:.75rem;color:var(--gwpp-muted);font-weight:500}

/* ═══ SHARED BUTTONS ═══════════════════════════════════════════ */
.gwpp-cta-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;background:linear-gradient(135deg,var(--gwpp-accent),var(--gwpp-accent-dark))!important;color:#fff!important;font-size:.95rem;font-weight:700;text-decoration:none!important;transition:all var(--gwpp-t);border:none!important;cursor:pointer;box-shadow:0 4px 16px rgba(0,208,132,.25)}
.gwpp-cta-btn-primary:hover{box-shadow:0 8px 28px rgba(0,208,132,.35);transform:translateY(-2px);color:#fff!important}
.gwpp-cta-btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;background:#fff!important;color:var(--gwpp-text)!important;font-size:.95rem;font-weight:700;text-decoration:none!important;border:1.5px solid var(--gwpp-border)!important;transition:all var(--gwpp-t);cursor:pointer}
.gwpp-cta-btn-outline:hover{border-color:var(--gwpp-accent)!important;color:var(--gwpp-accent-dark)!important}

/* ═══════════════════════════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════════════════════════ */
.gwpp-pricing-section{max-width:1200px;margin:0 auto}
.gwpp-pricing-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.gwpp-pricing-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gwpp-pricing-cards{grid-template-columns:1fr}}

.gwpp-pc{background:#fff;border:1.5px solid var(--gwpp-border);border-radius:var(--gwpp-radius);padding:28px 22px;position:relative;transition:all .2s}
.gwpp-pc:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-2px)}
.gwpp-pc-popular{border-color:var(--gwpp-accent);box-shadow:0 12px 40px rgba(0,208,132,.1)}
.gwpp-pc-pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gwpp-accent),var(--gwpp-accent-dark));color:#fff;font-size:.68rem;font-weight:800;padding:5px 18px;border-radius:50px;white-space:nowrap}
.gwpp-pc-tier{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.gwpp-pc-price{font-size:2rem;font-weight:900;color:var(--gwpp-text);margin-bottom:4px}
.gwpp-pc-price small{font-size:.82rem;font-weight:500;color:var(--gwpp-muted)}
.gwpp-pc-desc{font-size:.82rem;color:var(--gwpp-muted);line-height:1.6;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #f3f4f6}
.gwpp-pc-list{list-style:none!important;padding:0!important;margin:0 0 20px!important}
.gwpp-pc-list li{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;padding:4px 0;color:var(--gwpp-text)}
.gwpp-pc-check{color:var(--gwpp-accent);font-weight:700;flex-shrink:0}
.gwpp-pc-locked{color:#c8c8c8!important}
.gwpp-pc-lock{font-size:.7rem;flex-shrink:0}
.gwpp-pc-btn{display:block;text-align:center;padding:11px;border-radius:10px;font-size:.88rem;font-weight:700;text-decoration:none!important;transition:all .2s;border:1.5px solid var(--gwpp-border)!important;color:var(--gwpp-text)!important;background:#fff!important}
.gwpp-pc-btn:hover{border-color:var(--gwpp-accent)!important;color:var(--gwpp-accent-dark)!important}
.gwpp-pc-btn-primary{background:linear-gradient(135deg,var(--gwpp-accent),var(--gwpp-accent-dark))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 12px rgba(0,208,132,.25)}
.gwpp-pc-btn-primary:hover{box-shadow:0 8px 24px rgba(0,208,132,.35)}

/* ═══════════════════════════════════════════════════════════════════
   FEATURES GRID
   ═══════════════════════════════════════════════════════════════════ */
.gwpp-features{max-width:1200px;margin:0 auto}
@media(max-width:900px){.gwpp-features{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.gwpp-features{grid-template-columns:1fr!important}}
.gwpp-feature-card{display:flex;gap:14px;padding:20px;background:#fff;border:1px solid #f3f4f6;border-radius:12px;transition:all .2s}
.gwpp-feature-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:rgba(0,208,132,.2);transform:translateY(-2px)}
.gwpp-feature-icon{width:42px;height:42px;border-radius:10px;background:rgba(0,208,132,.08);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.gwpp-feature-body{min-width:0}
.gwpp-feature-title{font-size:.9rem;font-weight:800;color:var(--gwpp-text);margin:0 0 4px!important;padding:0!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gwpp-feature-tier{font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:50px;text-transform:uppercase;letter-spacing:.3px}
.gwpp-feature-desc{font-size:.8rem;color:var(--gwpp-muted);line-height:1.6;margin:0!important;padding:0!important}

/* ═══════════════════════════════════════════════════════════════════
   VENDORS
   ═══════════════════════════════════════════════════════════════════ */
.gwpp-vendor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}
@media(max-width:700px){.gwpp-vendor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gwpp-vendor-grid{grid-template-columns:1fr}}
.gwpp-vendor-card{background:#fff;border:1px solid #f3f4f6;border-radius:12px;padding:20px;text-align:center;transition:all .2s}
.gwpp-vendor-card:hover{border-color:var(--gwpp-accent);box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px)}
.gwpp-vendor-logo{height:32px;width:auto;display:block;margin:0 auto 10px;opacity:.6;transition:opacity .2s}
.gwpp-vendor-card:hover .gwpp-vendor-logo{opacity:1}
.gwpp-vendor-icon{font-size:1.5rem;margin-bottom:8px}
.gwpp-vendor-name{font-size:.88rem;font-weight:700;color:var(--gwpp-text)}
.gwpp-vendor-sub{font-size:.72rem;color:var(--gwpp-muted)}
.gwpp-vendor-strip{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);padding:20px 0}
.gwpp-vendor-track{display:flex;align-items:center;gap:48px;animation:gwppMarquee 25s linear infinite;width:max-content}
.gwpp-vendor-track img{height:28px;width:auto;opacity:.4;filter:grayscale(100%);transition:all .2s}
.gwpp-vendor-track img:hover{opacity:.8;filter:grayscale(0)}
@keyframes gwppMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════════════ */
.gwpp-cta-banner{background:linear-gradient(135deg,#00d084,#0ea5e9);border-radius:20px;padding:48px 32px;text-align:center}
.gwpp-cta-banner h2{font-size:clamp(1.4rem,3vw,2rem)!important;font-weight:900!important;color:#fff!important;margin:0 0 8px!important;padding:0!important}
.gwpp-cta-banner p{color:rgba(255,255,255,.85)!important;font-size:1rem;margin:0 0 28px!important;padding:0!important}
.gwpp-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gwpp-cta-banner .gwpp-cta-btn-primary{background:#fff!important;color:var(--gwpp-accent-dark)!important;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.gwpp-cta-banner .gwpp-cta-btn-outline{background:transparent!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important}
.gwpp-cta-banner .gwpp-cta-btn-outline:hover{background:rgba(255,255,255,.15)!important;border-color:#fff!important}