/*
Theme Name: MYR WhatsApp API
Theme URI: https://www.myradvancesolution.com/
Author: MYR Advance Solution Pvt Ltd
Description: One-page SaaS landing theme for the MYR WhatsApp Business API. Edit logo, colours, text, prices, payment links and footer from Appearance > Customize.
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: myr-wa
*/
body{color:#0F172A;background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:64px}
@media(min-width:768px){body{padding-bottom:0}}
section[id]{scroll-margin-top:80px}
html{scroll-behavior:smooth}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:.75rem;padding:.8rem 1.4rem;transition:background .15s,border-color .15s,transform .15s}
.btn-primary{background:var(--accent-dark);color:#fff}.btn-primary:hover{filter:brightness(.92)}
.btn-ghost{border:1px solid #CBD5E1;background:#fff;color:#0F172A}.btn-ghost:hover{border-color:var(--accent-dark)}
.card{background:#fff;border:1px solid #E2E8F0;border-radius:1rem}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-dark)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bubble-in{background:#fff;border-radius:.9rem .9rem .9rem .2rem;padding:.6rem .9rem;font-size:.85rem;max-width:80%;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.bubble-out{background:#DCF8C6;border-radius:.9rem .9rem .2rem .9rem;padding:.6rem .9rem;font-size:.85rem;max-width:80%;margin-left:auto}
.wa-bg{background:#ECE5DD;background-image:radial-gradient(rgba(15,23,42,.06) 1px,transparent 1px);background-size:14px 14px;border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-panel.open{grid-template-rows:1fr}.faq-panel>div{overflow:hidden}
.hero-glow{background:radial-gradient(60% 60% at 80% 20%,var(--accent-tint),transparent 70%),#F8FAFC}
.floaty{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
@media(max-width:639px){
 .rates thead{display:none}
 .rates tr{display:block;border:1px solid #E2E8F0;border-radius:.75rem;margin-bottom:.75rem;padding:.5rem 1rem;background:#fff}
 .rates td{display:flex;justify-content:space-between;padding:.35rem 0}
 .rates td::before{content:attr(data-label);color:#64748B;font-weight:500}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.entry-content{max-width:48rem;margin:0 auto;padding:3rem 1rem}.entry-content p{margin:1rem 0}

/* Demo popup: glass effect, centred over the page */
.demo-modal{position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:1rem;background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.demo-modal:not([hidden]){display:flex}
.demo-glow{position:absolute;width:440px;height:440px;max-width:90vw;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 66%);opacity:.5;filter:blur(30px);pointer-events:none}
.demo-card{position:relative;width:100%;max-width:30rem;max-height:90vh;overflow-y:auto;padding:1.75rem;border-radius:1.5rem;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.66));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px rgba(15,23,42,.35),inset 0 1px 0 rgba(255,255,255,.9);animation:demoIn .25s ease}
@keyframes demoIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.demo-close{position:absolute;top:.7rem;right:1rem;font-size:1.9rem;line-height:1;color:#475569;background:none;border:0;cursor:pointer}
body.demo-open{overflow:hidden}
/* Style any form plugin (Contact Form 7, WPForms, Fluent Forms, Gravity...) inside the popup */
.demo-body label{display:block;font-size:.875rem;font-weight:500;margin-top:.75rem}
.demo-body p{margin:.4rem 0}
.demo-body input:not([type=submit]):not([type=checkbox]):not([type=radio]),.demo-body textarea,.demo-body select{display:block;width:100%;margin-top:.25rem;padding:.7rem .9rem;font-size:.95rem;color:#0F172A;background:rgba(255,255,255,.88);border:1px solid rgba(148,163,184,.65);border-radius:.75rem}
.demo-body input:focus,.demo-body textarea:focus,.demo-body select:focus{outline:none;border-color:var(--accent-dark);box-shadow:0 0 0 3px var(--accent-tint)}
.demo-body input[type=submit],.demo-body button[type=submit]{width:100%;margin-top:1rem;padding:.85rem 1.4rem;font-weight:600;color:#fff;background:var(--accent-dark);border:0;border-radius:.75rem;cursor:pointer}
.demo-body input[type=submit]:hover,.demo-body button[type=submit]:hover{filter:brightness(.92)}
.demo-body .wpcf7-response-output{margin:1rem 0 0;border-radius:.6rem;font-size:.875rem}