/* e-matrica clone — tiny overrides ON TOP of the official vendored CSS
   (only what our wiring needs; the design is 100% theirs) */

/* language dropdown (our functional switcher in their header slot) */
.ema-lang-wrap { position: relative; }
.ema-lang-btn {
  background: none; border: 0; cursor: pointer; font: inherit; color: #1a3a5c;
  display: flex; align-items: center; gap: 2px; padding: 4px 2px; font-size: 14px;
}
.ema-lang-menu {
  position: absolute; right: 0; top: 100%; z-index: 9000; background: #fff;
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.18); min-width: 130px;
  padding: 6px 0;
}
.ema-lang-menu a { display: block; padding: 8px 16px; color: #1a3a5c; text-decoration: none; font-size: 14px; }
.ema-lang-menu a:hover { background: #f0f4f8; }

/* header nav items (their header-menu classes exist but links need basics) */
.header-menu-item { color: #1a3a5c; text-decoration: none; margin-left: 28px; font-size: 15px; }
.header-menu-item:hover { text-decoration: underline; }
.primary { background-color: #005baa !important; border-color: #005baa !important; }

/* wizard flow content inside their card */
#ema-flow { max-width: 720px; margin: 0 auto; }
#ema-flow .v-btn--block { width: 100%; }

/* our step buttons use their button look */
.ema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: #90a4ae; color: #fff; border: 0; border-radius: 4px;
  min-height: 44px; padding: 0 20px; font: 500 15px/1 'Inter', sans-serif;
  letter-spacing: .02em; cursor: pointer; width: 100%; margin-top: 28px;
  transition: background-color .15s;
}
.ema-btn.on { background-color: #005baa; }
.ema-btn.on:hover { background-color: #004a8f; }
.ema-btn.secondary { background-color: #fff; color: #005baa; border: 1px solid #005baa; width: auto; margin-top: 14px; min-height: 38px; padding: 0 16px; }

/* form fields in their v-text-field look (functional natives inside) */
.ema-field { margin-bottom: 16px; }
.ema-field label { display: block; font-size: 13px; color: #546e7a; margin-bottom: 4px; }
.ema-field input, .ema-field select {
  width: 100%; border: 0; border-bottom: 1px solid #90a4ae; border-radius: 0;
  background: #f0f4f8; padding: 12px 12px 10px; font: 400 15px 'Inter', sans-serif;
  color: #1a3a5c; outline: none;
}
.ema-field input:focus, .ema-field select:focus { border-bottom: 2px solid #005baa; background: #e8eef4; }
.ema-field .err { color: #b3261e; font-size: 12px; margin-top: 4px; display: none; }
.ema-field.bad input, .ema-field.bad select { border-bottom: 2px solid #b3261e; }
.ema-field.bad .err { display: block; }
.ema-2col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
@media (max-width: 640px) { .ema-2col { grid-template-columns: 1fr; } }

/* option cards (validity) in the tile rhythm */
.ema-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1.5px solid #cfd8dc; border-radius: 6px; background: #fff;
  padding: 13px 16px; margin-bottom: 10px; cursor: pointer;
  font: 500 15px 'Inter', sans-serif; color: #1a3a5c;
}
.ema-opt small { display: block; color: #78909c; font-weight: 400; margin-top: 2px; }
.ema-opt:hover { border-color: #005baa; }
.ema-opt.sel { border-color: #005baa; box-shadow: 0 0 0 3px rgba(0,91,170,.16); }
.ema-opt .price { font-weight: 700; color: #005baa; white-space: nowrap; }

/* summary table */
.ema-summary { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ema-summary th, .ema-summary td { text-align: left; padding: 10px 4px; border-bottom: 1px solid #eceff1; font-size: 14.5px; }
.ema-summary th { color: #78909c; font-weight: 500; width: 48%; }
.ema-summary td { color: #1a3a5c; font-weight: 500; }
.ema-summary tr.total th, .ema-summary tr.total td { border-bottom: 0; font-size: 18px; font-weight: 700; color: #005baa; padding-top: 14px; }
.ema-summary tr.fee th, .ema-summary tr.fee td { color: #78909c; font-size: 13.5px; }

/* error box */
.ema-error { background: #fdecea; border: 1px solid #f5c6c0; color: #b3261e; border-radius: 6px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }

/* checkbox row */
.ema-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #455a64; margin: 14px 0 4px; }
.ema-check input { margin-top: 2px; }

/* card logos */
.ema-cardlogos { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; color: #78909c; font-size: 13px; }
.ema-cardlogos svg { height: 26px; width: auto; }

/* official header is position:fixed (48px top bar + 96px nav) — reserve
   the same offset so page content starts below it; on mobile the top
   bar is hidden so only 96px applies */
.v-main { padding-top: 144px !important; }
@media (max-width: 960px) { .v-main { padding-top: 96px !important; } }

/* language selector sits at the far right of the 48px top bar */
.header-container-top .language-selector-content { margin-left: auto; }

/* --- mobile header (their scoped rules rely on the live app; statically
   we force the essentials: hamburger left, centered shield logo) --- */
@media (max-width: 960px) {
  .header-content .header-container { display: flex !important; align-items: center !important; height: 64px !important; padding: 0 10px !important; }
  .header-content .header-container > .nav-item-group.d-none { display: flex !important; align-items: center !important; justify-content: center; width: 100%; }
  .header-content .header-container .header-logo { display: block !important; height: 50px !important; }
  .header-content .header-container .header-logo img { height: 50px !important; }
  .header-content .header-container .header-title { display: none !important; }
  .header-content .header-menu { display: none !important; }
  .header-content .nav-menu-mobil { display: flex !important; align-items: center !important; position: absolute; left: 6px; top: 12px; z-index: 2; }
  .header-content .nav-menu-mobil #loggedInHeader--mobil-hamburgerBtn { display: inline-flex !important; width: 40px !important; height: 40px !important; }
  .header-content .v-navigation-drawer { display: none !important; }
  .header-content .ml-auto { display: none !important; }
}

/* --- official lookup blocks (live fee refresh + vignette register check) ---
   Same design system as the clone: Inter, navy #005baa/#1a3a5c, 4-6px radius. */
.ema-fees-note {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  color: #1e7a46; font: 500 13.5px 'Inter', sans-serif; margin: 2px 0 14px;
}
.ema-fees-note[hidden] { display: none; }
.ema-fees-note small { color: #78909c; font-weight: 400; font-size: 12px; }

.ema-lookup { margin: 20px 0 2px; }
.ema-lookup .ema-btn.secondary { margin-top: 0; }
.ema-btn[disabled] { opacity: .6; cursor: default; }
.ema-lookup-box {
  border-radius: 6px; padding: 11px 14px; margin-top: 10px;
  font: 500 14px 'Inter', sans-serif; line-height: 1.45;
}
.ema-lookup-box[hidden] { display: none; }
.ema-lookup-box small { display: block; font-weight: 400; font-size: 12px; color: #78909c; margin-top: 3px; }
.ema-lookup-box.loading { background: #eef4fb; border: 1px solid #cfdeef; color: #1a3a5c; }
.ema-lookup-box.ok { background: #e9f7ef; border: 1px solid #bfe6cf; color: #1e7a46; }
.ema-lookup-box.ok small { color: #5a8a6e; }
.ema-lookup-box.info { background: #f0f4f8; border: 1px solid #d5dee6; color: #455a64; }
.ema-spin {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(0, 91, 170, .25); border-top-color: #005baa; border-radius: 50%;
  animation: ema-spin .9s linear infinite;
}
@keyframes ema-spin { to { transform: rotate(360deg); } }

/* --- "E-vignette information" dropdown (desktop, hover/focus) --- */
.menu-drop { position: relative; }
.menu-drop .ema-drop {
  display: none; position: absolute; left: 0; top: 100%; z-index: 9000;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  min-width: 210px; padding: 6px 0;
}
.menu-drop:hover .ema-drop, .menu-drop:focus-within .ema-drop { display: block; }
.menu-drop .ema-drop a {
  display: block; padding: 10px 18px; color: #1a3a5c; text-decoration: none;
  font: 400 14px 'Inter', sans-serif; white-space: nowrap;
}
.menu-drop .ema-drop a:hover { background: #f0f4f8; }

/* --- mobile drawer: hamburger opens it (.ema-open via footer script) --- */
@media (max-width: 960px) {
  .header-content .v-navigation-drawer.ema-open {
    display: block !important; transform: none !important; visibility: visible !important;
    position: fixed !important; z-index: 10000; background: #fff; overflow-y: auto;
    box-shadow: 4px 0 18px rgba(0,0,0,.25);
  }
  .header-content .v-navigation-drawer.ema-open .header-menu { display: block !important; }
}
.v-list-group__items.ema-drawer-items { display: block; }
.v-list-group__items.ema-drawer-items a { padding-left: 24px; text-decoration: none; }
.v-list-group__items.ema-drawer-items a .v-list-item__title { color: #1a3a5c; font-size: 14px; }

/* --- renew CTA inside the lookup-ok box --- */
.ema-lookup-box .ema-renew { margin-top: 8px; }

/* --- FAQ section (index landing) --- */
.ema-faq { max-width: 720px; margin: 28px auto 8px; padding: 0 16px; }
.ema-faq h2 { margin-bottom: 14px; }
.ema-faq-item {
  border: 1.5px solid #cfd8dc; border-radius: 6px; background: #fff;
  margin-bottom: 10px; overflow: hidden;
}
.ema-faq-item summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 500 15px 'Inter', sans-serif; color: #1a3a5c;
}
.ema-faq-item summary::-webkit-details-marker { display: none; }
.ema-faq-item summary::after {
  content: "▾"; float: right; color: #005baa; transition: transform .15s;
}
.ema-faq-item[open] summary::after { transform: rotate(180deg); }
.ema-faq-item .ema-faq-a { padding: 0 16px 14px; }
.ema-faq-item .ema-faq-a p { font: 400 14px/1.55 'Inter', sans-serif; color: #455a64; margin: 0 0 6px; }
.ema-faq-item .ema-faq-a .ema-btn.secondary { margin-top: 4px; }

/* --- Díjak / Prices page --- */
.ema-price-card {
  border: 1.5px solid #cfd8dc; border-radius: 8px; background: #fff;
  margin-bottom: 18px; overflow: hidden;
}
.ema-price-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #f0f4f8; font: 600 15.5px 'Inter', sans-serif; color: #1a3a5c;
}
.ema-price-head .mdi { color: #005baa; font-size: 22px; }
.ema-price-head small { color: #78909c; font-weight: 400; }
.ema-price-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 11px 16px; border-top: 1px solid #eceff1;
}
.ema-price-row b { font: 500 14.5px 'Inter', sans-serif; color: #1a3a5c; }
.ema-price-row small { display: block; color: #78909c; font-size: 12px; margin-top: 1px; }
.ema-price-row .price { font-weight: 700; color: #005baa; white-space: nowrap; font-size: 15px; }
.ema-price-row .ema-btn.secondary { margin-top: 0; min-height: 34px; }
.ema-service-fee {
  background: #eef4fb; border: 1px solid #cfdeef; border-radius: 6px;
  padding: 11px 14px; font: 500 14px 'Inter', sans-serif; color: #1a3a5c; margin-top: 6px;
}
@media (max-width: 640px) {
  .ema-price-row { grid-template-columns: 1fr auto; }
  .ema-price-row .ema-btn.secondary { grid-column: 1 / -1; width: 100%; }
}

/* --- Vásárlásaim account modal --- */
.ema-modal-wrap {
  position: fixed; inset: 0; z-index: 12000; background: rgba(16,32,48,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ema-modal-wrap[hidden] { display: none; }
.ema-modal {
  position: relative; background: #fff; border-radius: 10px; max-width: 440px; width: 100%;
  padding: 26px 24px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font: 400 14.5px 'Inter', sans-serif; color: #1a3a5c; max-height: 90vh; overflow-y: auto;
}
.ema-modal h2 { font-size: 20px; margin: 0 0 8px; color: #1a3a5c; }
.ema-modal p { margin: 0 0 14px; color: #455a64; line-height: 1.5; }
.ema-modal .ema-btn.on { margin-top: 6px; }
.ema-modal-x {
  position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: #78909c; cursor: pointer;
}
.ema-modal-honest { display: block; color: #78909c; font-size: 12px; margin-top: 10px; }
.ema-modal-new { display: inline-flex; text-decoration: none; margin-top: 12px; }
.ema-modal .ema-lookup-box { margin-top: 12px; }
.ema-modal .ema-lookup-box a { color: #005baa; }

/* mobile: the vendored off-canvas drawer bleeds ~9px past the viewport
   (invisible gutter) — clip it; fixed/sticky elements keep working */
html, body { overflow-x: clip; }