/* MIDTRANS Arabic site design system: the approved homepage system (owner 2026-11-07), applied to every Arabic page.
   Shared parts copied from the homepage system: tokens, buttons, header, bottom bar. Section 14 adapts it to inner pages. */
/* 1. Tokens (--mt-blue-bright: the official blue, brightened for dark navy backgrounds) */
:root{--mt-blue-bright:#1fa6ff;--mt-blue:#007dc5;--mt-blue-d:#0074b7;--mt-navy:#0a2440;--mt-soft:#f2f5f8;--mt-line:#e4ecf3;--mt-text:#4a5b6c;
 --mt-r:14px;--mt-btn-r:10px;--mt-gap:clamp(24px,2vw + 16px,48px);--mt-pad:clamp(18px,1.4vw + 12px,32px);
 --mt-shadow:0 6px 22px rgba(10,36,64,.06)}

/* 5. Buttons: primary filled blue, secondary outlined blue, one height */
main :is(a.button,button.button,.hx-btn){border-radius:var(--mt-btn-r)!important;min-height:46px!important}
main>section :is(.hx-btn,.button){height:46px!important;padding:0 20px!important;font-weight:700!important;font-size:.95rem!important;display:inline-flex!important;align-items:center;justify-content:center}
main>section :is(.hx-btn--pri,.button--primary,a.button:not(.button--secondary):not(.button--ghost)){background:var(--mt-blue-d)!important;border:1px solid var(--mt-blue-d)!important;color:#fff!important}
main>section :is(.hx-btn--sec,.button--secondary,.button--ghost){background:#fff!important;border:1px solid var(--mt-blue-d)!important;color:var(--mt-blue-d)!important}

/* 8. Header: never overlaps; Arabic has the logo on the left */
.site-header .container{grid-template-columns:max-content minmax(0,1fr) max-content!important;column-gap:16px!important}
.site-header a.brand{min-width:max-content!important}
.site-header nav.main-nav{min-width:0!important;justify-content:center!important;gap:2px!important}
.site-header nav.main-nav .nav-trigger{padding-inline:8px!important;font-size:.88rem!important}
.site-header .header-actions{gap:6px!important}
.site-header .header-actions>*{padding-inline:10px!important}
.site-header .brand__text strong{line-height:1.25!important}
.site-header .brand__text small{margin-top:5px!important;line-height:1.25!important}
/* one bright official blue for the brand line and the blue labels on the dark top of the page */
.site-header .brand__text small,.site-header .brand__text small .brand-name,
main>.hero--cinema .eyebrow,.hero-operations-board__eyebrow .brand-name{color:var(--mt-blue-bright)!important}
main>.hero--cinema .eyebrow::before{background:var(--mt-blue-bright)!important}
/* the label's words start at the start edge (right in Arabic); its short line follows after the words */
main>.hero--cinema .eyebrow::before{order:2}
html.mt-hdr-1 .site-header a.brand .brand__text{display:none!important}
html.mt-hdr-2 .site-header nav.main-nav .nav-trigger{font-size:.8rem!important;padding-inline:6px!important}
html.mt-hdr-2 .site-header .header-actions>*{padding-inline:8px!important;font-size:.85rem!important}
html[dir="rtl"] .site-header .container{direction:ltr!important}
html[dir="rtl"] .site-header .container>*{direction:rtl}
html[dir="rtl"] .site-header a.brand{flex-direction:row!important;direction:ltr!important}
html[dir="rtl"] .site-header a.brand .brand__text,html[dir="rtl"] .site-header a.brand .brand__text>*{direction:rtl;text-align:right!important}
/* one order in every language, from the logo side: logo | menu | track, contact, login, language | quote at the far edge */
html[dir="rtl"] .site-header nav.main-nav,html[dir="rtl"] .site-header .header-actions{direction:ltr!important}
html[dir="rtl"] .site-header nav.main-nav>*,html[dir="rtl"] .site-header .header-actions>*{direction:rtl}
.site-header .header-actions>.language-switcher-dropdown{order:4}
.site-header .header-actions>.button--primary{order:5}
/* Arabic desktop (owner): right to left — logo, company name | الشركة الخدمات الجمارك القطاعات الموارد | تواصل معنا دخول تتبع | language, quote at the left edge.
   Phone and tablet keep the logo on the left with the menu button on the right. */
@media(min-width:1201px){
 html[dir="rtl"] .site-header .container,html[dir="rtl"] .site-header nav.main-nav,html[dir="rtl"] .site-header .header-actions{direction:rtl!important}
 html[dir="rtl"] .site-header a.brand{direction:rtl!important}
 html[dir="rtl"] .site-header nav.main-nav>.nav-item:has(>a[href$="/about-us/"]){order:-1}
 html[dir="rtl"] .site-header .header-actions>a[href*="contact-us"]{order:1}
 html[dir="rtl"] .site-header .header-actions>a[data-header-login]{order:2}
 html[dir="rtl"] .site-header .header-actions>a[href*="track-shipment"]{order:3}
}
html[dir="rtl"] .site-header details.mobile-menu{justify-self:end!important;margin-left:auto!important;grid-column:-2/-1}
details.mobile-menu>summary{gap:10px!important}
html body details.mobile-menu>summary::before{filter:none!important;margin-inline-end:0!important} /* inner pages have a white header: keep the blue menu icon and the white X (owner 2026-11-07) */

/* 12. Bottom action bar (phone + tablet): one highlighted action, the rest quiet */
@media(max-width:1199px){
 .floating-actions{background:rgba(7,26,47,.88)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);height:auto!important;
  border-top:1px solid rgba(255,255,255,.08)!important;border-radius:18px 18px 0 0!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))!important;gap:4px!important;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
 html body div.floating-actions.floating-actions>a[class^="floating-actions__"]{background:transparent!important;color:#fff!important;border:0!important;border-radius:12px!important;min-height:54px!important;padding:6px 4px!important;gap:3px!important;box-shadow:none!important;transition:background .15s}
 html body div.floating-actions.floating-actions>a[class^="floating-actions__"]:is(:hover,:active){background:rgba(255,255,255,.07)!important}
 html body div.floating-actions.floating-actions>a.floating-actions__quote.floating-actions__quote[class]{background:var(--mt-blue-d)!important}
 .floating-actions__icon{width:24px!important;height:24px!important;background:none!important;border:0!important}
 .floating-actions__icon img{width:20px!important;height:20px!important;opacity:.92}
 .floating-actions__icon img.floating-actions__brand{width:24px!important;height:24px!important}
 .floating-actions__label{font-size:.74rem!important;font-weight:600!important;color:rgba(255,255,255,.9)!important;letter-spacing:0}
 .floating-actions>a.floating-actions__quote .floating-actions__label{color:#fff!important;font-weight:700!important}
}

/* 14. Inner pages: same ground, cards, headings and banner colour as the homepage */
body.public-site:not(.template-home) main{background:var(--mt-soft)}
body.public-site:not(.template-home) main>.hero{background:var(--mt-navy)!important;background-image:none!important}
body.public-site:not(.template-home) main>.hero::before,body.public-site:not(.template-home) main>.hero::after{background-image:none!important;opacity:0!important}
body.public-site:not(.template-home) main>.hero :is(.eyebrow,.hero__eyebrow){color:var(--mt-blue-bright)!important}
body.public-site:not(.template-home) main>.hero .eyebrow::before{background:var(--mt-blue-bright)!important}
body.public-site:not(.template-home) main>section:not(.hero):not(.ie-hero):not(.hsx-hero):not(.shipping-copilot){background:var(--mt-soft)!important;background-image:none!important}
body.public-site:not(.template-home) main>section:not(.hero) :is(.content-band,.structured-group,.faq-intro,.faq-item,.related-links,.conversion-block,.page-cta,.news-card,.banner,.section-banner__inner,.hs-lookup){border-radius:var(--mt-r)!important}
body.public-site:not(.template-home) main>section:not(.hero) :is(.content-band,.structured-group,.news-card,.conversion-block){background:#fff!important;background-image:none!important;border:1px solid var(--mt-line)!important;box-shadow:var(--mt-shadow)!important}
body.public-site:not(.template-home) main>section .faq-item{background:#fff!important;border:1px solid var(--mt-line)!important}
body.public-site:not(.template-home) main>section a:not([class]){color:var(--mt-blue-d)}
/* text keeps the colour its own background was designed for (dark bands stay white) */
/* 15. Link cards: pressed or hovered, the arrow turns white in a filled blue circle (owner) */
body.public-site .link-card .link-card__arrow{transition:background-color .15s,color .15s}
body.public-site .link-card:is(:hover,:active,:focus-visible) .link-card__arrow{background:var(--mt-blue)!important;color:#fff!important}
/* 16. Call-to-action buttons: equal margins on both sides, one width; WhatsApp keeps its green */
body.public-site main>section .conversion-actions{padding:0!important;gap:12px!important}
body.public-site main>section .conversion-actions>.button{width:100%!important;margin:0!important;box-sizing:border-box}
body.public-site main>section a.button.button--whatsapp:not(.button--telegram){background:#147d3c!important;border-color:#147d3c!important;color:#fff!important}
/* 17. One press animation for every button (owner): lifts a little on hover, presses in on tap; no pulsing */
body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl){animation:none!important;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease!important;will-change:transform}
@media(hover:hover){body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl):hover{transform:translateY(-1px)!important;box-shadow:0 6px 16px rgba(10,36,64,.16)!important}}
body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl):active{transform:scale(.97)!important;box-shadow:0 2px 6px rgba(10,36,64,.14)!important;transition-duration:.06s!important}
body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl):focus-visible{outline:3px solid var(--mt-blue-bright)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl){transition:none!important}body.public-site main :is(a.button,button.button,.hx-btn,.mt-app__dl):is(:hover,:active){transform:none!important}}
/* 18. Pills (owner): one animation for every pill — lifts on hover, official blue with white text when pressed */
body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a){transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;cursor:default;-webkit-tap-highlight-color:transparent}
body.public-site main .hero-operations-board__modes>a{cursor:pointer}
@media(hover:hover){body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,36,64,.12)}}
body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):active{transform:scale(.97);background:var(--mt-blue)!important;border-color:var(--mt-blue)!important;color:#fff!important;transition-duration:.06s}
body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):active *{color:#fff!important}
@media(prefers-reduced-motion:reduce){body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a){transition:none}body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):is(:hover,:active){transform:none}}
/* 18b. Pills on mouse hover take the same official blue with white text as when pressed (owner) */
@media(hover:hover){body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):hover{background:var(--mt-blue)!important;border-color:var(--mt-blue)!important;color:#fff!important}
 body.public-site main :is(.svcx__chips>li,.svcx__tag,.support-pill-row>span,.hero-feature-pills>span,.hero-operations-board__modes>a):hover *{color:#fff!important}}
/* 19. Banner cards (owner): same animation as the pills — lift on hover, official blue with white text on hover (mouse) and press */
body.public-site main :is(.hero-stat-card,.hero-operations-card){transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease!important;-webkit-tap-highlight-color:transparent}
@media(hover:hover){body.public-site main :is(.hero-stat-card,.hero-operations-card):hover{transform:translateY(-2px)!important;background:var(--mt-blue)!important;border-color:var(--mt-blue)!important;box-shadow:0 8px 20px rgba(0,0,0,.22)}}
body.public-site main :is(.hero-stat-card,.hero-operations-card):active{transform:scale(.98)!important;background:var(--mt-blue)!important;border-color:var(--mt-blue)!important;transition-duration:.06s}
body.public-site main :is(.hero-stat-card,.hero-operations-card):active :is(strong,span,p,h3){color:#fff!important}
@media(hover:hover){body.public-site main :is(.hero-stat-card,.hero-operations-card):hover :is(strong,span,p,h3){color:#fff!important}}
@media(prefers-reduced-motion:reduce){body.public-site main :is(.hero-stat-card,.hero-operations-card){transition:none}body.public-site main :is(.hero-stat-card,.hero-operations-card):is(:hover,:active){transform:none}}
/* 20. Phone menu: the language buttons wrap instead of pushing the page wider (long French labels) */
.mobile-menu__languages,.mobile-menu__language-options{max-width:100%!important;box-sizing:border-box;min-width:0}
.mobile-menu__language-options{flex-wrap:wrap!important}
.mobile-menu__language{min-width:0!important;max-width:100%}
/* 21. Blog featured cards: long words wrap instead of pushing the page wider (French) */
body.public-site .blog-featured>*,body.public-site .blog-featured__cards>*{min-width:0!important}
body.public-site .blog-featured :is(h2,h3,p,a){overflow-wrap:anywhere}
/* 22. Phone and tablet header: same height and logo size as the approved homepage */
@media(max-width:1200px){
 body.public-site:not(.template-home) .site-header .brand__logo{height:40px!important;width:auto!important;max-height:40px!important}
 body.public-site:not(.template-home) .site-header .container{min-height:68px!important;padding-block:0!important}
}
@media(min-width:1201px){body.public-site:not(.template-home) .site-header .brand__logo{height:50px!important;width:auto!important;max-height:50px!important}}
/* 23. Footer (owner): one type scale and one line height; quick links as a tidy grid; links without heavy underlines */
.site-footer .footer-reference-column h3{font-size:1rem!important;font-weight:700!important;line-height:1.4!important;margin:0 0 10px!important;letter-spacing:0!important}
.site-footer .footer-reference-column h4{font-size:.95rem!important;font-weight:700!important;line-height:1.4!important;margin:0 0 6px!important}
.site-footer .footer-reference-column p{font-size:.9rem!important;line-height:1.7!important;margin:0 0 14px!important;color:rgba(255,255,255,.82)!important}
.site-footer .footer-reference-column a{text-decoration:none!important}
.site-footer .footer-reference-column a:hover{text-decoration:underline!important;text-underline-offset:3px}
/* contact lines: one size, one rhythm */
.site-footer .footer-reference-column p.footer-contact-email{margin:0 0 3px!important;font-size:.9rem!important;line-height:1.35!important}
.site-footer .footer-reference-column p.footer-contact-email a{color:#fff!important;font-weight:600!important}
.site-footer .footer-reference-column p.footer-contact-email small{font-size:inherit!important;opacity:.7}
/* offices */
.site-footer .footer-reference-office-list{display:grid!important;gap:22px!important}
.site-footer .footer-reference-office p{margin:0 0 6px!important;line-height:1.35!important}
.site-footer .footer-reference-office p .footer-reference-office__phone{line-height:1.35!important}
.site-footer .footer-reference-office__label{font-size:inherit!important;font-weight:400!important;opacity:.8}
.site-footer .footer-reference-office__phone{font-size:inherit!important;font-weight:700!important;line-height:inherit!important;margin:0!important;display:inline!important;color:#fff!important;border:0!important;box-shadow:none!important}
.site-footer .footer-reference-office>a:not(.footer-reference-office__phone){display:inline-block;font-size:.9rem!important;font-weight:700!important;color:var(--mt-blue-bright,#1fa6ff)!important;border:0!important;box-shadow:none!important}
/* quick links: a grid of equal columns, one link per cell, separators hidden */
.site-footer .footer-reference-links{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px 16px!important;margin:20px 0 0!important;padding-top:16px!important;border-top:1px solid rgba(255,255,255,.14)!important;font-size:.86rem!important;line-height:1.3!important;align-items:start}
.site-footer .footer-reference-links>span[aria-hidden="true"]{display:none!important}
.site-footer .footer-reference-links :is(a,button){display:block!important;font:inherit!important;font-weight:500!important;color:rgba(255,255,255,.85)!important;padding:0!important;margin:0!important;background:none!important;border:0!important;text-align:start!important;white-space:normal!important;text-decoration:none!important;min-width:0;cursor:pointer}
.site-footer .footer-reference-links :is(a,button) *{font-weight:inherit!important;color:inherit!important}
.site-footer .footer-reference-links :is(a,button):hover{color:#fff!important;text-decoration:underline!important}
@media(max-width:600px){.site-footer .footer-reference-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* 26. Rates and news strips (owner): the label is two lines only — title, then the date on one line */
:is(.mt-ticker__label,.mt-news__label){width:auto!important;flex:0 0 auto!important}
:is(.mt-ticker__label-date,.mt-news__label-date){white-space:nowrap!important;font-size:11px!important;line-height:1.3!important}
:is(.mt-ticker__label-main,.mt-news__label-main){white-space:nowrap!important}
/* 28. The same press animation for the remaining button-like links (owner): routes map buttons, carrier links, rate filters */
body.public-site main :is(.mt-route-actions>a,.carrier-card__link,.rates-filter__button){transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease!important;-webkit-tap-highlight-color:transparent}
@media(hover:hover){body.public-site main :is(.mt-route-actions>a,.carrier-card__link,.rates-filter__button):hover{transform:translateY(-1px)!important;box-shadow:0 6px 16px rgba(10,36,64,.16)!important}}
body.public-site main :is(.mt-route-actions>a,.carrier-card__link,.rates-filter__button):active{transform:scale(.97)!important;box-shadow:0 2px 6px rgba(10,36,64,.14)!important;transition-duration:.06s!important}
@media(prefers-reduced-motion:reduce){body.public-site main :is(.mt-route-actions>a,.carrier-card__link,.rates-filter__button){transition:none!important}body.public-site main :is(.mt-route-actions>a,.carrier-card__link,.rates-filter__button):is(:hover,:active){transform:none!important}}
/* 29. Phone and tablet menu (owner): the panel opens right under the header, no empty gap (header is 69px on every page) */
@media(max-width:1200px){html body .site-header details.mobile-menu>nav{top:var(--mt-menu-top,69px)!important;margin-top:0!important;max-height:calc(100dvh - var(--mt-menu-top,69px))!important;border-top-left-radius:0!important;border-top-right-radius:0!important}}
/* 31. One card system (owner): every white card has the same edges, shadow and corners as the rest of the page */
html body.public-site main>section.faq-section.faq-section>.container.faq-list{width:auto!important;max-width:min(100%,1180px)!important;margin-left:auto!important;margin-right:auto!important}
html body.public-site main>section.section--conversion.section--conversion>.container.conversion-block{border-radius:var(--mt-r,14px)!important}
body.public-site main>section :is(.faq-intro,.faq-grid,.conversion-block,.mt-apps){box-shadow:var(--mt-shadow,0 6px 22px rgba(10,36,64,.06))!important;border-radius:var(--mt-r,14px)!important}
/* 31b. Inner pages: the contact block lines up with the other cards (their container padding is 16px on phone, then 48px easing to 24px by 1240px) */
html body.public-site:not(.template-home) main>section.section--conversion>.container.conversion-block{box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;width:calc(100% - 32px)!important;max-width:none!important}
@media(min-width:725px){html body.public-site:not(.template-home) main>section.section--conversion>.container.conversion-block{width:calc(min(100%,1180px) - 2 * clamp(24px, (1276px - 100%) / 2, 48px))!important}}
/* 32. Form panels (owner): quote/contact/tracking forms sit in one card with the same edges as the other cards and equal inner margins */
html body.public-site main>section>.container.form-panel{box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;width:calc(100% - 32px)!important;max-width:none!important;padding:var(--mt-pad,clamp(18px,1.4vw + 12px,32px))!important;border-radius:var(--mt-r,14px)!important}
@media(min-width:725px){html body.public-site main>section>.container.form-panel{width:calc(min(100%,1180px) - 2 * clamp(24px, (1276px - 100%) / 2, 48px))!important}}
/* 33. Phone form (owner): no white frame around the two form cards, so the margins are not doubled */
@media(max-width:720px){html body.public-site main>section>.container.form-panel{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;width:calc(100% - 32px)!important}html body.public-site main>section>.container.form-panel>.form-panel__intro{padding:20px 18px!important}html body.public-site main>section>.container.form-panel>form{padding:16px 14px!important}}
/* 34. Footer company name wraps inside the frame on narrow phones (owner) */
html body .footer-brand>span{min-width:0!important;flex:1 1 auto}html body .footer-brand strong{white-space:normal!important;overflow-wrap:anywhere}
/* 35. Phones (owner): lighter margins. Every card sits 10px from the screen edge with 14px inside, so text starts 25px from the edge */
@media(max-width:480px){
html body.public-site main>section.section>.container:is(.content-stack,.structured-content-stack,.faq-list,.form-panel){width:calc(100% - 20px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box!important}
html body.public-site main>section.faq-section.faq-section>.container.faq-list{width:calc(100% - 20px)!important;max-width:none!important;padding-left:0!important;padding-right:0!important;margin-left:auto!important;margin-right:auto!important}
html body.public-site main>section.section.section>.container.container:is(.related-links-panel,.conversion-block,.banner,.page-cta){width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:14px!important;padding-right:14px!important;box-sizing:border-box!important}
html body.public-site main>section.section>.container:is(.content-stack)>.content-band,html body.public-site main .structured-group,html body.public-site main .faq-list>:is(.faq-intro,.faq-grid),html body.public-site main>section>.container.form-panel>.form-panel__intro,html body.public-site main>section>.container.form-panel>form{padding-left:14px!important;padding-right:14px!important}
html body.public-site main .structured-group{padding-top:20px!important;padding-bottom:20px!important}
}
/* 36. Tablets 481-1179px (owner): lighter, even margins. Header, breadcrumbs, hero, every card and the footer sit 24px from the edge with 24px inside; the form loses its extra white frame */
@media(min-width:481px) and (max-width:1179px){
html body .site-header>.container,html body nav.breadcrumbs.container,html body.public-site main>section[class*=hero]>.container,html body.public-site main>section[class*=hero] .hero__grid,html body footer .container,html body.public-site main>section.section.section.section>.container.container:is(.content-stack,.structured-content-stack,.faq-list,.hs-lookup-shell){padding-left:24px!important;padding-right:24px!important}
html body.public-site main>section.section.section.section>.container.container.container:is(.form-panel,.conversion-block,.related-links-panel,.page-cta,.banner){width:calc(100% - 48px)!important;max-width:calc(100% - 48px)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;padding-left:24px!important;padding-right:24px!important}
html body.public-site main>section.section.section.section>.container.container.container.form-panel{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body.public-site main>section>.container.form-panel>:is(.form-panel__intro,form),html body.public-site main .content-stack>.content-band,html body.public-site main .structured-group,html body.public-site main .faq-list>:is(.faq-intro,.faq-grid){padding-left:24px!important;padding-right:24px!important}
}
/* 37. GCC tariff item pages in the approved design (owner 2026-11-07, canvas "صفحة البند الجمركي") */
html body.public-site main.hsx>section>.container{box-sizing:border-box;width:100%!important;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}
html body.public-site main.hsx>section.hsx-hero{background:var(--mt-navy,#0a2440)!important;color:#fff}
main.hsx .hsx-hero>.container{padding-top:20px!important;padding-bottom:46px!important;display:flex;flex-direction:column;gap:12px}
main.hsx .hsx-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:14px;color:#b9c8d8;background:none;border:0}
main.hsx .hsx-crumbs a{color:#b9c8d8!important}main.hsx .hsx-crumbs>span:last-child{color:#fff}
main.hsx .hsx-hero .kicker{margin:8px 0 0!important;font-size:15px;font-weight:700;color:#6cc4ff!important;letter-spacing:0;text-transform:none}
main.hsx .hsx-hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
main.hsx .hsx-hero__titles{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 420px}
main.hsx .hsx-hero h1{margin:0!important;color:#fff!important;font-size:clamp(1.75rem,1.1rem + 2.4vw,2.75rem)!important;line-height:1.3!important;font-weight:900}
main.hsx .hsx-hero__other{margin:0;font-size:18px;color:#c9d6e3}
html[dir="rtl"] main.hsx .hsx-hero__other[dir="ltr"]{text-align:right}html body main.hsx .hsx-hero__other[dir="rtl"]{text-align:right;direction:rtl}
main.hsx .hsx-hero__code{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
main.hsx .hsx-hero__code-label{font-size:13px;font-weight:700;color:#b9c8d8}
main.hsx .hsx-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(1.5rem,1rem + 1.4vw,2.125rem);font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:6px 16px;user-select:all;color:#fff}
main.hsx .hsx-body>.container{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;margin-top:-24px!important;padding-bottom:56px!important;position:relative}
main.hsx .hsx-aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--mt-menu-top,80px) + 16px)}
main.hsx .hsx-main{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:24px;min-width:0}
main.hsx .hsx-card{background:#fff;border-radius:var(--mt-r,14px);box-shadow:var(--mt-shadow,0 6px 22px rgba(10,36,64,.06));padding:28px 32px}
main.hsx .hsx-card h2{margin:0 0 16px;font-size:22px;font-weight:800;color:var(--mt-navy,#0a2440)}
main.hsx .hsx-facts{margin:0;display:grid;grid-template-columns:200px minmax(0,1fr);font-size:16px}
main.hsx .hsx-facts dt,main.hsx .hsx-facts dd{margin:0;padding:14px 0;border-top:1px solid var(--mt-line,#e4ecf3)}
main.hsx .hsx-facts dt{color:#4a5b6c;font-weight:700;padding-inline-end:16px}main.hsx .hsx-facts dd{font-weight:600;color:var(--mt-navy,#0a2440)}
html[dir="rtl"] main.hsx .hsx-facts dd[dir="ltr"]{text-align:right}html body main.hsx .hsx-facts dd[dir="rtl"]{text-align:right;direction:rtl}
main.hsx .hsx-states{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
main.hsx .hsx-states li{margin:0;border:1px solid #cfe0ee;background:#f5f9fc;border-radius:10px;padding:12px 14px;font-weight:700;color:var(--mt-navy,#0a2440)}
main.hsx .hsx-note{background:#fff8e8;border:1px solid #f1d9a0;border-radius:var(--mt-r,14px);padding:22px 26px}
main.hsx .hsx-note h2{margin:0 0 6px;font-size:18px;font-weight:800;color:#6b4500}main.hsx .hsx-note p{margin:0;font-size:15px;line-height:1.8;color:#5a4520}
main.hsx .hs-prohibited{background:#fdecec;border:1px solid #f0b4b4;color:#8a1c1c;border-radius:var(--mt-r,14px);padding:18px 22px;font-weight:700;line-height:1.7}
main.hsx .hsx-duty{display:flex;flex-direction:column;gap:2px;padding:26px}
main.hsx .hsx-duty__label{font-size:14px;font-weight:700;color:#4a5b6c}
main.hsx .hsx-duty__value{font-size:64px;line-height:1.1;font-weight:900;color:#007dc5}
main.hsx .hsx-duty__value--text{font-size:30px;line-height:1.3}
html[dir="rtl"] main.hsx .hsx-duty__value{text-align:right}
main.hsx .hsx-duty__basis{font-size:14px;color:#4a5b6c}
main.hsx .hsx-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
main.hsx .hsx-btn{display:flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;line-height:1.35;text-align:center;text-decoration:none!important;font-weight:800;padding:13px 14px;border-radius:10px;border:1px solid transparent;transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease}
main.hsx .hsx-btn:active{transform:scale(.97)}
main.hsx .hsx-btn--primary{background:#0074b7;color:#fff!important}main.hsx .hsx-btn--primary:hover{background:#0a5f95}
main.hsx .hsx-btn--ghost{background:#fff;color:var(--mt-navy,#0a2440)!important;border-color:#9fb6cc}main.hsx .hsx-btn--ghost:hover{background:#0074b7;color:#fff!important;border-color:#0074b7}
main.hsx .hsx-btn--wa{background:#147d3c;color:#fff!important}main.hsx .hsx-btn--wa:hover{background:#0f6630}
@media(max-width:979px){main.hsx .hsx-body>.container{grid-template-columns:minmax(0,1fr)}main.hsx .hsx-aside{grid-column:1;grid-row:auto;position:static}main.hsx .hsx-main{grid-column:1;grid-row:auto}
main.hsx .hsx-duty{display:grid;grid-template-columns:1fr auto;align-items:end}main.hsx .hsx-duty__label{grid-column:1;grid-row:1}main.hsx .hsx-duty__basis{grid-column:1;grid-row:2}main.hsx .hsx-duty__value{grid-column:2;grid-row:1/3;font-size:52px}main.hsx .hsx-duty__value--text{font-size:24px}main.hsx .hsx-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}main.hsx .hsx-btn--primary{grid-column:1/-1}}
@media(max-width:720px){main.hsx .hsx-facts{grid-template-columns:1fr}main.hsx .hsx-facts dt{padding-bottom:0;font-size:13px}main.hsx .hsx-facts dd{border-top:0;padding-top:2px}main.hsx .hsx-states{grid-template-columns:1fr 1fr}main.hsx .hsx-card{padding:20px 14px}main.hsx .hsx-card h2{font-size:19px}main.hsx .hsx-note{padding:18px 14px}}
@media(max-width:480px){html body.public-site main.hsx>section.hsx-body>.container{padding-left:10px!important;padding-right:10px!important}html body.public-site main.hsx>section.hsx-hero>.container{padding-left:16px!important;padding-right:16px!important}main.hsx .hsx-body>.container{gap:14px}main.hsx .hsx-main{gap:14px}}
/* 38. Tariff search heading (owner): two lines, a little more space between them */
html body.public-site main .hs-lookup-heading h1#hs-code-search-title{max-width:14em!important;text-wrap:balance;line-height:1.5!important}
/* 39. GCC item pages: heading size follows the description length (owner 2026-11-07: "الكتابة اوفر") */
html body.public-site main.hsx.hsx--mid .hsx-hero h1{font-size:clamp(1.35rem,1rem + 1.3vw,2rem)!important;line-height:1.45!important}
html body.public-site main.hsx.hsx--long .hsx-hero h1{font-size:clamp(1.1rem,.9rem + .7vw,1.5rem)!important;line-height:1.55!important}
html body main.hsx:is(.hsx--mid,.hsx--long) .hsx-hero__other{font-size:14px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}