/* =========================================================================
   ChoreoSync theme overrides for OLMO (demo-16 / App Showcase 3)
   Loaded AFTER style.css + responsive.css. Do NOT edit style.css.
   Brand: ChoreoSync purple (from the logo). We reuse OLMO's built-in `purple`
   palette classes and nudge the hex #6a26da -> #6C3FE3.
   ========================================================================= */

:root {
    --cs-primary: #6C3FE3;
    --cs-primary-rgb: 108, 63, 227;
    --cs-primary-2: #8B5CF6;   /* lighter violet for gradients */
    --cs-deep: #2c1466;        /* deep purple */
    --cs-dark: #15101f;
    --cs-light: #f6f5fc;
    --cs-radius: 1.1rem;
}

/* ---------- Typography: Manrope (display) + Inter (body) ---------- */
body, p, a, li, span, input, textarea, select, button, label,
.p-sm, .p-md, .p-lg, .p-xl {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1-xl, .h2-xl, .h2-md, .h2-sm, .h2-xs, .h3-md, .h3-xs, .h4-md, .h5-md, .h5-xs, .h6-xl {
    font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------- Accent recolor: #6a26da -> #6C3FE3 ---------- */
.bg-purple { background-color: var(--cs-primary) !important; }
.bg-tra-purple { background-color: rgba(var(--cs-primary-rgb), .07) !important; }
.bg-purple-gradient { background-image: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-primary-2) 100%) !important; }

.btn-purple, .scroll .btn-purple, .white-color .btn-purple,
.purple-hover:hover, .scroll .purple-hover:hover, .white-color .purple-hover:hover {
    color: #fff !important;
    background-color: var(--cs-primary) !important;
    border-color: var(--cs-primary) !important;
}
.btn-tra-purple, .scroll .btn-tra-purple, .white-color .btn-tra-purple,
.tra-purple-hover:hover, .scroll .tra-purple-hover:hover, .white-color .tra-purple-hover:hover {
    color: var(--cs-primary) !important;
    background-color: transparent !important;
    border-color: var(--cs-primary) !important;
}
.purple-color,
.purple-color h2, .purple-color h3, .purple-color h4, .purple-color h5,
.purple-color h6, .purple-color p, .purple-color a, .purple-color li,
.purple-color i, .purple-color span,
.white-color .purple-color { color: var(--cs-primary) !important; }

.purple-loading .object { background-color: var(--cs-primary) !important; }

.wsmenu > .wsmenu-list.nav-purple-hover > li > a:hover,
.wsmenu > .wsmenu-list.nav-purple-hover > li.active > a,
.wsmenu > .wsmenu-list.nav-purple-hover > li > ul.sub-menu > li > a:hover,
.wsmenu > .wsmenu-list.nav-purple-hover > li > .wsmegamenu ul.link-list > li > a:hover {
    color: var(--cs-primary) !important;
}

a:hover { color: var(--cs-primary); }
.section-id { color: var(--cs-primary); }
.fbox-ico-center.purple-color span { color: var(--cs-primary); }

/* ---------- Shape language: soft rounded, pill buttons ---------- */
.btn { border-radius: 999px !important; }
.pricing-2-table, .fbox-2, .fbox-8, .fbox-img, .fbox-4,
.cta-box, .form-holder, .question, .rel.img-block, .cbox-2,
.txt-block .img-block, .hero-16-img img, .content-9-img img {
    border-radius: var(--cs-radius);
}
.fbox-8 .fbox-img { overflow: hidden; }

/* ---------- Surfaces ---------- */
.bg-snow { background-color: var(--cs-light) !important; }
.bg-lightgrey, .bg-whitesmoke { background-color: var(--cs-light) !important; }

/* ---------- Hero (HERO-16): soft purple wash on a light bg ---------- */
#hero-16 {
    background-image:
        radial-gradient(70% 110% at 95% 0%, rgba(var(--cs-primary-rgb), .12) 0%, rgba(var(--cs-primary-rgb), 0) 60%);
    background-color: #fff;
    padding-top: 160px;
    padding-bottom: 80px;
}
.hero-16-img img { box-shadow: 0 30px 70px rgba(var(--cs-primary-rgb), .18); }

/* ---------- Pricing ---------- */
.pricing-2-table { border: 1px solid #ececf4; transition: transform .25s ease, box-shadow .25s ease; }
.pricing-2-table:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(var(--cs-primary-rgb), .12); }
.pricing-plan.highlight { border-color: var(--cs-primary); }
.pricing-plan-title h6.bg-purple { color: #fff !important; }

/* ---------- Stats / Studio Sound band ---------- */
.cs-band { background-image: linear-gradient(135deg, var(--cs-deep) 0%, var(--cs-primary) 55%, var(--cs-primary-2) 100%); }

/* ---------- Footer stacked logo (avoid the 40px .footer-logo cap) ---------- */
#footer-4 img.footer-logo { max-height: 92px; width: auto; max-width: 100%; }

/* ---------- Contact ---------- */
.cs-form-card { background:#fff; border-radius:1.25rem; padding:2.75rem; box-shadow:0 24px 60px rgba(0,0,0,.07); border:1px solid #eee; }
.contact-form .form-label { font-weight:600; color:var(--cs-dark); margin-bottom:.5rem; }
.contact-form .form-control, .contact-form .form-select { margin-bottom:18px; }
.contact-form .form-control:focus, .contact-form .form-select:focus {
    border-color: var(--cs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), .12) !important;
}
.cs-contact-method { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; }
.cs-contact-method .cs-cm-ico { flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(var(--cs-primary-rgb),.08); color:var(--cs-primary); font-size:1.35rem; }
.cs-contact-method h6 { margin:0 0 .25rem; }
.cs-contact-method p { margin:0; }
.cs-contact-method a { color:var(--cs-primary); }

/* ---------- Get the app (PWA install) ---------- */
.getapp-card {
    position:relative; overflow:hidden;
    padding:4.5rem 2rem;
    border-radius:1.75rem;
    background:
        radial-gradient(120% 120% at 50% -10%, rgba(var(--cs-primary-rgb), .14) 0%, rgba(var(--cs-primary-rgb), 0) 55%),
        linear-gradient(180deg, #fff 0%, var(--cs-light) 100%);
    border:1px solid rgba(var(--cs-primary-rgb), .12);
    box-shadow:0 34px 80px rgba(var(--cs-primary-rgb), .14);
}
.getapp-eyebrow {
    display:inline-block; margin-bottom:1.1rem; padding:.4rem 1.05rem;
    font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--cs-primary); background:rgba(var(--cs-primary-rgb), .1); border-radius:999px;
}
.getapp-card h2 { margin-bottom:.85rem; }
.getapp-card > p.p-lg { max-width:600px; margin:0 auto 2.25rem; color:#4b465c; }
.getapp-badges { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.cs-store-badge {
    flex:0 1 230px;
    display:inline-flex; align-items:center; justify-content:center; gap:.85rem;
    padding:.85rem 1.5rem;
    background:var(--cs-dark); color:#fff !important;
    border-radius:16px; border:1px solid var(--cs-dark);
    text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cs-store-badge:hover {
    transform:translateY(-3px);
    background:#000;
    box-shadow:0 18px 38px rgba(var(--cs-primary-rgb), .3);
    color:#fff !important;
}
.cs-store-ico { display:flex; align-items:center; justify-content:center; color:#fff; }
.cs-store-txt { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.cs-store-txt small { font-size:.72rem; opacity:.78; letter-spacing:.01em; }
.cs-store-txt strong { font-family:'Manrope',sans-serif; font-size:1.18rem; font-weight:800; }
.getapp-foot { margin:1.75rem 0 0; font-size:.92rem; color:#8a8699; }

/* PWA install popup (magnific inline) */
.cs-pwa-popup {
    position:relative; max-width:440px; margin:1.5rem auto;
    background:#fff; border-radius:var(--cs-radius);
    padding:2.5rem 2.5rem 2.25rem; text-align:left;
    box-shadow:0 30px 80px rgba(0,0,0,.18);
}
.cs-pwa-popup h4 { margin-bottom:.5rem; }
.cs-pwa-steps { margin:1rem 0 1.75rem; padding-left:1.2rem; }
.cs-pwa-steps li { margin-bottom:.65rem; color:var(--cs-dark); }
.cs-pwa-steps strong { font-weight:700; }
.cs-step-ico { display:inline-block; padding:0 .35em; border:1px solid #ccc; border-radius:5px; font-size:.85em; line-height:1.4; }