/* Kaarbon — shared site stylesheet */

/* Peyda font family */
@font-face { font-family: 'Peyda'; font-weight: 100; src: url('../assets/fonts/Peyda-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 300; src: url('../assets/fonts/Peyda-Light.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 400; src: url('../assets/fonts/Peyda-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 500; src: url('../assets/fonts/Peyda-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 600; src: url('../assets/fonts/Peyda-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 700; src: url('../assets/fonts/Peyda-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 800; src: url('../assets/fonts/Peyda-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Peyda'; font-weight: 900; src: url('../assets/fonts/Peyda-Black.ttf') format('truetype'); }

/* Lahzeh font family */
@font-face { font-family: 'Lahzeh'; font-weight: 100; src: url('../assets/fonts/Lahzeh-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Lahzeh'; font-weight: 700; src: url('../assets/fonts/Lahzeh-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Lahzeh'; font-weight: 800; src: url('../assets/fonts/Lahzeh-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Lahzeh'; font-weight: 400; src: url('../assets/fonts/Lahzeh-Regular.woff2') format('woff2'); }

* { box-sizing: border-box; }
/* An inline style="display:..." on an element otherwise wins over the [hidden]
   UA rule (author inline style beats UA stylesheet). Force it here so every
   hidden drawer/step/panel in this site actually hides. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: 'Lahzeh', 'Peyda', 'Vazirmatn FD', system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.72; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

@keyframes kb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kb-drawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kb-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.kb-scroll::-webkit-scrollbar { display: none; }
.kb-scroll { scrollbar-width: none; }

input::placeholder { color: #B4B4B4; }

/* Breakpoint: below 880px shows the mobile-first layout, at/above shows the
   desktop (1440) layout. !important on both sides: some wrappers carry their
   own inline "display:flex" (needed for internal layout) which would
   otherwise outrank a plain class rule and defeat the breakpoint toggle. */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media (max-width: 880px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

/* Generic hover-state engine target: elements carrying data-hover get their
   declared hover styles swapped in on pointer enter/focus (see js/hover.js) */
[data-hover] { transition: inherit; }

/* Media Plan Request wizard — active/error state toggles (kept as classes
   so JS never has to recompute a full inline style string per click) */
.kb-choice.is-active { background: #000AC8 !important; color: #fff !important; border-color: #000AC8 !important; }
.kb-path-card:hover, .kb-path-card:focus { border-color: #000AC8; box-shadow: 0 4px 16px rgba(0,10,200,0.08); }
.kb-phone.is-error { border-color: #D33 !important; }