/*
 * Vendor design tokens — taken from the Figma "Q4 Improvements" file
 * (🟢 Vendors | Onboarding). Loaded by both the website layout (sign-up,
 * onboarding) and the vendor dashboard layout, so every vendor screen
 * reads its colours, type scale, spacing and radii from one place.
 * Prefer these variables over hardcoded values in page styles.
 */

/* fonts.css registers Medium as its own family, so `font-weight: 500` on
   "poppinsregular" fell back to Regular. Map the weights onto one family
   so 400 / 500 / 600 pick Regular / Medium / SemiBold as in the design. */
@font-face {
  font-family: "poppinsregular";
  src: url(/fonts/poppins-medium.woff2) format("woff2"), url(/fonts/poppins-medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "poppinsregular";
  src: url(/fonts/poppins-semibold-webfont.woff2) format("woff2"), url(/fonts/poppins-semibold-webfont.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* "pp-poppins-figma": the same Poppins files with Poppins' own vertical
   metrics (ascent 1050, descent 350, line gap 100 per 1000), as Figma uses.
   Our Regular and SemiBold webfonts carry different ones, which draw text
   ~0.11em higher than Figma and make `line-height: normal` ~1.7, not 1.5.
   Opt-in per page (font-family: var(--pp-font-figma)), so pages not yet
   checked against Figma are unchanged. */
@font-face {
  font-family: "pp-poppins-figma";
  src: url(/fonts/poppins-regular-webfont.woff2) format("woff2"), url(/fonts/poppins-regular-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}
@font-face {
  font-family: "pp-poppins-figma";
  src: url(/fonts/poppins-medium.woff2) format("woff2"), url(/fonts/poppins-medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}
@font-face {
  font-family: "pp-poppins-figma";
  src: url(/fonts/poppins-semibold-webfont.woff2) format("woff2"), url(/fonts/poppins-semibold-webfont.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

:root {
  /* Brand */
  --pp-purple-100: #764be2;
  --pp-purple-50: #7f73e3;
  --pp-purple-20: #d2c7ff;
  --pp-purple-10: #ece8ff;
  --pp-purple-5: #fafbff; /* upload card fill */
  --pp-purple-tag: #f3f0ff; /* "Optional" tag fill */
  --pp-purple-3: #faf9ff; /* appointment detail "Total price" panel fill */
  --pp-pink-100: #ef3a5d;
  --pp-pink-50: #ffa5b6;
  --pp-pink-10: #ffe7eb; /* Figma "Semantic colours/Pink 10": declined banner and tag fills */
  --pp-yellow-600: #ffc91d; /* Figma "Yellow/600": internal booking checkbox */
  --pp-yellow-80: #ffde59; /* internal (manual) booking card */
  --pp-yellow-300: #ffeaa6; /* Figma "Yellow/300": service text on a purple booking card */

  /* Black, grey, white */
  --pp-black: #000000;
  --pp-black-soft: #212121; /* Figma "Black&White/Black": dialog titles */
  --pp-grey-70: #6c6c6c;
  --pp-grey-60: #a9a9a9; /* input placeholder */
  --pp-grey-50: #dcdcdc;
  --pp-grey-20: #f0f0f0;
  --pp-grey-10: #f7f7f7;
  --pp-grey-5: #fafafa; /* note box fill */
  --pp-white: #ffffff;
  --pp-navy: #09244b;

  /* Semantic */
  --pp-success: #16a34a;
  --pp-success-bg: #ecfdf3;
  --pp-green-100: #00c983; /* Verified pill text */
  --pp-green-10: #dafff2;  /* Verified pill fill */
  --pp-danger: var(--pp-pink-100);
  --pp-danger-bg: #fff0f3;
  /* Status colours below aren't in the Figma variables yet; they keep the
     values the app already used so Pending / info states stay readable. */
  --pp-warning: #f0c102;
  --pp-warning-text: #d97706;
  --pp-warning-bg: #fff9e5;
  --pp-orange-10: #fff1e3; /* "Awaiting new schedule" tag fill (no Figma tag; pairs with --pp-warning-text) */
  --pp-info: #2563eb;
  --pp-info-bg: #eff6ff;
  --pp-border-neutral: #e5e7eb;

  /* Type scale (Poppins) */
  --pp-font: "poppinsregular", sans-serif;
  --pp-font-figma: "pp-poppins-figma", "poppinsregular", sans-serif;
  --pp-fs-h1: 40px;   /* Header 1, 700, lh 1.4 */
  --pp-fs-h2: 32px;
  --pp-fs-h3: 28px;   /* Header 3, 600, lh 1.4 */
  --pp-fs-h4: 20px;   /* Header 4, 600 */
  --pp-fs-title1: 18px;
  --pp-fs-24: 24px;     /* Total price amount in the appointment popup, 600, lh 1.4 (no Figma style) */
  --pp-fs-title2: 16px; /* Title 2, 600 */
  --pp-fs-title3: 14px; /* Title 3, 600 */
  --pp-fs-body1: 16px;  /* Body 1, 400 */
  --pp-fs-body2: 14px;  /* Body 2, 400 */
  --pp-fs-help: 12px;   /* Help text, 400 */
  --pp-fs-tag: 11px;
  --pp-fs-10: 10px;     /* Calendar card name, "+N", popover detail, "Closed" (no Figma style) */
  --pp-fs-8: 8px;       /* Week booking card service (no Figma style) */
  /* Figma's "normal" line height for Poppins. Our Poppins webfont's own
     normal is ~1.7, so `line-height: normal` renders ~3px taller than the design. */
  --pp-lh-normal: 1.5;

  /* Spacing — the gaps the design uses between and inside sections */
  --pp-space-4: 4px;
  --pp-space-8: 8px;
  --pp-space-12: 12px;
  --pp-space-16: 16px;
  --pp-space-20: 20px;
  --pp-space-24: 24px;
  --pp-space-28: 28px;
  --pp-space-32: 32px;
  --pp-space-40: 40px;
  --pp-space-72: 72px;

  /* Radii */
  --pp-radius-input: 8px;
  --pp-radius-button: 8px;
  --pp-radius-card: 12px;
  --pp-radius-pill: 20px;
  --pp-radius-full: 999px;

  /* Effects */
  --pp-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  --pp-shadow-nav: 0 4px 4px rgba(0, 0, 0, 0.25);
  --pp-shadow-dialog: 0 4px 15px rgba(0, 0, 0, 0.2); /* Figma "2 - Dialog shadow": popups and modals */
  --pp-shadow-dialog-actions: 0 12px 20px rgba(0, 0, 0, 0.12); /* Figma "Dialog/Elements/DialogActions" footer */
}

/* --- Typography helpers ------------------------------------------------ */
.pp-h1 { font-size: var(--pp-fs-h1); font-weight: 700; line-height: 1.4; color: var(--pp-black); }
.pp-h3 { font-size: var(--pp-fs-h3); font-weight: 600; line-height: 1.4; color: var(--pp-black); }
.pp-h4 { font-size: var(--pp-fs-h4); font-weight: 600; line-height: normal; color: var(--pp-black); }
.pp-title2 { font-size: var(--pp-fs-title2); font-weight: 600; line-height: normal; }
.pp-title3 { font-size: var(--pp-fs-title3); font-weight: 600; line-height: normal; }
.pp-body1 { font-size: var(--pp-fs-body1); font-weight: 400; line-height: normal; }
.pp-body2 { font-size: var(--pp-fs-body2); font-weight: 400; line-height: normal; }
.pp-help { font-size: var(--pp-fs-help); font-weight: 400; line-height: normal; color: var(--pp-grey-70); }
.pp-muted { color: var(--pp-grey-70); }

/* --- Form field (label + input), Figma "Text Field" ---------------------- */
.pp-field { display: flex; flex-direction: column; gap: var(--pp-space-8); }
.pp-label { font-size: 14px; font-weight: 500; line-height: normal; color: var(--pp-black); margin: 0; }
.pp-label .pp-required, .pp-required { color: var(--pp-pink-100); }
.pp-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--pp-grey-50);
  border-radius: var(--pp-radius-input);
  background: var(--pp-white);
  font-family: var(--pp-font);
  font-size: 14px;
  line-height: normal;
  color: var(--pp-black);
}
.pp-input:focus { outline: none; border-color: var(--pp-purple-100); box-shadow: 0 0 0 3px var(--pp-purple-10); }
.pp-input::placeholder { color: var(--pp-grey-70); }

/* --- Buttons, Figma "Button" ------------------------------------------- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-8);
  height: 48px;
  padding: 12px 28px;
  border-radius: var(--pp-radius-button);
  border: 1px solid transparent;
  font-family: var(--pp-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  cursor: pointer;
  text-decoration: none;
}
.pp-btn--primary { background: var(--pp-purple-100); color: var(--pp-white); }
.pp-btn--primary:hover { background: var(--pp-purple-50); color: var(--pp-white); }
.pp-btn--secondary { background: var(--pp-white); color: var(--pp-purple-100); border-color: var(--pp-purple-100); }
.pp-btn--secondary:hover { background: var(--pp-purple-10); }
.pp-btn--sm { height: 36px; padding: 8px 20px; font-size: 14px; line-height: 20px; }
.pp-btn:disabled, .pp-btn.is-disabled { background: var(--pp-grey-50); border-color: var(--pp-grey-50); color: var(--pp-white); cursor: not-allowed; }

/* Small pill action (View / Replace / Remove on the upload card) */
.pp-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--pp-radius-pill);
  border: 1px solid var(--pp-purple-20);
  background: var(--pp-white);
  color: var(--pp-purple-100);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}
.pp-pill-btn--neutral { border-color: var(--pp-border-neutral); color: var(--pp-grey-70); }

/* Status tag (Uploaded / Pending ...) */
.pp-tag { display: inline-flex; padding: 4px 8px; border-radius: var(--pp-radius-pill); font-size: var(--pp-fs-tag); font-weight: 500; line-height: normal; }
.pp-tag--success { background: var(--pp-success-bg); color: var(--pp-success); }

/* --- Stepper (STEP 1 / Business Details) ------------------------------- */
.pp-stepper { display: flex; gap: var(--pp-space-8); align-items: flex-end; }
.pp-stepper__item { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--pp-space-12); min-width: 0; }
.pp-stepper__num { font-size: 12px; color: var(--pp-grey-70); line-height: normal; }
.pp-stepper__label { font-size: 14px; color: var(--pp-grey-70); line-height: normal; }
.pp-stepper__bar { height: 4px; border-radius: var(--pp-radius-full); background: var(--pp-purple-20); }
.pp-stepper__item.is-active .pp-stepper__label { color: var(--pp-purple-100); font-weight: 600; }
.pp-stepper__item.is-active .pp-stepper__bar,
.pp-stepper__item.is-done .pp-stepper__bar { background: var(--pp-purple-100); }

/* --- Vendor base ------------------------------------------------------- */
/* Figma lays text out with auto-layout gaps, never with paragraph margins,
   so drop CoreUI/Bootstrap's default `p { margin-bottom: 1rem }` on vendor
   pages (body.pp-vendor). :where() keeps this at the same weight as CoreUI's
   bare `p`, so any class rule that gives a paragraph its own margin still
   wins. Space text with gap / pp-m* utilities instead. */
:where(.pp-vendor) p { margin: 0; }

/* Long-form content (agreements, merchant-written descriptions) keeps
   paragraph spacing: it's stored HTML, not a Figma layout with gaps. */
.pp-prose p { margin: 0 0 1rem; }

/* Select2 sizes its box from the <select>'s inline style="width: …" (its
   default width: 'resolve'). Those inline widths became pp-w-full, so give
   the box Select2 inserts right after such a <select> the same full width. */
select.pp-w-full + .select2-container { width: 100% !important; }