:root{
  --sie-primary:#001D47;
  --sie-secondary:#008781;
  --sie-text:#1f2937;
  --sie-muted:#6b7280;
}

/* overlay + gap top/bottom */
.sie-overlay{
  position:fixed;
  top:4vh;
  left:0;
  right:0;
  bottom:4vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.45);
  z-index:99999;
  overflow:auto;
  padding:20px;
}

/* popup wrapper */
.sie-popup-wrapper{
  width:100%;
  max-width:900px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(2,6,23,0.35);
  position:relative;
  overflow:hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* close button */
.sie-close{
  position:absolute;
  right:12px;
  top:12px;
  background:var(--sie-primary);
  color:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  box-shadow:0 6px 18px rgba(0,29,71,0.2);
}

/* TOP section: image + title with background */
.sie-top{
  background: linear-gradient(90deg, rgba(0,29,71,0.05), rgba(0,135,129,0.03));
  padding:18px 22px;
}
.sie-top-inner{
  display:flex;
  gap:16px;
  align-items:center;
}
.sie-top-image{
  width:86px;
  height:86px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  border:1px solid #e6eef0;
  padding:6px;
}
.sie-top-text{flex:1}
.sie-product-title{
  margin:0;
  color:var(--sie-primary);
  font-size:18px;
  font-weight:700;
}
.sie-selected-size-display{
  margin-top:6px;
  color:var(--sie-muted);
  font-size:14px;
}

/* inner content */
.sie-popup-inner{ padding:18px 22px 28px 22px; }

/* size tiles */
.sie-sizes{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sie-size{
  border:1px solid #d1d5db;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  background:#fff;
  transition: background .18s, border-color .18s, color .18s;
  font-weight:600;
}
.sie-size:hover{ border-color:var(--sie-primary); }
.sie-size.sie-size--selected{ background:var(--sie-primary); color:#fff; border-color:var(--sie-primary); }

/* phone input: intl-tel-input single field appearance */
.sie-phone-row{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.sie-phone-full{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-size:14px;
  color:var(--sie-text);
}

/* enforce country flag area max width via intl-tel-input wrapper */
.iti { display: inline-block; }
.iti__flag { box-shadow: none; }
.iti__selected-dial-code { margin-left:4px; }
.iti__container { max-width:100%; }
.sie-phone-full.iti { padding-left: 64px; } /* ensure spacing for flags - adjusted by intlTelInput positioning */

/* inputs */
.sie-input,.sie-textarea{width:100%;box-sizing:border-box;font-size:14px;color:var(--sie-text);padding:10px;border-radius:8px;border:1px solid #e5e7eb}
.sie-label{font-weight:600;margin-top:12px;display:block;color:var(--sie-text)}
.required{color:#d02626}

/* actions */
.sie-actions{ margin-top:16px; display:flex; gap:12px; align-items:center; }
.sie-submit-btn{
  background:var(--sie-secondary);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.sie-spinner {
      width: 48px;
      height: 48px;
      margin-left: 10px;
      border:2px solid #FFF;
      border-radius: 50%;
      position: relative;
      transform:rotate(45deg);
      box-sizing: border-box;
    }
    .sie-spinner::before {
      content: "";
      position: absolute;
      box-sizing: border-box;
      inset:-1px;
      border-radius: 50%;
      border:5px solid #008781;
      animation: prixClipFix 2s infinite linear;
    }

    @keyframes prixClipFix {
        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
    }
      
/*.sie-spinner{*/
/*  width:16px;*/
/*  height:16px;*/
/*  border:2px solid #ffffff;*/
/*  border-top:2px solid rgba(255,255,255,0.4);*/
/*  border-radius:50%;*/
/*  animation:sie-spin 1s linear infinite;*/
/*}*/
/*@keyframes sie-spin{ to { transform:rotate(360deg); } }*/

/* response */
.sie-response{ margin-top:12px; color:var(--sie-primary); font-weight:600; }

/* small screens */
@media (max-width:720px){
  .sie-top-inner{ flex-direction:row; gap:12px; align-items:center; }
  .sie-top-image{ width:64px; height:64px; }
  .sie-popup-wrapper{ max-width: 96%; margin: 0 8px; }
  .sie-close{ width:36px; height:36px; font-size:18px; top:8px; right:8px; }
}