{"id":1918,"date":"2025-10-16T17:37:49","date_gmt":"2025-10-16T17:37:49","guid":{"rendered":"https:\/\/byzzenzz.com\/?page_id=1918"},"modified":"2025-10-16T19:06:29","modified_gmt":"2025-10-16T19:06:29","slug":"tiers","status":"publish","type":"page","link":"https:\/\/byzzenzz.com\/index.php\/tiers\/","title":{"rendered":"Tiers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1918\" class=\"elementor elementor-1918\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-674368a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"674368a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d84da8c\" data-id=\"d84da8c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dedfa01 elementor-widget elementor-widget-html\" data-id=\"dedfa01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    \n    footer {\n    text-align: center;\n    padding: 30px;\n    background: #0d6efd;\n    color: white;\n    font-size: 0.9rem;\n    bottom: -150px !important;\n}\n\n.tier {\n    background: rgb(0 0 0) !important;\n    border-color: rgba(52, 211, 153, .35);\n    color: #d6ffef !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2c9f268 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2c9f268\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-741fffd\" data-id=\"741fffd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e8e976c elementor-widget elementor-widget-html\" data-id=\"e8e976c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- BYZ Shipping Price Calculator \u2022 Shadow DOM (isolated) -->\r\n<script>\r\n(() => {\r\n  const tpl = document.createElement('template');\r\n  tpl.innerHTML = `\r\n    <style>\r\n      :host{all:initial}\r\n      *,*::before,*::after{box-sizing:border-box}\r\n      :host{font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; display:block}\r\n      .wrap{width:min(980px,100%); margin:0 auto; padding:24px}\r\n      .card{\r\n        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));\r\n        border:1px solid rgba(255,255,255,.06);\r\n        border-radius:20px;\r\n        box-shadow: 0 15px 40px rgba(0,0,0,.35);\r\n        overflow:hidden;\r\n        color:#e5e7eb;\r\n        background-color:#0f172a;\r\n      }\r\n      .header{\r\n        padding:20px 22px;\r\n        background:\r\n          radial-gradient(600px 180px at 10% 10%, rgba(34,211,238,.15), transparent 60%),\r\n          radial-gradient(600px 180px at 90% -10%, rgba(52,211,153,.15), transparent 60%),\r\n          #0b1220;\r\n        border-bottom:1px solid rgba(255,255,255,.06);\r\n      }\r\n      h1{margin:0; font-weight:800; letter-spacing:.2px; font-size:1.25rem;}\r\n      .sub{color:#94a3b8; font-size:.92rem; margin-top:4px}\r\n      .content{padding:22px}\r\n      .grid{display:grid; gap:16px; grid-template-columns: repeat(12, 1fr);}\r\n      .col-3{grid-column: span 3}\r\n      .col-6{grid-column: span 6}\r\n      .col-12{grid-column: span 12}\r\n      @media (max-width:900px){ .col-3,.col-6{grid-column: span 12} }\r\n      label{display:block; font-weight:600; margin:0 0 8px;}\r\n      .hint{font-weight:500; color:#94a3b8; font-size:.85rem}\r\n      .field{\r\n        display:flex; align-items:center; gap:10px;\r\n        background:#0a1223; border:1px solid rgba(255,255,255,.08);\r\n        padding:10px 12px; border-radius:14px;\r\n        transition: border .2s ease, box-shadow .2s ease;\r\n      }\r\n      .field:focus-within{border-color:rgba(34,211,238,.5); box-shadow:0 0 0 4px rgba(34,211,238,.25)}\r\n      .unit{\r\n        padding:.35rem .6rem; border-radius:10px;\r\n        background:rgba(255,255,255,.06); color:#94a3b8;\r\n        font-size:.9rem; white-space:nowrap;\r\n      }\r\n      input[type=\"number\"]{\r\n        width:100%; background:transparent; border:0; outline:0; color:#7b7f87;\r\n        font-size:1rem; padding:.4rem 0; appearance:textfield;\r\n      }\r\n      input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }\r\n      .pill{\r\n        display:inline-flex; align-items:center; gap:.5rem;\r\n        padding:.4rem .7rem; font-weight:700; border-radius:999px;\r\n        background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.35);\r\n        color:#bff6ff; letter-spacing:.2px; font-size:.9rem;\r\n      }\r\n      .results{display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); margin-top:8px;}\r\n      .res-card{\r\n        grid-column: span 6;\r\n        background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));\r\n        border:1px solid rgba(255,255,255,.06);\r\n        border-radius:16px; padding:16px;\r\n      }\r\n      .res-card h3{margin:0 0 8px; font-size:1rem}\r\n      .kv{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08)}\r\n      .kv:last-child{border-bottom:0}\r\n      .big{font-size:1.4rem; font-weight:800; letter-spacing:.2px;}\r\n      .badge{\r\n        display:inline-block; font-weight:800; padding:.25rem .55rem; border-radius:999px;\r\n        border:1px solid rgba(255,255,255,.18); font-size:.8rem; color:#d1d7e0;\r\n      }\r\n      .tier{background:rgba(0,0,0); border-color:rgba(52,211,153,.35); color:#d6ffef}\r\n      .price{background:#03A9F4; border-color:rgba(34,197,94,.35); color:#d6ffe0}\r\n      .ghost{opacity:.65}\r\n      .hr{height:1px; background:rgba(255,255,255,.06); margin:8px 0 12px}\r\n      .footer{display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid rgba(255,255,255,.06)}\r\n      .btn{\r\n        border:1px solid rgba(255,255,255,.12);\r\n        background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));\r\n        color:#e5e7eb; padding:.7rem 1rem; border-radius:12px; font-weight:700;\r\n        cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, border .2s ease;\r\n      }\r\n      .btn:hover{box-shadow:0 10px 20px rgba(0,0,0,.25); border-color:rgba(255,255,255,.25)}\r\n      .btn:active{transform:translateY(1px)}\r\n      .btn-primary{\r\n        background:linear-gradient(180deg, rgba(34,211,238,.25), rgba(34,211,238,.12));\r\n        border-color: rgba(34,211,238,.45); color:#061d22;\r\n      }\r\n      \/* Light mode support if host page is light \u2014 stays pretty *\/\r\n      @media (prefers-color-scheme: light){\r\n        .card{color:#0f172a; background-color:#ffffff; border-color:rgba(0,0,0,.06)}\r\n        .header{border-bottom-color:rgba(0,0,0,.06)}\r\n        .field{background:#f8fafc; border-color:rgba(0,0,0,.06)}\r\n        .sub,.hint{color:#4b5563}\r\n        .kv{border-bottom-color:rgba(0,0,0,.08)}\r\n        .btn{color:#0f172a; border-color:rgba(0,0,0,.12)}\r\n      }\r\n    <\/style>\r\n\r\n    <div class=\"wrap\">\r\n      <div class=\"card\">\r\n        <div class=\"header\">\r\n          <h1 style=\"color:#fff !important\">Shipping Price Calculator<\/h1>\r\n          <div class=\"sub\">Enter dimensions in <b>cm<\/b> and weight in <b>kg<\/b>. We\u2019ll use the larger of\r\n            <span class=\"pill\">Actual vs Volumetric (L\u00d7W\u00d7H \u00f7 3000)<\/span>.\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"content\">\r\n          <form id=\"calc\" novalidate>\r\n            <div class=\"grid\">\r\n              <div class=\"col-3\">\r\n                <label for=\"length\">Length <span class=\"hint\">(cm)<\/span><\/label>\r\n                <div class=\"field\"><input id=\"length\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g., 30\" required><span class=\"unit\">cm<\/span><\/div>\r\n              <\/div>\r\n              <div class=\"col-3\">\r\n                <label for=\"width\">Width <span class=\"hint\">(cm)<\/span><\/label>\r\n                <div class=\"field\"><input id=\"width\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g., 20\" required><span class=\"unit\">cm<\/span><\/div>\r\n              <\/div>\r\n              <div class=\"col-3\">\r\n                <label for=\"height\">Height <span class=\"hint\">(cm)<\/span><\/label>\r\n                <div class=\"field\"><input id=\"height\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g., 15\" required><span class=\"unit\">cm<\/span><\/div>\r\n              <\/div>\r\n              <div class=\"col-3\">\r\n                <label for=\"weight\">Actual Weight <span class=\"hint\">(kg)<\/span><\/label>\r\n                <div class=\"field\"><input id=\"weight\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g., 1.2\" required><span class=\"unit\">kg<\/span><\/div>\r\n              <\/div>\r\n\r\n              <div class=\"col-12\">\r\n                <div class=\"results\">\r\n                  <div class=\"res-card\">\r\n                    <h3>Weights<\/h3>\r\n                    <div class=\"kv\"><span class=\"hint\">Volumetric (L\u00d7W\u00d7H \u00f7 3000)<\/span><span class=\"big\" id=\"volW\">0.00 kg<\/span><\/div>\r\n                    <div class=\"kv\"><span class=\"hint\">Actual<\/span><span class=\"big\" id=\"actW\">0.00 kg<\/span><\/div>\r\n                    <div class=\"hr\"><\/div>\r\n                    <div class=\"kv\"><span class=\"hint\">Billable Weight<\/span><span class=\"big badge tier\" id=\"billW\">0.00 kg<\/span><\/div>\r\n                  <\/div>\r\n\r\n                  <div class=\"res-card\">\r\n                    <h3>Pricing<\/h3>\r\n                    <div class=\"kv\"><span class=\"hint\">Tier<\/span><span class=\"badge tier\" id=\"tierLabel\">\u2014<\/span><\/div>\r\n                    <div class=\"kv\"><span class=\"hint\">Price<\/span><span class=\"big badge price\" id=\"price\">\u2014 MAD<\/span><\/div>\r\n                    <div class=\"kv\"><span class=\"hint\">Status<\/span><span class=\"badge\" id=\"status\">Enter values<\/span><\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"col-12\" style=\"margin-top:6px\">\r\n                <div class=\"hint\">\r\n                  Tiers: \u22640.5kg \u2192 200 MAD \u00b7 &gt;0.5\u2013&lt;2kg \u2192 300 MAD \u00b7 \u22652\u2013&lt;5kg \u2192 400 MAD \u00b7 \u22655\u2013&lt;10kg \u2192 450 MAD \u00b7 \u226510\u2013&lt;30kg \u2192 500 MAD\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/form>\r\n        <\/div>\r\n\r\n        <div class=\"footer\">\r\n          <button class=\"btn\" type=\"button\" id=\"resetBtn\">Reset<\/button>\r\n          <button class=\"btn btn-primary\" type=\"button\" id=\"calcBtn\">Calculate<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  `;\r\n\r\n  class ByzShippingCalc extends HTMLElement {\r\n    constructor(){\r\n      super();\r\n      const root = this.attachShadow({mode:'open'});\r\n      root.appendChild(tpl.content.cloneNode(true));\r\n      this.$ = id => root.getElementById(id);\r\n      this._wire();\r\n    }\r\n    _wire(){\r\n      const $ = this.$;\r\n      const inputs = ['length','width','height','weight'].map($);\r\n      const volWEl = $('volW'), actWEl = $('actW'), billWEl = $('billW');\r\n      const tierEl = $('tierLabel'), priceEl = $('price'), statusEl = $('status');\r\n\r\n      const fmt = (n)=> (isFinite(n) ? Number(n).toFixed(2) : '0.00');\r\n\r\n      const compute = () => {\r\n        const L = parseFloat($('length').value);\r\n        const W = parseFloat($('width').value);\r\n        const H = parseFloat($('height').value);\r\n        const A = parseFloat($('weight').value);\r\n\r\n        const valid = [L,W,H,A].every(v => typeof v === 'number' && !isNaN(v) && v >= 0);\r\n        if(!valid){\r\n          statusEl.textContent = 'Enter valid numbers';\r\n          statusEl.classList.add('ghost');\r\n          volWEl.textContent = '0.00 kg';\r\n          actWEl.textContent = '0.00 kg';\r\n          billWEl.textContent = '0.00 kg';\r\n          tierEl.textContent = '\u2014';\r\n          priceEl.textContent = '\u2014 MAD';\r\n          return;\r\n        }\r\n\r\n        const vol = (L * W * H) \/ 3000;\r\n        const act = A;\r\n        const billable = Math.max(vol, act);\r\n\r\n        volWEl.textContent  = fmt(vol) + ' kg';\r\n        actWEl.textContent  = fmt(act) + ' kg';\r\n        billWEl.textContent = fmt(billable) + ' kg';\r\n\r\n        let tier = '', price = null;\r\n        if (billable <= 0.5) {\r\n          tier = '\u2264 0.5 kg'; price = 200;\r\n        } else if (billable > 0.5 && billable < 2) {\r\n          tier = '> 0.5 kg and < 2 kg'; price = 300;\r\n        } else if (billable >= 2 && billable < 5) {\r\n          tier = '\u2265 2 kg and < 5 kg'; price = 400;\r\n        } else if (billable >= 5 && billable < 10) {\r\n          tier = '\u2265 5 kg and < 10 kg'; price = 450;\r\n        } else if (billable >= 10 && billable < 30) {\r\n          tier = '\u2265 10 kg and < 30 kg'; price = 500;\r\n        } else {\r\n          tier = '\u2265 30 kg (contact us)'; price = null;\r\n        }\r\n\r\n        tierEl.textContent = tier;\r\n        if (price === null){\r\n          priceEl.textContent = '\u2014 (contact us)';\r\n          statusEl.textContent = 'Out of listed range';\r\n          statusEl.classList.remove('ghost');\r\n        } else {\r\n          priceEl.textContent = price.toFixed(0) + ' MAD';\r\n          statusEl.textContent = 'OK';\r\n          statusEl.classList.remove('ghost');\r\n        }\r\n      };\r\n\r\n      inputs.forEach(i => i.addEventListener('input', compute));\r\n      $('calcBtn').addEventListener('click', compute);\r\n      $('resetBtn').addEventListener('click', ()=>{\r\n        ['length','width','height','weight'].forEach(id => $(id).value = '');\r\n        ['volW','actW','billW'].forEach(id => $(id).textContent = '0.00 kg');\r\n        $('tierLabel').textContent = '\u2014';\r\n        $('price').textContent = '\u2014 MAD';\r\n        $('status').textContent = 'Enter values';\r\n        $('status').classList.add('ghost');\r\n      });\r\n\r\n      compute();\r\n    }\r\n  }\r\n\r\n  customElements.define('byz-shipping-calc', ByzShippingCalc);\r\n})();\r\n<\/script>\r\n\r\n<!-- Place this tag wherever you want the calculator to appear -->\r\n<byz-shipping-calc><\/byz-shipping-calc>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1918","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/pages\/1918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/comments?post=1918"}],"version-history":[{"count":25,"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/pages\/1918\/revisions"}],"predecessor-version":[{"id":1944,"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/pages\/1918\/revisions\/1944"}],"wp:attachment":[{"href":"https:\/\/byzzenzz.com\/index.php\/wp-json\/wp\/v2\/media?parent=1918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}