/* "Flat" theme — loaded only when that theme is active (see layouts/app.blade.php).
   Plain class names only, so nothing here needs Tailwind-style escaping. */

body.flat{background:#FFFFFF;color:#1A1F3D;font-family:'Changa','Readex Pro','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;font-size:16px;line-height:1.5}
body.flat a{color:inherit}
body.flat :focus-visible{outline:3px solid #1E5FD9;outline-offset:3px}
html{scroll-behavior:smooth}

.flat-display{font-family:'Changa','Arial Narrow',sans-serif;text-transform:uppercase}
.flat-wrap{max-width:1200px;margin:0 auto;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
.flat-shell{width:100%}
.flat-narrow{width:100%;max-width:430px;margin:0 auto;padding-top:12px}
@media (min-width:768px){.flat-narrow{max-width:72rem;padding-left:.75rem;padding-right:.75rem}}

/* ---------- header ---------- */
.flat-strip{height:10px;background:#D93C20}
.flat-head{background:#FFFFFF}
.flat-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding-top:14px;padding-bottom:14px}
.flat-logo{display:flex;align-items:center;gap:10px;min-height:44px;color:#1A1F3D;text-decoration:none}
.flat-logo svg{display:block;flex:none;width:40px;height:40px}
.flat-logo-word{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(24px,7.4vw,30px);line-height:1;letter-spacing:.01em}
.flat-logo-word b{font-weight:800;color:#D93C20}
.flat-head-actions{display:flex;align-items:center;gap:8px}
.flat-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:2px solid #1A1F3D;border-radius:999px;background:#FFFFFF;color:#1A1F3D;font-size:16px;font-weight:500;line-height:1;text-decoration:none}
.flat-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid #1A1F3D;border-radius:999px;background:#FFFFFF;color:#1A1F3D;text-decoration:none}
.flat-icon-btn svg{display:block;width:22px;height:22px}
.flat-pill:hover,.flat-icon-btn:hover{background:#FFC533}
.flat-badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:2px solid #FFFFFF;border-radius:999px;background:#D93C20;color:#FFFFFF;font-size:12px;font-weight:600;line-height:1}
.flat-nav{background:#1A1F3D}
.flat-nav-row{display:flex;flex-wrap:wrap;gap:0 6px;padding-left:calc(clamp(16px,4vw,24px) - 10px);padding-right:calc(clamp(16px,4vw,24px) - 10px)}
.flat-nav a{display:flex;align-items:center;min-height:48px;padding:0 10px;color:#FFFFFF;text-decoration:none;font-family:'Changa','Arial Narrow',sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.flat-nav a:hover,.flat-nav a.is-current{color:#FFC533}
.flat-nav a.flat-nav-end{margin-inline-start:auto;color:#FFC533}

/* ---------- shared bits ---------- */
.flat-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 26px;border:0;border-radius:14px;background:#1A1F3D;color:#FFFFFF;text-decoration:none;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
body.flat a.flat-btn{color:#FFFFFF}
.flat-btn svg{display:block;width:22px;height:22px;flex:none}
.flat-btn:hover{background:#1E5FD9}
.flat-btn:disabled{opacity:.4;cursor:not-allowed;background:#1A1F3D}
.flat-h2{margin:0;font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(36px,4.4vw,60px);line-height:.95;text-transform:uppercase}
.flat-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 40px}
.flat-sec-head p{margin:0;max-width:38ch;color:#4B5275;font-size:17px}
.flat-section{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(44px,6vw,84px)}

/* ---------- hero ---------- */
.flat-hero{background:#FFC533}
.flat-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:36px 56px;padding-top:clamp(36px,5.5vw,72px);padding-bottom:clamp(36px,5.5vw,72px)}
.flat-hero-text{flex:1 1 360px;min-width:0}
.flat-hero-art{flex:1.5 1 440px;min-width:0}
.flat-eyebrow{display:inline-flex;align-items:center;margin:0;padding:7px 14px 6px;border:2px solid #1A1F3D;border-radius:999px;background:#FFFFFF;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.flat-hero h1{margin:20px 0 0;font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(60px,8.6vw,120px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase}
.flat-hero h1 span{display:block}
.flat-outline{color:#FFFFFF;text-shadow:3px 0 0 #1A1F3D,-3px 0 0 #1A1F3D,0 3px 0 #1A1F3D,0 -3px 0 #1A1F3D,2.1px 2.1px 0 #1A1F3D,-2.1px 2.1px 0 #1A1F3D,2.1px -2.1px 0 #1A1F3D,-2.1px -2.1px 0 #1A1F3D,2.8px 1.1px 0 #1A1F3D,1.1px 2.8px 0 #1A1F3D,-1.1px 2.8px 0 #1A1F3D,-2.8px 1.1px 0 #1A1F3D,-2.8px -1.1px 0 #1A1F3D,-1.1px -2.8px 0 #1A1F3D,1.1px -2.8px 0 #1A1F3D,2.8px -1.1px 0 #1A1F3D}
.flat-hero-lead{margin:26px 0 0;max-width:44ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.flat-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:32px}
.flat-link{display:inline-flex;align-items:center;min-height:44px;color:#1A1F3D;font-weight:600;font-size:17px;text-decoration:underline;text-underline-offset:5px}

/* ---------- platform cards (homepage) ---------- */
.flat-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
@media (min-width:900px){.flat-platforms{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flat-pcard{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:clamp(150px,14vw,200px);padding:clamp(14px,1.6vw,22px);border-radius:18px;color:#FFFFFF;text-decoration:none;transition:transform .15s ease}
body.flat a.flat-pcard{color:#FFFFFF}
.flat-pcard:hover{transform:translateY(-4px);outline:3px solid #1A1F3D;outline-offset:4px}
.flat-pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.flat-pcard-top img{display:block;max-width:70%;height:auto;max-height:64px;object-fit:contain}
.flat-pcard-go{display:inline-flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#FFFFFF;color:#1A1F3D}
.flat-pcard-go svg{display:block;width:16px;height:16px}
.flat-pcard-name{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(18px,2.1vw,30px);line-height:1;letter-spacing:.01em;text-transform:uppercase}

/* ---------- how it works ---------- */
.flat-step-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px;padding-top:clamp(28px,3.6vw,48px);padding-bottom:clamp(28px,3.6vw,48px)}
.flat-step-text{flex:1 1 300px;min-width:0}
.flat-step-art{flex:1.6 1 380px;min-width:0}
.flat-step-kicker{margin:0;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.flat-step-title{margin:4px 0 0;font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(60px,7.6vw,108px);line-height:.9;text-transform:uppercase}
.flat-step-text p.flat-step-body{margin:14px 0 0;max-width:34ch;font-size:17px;line-height:1.55}

/* ---------- product page (builder) ---------- */
.flat-builder{display:flex;flex-wrap:wrap;align-items:stretch;gap:36px 48px;margin-top:36px}
.flat-builder-main{flex:1.5 1 480px;min-width:0}
.flat-step-h{display:flex;align-items:center;gap:10px;margin:34px 0 14px;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.flat-step-h.is-first{margin-top:0}
.flat-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#1A1F3D;color:#FFFFFF;font-size:16px;letter-spacing:0}
.flat-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.flat-switch{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flat-switch a{transition:outline-color .15s ease;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:96px;padding:12px;border-radius:14px;color:#FFFFFF;text-decoration:none}
body.flat .flat-switch a{color:#FFFFFF}
.flat-switch a.is-current{outline:3px solid #1A1F3D;outline-offset:3px}
.flat-switch img{display:block;max-width:80%;max-height:30px;height:auto;object-fit:contain}
.flat-switch span{font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:15px;line-height:1.1;text-transform:uppercase}
.flat-regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.flat .flat-region{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 10px;border:2px solid #1A1F3D;border-radius:12px;background:#FFFFFF;color:#1A1F3D;font-size:17px;font-weight:600;cursor:pointer}
body.flat .flat-region.is-active{background:#1A1F3D;color:#FFFFFF}
body.flat .flat-region.is-active::before{content:"";flex:none;width:7px;height:13px;margin-top:-4px;border:solid #FFFFFF;border-width:0 3px 3px 0;transform:rotate(45deg)}
.flat-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.flat .flat-value{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:6px 2px;border:2px solid #1A1F3D;border-radius:14px;background:#FFFFFF;color:#1A1F3D;cursor:pointer}
body.flat .flat-value:disabled{cursor:not-allowed;background:#EEEEF2;border-color:#9AA0B8;color:#9AA0B8}
body.flat .flat-value.is-active{background:#FFC533}
body.flat .flat-value.is-active::after{content:"\2713";position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid #FFFFFF;border-radius:999px;background:#1A1F3D;color:#FFFFFF;font-size:15px;font-weight:700;line-height:1}
.flat-value-num{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,48px);line-height:1}
.flat-value-unit{font-size:13px;font-weight:600;line-height:1}
.flat-value-price{font-size:12px;color:#4B5275;line-height:1.2}

.flat-order{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;padding:clamp(18px,2.2vw,26px);border:2px solid #1A1F3D;border-radius:20px;background:#FDE8D8}
.flat-order h3{margin:0 0 14px;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.flat-card{transition:background-color .25s ease;flex:1 1 auto;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:20px 22px;border:2px solid #1A1F3D;border-radius:16px;color:#FFFFFF}
.flat-card-kicker{font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.flat-card-logo{display:flex;align-items:center;justify-content:center;padding:8px 0}
.flat-card-logo img{display:block;max-width:60%;max-height:72px;height:auto;object-fit:contain}
.flat-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.flat-card-name{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:26px;line-height:1;text-transform:uppercase}
.flat-card-region{margin-top:6px;font-size:15px;line-height:1.3}
.flat-card-value{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(40px,4.6vw,64px);line-height:.9;white-space:nowrap}
.flat-pm{display:flex;gap:10px;margin-top:20px}
body.flat .flat-pm button{flex:1 1 0;min-height:48px;padding:0 8px;border:2px solid #1A1F3D;border-radius:12px;background:#FFFFFF;color:#1A1F3D;font-size:15px;font-weight:600;cursor:pointer}
body.flat .flat-pm button.is-active{background:#1A1F3D;color:#FFFFFF}
.flat-note{align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:#1A1F3D}
.flat-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-top:20px;padding-top:16px;border-top:2px dashed #1A1F3D}
.flat-total-label{font-size:17px;font-weight:600}
.flat-total-amount{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:26px;line-height:1.1}
.flat-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
body.flat .flat-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 16px;border:2px solid #1A1F3D;border-radius:14px;background:#FFFFFF;color:#1A1F3D;font-size:16px;font-weight:600;cursor:pointer}
body.flat .flat-add:hover{background:#FFC533}
body.flat .flat-add:disabled{opacity:.4;cursor:not-allowed;background:#FFFFFF}
body.flat .flat-add.hidden{display:none}
body.flat .flat-added{align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 14px;border:2px solid #1A1F3D;border-radius:14px;background:#FFC533;font-size:16px;font-weight:600}
body.flat .flat-added.hidden{display:none}
body.flat .flat-added.flex{display:flex}
.flat-qty{display:flex;align-items:center;gap:10px}
body.flat .flat-qty button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:2px solid #1A1F3D;border-radius:999px;background:#FFFFFF;color:#1A1F3D;font-size:20px;line-height:1;cursor:pointer}
body.flat .flat-qty button.is-plus{background:#1A1F3D;color:#FFFFFF}
.flat-qty span{min-width:20px;text-align:center;font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:20px}
.flat-pay{width:100%}
.flat-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:18px;font-size:14px;color:#4B5275}
.flat-crumbs a{text-decoration:underline;text-underline-offset:3px}
.flat-crumbs b{color:#1A1F3D;font-weight:600}

/* ---------- footer ---------- */
.flat-foot{background:#1A1F3D;color:#FFFFFF}
.flat-foot-in{padding-top:44px;padding-bottom:28px}
.flat-foot-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 56px}
.flat-foot-brand{flex:1 1 260px;min-width:0}
.flat-foot-word{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:30px;line-height:1;letter-spacing:.01em}
.flat-foot-word b{font-weight:800;color:#FFC533}
.flat-foot-brand p{margin:12px 0 0;max-width:34ch;color:#C9CEE3;font-size:15px}
.flat-foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:0 40px;align-content:start}
.flat-foot-links a{display:flex;align-items:center;min-height:44px;color:#FFFFFF;text-decoration:none;font-size:16px}
.flat-foot-links a:hover{color:#FFC533}
.flat-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:32px;padding-top:20px;border-top:1px solid #3A416B;color:#C9CEE3;font-size:14px}

/* ---------- toasts: pinned to the top so an in-place "added to cart" is seen wherever the page is scrolled ---------- */
body.flat .toast{position:fixed;top:14px;left:0;right:0;z-index:60;width:min(92vw,480px);margin:0 auto;border:2px solid #1A1F3D;border-radius:12px;font-weight:600}

/* ---------- Arabic: letter-spacing breaks joined letters, and the tight display leading clips them ---------- */
[dir="rtl"] body.flat *{letter-spacing:0 !important}
[dir="rtl"] .flat-hero h1{line-height:1.12}
[dir="rtl"] .flat-step-title{line-height:1.15}
[dir="rtl"] .flat-h2{line-height:1.2}
[dir="rtl"] .flat-badge,[dir="rtl"] body.flat .flat-value.is-active::after{right:auto;left:-8px}
[dir="rtl"] .flat-btn svg.flat-arrow,[dir="rtl"] .flat-pcard-go svg{transform:scaleX(-1)}

/* ---------- other pages (checkout, login, orders, profile): swap the purple accent for the Flat palette ---------- */
body.flat .bg-accent{background-color:#1A1F3D}
body.flat .text-accent{color:#D93C20}
body.flat .border-accent{border-color:#1A1F3D}

/* ---------- checkout page (hooks: co-* classes in checkout/index.blade.php) ---------- */
.flat-co{counter-reset:co-step}
body.flat .flat-co .co-grid{margin-top:36px;padding-left:0;padding-right:0;padding-top:0;gap:36px 48px}
body.flat .flat-co .co-grid > div{gap:34px}
body.flat .flat-co .co-h{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
body.flat .flat-co .co-h::before{counter-increment:co-step;content:counter(co-step);display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:999px;background:#1A1F3D;color:#FFFFFF;font-size:16px;letter-spacing:0}
body.flat .flat-co .co-card{padding:14px 16px;border:2px solid #1A1F3D;border-radius:16px}
body.flat .flat-co .co-card .font-semibold.text-sm{font-size:16px}
body.flat .flat-co .co-avatar{background:#FFC533;border:2px solid #1A1F3D}
body.flat .flat-co .co-avatar svg{stroke:#1A1F3D}
body.flat .flat-co .co-phone{text-align:left}
[dir="rtl"] body.flat .flat-co .co-phone{text-align:right}
body.flat .flat-co .pay-option{padding:14px 16px;border:2px solid #1A1F3D;border-radius:14px;transition:background-color .15s ease}
body.flat .flat-co .pay-option.border-accent{background:#FFC533}
body.flat .flat-co .pay-option .font-semibold.text-sm{font-size:16px}
body.flat .flat-co .pay-option.border-accent .text-muted{color:#1A1F3D}
body.flat .flat-co input[type="radio"]{width:20px;height:20px;accent-color:#1A1F3D}
body.flat .flat-co #bank-note{border:2px solid #1A1F3D;border-radius:12px;background:#FFFFFF;color:#1A1F3D;font-size:14px}
body.flat .flat-co .co-summary{gap:12px;padding:clamp(18px,2.2vw,26px);border:2px solid #1A1F3D;border-radius:20px;background:#FDE8D8;font-size:16px}
body.flat .flat-co .co-summary .text-muted{color:#1A1F3D}
body.flat .flat-co .co-summary .h-px{height:0;margin-top:4px;border-top:2px dashed #1A1F3D;background:none}
body.flat .flat-co .co-total{align-items:baseline;font-size:17px;font-weight:600}
body.flat .flat-co .co-total span:last-child{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:26px;line-height:1.1}
body.flat .flat-co #pay-btn{min-height:58px;height:auto;padding:10px 20px;border-radius:14px;background:#1A1F3D;color:#FFFFFF;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
body.flat .flat-co #pay-btn:hover{background:#1E5FD9}
body.flat .flat-co #pay-btn:disabled{opacity:.4;background:#1A1F3D}
body.flat .flat-co #checkout-form p{font-size:13px;color:#4B5275}

/* ---------- product page halves: one panel on desktop; on phones the card goes first, steps next, total + buttons last ---------- */
.flat-order-top{flex:1 1 auto;display:flex;flex-direction:column}
@media (max-width:915px){
  .flat-builder{flex-direction:column;flex-wrap:nowrap;gap:28px}
  .flat-builder-main{flex:none;order:2}
  .flat-order{display:contents}
  .flat-order-top,.flat-order-bottom{flex:none;padding:18px;border:2px solid #1A1F3D;border-radius:20px;background:#FDE8D8}
  .flat-order-top{order:1}
  .flat-order-bottom{order:3}
  .flat-order-bottom .flat-note{margin-top:0;margin-bottom:14px}
  .flat-order-bottom .flat-total{margin-top:0;padding-top:0;border-top:0}
  .flat-card{min-height:170px}
}

/* ---------- stock labels on the value tiles ---------- */
.flat-value-tag{display:inline-block;max-width:94%;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.2;text-align:center}
.flat-value-tag.is-out{background:#1A1F3D;color:#FFFFFF}
.flat-value-tag.is-low{background:#D93C20;color:#FFFFFF}

/* ---------- shared frame for login, OTP, orders, order details, order success and profile ---------- */
body.flat .flat-pg{max-width:860px;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(36px,5vw,64px)}
body.flat .flat-pg > .px-5,body.flat .flat-pg > .px-6{padding-left:0;padding-right:0}
body.flat .flat-pg h1{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1;text-transform:uppercase}
[dir="rtl"] body.flat .flat-pg h1{line-height:1.25}
body.flat .flat-pg h2{font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:18px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
body.flat .flat-pg .border-line{border-color:#1A1F3D}
body.flat .flat-pg .bg-white.border{border-width:2px}
body.flat .flat-pg .rounded-2xl{border-radius:16px}
body.flat .flat-pg span[dir="ltr"].text-right{text-align:left}
[dir="rtl"] body.flat .flat-pg span[dir="ltr"].text-right{text-align:right}
body.flat .flat-pg input[type="text"]{border:2px solid #1A1F3D;border-radius:12px}
body.flat .flat-pg input[type="checkbox"]{accent-color:#1A1F3D}
body.flat .flat-pg .otp-box{border:2px solid #1A1F3D;border-radius:14px;font-family:'Changa','Arial Narrow',sans-serif;font-weight:800}
body.flat .flat-pg .otp-box:focus{background:#FFC533;outline:none}
body.flat .flat-pg form div[dir="ltr"] > span.bg-bg{border:0;border-right:2px solid #1A1F3D;background:#FFC533}
body.flat .flat-pg button.bg-accent,body.flat .flat-pg a.bg-accent,body.flat .flat-pg a.bg-ink{border-radius:14px;background:#1A1F3D;color:#FFFFFF;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase}
body.flat .flat-pg button.bg-accent:hover,body.flat .flat-pg a.bg-accent:hover,body.flat .flat-pg a.bg-ink:hover{background:#1E5FD9}
@media (min-width:768px){
  body.flat .flat-pg > .md\:max-w-md{padding:32px;border:2px solid #1A1F3D;border-radius:20px;background:#FDE8D8}
}
/* order success + order details */
body.flat .flat-pg .fp-check{background:#FFC533;border:3px solid #1A1F3D}
body.flat .flat-pg .fp-check svg{stroke:#1A1F3D}
body.flat .flat-pg .fp-code-card{padding:22px;border:2px solid #1A1F3D;border-radius:18px}
body.flat .flat-pg .fp-code{height:auto;min-height:64px;padding:8px 10px;border:2px dashed #FFFFFF;border-radius:12px;background:rgba(255,255,255,.16);font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(18px,3.4vw,26px);letter-spacing:.08em !important;text-align:center;word-break:break-all}
body.flat .flat-pg .copy-btn{width:64px;height:64px;border:2px solid #1A1F3D;border-radius:12px}
body.flat .flat-pg .fp-redeem{background:#FDE8D8}
/* profile + loyalty */
body.flat .flat-pg .fp-avatar{border:2px solid #1A1F3D;background:#FFC533;color:#1A1F3D}
body.flat .flat-pg .fp-loyalty{gap:10px;padding:clamp(18px,2.4vw,26px);border:2px solid #1A1F3D;border-radius:20px;background:#1E5FD9}
body.flat .flat-pg .fp-loyalty .text-gray-300{color:#FFFFFF;font-size:14px}
body.flat .flat-pg .fp-loyalty .text-emerald-400{color:#FFC533}
body.flat .flat-pg .fp-loyalty .fp-points{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(44px,7vw,72px);line-height:1}
body.flat .flat-pg .fp-loyalty .fp-points span{font-size:18px;font-weight:700;text-transform:uppercase}

/* order details page header, total and help button */
body.flat .flat-pg .fp-order-no{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(30px,5vw,48px);line-height:1}
body.flat .flat-pg .fp-badge{padding:7px 14px;border:2px solid #1A1F3D;border-radius:999px;font-family:'Changa','Arial Narrow',sans-serif;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
body.flat .flat-pg .fp-total{padding:8px 20px;background:#FDE8D8;border-radius:20px}
body.flat .flat-pg .fp-total > div:first-child{align-items:baseline;font-size:17px;font-weight:600}
body.flat .flat-pg .fp-total > div:first-child span:last-child{font-family:'Changa','Arial Narrow',sans-serif;font-weight:800;font-size:28px;line-height:1.1}
body.flat .flat-pg .fp-total .border-t{border-top:2px dashed #1A1F3D}
body.flat .flat-pg .fp-total .text-amber-700{color:#1A1F3D;font-size:14px}
body.flat .flat-pg .fp-ghost{height:auto;min-height:54px;border:2px solid #1A1F3D;border-radius:14px;font-size:16px}
body.flat .flat-pg .fp-ghost:hover{background:#FFC533}
body.flat .flat-pg .fp-code-card img{max-height:36px}

/* ---------- logo icon: the original G mark, yellow on a red tile, navy outline ---------- */
.flat-logo-mark{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:6px;border:3px solid #1A1F3D;border-radius:12px;background:#D93C20}
.flat-logo-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1.5px 0 0 #1A1F3D) drop-shadow(-1.5px 0 0 #1A1F3D) drop-shadow(0 1.5px 0 #1A1F3D) drop-shadow(0 -1.5px 0 #1A1F3D)}
.flat-foot-logo{display:flex;align-items:center;gap:10px}
.flat-foot .flat-logo-mark{border-color:#FFFFFF}

/* ---------- Changa everywhere in the Flat theme (body text as well as headings) ---------- */
body.flat .font-display,body.flat .font-arabic,body.flat button,body.flat input,body.flat select,body.flat textarea{font-family:'Changa','Readex Pro','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif}

/* loyalty coins: icon sizes inside the Flat panels */
body.flat .flat-pg .fp-loyalty svg{width:40px;height:40px}
body.flat .flat-note svg{width:22px;height:22px}