/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:33 Unexpected "("
Line 18:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
Line 21:0 Unexpected "{"
Line 21:1 Expected identifier but found "%"
Line 23:5 Unexpected "="
Line 27:5 Expected identifier but found "%"
... and 170 more hidden warnings

**/
{%- comment -%}
  Shipping Estimator — Inkybox (grouped countries + product toggle)
{%- endcomment -%}

{%- assign user_country = localization.country.iso_code | upcase | default: 'ROW' -%}
{%- assign mf = product.metafields.custom.shipping_etas -%}

<!-- ===================== START: Shipping Estimator ===================== -->
<div class="shipping-estimator" id="ShippingEstimator" hidden>
  <!-- Country picker (inline, left) -->
  <div class="shipping-estimator__picker top left">
    {% render 'change-country-trigger' %}
  </div>

  <div class="shipping-estimator__summary">
    <div class="shipping-estimator__standard">
      <span class="emoji">
        <img
          src="/cdn/shop/files/ChatGPT_Image_Sep_25_2025_08_59_34_PM.png?v=1758810711"
          alt="Shipping" width="20" height="20" style="vertical-align:-0.15em;">
      </span>
      <span>Order today and get it by: </span>

      <b id="eta-standard-range" class="eta-range-trigger"
         tabindex="0" aria-haspopup="dialog" aria-controls="eta-summary-popover">—</b>

      <!-- Popover timeline -->
      <div id="eta-summary-popover" class="eta-popover" role="dialog" aria-hidden="true">
        <div class="eta-popover__inner">

          <!-- Rail + dots -->
          <div class="eta-rail">
            <span class="eta-rail__line"></span>

            <span class="eta-rail__dot eta-rail__dot--start" aria-hidden="true">
              <!-- hand icon (giữ như bạn yêu cầu) -->
              <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M23 17C23 20.31 20.31 23 17 23V21.5C19.5 21.5 21.5 19.5 21.5 17H23M1 7C1 3.69 3.69 1 7 1V2.5C4.5 2.5 2.5 4.5 2.5 7H1M8 4.32L3.41 8.92C.19 12.14 .19 17.37 3.41 20.59S11.86 23.81 15.08 20.59L22.15 13.5C22.64 13.03 22.64 12.24 22.15 11.75C21.66 11.26 20.87 11.26 20.38 11.75L15.96 16.17L15.25 15.46L21.79 8.92C22.28 8.43 22.28 7.64 21.79 7.15S20.5 6.66 20 7.15L14.19 13L13.5 12.27L20.37 5.38C20.86 4.89 20.86 4.1 20.37 3.61S19.09 3.12 18.6 3.61L11.71 10.5L11 9.8L16.5 4.32C17 3.83 17 3.04 16.5 2.55S15.22 2.06 14.73 2.55L7.11 10.17C8.33 11.74 8.22 14 6.78 15.45L6.07 14.74C7.24 13.57 7.24 11.67 6.07 10.5L5.72 10.15L9.79 6.08C10.28 5.59 10.28 4.8 9.79 4.31C9.29 3.83 8.5 3.83 8 4.32Z"/></svg>
            </span>

            <span class="eta-rail__dot eta-rail__dot--mid" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M3,13.5L2.25,12H7.5L6.9,10.5H2L1.25,9H9.05L8.45,7.5H1.11L0.25,6H4A2,2 0 0,1 6,4H18V8H21L24,12V17H22A3,3 0 0,1 19,20A3,3 0 0,1 16,17H12A3,3 0 0,1 9,20A3,3 0 0,1 6,17H4V13.5H3M19,18.5A1.5,1.5 0 0,0 20.5,17A1.5,1.5 0 0,0 19,15.5A1.5,1.5 0 0,0 17.5,17A1.5,1.5 0 0,0 19,18.5M20.5,9.5H18V12H22.46L20.5,9.5M9,18.5A1.5,1.5 0 0,0 10.5,17A1.5,1.5 0 0,0 9,15.5A1.5,1.5 0 0,0 7.5,17A1.5,1.5 0 0,0 9,18.5Z"/></svg>
            </span>

            <span class="eta-rail__dot eta-rail__dot--end" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M9.06,1.93C7.17,1.92 5.33,3.74 6.17,6H3A2,2 0 0,0 1,8V10A1,1 0 0,0 2,11H11V8H13V11H22A1,1 0 0,0 23,10V8A2,2 0 0,0 21,6H17.83C19,2.73 14.6,0.42 12.57,3.24L12,4L11.43,3.22C10.8,2.33 9.93,1.94 9.06,1.93M9,4C9.89,4 10.34,5.08 9.71,5.71C9.08,6.34 8,5.89 8,5A1,1 0 0,1 9,4M15,4C15.89,4 16.34,5.08 15.71,5.71C15.08,6.34 14,5.89 14,5A1,1 0 0,1 15,4M2,12V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V12H13V20H11V12H2Z"/></svg>
            </span>
          </div>

          <!-- 3 cột ngày + nhãn -->
          <div class="eta-grid">
            <div class="eta-col eta-col--start">
              <div class="eta-date" id="eta-order-date-pop">—</div>
              <div class="eta-label">Order placed</div>
            </div>
            <div class="eta-col eta-col--mid">
              <div class="eta-date" id="eta-ship-range-pop">—</div>
              <div class="eta-label">Order ship</div>
            </div>
            <div class="eta-col eta-col--end">
              <div class="eta-date" id="eta-delivered-range-pop">—</div>
              <div class="eta-label delivered">Delivered!</div>
            </div>
          </div>

          <ul class="eta-notes">
            <li>Orders can be cancelled or modified within <b>2 hours</b> after being placed.</li>
            <li>The above time frame is applied with <b>standard shipping</b> methods.</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Expedited (outside popover) -->
    <div class="shipping-estimator__expedited" id="eta-expedited-wrap" hidden>
      <span>Or faster delivery with <b>Expedited Shipping</b> — <b id="eta-expedited-range"></b></span>
    </div>
  </div>
</div>
<!-- ====================== END: Shipping Estimator ====================== -->

{%- comment -%} ==== LIQUID: resolve record (supports grouped countries) ==== {%- endcomment -%}
{%- assign found = nil -%}
{%- assign _user = user_country | upcase -%}
{%- assign _needle = ',' | append: _user | append: ',' -%}

{%- assign try_block = mf.value | default: blank -%}
{%- assign via = 'value' -%}
{%- if try_block == blank and mf and mf.references != blank -%}
  {%- assign try_block = mf.references -%}
  {%- assign via = 'refs' -%}
{%- endif -%}

{%- if try_block != blank -%}
  {%- for e in try_block -%}
    {%- assign rec = e -%}
    {%- if via == 'refs' -%}{%- assign rec = e.value | default: e -%}{%- endif -%}
    {%- assign cc_single = rec.country_code | default: rec.fields.country_code | upcase | replace: ' ', '' -%}
    {%- if cc_single and cc_single != blank and cc_single.size == 2 and cc_single == _user -%}
      {%- assign found = rec -%}{%- break -%}
    {%- endif -%}
  {%- endfor -%}

  {%- unless found -%}
    {%- for e in try_block -%}
      {%- assign rec = e -%}
      {%- if via == 'refs' -%}{%- assign rec = e.value | default: e -%}{%- endif -%}
      {%- assign list = rec.country_codes | default: rec.fields.country_codes -%}
      {%- assign haystack = '' -%}
      {%- if list != blank -%}
        {%- assign haystack = list | join: ',' | upcase | replace: ' ', '' -%}
      {%- else -%}
        {%- assign cc_csv = rec.country_code | default: rec.fields.country_code | upcase | replace: ' ', '' -%}
        {%- assign haystack = cc_csv -%}
      {%- endif -%}
      {%- if haystack != blank -%}
        {%- assign hay = ',' | append: haystack | append: ',' -%}
        {%- if hay contains _needle -%}
          {%- assign found = rec -%}{%- break -%}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endunless -%}

  {%- unless found -%}
    {%- for e in try_block -%}
      {%- assign rec = e -%}
      {%- if via == 'refs' -%}{%- assign rec = e.value | default: e -%}{%- endif -%}
      {%- assign list = rec.country_codes | default: rec.fields.country_codes -%}
      {%- assign cc_single = rec.country_code | default: rec.fields.country_code | upcase | replace: ' ', '' -%}
      {%- assign ok = false -%}
      {%- if list != blank -%}
        {%- assign haystack = list | join: ',' | upcase | replace: ' ', '' -%}
        {%- assign hay = ',' | append: haystack | append: ',' -%}
        {%- if hay contains ',ROW,' -%}{%- assign ok = true -%}{%- endif -%}
      {%- elsif cc_single == 'ROW' -%}
        {%- assign ok = true -%}
      {%- endif -%}
      {%- if ok -%}{%- assign found = rec -%}{%- break -%}{%- endif -%}
    {%- endfor -%}
  {%- endunless -%}
{%- endif -%}

{%- comment -%} ==== LIQUID: assign fields & product toggle ==== {%- endcomment -%}
{%- if found -%}
  {%- assign std_min = found.standard_min_days  | default: found.fields.standard_min_days -%}
  {%- assign std_max = found.standard_max_days  | default: found.fields.standard_max_days -%}
  {%- assign exp_min = found.expedited_min_days | default: found.fields.expedited_min_days | default: found.expedited_min | default: found.fields.expedited_min -%}
  {%- assign exp_max = found.expedited_max_days | default: found.fields.expedited_max_days | default: found.expedited_max | default: found.fields.expedited_max -%}
  {%- assign exp_override = product.metafields.custom.has_expedited_override.value -%}

  <!-- Data attributes đặt NGOÀI khối estimator để không phá DOM -->
  <span id="eta-data"
        data-std-min="{{ std_min }}"
        data-std-max="{{ std_max }}"
        data-exp-min="{{ exp_min }}"
        data-exp-max="{{ exp_max }}"
        data-exp-override="{{ exp_override }}"
        hidden></span>

  <script>
  (function(){
    const root = document.getElementById('ShippingEstimator');
    if (!root) return;
    if (root.dataset.etaInited) return;
    root.dataset.etaInited = '1';

    // Helpers
    const dataEl = document.getElementById('eta-data');
    const getAttr = k => dataEl?.dataset?.[k] ?? '';
    const toNum = (v) => { if (v==null) return NaN; const s=String(v).trim(); if(!s) return NaN; const n=Number(s); return Number.isFinite(n)?n:NaN; };
    const toBool = (v) => { if (v===true||v===false) return v; const s=String(v).trim().toLowerCase(); return s==='true'||s==='1'||s==='yes'; };
    const clone = d => new Date(d.getFullYear(), d.getMonth(), d.getDate());
    const isWeekend = d => d.getDay()===0 || d.getDay()===6;
    const addBusinessDays = (date, days) => { if(!Number.isFinite(days)||days<0) return clone(date); let d=clone(date),a=0; while(a<days){ d.setDate(d.getDate()+1); if(!isWeekend(d)) a++; } return d; };
    const htmlLang = document.documentElement?.lang || '';
    const shopLocale = htmlLang.replace('_', '-') || 'en-US';
    const dfMonthDay = new Intl.DateTimeFormat(shopLocale, { month: 'short', day: '2-digit' });
    const fmt = (d) => dfMonthDay.format(d);

    // Inputs
    const PROCESS_MIN = 1, PROCESS_MAX = 2;
    const STD_MIN = toNum(getAttr('stdMin'));
    const STD_MAX = toNum(getAttr('stdMax'));
    const EXP_MIN = toNum(getAttr('expMin'));
    const EXP_MAX = toNum(getAttr('expMax'));
    const OVERRIDE = toBool(getAttr('expOverride'));

    const COUNTRY_HAS_EXPEDITED = Number.isFinite(EXP_MIN) && Number.isFinite(EXP_MAX);
    const SHOW_EXPEDITED = OVERRIDE && COUNTRY_HAS_EXPEDITED;

    // Dates
    const today   = clone(new Date());
    const shipMin = addBusinessDays(today, PROCESS_MIN);
    const shipMax = addBusinessDays(today, PROCESS_MAX);
    const delMin  = addBusinessDays(today, STD_MIN);
    const delMax  = addBusinessDays(today, STD_MAX);

    const stdRangeText  = (STD_MIN === STD_MAX) ? fmt(delMin) : `${fmt(delMin)} – ${fmt(delMax)}`;
    const shipRangeText = (PROCESS_MIN === PROCESS_MAX) ? fmt(shipMin) : `${fmt(shipMin)} – ${fmt(shipMax)}`;

    // Fill UI
    const elStd   = document.getElementById('eta-standard-range');
    const elOrder = document.getElementById('eta-order-date-pop');
    const elShip  = document.getElementById('eta-ship-range-pop');
    const elDeliv = document.getElementById('eta-delivered-range-pop');
    if (elStd)   elStd.textContent   = stdRangeText;
    if (elOrder) elOrder.textContent = fmt(today);
    if (elShip)  elShip.textContent  = shipRangeText;
    if (elDeliv) elDeliv.textContent = stdRangeText;

    // Expedited
    const expeditedWrap  = document.getElementById('eta-expedited-wrap');
    const expeditedRange = document.getElementById('eta-expedited-range');
    if (expeditedWrap) {
      if (SHOW_EXPEDITED) {
        const expMinDate = addBusinessDays(today, EXP_MIN);
        const expMaxDate = addBusinessDays(today, EXP_MAX);
        if (expeditedRange) {
          expeditedRange.textContent =
            (EXP_MIN === EXP_MAX) ? fmt(expMinDate) : `${fmt(expMinDate)} – ${fmt(expMaxDate)}`;
        }
        expeditedWrap.hidden = false;
      } else {
        expeditedWrap.hidden = true;
      }
    }

    // Popover UX
    const trigger = document.getElementById('eta-standard-range');
    const pop     = document.getElementById('eta-summary-popover');
    const open  = () => { if (pop){ pop.classList.add('show'); pop.setAttribute('aria-hidden','false'); } };
    const close = () => { if (pop){ pop.classList.remove('show'); pop.setAttribute('aria-hidden','true'); } };

    if (trigger) {
      trigger.addEventListener('mouseenter', open);
      trigger.addEventListener('mouseleave', close);
      if (pop){
        pop.addEventListener('mouseenter', open);
        pop.addEventListener('mouseleave', close);
      }
      trigger.addEventListener('focus', open);
      trigger.addEventListener('blur', close);
      trigger.addEventListener('keydown', e => { if (e.key === 'Escape') { close(); trigger.blur(); }});
      trigger.addEventListener('click', e => { if (pop){ pop.classList.toggle('show'); } e.stopPropagation(); });
      document.addEventListener('click', () => { if (pop){ pop.classList.remove('show'); } }, { passive:true });
    }

    root.hidden = false;
  })();
  </script>

{%- else -%}
  <script>
  (function(){
    const root = document.getElementById('ShippingEstimator');
    if(!root) return;
    if (root.dataset.etaInited) return;
    root.dataset.etaInited = '1';
    root.hidden = false;
    const wrap = root.querySelector('.shipping-estimator__summary');
    if (wrap) wrap.innerHTML =
      '<div class="shipping-estimator__empty">Shipping estimate not configured for this product.</div>';
  })();
  </script>
{%- endif -%}

<style>
/* Container gọn, KHÔNG bọc phần khác */
.shipping-estimator{ margin:12px 0; }
.shipping-estimator__picker.top{ display:flex; justify-content:flex-start; margin-bottom:.5rem; }
.shipping-estimator__summary{ display:flex; flex-direction:column; gap:.35rem; }
.shipping-estimator__standard{ position:relative; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.shipping-estimator__standard .emoji{ margin-right:.1rem; }

.eta-range-trigger{ cursor:help; text-decoration:underline dotted; text-underline-offset:2px; }
.eta-range-trigger:focus{ outline:2px solid #4f46e5; outline-offset:2px; }

/* Popover bọc trong standard (pos:relative) nên không tràn DOM */
.eta-popover{ position:absolute; left:0; top:calc(100% + 6px); width:min(760px,45vw);
  background: rgb(var(--color-background, 255 255 255));
  border:1px solid rgba(var(--color-foreground, 17 17 17), .12);
  border-radius:16px; padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.24);
  display:none; z-index:10; }
.eta-popover.show{ display:block; }
.eta-popover__inner{ padding:6px; }
@media(max-width:768px){ .eta-popover{ width:min(760px,97vw); } }

/* Rail */
.eta-rail{ position:relative; height:40px; margin: 0 20px 10px; }
.eta-rail__line{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:2px;
  background: rgba(var(--color-foreground, 17 17 17), .85); }
.eta-rail__dot{ position:absolute; top:50%; transform:translate(-50%, -50%);
  background: rgb(243 244 246); border-radius:999px; padding:6px 5px 0 6px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.eta-rail__dot--start{ left:0%; } .eta-rail__dot--mid{ left:50%; } .eta-rail__dot--end{ left:100%; }

/* Grid 3 cột */
.eta-grid{ display:flex; justify-content:space-between; gap:12px; width:100%; }
.eta-col{ flex:1 1 0; display:flex; flex-direction:column; align-items:flex-start; }
.eta-col--mid{ align-items:center; text-align:center; }
.eta-col--end{ align-items:flex-end; text-align:right; }

/* Typography sync theme */
.shipping-estimator,
.shipping-estimator__summary,
.shipping-estimator__standard,
.shipping-estimator__expedited,
.eta-popover,
.eta-date, .eta-label, .eta-notes li{
  font-size:16px; line-height:1.35;
  color: rgb(var(--color-foreground, 17 17 17));
}

.eta-date{ font-weight:600; }
.eta-label{
  margin-top:6px; font-size:14px;
  color: rgb(var(--color-foreground, 17 17 17));
  border-bottom:1px dashed currentColor; display:inline-block; opacity:.9;
}
.eta-label.delivered{ font-weight:600; }

.eta-notes{ margin-top:12px; padding-left:18px; font-size:15px; line-height:1.5; }

/* Expedited line */
.shipping-estimator__expedited b{ color: rgb(var(--color-link, 26 115 232)); }
</style>
