/* ============================================================
   ROYAL CONSULTING & TRADING — MODERN MINIMAL REDESIGN
   Global override stylesheet. Loaded LAST so it wins over
   per-page inline styles. Targets the existing class names.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand (slightly de-saturated for a calmer, premium feel) */
  --rc-primary:#0f3d91;
  --rc-primary-600:#0a2e6f;
  --rc-primary-50:#eef3fb;
  --rc-accent:#e85a1a;
  --rc-accent-600:#c94912;

  /* Neutrals */
  --rc-ink:#0b1220;
  --rc-ink-2:#1f2937;
  --rc-muted:#5b6677;
  --rc-muted-2:#8a93a3;
  --rc-line:#e6e9ef;
  --rc-line-2:#eef1f5;
  --rc-bg:#ffffff;
  --rc-bg-soft:#f6f8fc;
  --rc-bg-soft-2:#f0f4fa;

  /* Spacing scale (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px;

  /* Radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* Shadows — soft, low-key */
  --sh-1:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --sh-2:0 4px 12px rgba(15,23,42,.06);
  --sh-3:0 12px 28px rgba(15,23,42,.08);

  /* Layout */
  --rc-container:1240px;
  --rc-gutter:24px;

  /* Override legacy tokens used across pages */
  --blue:var(--rc-primary);
  --blue-light:var(--rc-primary);
  --blue-dark:var(--rc-primary-600);
  --orange:var(--rc-accent);
  --orange-light:var(--rc-accent);
  --orange-dark:var(--rc-accent-600);
  --text-dark:var(--rc-ink);
  --text-gray:var(--rc-muted);
  --gradient-primary:linear-gradient(135deg,var(--rc-primary) 0%,var(--rc-primary-600) 100%);
  --gradient-secondary:linear-gradient(135deg,var(--rc-accent) 0%,var(--rc-accent-600) 100%);
  --gradient-dual:linear-gradient(135deg,var(--rc-primary) 0%,var(--rc-accent) 100%);
  --gradient-dark:linear-gradient(135deg,var(--rc-primary-600) 0%,var(--rc-primary) 100%);
  --shadow-soft:var(--sh-1);
  --shadow-medium:var(--sh-2);
  --shadow-strong:var(--sh-3);
  --shadow-orange:var(--sh-2);
}

/* ---------- 2. BASE ---------- */
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--rc-bg);
  color:var(--rc-ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  max-width:100vw;
}
html{overflow-x:hidden;max-width:100vw}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{color:var(--rc-primary);transition:color .2s}
a:hover{color:var(--rc-primary-600)}
::selection{background:var(--rc-primary);color:#fff}

h1,h2,h3,h4,h5,h6{color:var(--rc-ink);font-weight:700;letter-spacing:-.01em;margin-top:0}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,2.8vw,2.25rem);line-height:1.2;letter-spacing:-.015em}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.3}
p{color:var(--rc-muted)}

/* ---------- 3. CONTAINER — tighter, centered, less padding ---------- */
.container-fluid,
.about-section .container-fluid,
.testimonials-section .container-fluid,
.cta-section .container-fluid{
  width:100% !important;
  max-width:var(--rc-container) !important;
  margin:0 auto !important;
  padding-left:var(--rc-gutter) !important;
  padding-right:var(--rc-gutter) !important;
}
@media(min-width:1400px){
  :root{--rc-container:1280px;--rc-gutter:32px}
}
@media(max-width:768px){
  :root{--rc-gutter:18px}
}

/* ---- HEADER + FOOTER are BOXED (matching all other sections) ----
   User prefers centered inner content. The dark/white backgrounds still
   span edge-to-edge (they're on the section element itself), but the
   logo / menu / footer columns are aligned within --rc-container width
   for a clean, consistent layout from top to bottom of every page. */
.top-bar .container-fluid,
.navbar-main .container-fluid,
.footer-main .container-fluid,
.footer-main .footer-inner > .container-fluid,
.footer-bottom .container-fluid{
  max-width:var(--rc-container) !important;
  margin:0 auto !important;
  padding-left:var(--rc-gutter) !important;
  padding-right:var(--rc-gutter) !important;
}

/* ---- BOX home sections that don't use .container-fluid ----
   Featured Products, Shows, Solutions use .sec-wrap.
   Categories uses .cat-layout directly. Pin all to the same boxed container. */
.sec-wrap,
.categories-section > .cat-layout{
  max-width:var(--rc-container) !important;
  margin:0 auto !important;
  padding-left:var(--rc-gutter) !important;
  padding-right:var(--rc-gutter) !important;
}
@media(min-width:1400px){
  .sec-wrap,
  .categories-section > .cat-layout{padding-left:32px !important;padding-right:32px !important}
}
@media(max-width:768px){
  .sec-wrap,
  .categories-section > .cat-layout{padding-left:18px !important;padding-right:18px !important}
}

/* ---------- 4. SECTION SPACING — consistent rhythm ---------- */
.about-section,
.categories-section,
.products-section,
.shows-section,
.solutions-section,
.testimonials-section,
.cta-section,
section[class*="-section"]{
  padding:var(--s-11) 0 !important;
  position:relative;
}
@media(max-width:992px){
  .about-section,.categories-section,.products-section,.shows-section,
  .solutions-section,.testimonials-section,.cta-section,
  section[class*="-section"]{padding:var(--s-10) 0 !important}
}
@media(max-width:600px){
  .about-section,.categories-section,.products-section,.shows-section,
  .solutions-section,.testimonials-section,.cta-section,
  section[class*="-section"]{padding:var(--s-9) 0 !important}
}

/* Remove noisy decorative tops/dot-grids on light sections */
.about-section::before,
.products-section::before,
.solutions-section::before,
.shows-section::before{display:none !important}

/* Calm down loud gradient backgrounds */
.shows-section{background:var(--rc-bg-soft) !important}
.categories-section{background:var(--rc-bg-soft-2) !important}
.testimonials-section{background:var(--rc-bg-soft) !important}
.cta-section{background:var(--rc-primary) !important;color:#fff !important}
.cta-section h1,.cta-section h2,.cta-section h3,.cta-section p,
.cta-section .sec-title,.cta-section .sec-sub{color:#fff !important}

/* ---------- 5. SECTION HEADERS ---------- */
.sec-title,.section-title,h2.title{
  font-size:clamp(1.6rem,2.6vw,2.1rem) !important;
  font-weight:700 !important;
  color:var(--rc-ink) !important;
  margin:0 0 var(--s-3) !important;
  letter-spacing:-.015em !important;
}
.sec-sub,.section-sub,.sec-desc{
  color:var(--rc-muted) !important;
  font-size:1rem !important;
  max-width:640px;
  /* Only force top/bottom margin — leave left/right alone so per-page rules
     can center the block (e.g. testimonials/CTA sections). */
  margin-top:0 !important;
  margin-bottom:var(--s-8) !important;
}

/* Eyebrow / pill labels — minimal */
.sec-label,.eyebrow,.badge-eyebrow,[class*="-eyebrow"]{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  font-weight:600 !important;
  color:var(--rc-primary) !important;
  background:var(--rc-primary-50) !important;
  padding:6px 12px !important;
  border-radius:var(--r-pill) !important;
  margin-bottom:var(--s-4) !important;
  border:0 !important;
}

/* ---------- 6. BUTTONS ---------- */
.btn,
.btn-request,
.btn-primary,
.btn-secondary,
.btn-outline,
button[class*="btn-"],
a[class*="btn-"]{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  gap:10px;
  font-family:inherit;
  font-size:.88rem !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  padding:12px 22px !important;
  border-radius:var(--r-md) !important;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space:nowrap;
  line-height:1.2;
  box-shadow:none !important;
}
.btn-request,.btn-primary{
  background:var(--rc-accent) !important;
  color:#fff !important;
  border-color:var(--rc-accent) !important;
}
.btn-request:hover,.btn-primary:hover{
  background:var(--rc-accent-600) !important;
  border-color:var(--rc-accent-600) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:var(--sh-2) !important;
}
/* COMPACT navbar Request Quotation button — must override the generic button sizing above */
.navbar-main .btn-request,
.navbar-actions .btn-request{
  font-size:.72rem !important;
  font-weight:600 !important;
  padding:8px 14px !important;
  gap:6px !important;
  border-radius:8px !important;
  letter-spacing:.2px !important;
}
.navbar-main .btn-request i,
.navbar-actions .btn-request i{font-size:.66rem !important}
.btn-secondary{
  background:var(--rc-primary) !important;
  color:#fff !important;
  border-color:var(--rc-primary) !important;
}
.btn-secondary:hover{background:var(--rc-primary-600) !important;color:#fff !important}
.btn-outline{
  background:transparent !important;
  color:var(--rc-ink) !important;
  border-color:var(--rc-line) !important;
}
.btn-outline:hover{
  background:var(--rc-ink) !important;color:#fff !important;border-color:var(--rc-ink) !important;
}

/* ---------- 7. CARDS — flat, clean, low shadow ---------- */
.card,.product-card,.category-card,.show-card,.blog-card,
.solution-card,.testimonial-card,.cat-card,.feat-card,
[class*="-card"]{
  background:#fff !important;
  border:1px solid var(--rc-line) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:none !important;
  transition:transform .2s, box-shadow .2s, border-color .2s !important;
  overflow:hidden;
}
.card:hover,.product-card:hover,.category-card:hover,.show-card:hover,
.blog-card:hover,.solution-card:hover,.cat-card:hover,.feat-card:hover,
[class*="-card"]:hover{
  transform:translateY(-2px) !important;
  border-color:transparent !important;
  box-shadow:var(--sh-2) !important;
}

/* Product / category card image areas — consistent aspect */
.product-card .img-wrap,.product-card .product-image,
.cat-card .cat-img,.category-card .img-wrap{
  aspect-ratio:4/3;background:var(--rc-bg-soft);overflow:hidden;
}
.product-card img,.cat-card img,.category-card img,.show-card img,.blog-card img{
  width:100%;height:100%;object-fit:cover;transition:transform .4s ease;
}
.product-card:hover img,.cat-card:hover img,.category-card:hover img,
.show-card:hover img,.blog-card:hover img{transform:scale(1.04)}

/* ---------- 8. FORMS ---------- */
.form-control,input[type="text"],input[type="email"],input[type="tel"],
input[type="number"],input[type="search"],input[type="url"],
input[type="date"],input[type="password"],select,textarea{
  width:100%;
  background:#fff !important;
  border:1px solid var(--rc-line) !important;
  border-radius:var(--r-md) !important;
  padding:12px 14px !important;
  font-family:inherit;
  font-size:.92rem !important;
  color:var(--rc-ink) !important;
  transition:border-color .15s, box-shadow .15s;
  box-shadow:none !important;
  outline:0;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--rc-primary) !important;
  box-shadow:0 0 0 3px rgba(15,61,145,.12) !important;
}
label,.form-label{
  font-size:.82rem;font-weight:600;color:var(--rc-ink-2);
  margin-bottom:6px;display:block;letter-spacing:.005em;
}
textarea{min-height:120px;resize:vertical}

/* ---------- 9. NAVBAR refinements ---------- */
.top-bar{font-size:.78rem !important;background:var(--rc-primary-600) !important}
.top-bar .container-fluid{height:38px !important}
.top-bar-item{font-size:.74rem !important;padding:0 14px !important}
.navbar-main .container-fluid{height:68px !important}
.navbar-menu li a{font-size:.86rem !important;padding:8px 12px !important}
.navbar-menu li a.active,.navbar-menu li a:hover{
  background:transparent !important;color:var(--rc-primary) !important;
}
.navbar-menu li a.active::after{background:var(--rc-primary) !important}
.navbar-brand .logo-text .big{
  background:none !important;-webkit-text-fill-color:initial !important;
  color:var(--rc-primary) !important;
}

/* ---------- 10. HERO / BANNERS — tighter ---------- */
.hero-section,.page-hero,.banner-section,[class*="hero-"][class*="-section"]{
  padding:var(--s-11) 0 !important;
}
@media(max-width:768px){
  .hero-section,.page-hero,.banner-section{padding:var(--s-9) 0 !important}
}

/* ---------- 11. GRID HELPERS used in pages ---------- */
.products-grid,.categories-grid,.shows-grid,.blogs-grid,.solutions-grid,
.featured-booth-grid,.cat-layout{
  display:grid !important;
  gap:var(--s-6) !important;
}
.products-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important}
/* Categories grid — force ALL into one row (4 cards), shrink as viewport narrows. */
.categories-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
}
@media(max-width:760px){
  .categories-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
}
@media(max-width:480px){
  .categories-grid{grid-template-columns:1fr !important}
}
.shows-grid,.blogs-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important}
.solutions-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important}

/* ---------- 12. FOOTER ---------- */
footer,.footer,.site-footer{
  background:var(--rc-ink) !important;color:#cfd6e2 !important;
  padding:var(--s-11) 0 var(--s-6) !important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5{color:#fff !important}
footer a,.footer a{color:#cfd6e2 !important;text-decoration:none;transition:color .2s}
footer a:hover,.footer a:hover{color:#fff !important}
footer hr,.footer hr{border-color:rgba(255,255,255,.08) !important}

/* ---------- 13. UTILITIES & CLEANUP ---------- */
/* Kill excessive section decorations */
.about-section .deco,.products-section .deco,.solutions-section .deco,
[class*="-section"] .bg-decoration,[class*="-section"] .bg-shape,
[class*="-section"] .floating-shape{display:none !important}

/* Soften any "glow" boxes */
[style*="box-shadow"][class*="card"],
[style*="box-shadow"][class*="hero"]{box-shadow:var(--sh-1) !important}

/* Tighten inline padding heavy hitters */
[style*="padding:80px"],[style*="padding: 80px"]{padding:var(--s-10) 0 !important}
[style*="padding:96px"],[style*="padding: 96px"]{padding:var(--s-11) 0 !important}
[style*="padding:100px"],[style*="padding: 100px"]{padding:var(--s-11) 0 !important}
[style*="padding:120px"],[style*="padding: 120px"]{padding:var(--s-11) 0 !important}

/* Empty-state text */
.empty-state,.no-data{
  text-align:center;color:var(--rc-muted) !important;
  padding:var(--s-10) var(--s-4) !important;
  border:1px dashed var(--rc-line);border-radius:var(--r-lg);
  background:var(--rc-bg-soft);
}

/* Tables (admin and frontend lists) */
table{border-collapse:collapse;width:100%}
th{font-weight:600;color:var(--rc-ink-2);text-align:left;
   padding:12px;border-bottom:1px solid var(--rc-line);background:var(--rc-bg-soft);font-size:.82rem;letter-spacing:.02em;text-transform:uppercase}
td{padding:12px;border-bottom:1px solid var(--rc-line-2);font-size:.9rem;color:var(--rc-ink-2)}

/* Breadcrumbs */
.breadcrumb,.breadcrumbs{
  padding:var(--s-3) 0 !important;
  font-size:.82rem;color:var(--rc-muted);
  background:transparent !important;margin:0 !important;
}
.breadcrumb a,.breadcrumbs a{color:var(--rc-muted)}
.breadcrumb a:hover,.breadcrumbs a:hover{color:var(--rc-primary)}

/* Badges */
.badge,.tag,.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--rc-bg-soft);color:var(--rc-ink-2);
  letter-spacing:.02em;
}

/* Pagination */
.pagination a,.pagination span,.pager a,.pager span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:var(--r-md);border:1px solid var(--rc-line);
  margin:2px;color:var(--rc-ink-2);text-decoration:none;font-size:.85rem;
  background:#fff;transition:.15s;
}
.pagination a:hover,.pager a:hover{border-color:var(--rc-primary);color:var(--rc-primary)}
.pagination .active,.pagination .current,.pager .current{
  background:var(--rc-primary);border-color:var(--rc-primary);color:#fff;
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cdd3de;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#9aa3b2}
::-webkit-scrollbar-track{background:transparent}

/* Focus visibility for accessibility */
:focus-visible{outline:2px solid var(--rc-primary);outline-offset:2px;border-radius:6px}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}