/* =====================================================================
   Visa Qatar · Shared Design Layer v1
   ------------------------------------------------------------
   Global visual modernization layer: typography scale, buttons,
   forms, cards, tables, footer, responsive + reduced-motion rules.
   Palette derived from the site's own brand colors (Qatar maroon
   #aa082a / #7e0303, crimson #b03a2e, navy #154360, tint #fdecee).
   Loaded AFTER the existing styles. Additive only: no content, IDs,
   names or JS is touched; functional/stateful classes and semantic
   state colors (errors red, success green, warnings amber) are
   intentionally left untouched.
   ===================================================================== */

/* ---------- Brand tokens ---------- */
:root{
  --vq-wine:#aa082a;
  --vq-wine-deep:#7e0303;
  --vq-crimson:#b03a2e;
  --vq-crimson-dark:#a21b0d;
  --vq-wine-darker:#640202;
  --vq-navy:#154360;
  --vq-tint:#fdecee;
  --vq-line:#f1d3d8;
  --vq-soft:#f4f6f8;
  --vq-ink:#212529;
  --vq-muted:#5c6672;
  --vq-radius:10px;
  --vq-radius-lg:14px;
  --vq-shadow:0 8px 24px rgba(21,44,62,.08);
  --vq-shadow-hover:0 14px 34px rgba(170,8,42,.16);
  --vq-ease:cubic-bezier(.25,.8,.35,1);
}

/* ---------- Typography scale & readability ---------- */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  letter-spacing:.01em;
  font-feature-settings:"kern" 1;
}
::selection{
  background:rgba(170,8,42,.18);
  color:var(--vq-wine-deep);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  letter-spacing:-.006em;
  text-wrap:balance;
}
h1{line-height:1.15}
h2{line-height:1.2}
h3{line-height:1.25}
h4,h5{line-height:1.3}
p{
  line-height:1.75;
  overflow-wrap:break-word;
}

/* ---------- Page header band (shared across pages) ---------- */
.menu_head{position:relative}
.menu_head::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin:14px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--vq-wine),var(--vq-crimson));
}
.bg-page-head{
  background:linear-gradient(135deg,#ffffff 0%,var(--vq-tint) 55%,#ffffff 100%);
  border-bottom:1px solid var(--vq-line);
}
.margin-top{
  background:linear-gradient(90deg,#ffffff 0%,var(--vq-soft) 45%,#ffffff 100%);
  box-shadow:inset 0 -1px 0 var(--vq-line);
  height:auto;
  min-height:95px;
}

/* ---------- Section headings (content pages) ---------- */
section h2{
  border-bottom:1px solid var(--vq-line);
  padding-bottom:10px;
}
section h2::after{
  content:"";
  display:inline-block;
  width:44px;
  height:3px;
  margin-left:10px;
  background:linear-gradient(90deg,var(--vq-wine),var(--vq-crimson));
  border-radius:2px;
}
section h3{margin-top:28px}
section p{margin-bottom:1.1em}
section ul,section ol{
  margin:14px 0 18px;
  padding-left:1.5rem;
}
section ul li,section ol li{
  line-height:1.75;
  margin-bottom:6px;
}
section ul li::marker{color:var(--vq-wine)}
section ol li::marker{color:var(--vq-wine);font-weight:600}
section blockquote{
  border-left:4px solid var(--vq-wine);
  background:var(--vq-tint);
  border-radius:0 10px 10px 0;
  padding:14px 18px;
  margin:20px 0;
}
hr{
  border:0;
  border-top:1px solid var(--vq-line);
  margin:30px 0;
}

/* ---------- Links ---------- */
a{transition:color .18s var(--vq-ease)}
.navbar .navbar-nav .nav-link{letter-spacing:.012em}
.navbar .navbar-nav .nav-link:hover{letter-spacing:.02em}

/* ---------- Buttons (additive polish; colors & states untouched) ---------- */
.btn,.btn-apply,.submit_btn,.toggle-apply-btn{
  letter-spacing:.01em;
  transition:background-color .18s var(--vq-ease),color .18s var(--vq-ease),
    box-shadow .18s var(--vq-ease),transform .18s var(--vq-ease),
    border-color .18s var(--vq-ease);
}
.btn{border-radius:9px}
.btn:hover,.btn-apply:hover,.submit_btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(126,3,3,.22);
}
.btn:active,.btn-apply:active,.submit_btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(126,3,3,.18);
}
.bh-btn-primary{
  border-radius:10px;
  box-shadow:0 10px 24px rgba(170,8,42,.28);
}
.bh-btn-primary:hover{
  box-shadow:0 14px 30px rgba(170,8,42,.34);
  transform:translateY(-1px);
}
button[type="submit"],input[type="submit"]{
  border-radius:8px;
  letter-spacing:.01em;
  transition:box-shadow .18s var(--vq-ease),transform .18s var(--vq-ease);
}

/* ---------- Forms (structure/focus polish; state colors untouched) ---------- */
label,.label{
  font-weight:600;
  letter-spacing:.01em;
}
.form-control,.form-select{
  border-radius:9px;
  transition:border-color .16s var(--vq-ease),box-shadow .16s var(--vq-ease);
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus){
  border-color:#aeb9c4;
}
.form-control:focus,
.form-select:focus{
  border-color:var(--vq-wine);
  box-shadow:0 0 0 .25rem rgba(170,8,42,.14);
}
input[type="text"],input[type="email"],input[type="tel"],
input[type="password"],input[type="number"],input[type="date"],
select,textarea{
  border-radius:8px;
  font-size:15px;
  transition:border-color .16s var(--vq-ease),box-shadow .16s var(--vq-ease),
    background-color .16s var(--vq-ease);
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,
input[type="password"]:focus,input[type="number"]:focus,
select:focus,textarea:focus{
  outline:none;
  border-color:var(--vq-wine);
  box-shadow:0 0 0 .22rem rgba(170,8,42,.13);
}

/* ---------- Cards & panels ---------- */
.card,.counter,.fruite-item,.vesitable-item,
.destination-card,.qatar-evisa-type-card,.contact-form-card{
  border-radius:var(--vq-radius-lg);
}
.counter,.fruite-item,.vesitable-item{
  box-shadow:0 4px 16px rgba(21,44,62,.05);
  transition:transform .22s var(--vq-ease),box-shadow .22s var(--vq-ease);
}
.counter:hover,.fruite-item:hover,.vesitable-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--vq-shadow-hover);
}
.rounded{border-radius:12px}

/* ---------- Tables ---------- */
:where(.table){
  border-radius:var(--vq-radius);
  overflow:hidden;
}
:where(.table > :not(caption) > tr > th){
  letter-spacing:.02em;
}
:where(.table > :not(caption) > tr){
  transition:background-color .15s var(--vq-ease);
}

/* ---------- Accordion (content pages; state classes untouched) ---------- */
.accordion_t{
  transition:background-color .18s var(--vq-ease),box-shadow .18s var(--vq-ease);
}
.accordion_t:hover{
  box-shadow:0 6px 18px rgba(21,44,62,.08);
}
.accordion_t:not(.active_t){
  border-radius:8px;
}

/* ---------- Footer & copyright ---------- */
.footer .footer-links a{
  line-height:2.1;
  letter-spacing:.012em;
  padding:1px 0;
}
.footer .footer-links i{
  opacity:.55;
  width:16px;
}
.footer .footer-links li a:hover i{
  opacity:.9;
}
.copyright{
  letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.07);
}

/* ---------- Back to top ---------- */
.back-to-top{
  border-radius:99px;
  box-shadow:0 8px 20px rgba(21,44,62,.22);
}

/* ---------- Focus visibility ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid rgba(170,8,42,.55);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--vq-soft)}
::-webkit-scrollbar-thumb{
  background:#c3ccd6;
  border-radius:99px;
  border:3px solid var(--vq-soft);
}
::-webkit-scrollbar-thumb:hover{background:var(--vq-crimson)}

/* ---------- Responsive refinements ---------- */
@media (max-width:767.98px){
  .menu_head::after{width:54px;height:3px;margin-top:12px}
  .footer .footer-links a{line-height:2.25}
  .margin-top{min-height:0;flex-direction:column;text-align:center}
  :where(.table){display:block;overflow-x:auto;white-space:normal}
  .btn:hover,.btn-apply:hover,.submit_btn:hover{transform:none}
  section h2::after{width:34px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .btn:hover,.btn-apply:hover,.submit_btn:hover,
  .counter:hover,.fruite-item:hover,.vesitable-item:hover{
    transform:none;
  }
}