/* ====================================================================
 * PERPHYL SECTION STACK — BUTTON HELPER CLASSES (Glowing Card)
 * ====================================================================
 *
 * WHAT THIS FILE DOES
 * -------------------
 * Adds the Perphyl "Glowing Card" button design language to the
 * Section Stack plugin's Previous / Next navigation buttons via
 * three optional helper classes:
 *
 *   .glowing-blue    → Primary CTA look (blue glow border, orange text)
 *   .glowing-orange  → Promotional look (orange glow border, blue text)
 *   .glowing-ghost   → Secondary look  (white-faint border, blue text
 *                                       that flips to orange on hover)
 *
 * The plugin itself ships with plain flat blue buttons. These helper
 * classes are how Perphyl pages opt in to the on-brand Glowing Card
 * style without modifying the plugin code.
 *
 * HOW TO USE (no coding required)
 * --------------------------------
 * 1. Open the page in Elementor.
 * 2. Click on the Section Stack widget you want to style.
 * 3. Click the "Advanced" tab in the widget panel.
 * 4. Find the "CSS Classes" field.
 * 5. Type one of: glowing-blue, glowing-orange, glowing-ghost.
 * 6. Save the page.
 *
 * Only ONE helper class per Section Stack. If you put more than one,
 * the LAST one in source order wins (CSS cascade).
 *
 * WHEN TO USE WHICH
 * -----------------
 * - glowing-blue   = the primary CTA. Use on most pages (Privacy Policy,
 *                    Terms of Service, FAQ pages, About-Us long-form).
 * - glowing-orange = promotional / premium / time-limited content.
 *                    Use on Founder's Deal pages, Special Offer flows.
 * - glowing-ghost  = secondary navigation. Use when the Section Stack is
 *                    not the page's primary CTA element.
 *
 * BACKGROUND COMPATIBILITY
 * ------------------------
 * The Glowing Card design is calibrated for DARK navy backgrounds
 * (#172636). On light backgrounds the buttons may have lower contrast.
 * Best results: use on sections with a dark background fill.
 *
 * FILE LOCATIONS (for future Cesar / Dario / developers)
 * -------------------------------------------------------
 * - Live CSS:         /wp-content/uploads/perphyl-design-assets/perphyl-section-stack-buttons.css
 * - Enqueued from:    /wp-content/themes/perphyl-child/functions.php
 *                     (look for the `perphyl_enqueue_section_stack_button_helpers` function)
 * - Master button CSS: /wp-content/uploads/perphyl-design-assets/perphyl-buttons.css
 *                      (the site-wide Glowing Card system this file mirrors)
 * - Plugin docs:      D:\Users\Cesar\Documents\Perphyl\Docs\PERPHYL-WIDGETS.md
 * - Design system:    D:\Users\Cesar\Documents\Perphyl\Docs\PERPHYL-BUTTONS.md
 *
 * VERSION HISTORY
 * ---------------
 * - v1.0 — Session 19 (2026-05-17) — Initial release.
 *           Helper class system added after Path C plugin-side
 *           presets were rolled back in favor of site-level CSS.
 *
 * ==================================================================== */

/* Scope all rules to Elementor's Section Stack widget wrappers so
 * these helpers cannot accidentally style anything else on the page. */

/* Base — applies when ANY glowing-* class is present on the widget */
.elementor-widget.glowing-blue .perphyl-ss-btn,
.elementor-widget.glowing-orange .perphyl-ss-btn,
.elementor-widget.glowing-ghost .perphyl-ss-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 28px !important;height:48px;min-width:150px;font-size:14px;font-weight:600;letter-spacing:0.01em;text-decoration:none;cursor:pointer;border:none !important;outline:none;font-family:'Inter',system-ui,sans-serif;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform 220ms ease,background 260ms ease,box-shadow 260ms ease,color 220ms ease,text-shadow 220ms ease,filter 220ms ease;overflow:hidden;background-image:none !important;background-color:transparent !important}

/* BLUE variant — primary CTA */
.elementor-widget.glowing-blue .perphyl-ss-btn{color:#F38C00 !important;background:linear-gradient(180deg,rgba(8,117,225,0.12) 0%,rgba(8,117,225,0.06) 100%) !important;box-shadow:0 0 0 1px #0875E1 inset,0 1px 0 rgba(255,255,255,0.10) inset,0 6px 18px rgba(0,0,0,0.40),0 2px 6px rgba(0,0,0,0.30)}
.elementor-widget.glowing-blue .perphyl-ss-btn::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1.5px;background:linear-gradient(90deg,transparent 0%,rgba(8,117,225,0.85) 25%,rgba(120,200,255,1) 50%,rgba(8,117,225,0.85) 75%,transparent 100%);pointer-events:none}
.elementor-widget.glowing-blue .perphyl-ss-btn::after{content:"";position:absolute;left:14%;right:14%;top:-3px;height:6px;background:linear-gradient(90deg,transparent 0%,rgba(8,117,225,0.50) 50%,transparent 100%);filter:blur(3px);pointer-events:none}
.elementor-widget.glowing-blue .perphyl-ss-btn:hover:not([disabled]):not([aria-disabled="true"]){transform:translateY(-2px);color:#F38C00 !important;background:linear-gradient(180deg,rgba(80,170,255,0.92) 0%,rgba(8,117,225,0.78) 50%,rgba(4,60,120,0.88) 100%) !important;box-shadow:0 0 0 1px #0875E1 inset,0 1px 0 rgba(255,255,255,0.22) inset,0 -1px 0 rgba(0,0,0,0.25) inset,0 10px 26px rgba(0,0,0,0.45),0 3px 8px rgba(0,0,0,0.35)}
.elementor-widget.glowing-blue .perphyl-ss-btn:active:not([disabled]):not([aria-disabled="true"]){transform:translateY(0);filter:brightness(0.95)}

/* ORANGE variant — promotional */
.elementor-widget.glowing-orange .perphyl-ss-btn{color:#0875E1 !important;background:linear-gradient(180deg,rgba(243,140,0,0.12) 0%,rgba(243,140,0,0.06) 100%) !important;box-shadow:0 0 0 1px #F38C00 inset,0 1px 0 rgba(255,255,255,0.10) inset,0 6px 18px rgba(0,0,0,0.40),0 2px 6px rgba(0,0,0,0.30)}
.elementor-widget.glowing-orange .perphyl-ss-btn::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1.5px;background:linear-gradient(90deg,transparent 0%,rgba(243,140,0,0.85) 25%,rgba(255,200,90,1) 50%,rgba(243,140,0,0.85) 75%,transparent 100%);pointer-events:none}
.elementor-widget.glowing-orange .perphyl-ss-btn::after{content:"";position:absolute;left:14%;right:14%;top:-3px;height:6px;background:linear-gradient(90deg,transparent 0%,rgba(243,140,0,0.50) 50%,transparent 100%);filter:blur(3px);pointer-events:none}
.elementor-widget.glowing-orange .perphyl-ss-btn:hover:not([disabled]):not([aria-disabled="true"]){transform:translateY(-2px);color:#054A8F !important;text-shadow:0 1px 2px rgba(0,0,0,0.35);background:linear-gradient(180deg,rgba(255,175,50,0.92) 0%,rgba(243,140,0,0.78) 50%,rgba(120,65,0,0.88) 100%) !important;box-shadow:0 0 0 1px #F38C00 inset,0 1px 0 rgba(255,255,255,0.22) inset,0 -1px 0 rgba(0,0,0,0.25) inset,0 10px 26px rgba(0,0,0,0.45),0 3px 8px rgba(0,0,0,0.35)}
.elementor-widget.glowing-orange .perphyl-ss-btn:active:not([disabled]):not([aria-disabled="true"]){transform:translateY(0);filter:brightness(0.95)}
/* GHOST variant — secondary nav (best on dark backgrounds) */
.elementor-widget.glowing-ghost .perphyl-ss-btn{color:#0875E1 !important;background:transparent !important;box-shadow:0 0 0 1px rgba(255,255,255,0.22) inset,0 1px 0 rgba(255,255,255,0.08) inset,0 4px 14px rgba(0,0,0,0.30)}
.elementor-widget.glowing-ghost .perphyl-ss-btn::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1.5px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.45) 25%,rgba(255,255,255,0.70) 50%,rgba(255,255,255,0.45) 75%,transparent 100%);pointer-events:none}
.elementor-widget.glowing-ghost .perphyl-ss-btn::after{content:"";position:absolute;left:14%;right:14%;top:-3px;height:6px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.30) 50%,transparent 100%);filter:blur(3px);pointer-events:none}
.elementor-widget.glowing-ghost .perphyl-ss-btn:hover:not([disabled]):not([aria-disabled="true"]){transform:translateY(-2px);color:#F38C00 !important;background:linear-gradient(180deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.10) 50%,rgba(255,255,255,0.04) 100%) !important;box-shadow:0 0 0 1px rgba(255,255,255,0.40) inset,0 1px 0 rgba(255,255,255,0.16) inset,0 8px 22px rgba(0,0,0,0.40)}

/* Disabled state for any variant: dim + no hover/lift */
.elementor-widget.glowing-blue .perphyl-ss-btn[disabled],
.elementor-widget.glowing-blue .perphyl-ss-btn[aria-disabled="true"],
.elementor-widget.glowing-orange .perphyl-ss-btn[disabled],
.elementor-widget.glowing-orange .perphyl-ss-btn[aria-disabled="true"],
.elementor-widget.glowing-ghost .perphyl-ss-btn[disabled],
.elementor-widget.glowing-ghost .perphyl-ss-btn[aria-disabled="true"]{opacity:0.4;cursor:not-allowed;pointer-events:none}

/* Focus visibility (accessibility) inside the clipped silhouette */
.elementor-widget.glowing-blue .perphyl-ss-btn:focus-visible,
.elementor-widget.glowing-orange .perphyl-ss-btn:focus-visible,
.elementor-widget.glowing-ghost .perphyl-ss-btn:focus-visible{box-shadow:0 0 0 2px #FFFFFF inset,0 0 0 4px #0875E1 inset,0 6px 18px rgba(0,0,0,0.40)}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .elementor-widget.glowing-blue .perphyl-ss-btn,
  .elementor-widget.glowing-orange .perphyl-ss-btn,
  .elementor-widget.glowing-ghost .perphyl-ss-btn{transition:none}
}