/* McDonald's look & feel — Bootstrap 5 friendly overrides (RTL scoped) */
html body,html *{
    font-family: "Tajawal", sans-serif; 
}
.theme-mcd{
  direction: rtl;   /* Force Right-to-Left */
  unicode-bidi: bidi-override;

  /* Brand palette */
  --mcd-red: #DA291C;
  --mcd-red-dark: #b22016;
  --mcd-gold: #FFC72C;
  --mcd-gold-dark: #E6B400;
  --mcd-cream: #FFF5E1;

  /* Bootstrap CSS variables (v5.3 uses these at runtime) */
  --bs-primary: var(--mcd-red);
  --bs-primary-rgb: 218,41,28;
  --bs-warning: var(--mcd-gold);
  --bs-warning-rgb: 255,199,44;
  --bs-link-color: var(--mcd-red);

  background-color: var(--mcd-cream);
  color: #1a1a1a;
}

/* ---------- Header / Navbar ---------- */
.theme-mcd .navbar{
  background-color:#fff !important;
  border-bottom:3px solid var(--mcd-gold);
}
.theme-mcd .navbar-brand{ color:var(--mcd-red) !important; font-weight:700; }
.theme-mcd .navbar .nav-link{ color:#333; }
.custom-active:hover{ color: White !important; }

.theme-mcd .navbar .link-body-emphasis:hover,
.theme-mcd .navbar .nav-link.active{ color:var(--mcd-red) !important; }

/* ---------- Cards (brand grid) ---------- */
.theme-mcd .brand-card{
  border-top:4px solid var(--mcd-gold);
  transition: transform .15s ease, box-shadow .15s ease;
  border-radius:.75rem;
  text-align: right; /* RTL align text */
}
.theme-mcd .brand-card:hover{
  transform: translateY(-2px);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.08) !important;
}
.theme-mcd .brand-card img{ max-height:70px; object-fit:contain; }

/* ---------- Buttons ---------- */
.theme-mcd .btn-primary{
  --bs-btn-bg: var(--mcd-red);
  --bs-btn-border-color: var(--mcd-red);
  --bs-btn-hover-bg: var(--mcd-red-dark);
  --bs-btn-hover-border-color: var(--mcd-red-dark);
  --bs-btn-active-bg: var(--mcd-red-dark);
  --bs-btn-active-border-color: var(--mcd-red-dark);
}
.card-img-top{
  object-fit: cover !important;
  aspect-ratio: 1/1;
}

.theme-mcd .btn-outline-primary{
  --bs-btn-color: var(--mcd-red);
  --bs-btn-border-color: var(--mcd-red);
  --bs-btn-hover-bg: var(--mcd-red);
  --bs-btn-hover-border-color: var(--mcd-red);
  --bs-btn-hover-color:#fff;
}

.theme-mcd .btn-success{ /* Use “gold” for positive actions */
  --bs-btn-bg: var(--mcd-gold);
  --bs-btn-border-color: var(--mcd-gold);
  --bs-btn-color:#111;
  --bs-btn-hover-bg: var(--mcd-gold-dark);
  --bs-btn-hover-border-color: var(--mcd-gold-dark);
  --bs-btn-hover-color:#111;
}

/* ---------- Forms ---------- */
.theme-mcd .form-control:focus{
  border-color: var(--mcd-red);
  box-shadow: 0 0 0 .2rem rgba(218,41,28,.25);
  text-align: right; /* input text RTL */
}

/* ---------- Modals ---------- */
.theme-mcd .modal-header{
  background: var(--mcd-red);
  color:#fff;
  border-bottom:0;
  justify-content: flex-start; /* because RTL flips flexbox */
}
.theme-mcd .modal-header .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%); /* make the X white */
  margin-right: auto; /* push close button to the left in RTL */
  margin-left: 0;
}
.theme-mcd #couponCode{ color:var(--mcd-red); text-align: right; }

/* ---------- Misc ---------- */
/* Only color links in the main content, not the navbar */
.theme-mcd main a { color: var(--mcd-red); }
/* Ensure navbar links use the classes we set (inherit/text-white) */
.theme-mcd .navbar .nav-link { color: inherit; text-align: right; }