/* Free-listing extras: locked Call/WhatsApp, claim link + popup, lavender carousel arrows.
   Everything here is scoped to FREE cards / the Free section only. */

/* --- Lavender arrows: Free carousel only (.stm-basic-box) --- */
.stm-basic-box .stm-carousel-arrow{width:44px;height:44px;background:#ecdcff;color:#6a1db0;border:none;font-size:22px;}
.stm-basic-box .stm-carousel-arrow:hover,.stm-basic-box .stm-carousel-arrow:focus,.stm-basic-box .stm-carousel-arrow:active{background:#e0c8fb !important;border:none !important;color:#5a1699 !important;}

/* --- Locked buttons --- */
.stm-free-extras{margin-top:auto;padding-top:10px;}
/* Cards with locked buttons: buttons always sit at the bottom, so every card lines up even when details differ */
.stm-basic-box .stm-carousel-track > .stm-shop-card,.stm-shop-card:has(> .stm-free-extras){display:flex;flex-direction:column;}
.stm-lock-row{display:flex;gap:8px;}
.stm-lock-cell{position:relative;flex:1;min-width:0;}
.stm-lock-btn{width:100%;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:0 6px;border:1px dashed #b9a4d6;background:#efeaf6;color:#6a5f7d;border-radius:12px;font-size:13px !important;font-weight:600 !important;line-height:1 !important;letter-spacing:0 !important;text-transform:none !important;cursor:pointer;font-family:inherit;}
.stm-lock-btn span{font-size:13px !important;font-weight:600 !important;line-height:1 !important;}
.stm-lock-btn:hover,.stm-lock-btn:focus{background:#e8e0f3;color:#5b5368;outline:none;}
.stm-lock-btn:focus-visible{box-shadow:0 0 0 2px rgba(168,49,253,0.35);}
.stm-lock-btn svg{flex-shrink:0;}
.stm-lock-bubble{position:absolute;bottom:calc(100% + 10px);width:max-content;max-width:176px;box-sizing:border-box;background:#5b5368;color:#fff;border-radius:10px;padding:8px 12px;font-size:12.5px !important;line-height:1.35 !important;font-weight:500 !important;letter-spacing:0 !important;text-align:left;z-index:5;box-shadow:0 6px 16px rgba(29,21,39,0.22);}
.stm-lock-bubble[hidden]{display:none;}
.stm-lock-cell-call .stm-lock-bubble{left:0;}
.stm-lock-cell-wa .stm-lock-bubble{right:0;}
.stm-lock-bubble:after{content:"";position:absolute;top:100%;border:6px solid transparent;border-top-color:#5b5368;}
.stm-lock-cell-call .stm-lock-bubble:after{left:22px;}
.stm-lock-cell-wa .stm-lock-bubble:after{right:22px;}

/* --- Claim line --- */
.stm-claim-line{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:#6a5f7d;text-align:center;}
.stm-claim-line a{color:#7a14c8;font-weight:600;text-decoration:none;}
.stm-claim-line a:hover{text-decoration:underline;color:#5a0e96;}

/* --- Popup --- */
.stm-claim-overlay{position:fixed;inset:0;background:rgba(29,21,39,0.62);z-index:999999;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 14px;box-sizing:border-box;}
.stm-claim-overlay[hidden]{display:none;}
.stm-claim-dialog{position:relative;width:100%;max-width:460px;margin:auto;box-sizing:border-box;background:#fff;border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px rgba(29,21,39,0.35);color:#1d1527;font-family:inherit;}
.stm-claim-dialog *{box-sizing:border-box;}
.stm-claim-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.stm-claim-head-l{display:flex;align-items:center;gap:12px;}
.stm-claim-ico{width:44px;height:44px;border-radius:50%;background:#ecdcff;color:#7a14c8;display:flex;align-items:center;justify-content:center;flex:none;}
.stm-claim-dialog h3{margin:0;font-size:19px;font-weight:600;color:#1d1527;}
.stm-claim-x{width:44px;height:44px;margin:-6px -8px 0 0;border:none;background:transparent;color:#4e4560;font-size:24px;line-height:1;cursor:pointer;}
.stm-claim-dialog p{margin:0;font-size:14px;line-height:1.6;color:#4e4560;}
.stm-claim-dialog p strong{color:#1d1527;}
.stm-claim-fields{display:flex;flex-direction:column;gap:14px;}
.stm-claim-field{display:flex;flex-direction:column;gap:6px;}
.stm-claim-field label{font-size:13px;font-weight:500;color:#4e4560;}
.stm-claim-field input,.stm-claim-field textarea{width:100%;min-height:46px;border:1px solid #cdb6f0;border-radius:10px;padding:0 14px;font-size:14px;background:#fff;color:#1d1527;font-family:inherit;}
.stm-claim-field textarea{min-height:96px;padding:12px 14px;line-height:1.5;resize:none;}
.stm-claim-field input:focus,.stm-claim-field textarea:focus{outline:none;border-color:#8a1fe0;box-shadow:0 0 0 3px rgba(138,31,224,0.15);}
.stm-claim-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;overflow:hidden !important;}
.stm-claim-submit,.stm-claim-done-btn{min-height:50px;width:100%;border:none;border-radius:12px;background:#8a1fe0;color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;}
.stm-claim-submit:hover,.stm-claim-done-btn:hover{background:#7a14c8;}
.stm-claim-submit[disabled]{opacity:.65;cursor:wait;}
.stm-claim-error{color:#b3261e;font-size:13px;line-height:1.4;min-height:0;}
.stm-claim-note{text-align:center;font-size:12.5px !important;color:#6a5f7d !important;}

/* success */
.stm-claim-done{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:12px 0 4px;}
.stm-tick-wrap{position:relative;width:150px;height:150px;flex:none;}
.stm-tick-wrap > *{position:absolute;}
.stm-tick-h1{left:15px;top:15px;width:120px;height:120px;border-radius:50%;background:#e8f8ee;}
.stm-tick-h2{left:27px;top:27px;width:96px;height:96px;border-radius:50%;background:#c4ebd2;}
.stm-tick-core{left:41px;top:41px;width:68px;height:68px;border-radius:50%;background:#0b8a4a;color:#fff;display:flex;align-items:center;justify-content:center;}
.stm-cf{left:71px;top:71px;transform:translate(var(--dx),var(--dy)) rotate(var(--r));}
.stm-spark{display:block;}
.stm-tick-ring{left:27px;top:27px;width:96px;height:96px;border-radius:50%;border:2px solid #0b8a4a;opacity:0;}
.stm-tick-path{stroke-dasharray:1;stroke-dashoffset:0;}
.stm-claim-next{width:100%;background:#f6f0ff;border:1px solid #d9c4fb;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;text-align:left;}
.stm-claim-next h4{margin:0;font-size:14px;font-weight:600;color:#1d1527;}
.stm-claim-step{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#4e4560;}
.stm-claim-step b{flex:none;width:24px;height:24px;border-radius:50%;background:#ecdcff;color:#7a14c8;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
@media (prefers-reduced-motion:no-preference){
  .stm-tick-h1{animation:stm-halo .5s .05s cubic-bezier(.2,1.3,.4,1) both;}
  .stm-tick-h2{animation:stm-halo .5s .12s cubic-bezier(.2,1.3,.4,1) both;}
  .stm-tick-core{animation:stm-tick-pop .5s .15s cubic-bezier(.2,1.4,.4,1) both;}
  .stm-tick-path{animation:stm-tick-draw .45s .5s ease-out both;}
  .stm-tick-ring{animation:stm-ring 2.2s 0.8s ease-out infinite;}
  .stm-cf{opacity:0;animation:stm-burst .85s cubic-bezier(.15,.8,.3,1) forwards;}
  .stm-spark{animation:stm-twinkle 1.6s ease-in-out infinite;}
  @keyframes stm-halo{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes stm-tick-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes stm-tick-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes stm-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
  @keyframes stm-burst{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:1}}
  @keyframes stm-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.2) rotate(20deg);opacity:1}}
}
@media (max-width:480px){.stm-claim-dialog{padding:22px 18px;}}

/* WhatsApp label is longer than "Call": give it more room and keep text on one line, esp. on phones */
.stm-lock-cell-call{flex:0.8;}
.stm-lock-cell-wa{flex:1.2;}
.stm-lock-btn{white-space:nowrap;overflow:hidden;}
@media (max-width:480px){
  .stm-lock-btn,.stm-lock-btn span{font-size:12px !important;}
  .stm-lock-btn{gap:4px;padding:0 4px;}
  .stm-lock-btn svg{width:12px;height:12px;}
}