/* =========================================================
   Young Procurement — shared site parts
   Menu, offers banner, footer and the payment component.
   Every class starts with yp- so it can't clash with the
   older per-page styles.
   ========================================================= */
.yp-nav, .yp-offers, .yp-footer, .yp-pay, .yp-mobile, .yp-card, .yp-guide { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.yp-nav *, .yp-offers *, .yp-footer *, .yp-pay *, .yp-mobile *, .yp-card *, .yp-guide * { box-sizing: border-box; }
.yp-skip { position: absolute; left: -9999px; top: 0; background: #E8347A; color: #0D0D0D; padding: 0.6rem 1rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; z-index: 1000; }
.yp-skip:focus { left: 0; }
.yp-nav a:focus-visible, .yp-offers a:focus-visible, .yp-footer a:focus-visible, .yp-pay a:focus-visible, .yp-pay select:focus-visible, .yp-mobile a:focus-visible, .yp-mobile button:focus-visible, .yp-nav button:focus-visible, .yp-card a:focus-visible { outline: 3px solid #E8347A; outline-offset: 3px; border-radius: 3px; }

/* ---------- MENU ---------- */
.yp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2.5rem; border-bottom: 1px solid rgba(245,240,245,0.09); position: sticky; top: 0; background: rgba(13,13,13,0.96); backdrop-filter: blur(12px); z-index: 150; margin: 0; }
.yp-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 18px; color: #F5F0F5 !important; letter-spacing: -0.5px; white-space: nowrap; text-decoration: none !important; }
.yp-logo span { color: #E8347A; }
.yp-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.yp-links li { margin: 0; padding: 0; }
.yp-links a { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #B0AAB0 !important; text-decoration: none !important; white-space: nowrap; transition: color 0.15s; }
.yp-links a:hover, .yp-links a[aria-current="page"] { color: #E8347A !important; }
.yp-links a.yp-free { color: #E8347A !important; }
.yp-cta { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: #0D0D0D !important; background: #E8347A; padding: 0.5rem 1.2rem; border-radius: 4px; white-space: nowrap; text-decoration: none !important; }
.yp-cta:hover { opacity: 0.88; }
.yp-burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.yp-burger span { display: block; width: 22px; height: 2px; background: #F5F0F5; border-radius: 2px; }
.yp-mobile { display: none; position: fixed; inset: 0; background: rgba(13,13,13,0.98); z-index: 300; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; padding: 2rem 1rem; overflow-y: auto; }
.yp-mobile.open { display: flex; }
.yp-mobile a { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 800; color: #F5F0F5 !important; text-decoration: none !important; }
.yp-mobile a:hover, .yp-mobile a[aria-current="page"] { color: #E8347A !important; }
.yp-mobile-close { position: absolute; top: 1.1rem; right: 1.1rem; background: none; border: none; color: #F5F0F5; font-size: 28px; cursor: pointer; padding: 0.25rem 0.6rem; }

/* ---------- SLIM OFFERS BANNER (on every page) ---------- */
.yp-offers { background: #1A0A12; border-bottom: 1px solid rgba(232,52,122,0.28); padding: 0.55rem 2.5rem; text-align: center; font-size: 13px; line-height: 1.6; color: #D4CDD4; margin: 0; }
.yp-offers strong { color: #F5F0F5; font-family: 'Space Grotesk', sans-serif; }
.yp-offers a { color: #FF8DB8 !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.yp-offers .yp-sep { color: rgba(245,240,245,0.35); margin: 0 0.35rem; }

/* ---------- FOOTER ---------- */
.yp-footer { border-top: 1px solid rgba(245,240,245,0.09); background: #0D0D0D; margin-top: 3rem; }
.yp-footer-inner { max-width: 1100px; margin: 0 auto; padding: 1.75rem 2.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start; justify-content: space-between; }
.yp-footer-logo { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #B0AAB0; }
.yp-footer-logo span { color: #E8347A; }
.yp-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; max-width: 680px; }
.yp-footer li { margin: 0; padding: 0; }
.yp-footer a { font-size: 12.5px; color: #B0AAB0 !important; text-decoration: none !important; }
.yp-footer a:hover { color: #E8347A !important; }
.yp-footer .yp-contact { font-size: 12.5px; color: #B0AAB0; }
.yp-footer .yp-contact a { color: #E8347A !important; }
.yp-disclaimer { border-top: 1px solid rgba(245,240,245,0.09); background: #0A0A0A; padding: 0.9rem 2.5rem; text-align: center; }
.yp-disclaimer p { font-size: 11.5px; color: #B0AAB0; line-height: 1.6; max-width: 900px; margin: 0 auto; }

/* ---------- PAYMENT COMPONENT ---------- */
.yp-pay { background: #111111; border: 1px solid rgba(245,240,245,0.12); border-radius: 10px; padding: 1.25rem 1.35rem; color: #D4CDD4; display: flex; flex-direction: column; gap: 0.7rem; }
.yp-pay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.yp-pay-name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 800; color: #F5F0F5; }
.yp-pay-price { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; color: #E8347A; white-space: nowrap; }
.yp-pay-price small { font-size: 13px; color: #B0AAB0; font-weight: 600; }
.yp-pay-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.yp-pay-incl li { font-size: 13.5px; line-height: 1.5; padding-left: 1.3rem; position: relative; color: #D4CDD4; margin: 0; }
.yp-pay-incl li::before { content: '✓'; position: absolute; left: 0; color: #50DCA0; font-weight: 700; }
.yp-pay-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.yp-pay-btn { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #0D0D0D !important; background: #E8347A; padding: 0.75rem 1.3rem; border-radius: 4px; text-decoration: none !important; display: inline-block; line-height: 1.2; }
.yp-pay-btn:hover { opacity: 0.88; }
.yp-ask { font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; color: #FF8DB8 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.yp-pay-meta { font-size: 12.5px; color: #B0AAB0; line-height: 1.55; margin: 0; }
.yp-pay-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding-top: 0.6rem; border-top: 1px solid rgba(245,240,245,0.08); }
.yp-pay-row .yp-row-label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #F5F0F5; font-size: 14px; min-width: 70px; }
.yp-module-field { display: flex; flex-direction: column; gap: 0.35rem; }
.yp-module-field label { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #B0AAB0; }
.yp-module-field select { background: #0B0B0B; color: #F5F0F5; border: 1px solid rgba(245,240,245,0.25); border-radius: 5px; padding: 0.65rem 0.8rem; font-size: 14.5px; font-family: 'Inter', sans-serif; width: 100%; }
.yp-module-field select:focus { border-color: #E8347A; outline: 2px solid #E8347A; outline-offset: 1px; }

/* ---------- OFFER CARDS ---------- */
.yp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.yp-card { background: #1A0A12; border: 1px solid rgba(232,52,122,0.28); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; color: #D4CDD4; }
.yp-card .yp-tag { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #E8347A; }
.yp-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: #F5F0F5; margin: 0; }
.yp-card .yp-big { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 800; color: #F5F0F5; letter-spacing: -1px; line-height: 1; }
.yp-card .yp-big small { font-size: 14px; font-weight: 600; color: #B0AAB0; letter-spacing: 0; }
.yp-card p { font-size: 14px; line-height: 1.65; margin: 0; color: #D4CDD4; }
.yp-card .yp-pay { background: rgba(13,13,13,0.6); }
.yp-card .yp-spacer { flex: 1; }


/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) { .yp-links { display: none; } .yp-burger { display: flex; } }
@media (max-width: 900px) { .yp-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .yp-nav { padding: 1rem; }
  .yp-cta { display: none; }
  .yp-offers { padding: 0.55rem 1rem; font-size: 12.5px; }
  .yp-footer-inner { padding: 1.25rem 1rem; flex-direction: column; }
  .yp-disclaimer { padding: 0.9rem 1rem; }
}
@media print {
  .yp-nav, .yp-mobile, .yp-offers, .yp-footer, .yp-skip { display: none !important; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Accessibility: lift the old "faint" grey so small labels meet WCAG AA contrast,
   and underline links that sit inside sentences so they don't rely on colour alone. */
:root { --text-faint: #948E94; }
p a:not([class]), li a:not([class]), td a:not([class]), dd a:not([class]), .cred-desc a, .faq-answer a, .faq-a a { text-decoration: underline !important; text-underline-offset: 2px; }
.highlight td, .worth, tr[style*="pink-dim"] td { color: #FFB3D0 !important; }

/* ---------- drop-down menus (Free, More) ---------- */
.yp-links { align-items: center; }
.yp-dd { position: relative; }
.yp-dd-btn { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #B0AAB0; background: none; border: none; cursor: pointer; padding: 0.35rem 0.2rem; }
.yp-dd-btn:hover, .yp-dd-btn[aria-expanded="true"] { color: #E8347A; }
.yp-dd-btn:focus-visible { outline: 3px solid #E8347A; outline-offset: 3px; border-radius: 3px; }
.yp-dd-menu { position: absolute; top: calc(100% + 0.6rem); left: -0.75rem; min-width: 210px; background: #141414; border: 1px solid rgba(245,240,245,0.15); border-radius: 8px; padding: 0.4rem; list-style: none; margin: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 200; }
.yp-dd-menu[hidden] { display: none; }
.yp-dd-menu li { margin: 0; }
.yp-dd-menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 5px; font-size: 14px; }
.yp-dd-menu a:hover, .yp-dd-menu a:focus-visible { background: rgba(232,52,122,0.12); }
.yp-mob-group { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #B0AAB0; margin-top: 0.6rem; }
.yp-mobile a.yp-mob-sub { font-size: 18px; font-weight: 700; }
@media (max-width: 860px) { .yp-links { display: none; } .yp-burger { display: flex; } }
@media (min-width: 861px) { .yp-links { display: flex !important; } .yp-burger { display: none !important; } }
.yp-nav .yp-links li a, .yp-footer ul li a, .yp-footer .yp-contact a, .yp-nav .yp-dd-menu li a, .yp-mobile a.yp-mob-sub, .yp-mobile a { text-decoration: none !important; }
.yp-links > li:last-child .yp-dd-menu { left: auto; right: -0.5rem; }