/* GarageDrive Fiók – ügyfélportál. Arculat: grafit + narancs, Inter + Barlow Semi Condensed (mint a GarageDrive felülete). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-semi-condensed-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-semi-condensed-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --gdf-orange: #F26310;
  --gdf-orange-700: #C2410C;
  --gdf-orange-800: #9A3412;
  --gdf-orange-50: #FFF4EC;
  --gdf-ink: #15171B;
  --gdf-ink-2: #1C1F24;
  --gdf-ink-3: #262A31;
  --gdf-line-d: #2E333B;
  --gdf-gray-600: #5B636E;
  --gdf-gray-400: #A3ABB6;
  --gdf-gray-300: #C4CAD2;
  --gdf-gray-200: #E1E4E8;
  --gdf-gray-100: #F3F4F6;
  --gdf-ok: #116329;     --gdf-ok-bg: #E7F6EC;
  --gdf-warn: #93370D;   --gdf-warn-bg: #FFFAEB;
  --gdf-danger: #B42318; --gdf-danger-bg: #FEF3F2;
  --gdf-info: #364152;   --gdf-info-bg: #EEF2F6;
  --gdf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gdf-head: "Barlow Semi Condensed", "Inter", sans-serif;
  --gdf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gdf-radius: 12px;
  --gdf-shadow: 0 1px 2px rgba(21, 23, 27, .05), 0 2px 8px rgba(21, 23, 27, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.gdf { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--gdf-gray-100); color: var(--gdf-ink); font: 15px/1.55 var(--gdf-font); -webkit-font-smoothing: antialiased; }
.gdf a { color: var(--gdf-orange-700); text-decoration: none; }
.gdf a:hover { text-decoration: underline; }
.gdf h1, .gdf h2 { font-family: var(--gdf-head); font-weight: 600; letter-spacing: .01em; margin: 0; }
.gdf :focus-visible { outline: 2px solid var(--gdf-orange); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gdf-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.gdf-muted { color: var(--gdf-gray-600); margin: 4px 0 0; }
.gdf-small { font-size: 13.5px; color: var(--gdf-gray-600); margin: 12px 0 0; }
.gdf-center { text-align: center; max-width: 720px; margin: 22px auto 0; }

/* Márkajel */
.gdf-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.gdf-brand:hover { text-decoration: none; }
.gdf-mark { width: 30px; height: 28.5px; color: #fff; flex: none; }
.gdf-brand__word { font-family: var(--gdf-head); font-weight: 600; font-size: 26px; line-height: 1; color: #fff; letter-spacing: -.005em; }
.gdf-brand__word b { color: var(--gdf-orange); font-weight: 600; }
.gdf-brand__tag { margin-left: 2px; padding: 3px 8px; border: 1px solid var(--gdf-line-d); border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gdf-gray-400); }

/* Felső sáv */
.gdf-top { background: var(--gdf-ink); border-bottom: 3px solid var(--gdf-orange); }
.gdf-top__in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.gdf-nav { display: flex; gap: 4px; flex: 1; }
.gdf-nav a { padding: 9px 14px; border-radius: 8px; color: #D3D8DF; font-weight: 500; font-size: 14.5px; }
.gdf-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.gdf-nav a.is-active { background: rgba(255, 255, 255, .09); color: #fff; box-shadow: inset 0 -2px 0 var(--gdf-orange); }
.gdf-user { display: flex; align-items: center; gap: 10px; color: #D3D8DF; font-size: 14px; }
.gdf-user__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gdf-ink-3); color: #fff; font-weight: 600; font-size: 13px; border: 1px solid var(--gdf-line-d); }
.gdf .gdf-user__out { color: var(--gdf-gray-400); padding-left: 10px; border-left: 1px solid var(--gdf-line-d); }
.gdf .gdf-user__out:hover { color: #fff; }

/* Tartalom */
.gdf-main { flex: 1; padding-top: 32px; padding-bottom: 48px; }
.gdf-head { margin-bottom: 22px; }
.gdf-head h1 { font-size: 34px; line-height: 1.1; }
.gdf-eyebrow { margin: 0 0 6px; font: 600 12px/1 var(--gdf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gdf-orange-700); }
.gdf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.gdf-grid--main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.gdf-stack { display: grid; gap: 20px; }

.gdf-card { background: #fff; border: 1px solid var(--gdf-gray-200); border-radius: var(--gdf-radius); box-shadow: var(--gdf-shadow); overflow: hidden; }
.gdf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--gdf-gray-200); }
.gdf-card__head h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.gdf-card__body { padding: 20px 22px; }
.gdf-card__body > p:first-child { margin-top: 0; }
.gdf-card__foot { padding: 14px 22px; border-top: 1px solid var(--gdf-gray-200); background: #FAFBFC; display: flex; gap: 10px; }
.gdf-card--dark { background: var(--gdf-ink); border-color: var(--gdf-ink); color: #fff; background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(255, 255, 255, .025) 25px 26px); }
.gdf-card--dark .gdf-card__head { border-color: var(--gdf-line-d); }
.gdf-card--dark .gdf-small { color: var(--gdf-gray-400); }
.gdf-card--dark .gdf-small b { color: #fff; }

.gdf-plan-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px dashed var(--gdf-gray-200); }
.gdf-plan-hero__label { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gdf-gray-600); }
.gdf-plan-hero__name { font: 600 44px/1 var(--gdf-head); }
.gdf-plan-hero__days { color: var(--gdf-gray-600); }
.gdf-plan-hero__days b { color: var(--gdf-orange-700); font-size: 18px; }

.gdf-dl { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 0; }
.gdf-dl dt { color: var(--gdf-gray-600); font-size: 14px; }
.gdf-dl dd { margin: 0; font-weight: 500; }
.gdf-note { margin: 16px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--gdf-warn-bg); color: var(--gdf-warn); font-size: 14px; }

.gdf-key { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border: 1px solid var(--gdf-line-d); border-radius: 10px; background: var(--gdf-ink-2); }
.gdf-key code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 600 17px/1.3 var(--gdf-mono); letter-spacing: .06em; color: #fff; }
.gdf-contact { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-weight: 600; }

/* Jelvények, üzenetek */
.gdf-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gdf-badge--ok { background: var(--gdf-ok-bg); color: var(--gdf-ok); }
.gdf-badge--info { background: var(--gdf-info-bg); color: var(--gdf-info); }
.gdf-badge--warn { background: var(--gdf-warn-bg); color: var(--gdf-warn); }
.gdf-badge--danger { background: var(--gdf-danger-bg); color: var(--gdf-danger); }
.gdf-badge--brand { background: var(--gdf-orange-50); color: var(--gdf-orange-800); }
.gdf-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 14.5px; }
.gdf-alert a { font-weight: 600; color: inherit; text-decoration: underline; }
.gdf-alert--ok { background: var(--gdf-ok-bg); color: var(--gdf-ok); border-color: #BFE5CB; }
.gdf-alert--info { background: var(--gdf-info-bg); color: var(--gdf-info); border-color: #D5DDE7; }
.gdf-alert--warn { background: var(--gdf-warn-bg); color: var(--gdf-warn); border-color: #FBE3B5; }
.gdf-alert--danger { background: var(--gdf-danger-bg); color: var(--gdf-danger); border-color: #FAD4D0; }

/* Gombok */
.gdf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 9px; font: 600 15px/1 var(--gdf-font); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, transform .05s; }
.gdf a.gdf-btn:hover { text-decoration: none; }
.gdf-btn:active { transform: translateY(1px); }
.gdf-btn--primary { background: var(--gdf-orange-700); color: #fff; }
.gdf-btn--primary:hover { background: var(--gdf-orange-800); }
.gdf .gdf-btn--primary { color: #fff; }
.gdf-btn--dark { background: var(--gdf-ink); color: #fff; }
.gdf-btn--dark:hover { background: var(--gdf-ink-3); }
.gdf-btn--ghost { background: #fff; border-color: var(--gdf-gray-300); color: var(--gdf-ink); }
.gdf .gdf-btn--ghost { color: var(--gdf-ink); }
.gdf-btn--ghost:hover { border-color: var(--gdf-gray-600); }
.gdf-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.gdf-btn--block { width: 100%; }
.gdf-btn.is-done { background: var(--gdf-ok); }

/* Űrlapok */
.gdf-form { display: grid; gap: 14px; }
.gdf-field { display: grid; gap: 6px; align-content: start; margin-bottom: 14px; }
.gdf-form .gdf-field { margin-bottom: 0; }
.gdf-field label { font-size: 13.5px; font-weight: 600; }
.gdf-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--gdf-gray-300); border-radius: 9px; background: #fff; color: var(--gdf-ink); font: 15px var(--gdf-font); transition: border-color .15s, box-shadow .15s; }
.gdf-field input:focus { outline: none; border-color: var(--gdf-orange); box-shadow: 0 0 0 3px rgba(242, 99, 16, .16); }
.gdf-field input:disabled { background: var(--gdf-gray-100); color: var(--gdf-gray-600); }
.gdf-field.has-error input { border-color: var(--gdf-danger); }
.gdf-field__hint { margin: 0; font-size: 12.5px; color: var(--gdf-gray-600); }
.gdf-field__error { margin: 0; font-size: 13px; font-weight: 500; color: var(--gdf-danger); }
.gdf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.gdf-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gdf-orange-700); flex: none; }
.gdf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.gdf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Csomagok */
.gdf-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.gdf-plan { display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--gdf-gray-200); border-radius: var(--gdf-radius); box-shadow: var(--gdf-shadow); }
.gdf-plan--featured { border: 2px solid var(--gdf-orange); padding: 23px; box-shadow: 0 10px 30px rgba(242, 99, 16, .12); }
.gdf-plan.is-current { border-color: var(--gdf-ok); }
.gdf-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.gdf-plan__top h2 { font-size: 28px; text-transform: uppercase; letter-spacing: .03em; }
.gdf-plan__price { margin: 14px 0 2px; color: var(--gdf-gray-600); }
.gdf-plan__price b { font: 600 38px/1 var(--gdf-head); color: var(--gdf-ink); }
.gdf-plan__year { margin: 0; font-size: 13.5px; color: var(--gdf-gray-600); }
.gdf-plan__list { list-style: none; margin: 18px 0 20px; padding: 18px 0 0; border-top: 1px solid var(--gdf-gray-200); display: grid; gap: 9px; flex: 1; font-size: 14.5px; }
.gdf-plan__list li { position: relative; padding-left: 26px; }
.gdf-plan__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gdf-orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23C2410C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.gdf-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border: 0; border-radius: 10px; background: var(--gdf-gray-100); }
.gdf-toggle label { position: relative; cursor: pointer; }
.gdf-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gdf-toggle span { display: block; padding: 8px; border-radius: 7px; text-align: center; font-size: 14px; font-weight: 600; color: var(--gdf-gray-600); }
.gdf-toggle input:checked + span { background: #fff; color: var(--gdf-ink); box-shadow: var(--gdf-shadow); }
.gdf-toggle input:focus-visible + span { outline: 2px solid var(--gdf-orange); }

/* Lábléc */
.gdf-foot { border-top: 1px solid var(--gdf-gray-200); background: #fff; font-size: 13px; color: var(--gdf-gray-600); }
.gdf-foot__in { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; min-height: 60px; padding-top: 14px; padding-bottom: 14px; }
.gdf-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.gdf-foot a { color: var(--gdf-gray-600); }

/* Vendégoldalak */
body.gdf--auth { background: var(--gdf-ink) repeating-linear-gradient(180deg, transparent 0 51px, rgba(255, 255, 255, .022) 51px 53px); }
body.gdf--auth::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 6px; background: var(--gdf-orange); }
.gdf-auth { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 48px 16px 32px; }
.gdf-brand--auth .gdf-mark { width: 40px; height: 38px; }
.gdf-brand--auth .gdf-brand__word { font-size: 34px; }
.gdf-auth__card { width: 100%; max-width: 440px; padding: 32px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.gdf--register .gdf-auth__card { max-width: 560px; }
.gdf-auth__title { font-size: 32px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.gdf-auth__lead { margin: 8px 0 22px; color: var(--gdf-gray-600); }
.gdf-auth__switch { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--gdf-gray-600); }
.gdf-auth__switch a { font-weight: 600; }
.gdf-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; padding: 0; }
.gdf-steps li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--gdf-gray-100); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.gdf-steps b { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--gdf-ink); color: #fff; font-size: 12px; }
.gdf-code { margin: 0 0 4px; font: 600 64px/1 var(--gdf-head); color: var(--gdf-orange); }
.gdf--auth .gdf-foot { background: transparent; border-color: var(--gdf-line-d); color: var(--gdf-gray-400); margin-bottom: 6px; }
.gdf--auth .gdf-foot a { color: var(--gdf-gray-400); }

@media (max-width: 900px) {
  .gdf-grid--main, .gdf-plans { grid-template-columns: 1fr; }
  .gdf-top__in { flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; }
  .gdf-nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 -8px; padding-bottom: 8px; }
  .gdf-user { margin-left: auto; }
}
@media (max-width: 560px) {
  .gdf-wrap { padding: 0 16px; }
  .gdf-grid { grid-template-columns: 1fr; }
  .gdf-user__name { display: none; }
  .gdf-brand__tag { display: none; }
  .gdf-head h1 { font-size: 28px; }
  .gdf-dl { grid-template-columns: 1fr; gap: 2px; }
  .gdf-dl dd { margin-bottom: 10px; }
  .gdf-auth__card { padding: 24px 20px; }
  .gdf-steps { grid-template-columns: 1fr; }
  .gdf-key { flex-wrap: wrap; }
  .gdf-key .gdf-btn { width: 100%; }
}