/* Root vars */
.woocod-opc-plus{ --wpri:#6c3cf7; --wbadge:#ff7a00; --ring: color-mix(in srgb, var(--wpri) 22%, transparent); }

/* Container card */
.woocod-opc-plus{
  background:#fff; border:1px solid #e7eaf0; border-radius:16px;
  padding:18px; box-shadow:0 10px 28px rgba(15,23,42,.08);
}

/* Inputs & selects */
.woocod-opc-plus input,.woocod-opc-plus select,.woocod-opc-plus textarea{
  width:100%; background:#fff; color:#0f172a;
  border:1px solid #d8dee6; border-radius:14px;
  padding:12px 14px 12px 48px; min-height:50px; font-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
:root[dir="rtl"] .woocod-opc-plus input,
:root[dir="rtl"] .woocod-opc-plus select,
:root[dir="rtl"] .woocod-opc-plus textarea{ padding:12px 48px 12px 14px }
.woocod-opc-plus input:focus,.woocod-opc-plus select:focus,.woocod-opc-plus textarea:focus{
  border-color:var(--wpri); box-shadow:0 0 0 4px var(--ring);
}

/* Heading */
.woocod-form-heading{ font-weight:800; color:#1f2a37; margin:10px 2px 14px; font-size:18px }

/* Phone wrapper - intl-tel-input */
.woocod-opc-plus .iti{
  position:relative; background:#fff; border:1px solid #d8dee6; border-radius:14px;
  padding-inline-start:60px;
}
:root[dir="rtl"] .woocod-opc-plus .iti{ padding-inline-end:60px; padding-inline-start:14px }
.woocod-opc-plus .iti input[type=tel]{ border:0!important; box-shadow:none!important; width:100%!important; padding:12px 14px!important; min-height:48px!important }
.woocod-opc-plus .iti__flag-container,.woocod-opc-plus .iti__selected-flag{
  position:absolute!important; inset-inline-start:10px!important; top:50%!important; transform:translateY(-50%)!important;
  background:#fff; border-inline-end:1px solid #e7eaf0; border-radius:8px; height:28px
}
:root[dir="rtl"] .woocod-opc-plus .iti__flag-container,
:root[dir="rtl"] .woocod-opc-plus .iti__selected-flag{ inset-inline-end:10px!important; inset-inline-start:auto!important; border-inline-start:1px solid #e7eaf0; border-inline-end:0 }
.woocod-opc-plus .iti.invalid{ border-color:#ef4444!important; box-shadow:0 0 0 3px rgba(239,68,68,.18)!important }

/* Quantity deals badge */
.woocod-opc-plus .deal-save{
  /*
   * Use the badge colour if defined, otherwise fall back to the form's
   * primary colour.  This mirrors the behaviour of the default skin and
   * ensures that when merchants don't set a specific badge colour the
   * quantity deal badge harmonises with the product/form colour.  The
   * text colour can be customised via --wqtytxt; if unset, keep white.
   */
  background:var(--wbadge,var(--wpri))!important;
  color:var(--wqtytxt,#fff)!important;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
}

/* CTA */
.woocod-opc-plus .btn-submit,
.woocod-opc-plus button[type=submit]{
  background:var(--wpri)!important; color:#fff!important; border:0!important;
  border-radius:14px!important; padding:16px!important; font-weight:800!important;
}
.woocod-opc-plus .btn-submit.pulse,
.woocod-opc-plus button[type=submit].pulse{ animation:breatheGlow 1.8s ease-in-out infinite!important }
@keyframes breatheGlow{
  0%{ transform:scale(1); box-shadow:0 0 0 currentColor }
  50%{ transform:scale(1.05); box-shadow:0 0 22px currentColor, 0 0 40px currentColor }
  100%{ transform:scale(1); box-shadow:0 0 0 currentColor }
}

/* Mobile sticky CTA */
@media (max-width:740px){
  .woocod-opc-plus{ padding:14px; border-radius:14px }
  .woocod-opc-plus .actions{ position:sticky; bottom:0; z-index:5; padding-top:8px;
    /*
     * For the ultra skin, the mobile actions bar should reflect the primary
     * colour of the product/form.  Replace the fixed white gradient with a
     * solid primary colour via the --wpri variable.  This allows the
     * sticky bar to dynamically change between products (e.g. blue, red).
     */
    background:var(--wpri);
  }
}

/*
 * Sticky CTA button
 * This floating action button appears if configured via the plugin settings.  It stays
 * anchored in the lower-right corner and uses the configured colour.  By default
 * text colour is white.  Use media queries to slightly reduce sizing on smaller screens.
 */
.woocod-sticky-cta{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--wpri,#6c3cf7);
  color:#fff!important;
  padding:14px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:transform .18s ease,box-shadow .18s ease;
}
.woocod-sticky-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.woocod-sticky-cta.pulse{
  animation:breatheGlow 1.8s ease-in-out infinite!important;
}
@media (max-width:740px){
  .woocod-sticky-cta{
    right:14px;
    bottom:70px;
    padding:12px 18px;
    font-size:14px;
  }
}

/* Sticky bar (full-width call to action) */
.woocod-sticky-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9998;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 20px;
  font-weight:800;
  font-size:16px;
  color:#fff;
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease, box-shadow .18s ease;
  /*
   * Default background for the sticky bar falls back to the primary colour.
   * JS will still override this via inline style when configured via the
   * sticky_bar settings, but having this here ensures that if no explicit
   * colour is provided the bar inherits the product colour.
   */
  background:var(--wpri);
}
.woocod-sticky-bar.pulse{
  animation:breatheGlow 1.8s ease-in-out infinite!important;
}
.woocod-bar-icon{
  margin-inline-end:8px;
  font-size:20px;
}
.woocod-bar-text{
  white-space:nowrap;
}
@media (max-width:740px){
  .woocod-sticky-bar{
    padding:12px 16px;
    font-size:14px;
  }
  .woocod-bar-icon{ font-size:18px; }
}

/* WhatsApp floating button */
.woocod-whatsapp-btn{
  position:fixed;
  right:20px;
  bottom:100px;
  width:56px;
  height:56px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  z-index:9999;
  transition:transform .18s ease, box-shadow .18s ease;
}
.woocod-whatsapp-btn.pulse{
  animation:breatheGlow 1.8s ease-in-out infinite!important;
}
.woocod-whatsapp-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
@media (max-width:740px){
  .woocod-whatsapp-btn{
    right:14px;
    bottom:130px;
    width:48px;
    height:48px;
  }
}