/* ── Base ──────────────────────────────────────────────────────────────── */
.phw-widget{width:100%}
.phw-header{margin-bottom:32px}
.phw-title{margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.2}
.phw-subtitle{margin:0;opacity:.8;font-size:15px;line-height:1.5}

/* ── Step body (shared across all layouts) ─────────────────────────────── */
.phw-step-body{border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:20px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s,background .2s;flex:1}
.phw-step.is-highlighted .phw-step-body{border-color:#1a3f80;border-width:2px;background:#f5f8ff;box-shadow:0 8px 28px rgba(26,63,128,.14)}
.phw-step.is-active .phw-step-body{border-color:#2457a0;box-shadow:0 6px 20px rgba(26,63,128,.12)}
.phw-step-head{cursor:default}
.phw-step-head.phw-clickable{cursor:pointer}
.phw-step-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.phw-step-title{margin:0;font-size:16px;font-weight:700;line-height:1.3;flex:1}
.phw-step-desc{margin:0 0 10px;font-size:14px;line-height:1.6;opacity:.8}

/* ── Duration badge ────────────────────────────────────────────────────── */
.phw-duration{display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:#f0f4ff;color:#1a3f80;white-space:nowrap;flex-shrink:0}

/* ── Step identifier badge ─────────────────────────────────────────────── */
.phw-step-id{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border-radius:50%;background:#1a3f80;color:#fff;font-size:16px;font-weight:800;border:2px solid transparent;flex-shrink:0;transition:background .2s,border-color .2s,color .2s;line-height:1}
.phw-step-id-icon-num{flex-direction:column;gap:2px}
.phw-step-id-num{font-size:10px;font-weight:700;line-height:1;opacity:.8}
.phw-step.is-active .phw-step-id{background:#2457a0;border-color:#fff;box-shadow:0 0 0 3px rgba(36,87,160,.3)}

/* ── Action button ─────────────────────────────────────────────────────── */
/*
 * IMPORTANT: background-color, border-color and color are driven by CSS
 * custom properties so that Elementor style controls always win regardless
 * of stylesheet load order. The vars carry sensible defaults and are
 * overridden by whatever Elementor writes into the inline <style> block.
 */
.phw-step-actions{margin-top:10px}
.phw-toggle{
  display:inline-flex;align-items:center;gap:6px;
  border-style:solid;border-width:1px;
  border-radius:10px;padding:6px 12px;
  cursor:pointer;font-size:13px;
  transition:background-color .2s,border-color .2s,color .2s;
  background-color:var(--phw-btn-normal-bg,      #ffffff);
  border-color:    var(--phw-btn-normal-border,  rgba(0,0,0,.15));
  color:           var(--phw-btn-normal-color,   inherit);
}
.phw-toggle:hover{
  background-color:var(--phw-btn-hover-bg,     #f0f4ff);
  border-color:    var(--phw-btn-hover-border, rgba(0,0,0,.2));
  color:           var(--phw-btn-hover-color,  inherit);
}
.phw-toggle.is-active{
  background-color:var(--phw-btn-active-bg,     #e8f0ff);
  border-color:    var(--phw-btn-active-border, #8aa9dd);
  color:           var(--phw-btn-active-color,  #1a3f80);
}
.phw-toggle-arrow{transition:transform .25s;display:inline-block;font-size:16px;line-height:1}
.phw-toggle.is-active .phw-toggle-arrow{transform:rotate(90deg)}

/* ── Detail panel ──────────────────────────────────────────────────────── */
.phw-step-detail{border-top:1px solid rgba(0,0,0,.08);margin-top:12px;padding-top:12px}
.phw-animated .phw-step-detail{overflow:hidden;max-height:0;margin-top:0;padding-top:0;opacity:0;transition:max-height .35s ease,margin-top .2s ease,padding-top .2s ease,opacity .25s ease;border-top-color:transparent}
.phw-animated .phw-step-detail:not([hidden]){max-height:1200px;margin-top:12px;padding-top:12px;opacity:1;border-top-color:rgba(0,0,0,.08)}
.phw-animated .phw-step-detail[hidden]{display:block !important}
.phw-detail-list{margin:0;padding:0;list-style:none}
.phw-detail-list li{padding:5px 0 5px 20px;position:relative;font-size:13px;line-height:1.5;opacity:.85}
.phw-detail-list li::before{content:"›";position:absolute;left:4px;color:#1a3f80;font-weight:700}
.phw-cta-wrap{margin-top:10px}
.phw-cta{font-size:13px;font-weight:600;color:#1a3f80;text-decoration:none;transition:color .2s}
.phw-cta:hover{color:#2457a0}

/* Connector none — hides all connector elements */
.phw-conn-none .phw-connector,
.phw-conn-none .phw-connector-v,
.phw-conn-none .phw-connector-arrow,
.phw-conn-none .phw-connector-arrow-v,
.phw-conn-none .phw-spine { display: none; }

/* Badge none — hides step identifier badge across all layouts */
.phw-no-badge .phw-step-id,
.phw-no-badge .phw-step-card-id { display: none; }
/* Vertical: collapse the track column to zero width when badge+connector both gone */
.phw-no-badge.phw-layout-vertical .phw-step-track { display: none; }
/* Horizontal: remove the identifier row entirely so no gap remains */
.phw-no-badge.phw-layout-horizontal .phw-step-identifier { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   VERTICAL LAYOUT
══════════════════════════════════════════════════════════════════════ */
.phw-steps-vertical{display:flex;flex-direction:column;gap:0}
/* Each step row must stretch so the track column can fill full height */
.phw-steps-vertical .phw-step{display:flex;gap:16px;align-items:stretch;padding-bottom:0}
.phw-step-track{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
/* Connector fills all remaining height between badge bottom and next step */
.phw-connector-v{flex:1;width:2px;background:#d0d5e0;margin:4px 0;min-height:16px}

/* Connector line styles */
.phw-conn-dashed  .phw-connector-v{background:repeating-linear-gradient(to bottom,#d0d5e0 0,#d0d5e0 6px,transparent 6px,transparent 12px)}
.phw-conn-dotted  .phw-connector-v{background:repeating-linear-gradient(to bottom,#d0d5e0 0,#d0d5e0 2px,transparent 2px,transparent 8px)}
.phw-connector-arrow-v{color:#d0d5e0;font-size:20px;line-height:1;text-align:center;display:block;margin:4px 0}

.phw-step .phw-step-body{margin-bottom:16px}
.phw-step.is-last .phw-step-body{margin-bottom:0}
/* Last step track needs no connector space */
.phw-steps-vertical .phw-step.is-last .phw-step-track{align-self:flex-start}

/* ══════════════════════════════════════════════════════════════════════
   HORIZONTAL LAYOUT
══════════════════════════════════════════════════════════════════════ */
.phw-steps-horizontal{display:flex;gap:0;flex-wrap:wrap;align-items:flex-start}
.phw-steps-horizontal .phw-step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:160px;text-align:center}
.phw-step-identifier{display:flex;align-items:center;margin-bottom:12px;width:100%}
.phw-step-identifier .phw-step-id{flex-shrink:0}
.phw-connector{flex:1;height:2px;background:#d0d5e0;margin:0 4px}
.phw-conn-dashed  .phw-connector{background:repeating-linear-gradient(to right,#d0d5e0 0,#d0d5e0 6px,transparent 6px,transparent 12px)}
.phw-conn-dotted  .phw-connector{background:repeating-linear-gradient(to right,#d0d5e0 0,#d0d5e0 2px,transparent 2px,transparent 8px)}
.phw-connector-arrow{font-size:20px;color:#d0d5e0;flex-shrink:0;margin:0 2px;line-height:1}
/* With connector: first badge hugs right, last badge hugs left */
.phw-steps-horizontal:not(.phw-conn-none) .phw-step:first-child .phw-step-identifier{justify-content:flex-end}
.phw-steps-horizontal:not(.phw-conn-none) .phw-step:last-child  .phw-step-identifier{justify-content:flex-start}
/* Without connector: all badges centred by default; overridden by badge_position Elementor selector */
.phw-steps-horizontal.phw-conn-none .phw-step .phw-step-identifier{justify-content:center}
.phw-steps-horizontal .phw-step-body{text-align:left;width:100%}
@media(max-width:680px){
  .phw-steps-horizontal{flex-direction:column}
  .phw-steps-horizontal .phw-step{flex-direction:row;align-items:flex-start;text-align:left;width:100%}
  .phw-step-identifier{flex-direction:column;width:auto;margin-bottom:0;margin-right:14px}
  .phw-connector{display:none}
  .phw-connector-arrow{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ALTERNATING LAYOUT
══════════════════════════════════════════════════════════════════════ */
.phw-steps-alternating{position:relative;padding:0 0 0 0}
.phw-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#d0d5e0;transform:translateX(-50%);z-index:0}
.phw-conn-dashed .phw-spine{background:repeating-linear-gradient(to bottom,#d0d5e0 0,#d0d5e0 6px,transparent 6px,transparent 12px)}
.phw-conn-dotted .phw-spine{background:repeating-linear-gradient(to bottom,#d0d5e0 0,#d0d5e0 2px,transparent 2px,transparent 8px)}
.phw-steps-alternating .phw-step{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;position:relative;z-index:1}
.phw-steps-alternating .phw-step-left{flex-direction:row;padding-right:calc(50% + 30px)}
.phw-steps-alternating .phw-step-right{flex-direction:row-reverse;padding-left:calc(50% + 30px)}
.phw-step-spine-id{position:absolute;left:50%;transform:translateX(-50%);z-index:2}
@media(max-width:680px){
  .phw-spine{left:28px;transform:none}
  .phw-steps-alternating .phw-step-left,
  .phw-steps-alternating .phw-step-right{flex-direction:row;padding:0 0 0 56px}
  .phw-step-spine-id{left:10px;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS GRID LAYOUT
══════════════════════════════════════════════════════════════════════ */
.phw-steps-cards{display:grid;gap:20px}
/* Base fallback column classes — overridden by Elementor responsive inline CSS */
.phw-cards-cols-2{grid-template-columns:repeat(2,1fr)}
.phw-cards-cols-3{grid-template-columns:repeat(3,1fr)}
.phw-cards-cols-4{grid-template-columns:repeat(4,1fr)}
.phw-steps-cards .phw-step{display:flex;flex-direction:column}
.phw-step-card-id{margin-bottom:12px}
.phw-steps-cards .phw-step-body{flex:1}
/* Mobile fallback only — Elementor responsive control overrides this for tablet/desktop */
@media(max-width:480px){.phw-cards-cols-2,.phw-cards-cols-3,.phw-cards-cols-4{grid-template-columns:1fr}}