/* BINCK Padel – Frontend CSS */
:root {
	--bp-navy:    #1a1f5e;
	--bp-navy-dk: #0f1240;
	--bp-lime:    #98ca3f;
	--bp-lime-dk: #ade649;
	--bp-red:     #c0392b;
	--bp-light:   #f4f6f2;
	--bp-border:  #e2e8d5;
	--bp-gray:    #6b7280;
	--radius-lg:  20px;
	--shadow:     0 4px 24px rgba(26,31,94,.10);
	--font-display: --font-display: var(--bs-font-sans-serif);
	--font-body:    'Barlow', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bp-light); color: #1e2030; margin: 0; padding: 0; }

/* NAV */
.bp-topnav { background: var(--bp-navy); padding: 14px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.bp-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; }
.logo-binck { color: var(--bp-lime); }
.logo-padel { color: #fff; font-size: 1rem; vertical-align: super; margin-left: 2px; }
.bp-nav-links a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; transition: color .2s; }
.bp-nav-links a:hover { color: var(--bp-lime); }

/* HERO */
.bp-hero { background: var(--bp-navy); position: relative; overflow: hidden; padding: 60px 0 50px; }
.bp-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(141,198,63,.12) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(26,31,94,.8) 0%, transparent 70%); pointer-events: none; }
.min-vh-hero { min-height: 380px; }
.bp-badge-promo { display: inline-block; background: var(--bp-red); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1.15; padding: 16px 24px; clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%); text-transform: uppercase; letter-spacing: .04em; min-width: 180px; text-align: center; box-shadow: 0 4px 20px rgba(192,57,43,.4); }
.bp-badge-promo span { font-size: .95rem; font-style: italic; }
.bp-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.8rem); color: #fff; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.bp-hero-title .text-accent { color: var(--bp-lime); }
.bp-hero-sub { color: rgba(255,255,255,.72); font-size: 1.05rem; margin-top: 16px; max-width: 440px; }
.bp-tagline-strip { display: flex; align-items: center; gap: 10px; background: var(--bp-lime); color: var(--bp-navy); font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 20px; border-radius: 6px; width: fit-content; }
.bp-tagline-strip .dot { opacity: .5; }
.bp-hero-visual { width: 320px; height: 280px; background: linear-gradient(135deg, rgba(141,198,63,.15) 0%, rgba(26,31,94,.6) 100%), repeating-linear-gradient(45deg, rgba(141,198,63,.05) 0px, rgba(141,198,63,.05) 2px, transparent 2px, transparent 14px); border-radius: var(--radius-lg); border: 2px solid rgba(141,198,63,.3); display: flex; align-items: flex-end; padding: 20px; }
.bp-court-badge { background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 8px; font-size: .8rem; font-weight: 600; }

/* PARTNER BAR */
.bp-partner-bar { background: var(--bp-navy-dk); border-top: 2px solid var(--bp-lime); padding: 14px 0; }
.bp-partner-bar .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.partner-label { color: rgba(255,255,255,.5); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.partner-logos { display: flex; align-items: center; gap: 16px; }
.partner-name { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .04em; }
.partner-sep { color: rgba(255,255,255,.2); }

/* MAIN */
.bp-main { padding: 56px 0 40px; }

/* CARDS */
.bp-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.bp-card-header { background: linear-gradient(135deg, var(--bp-navy) 0%, var(--bp-navy-dk) 100%); padding: 28px 32px 24px; border-bottom: 3px solid var(--bp-lime); }
.bp-section-title { font-family: var(--font-display); font-weight: 900; line-height: 1; margin: 0; text-transform: uppercase; }
.scan-label { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--bp-lime); }
.en-probeer { font-size: clamp(2.2rem, 5vw, 3.2rem); color: #fff; display: block; }
.bp-form-card form { padding: 28px 32px 32px; }

/* FORM */
.bp-form-group { margin-bottom: 20px; }
.bp-label { display: block; font-weight: 600; font-size: .875rem; color: var(--bp-navy); margin-bottom: 7px; letter-spacing: .02em; }
.bp-label .required { color: var(--bp-red); }
.bp-input, .bp-select { display: block; width: 100%; padding: 11px 14px; font-size: .95rem; font-family: var(--font-body); border: 2px solid var(--bp-border); border-radius: 9px; background: #fcfff8; color: #1e2030; transition: border-color .2s, box-shadow .2s; outline: none; -webkit-appearance: none; appearance: none; }
.bp-input:focus, .bp-select:focus { border-color: var(--bp-lime); box-shadow: 0 0 0 3px rgba(141,198,63,.2); background: #fff; }
.bp-input.is-invalid, .bp-select.is-invalid { border-color: var(--bp-red); box-shadow: 0 0 0 3px rgba(192,57,43,.1); }
.bp-phone-row { display: flex; gap: 10px; }
.bp-landcode { flex: 0 0 200px; }
.bp-tel { flex: 1; }
.bp-hint { margin-top: 7px; font-size: .82rem; color: var(--bp-gray); background: rgba(141,198,63,.1); border-left: 3px solid var(--bp-lime); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.bp-error-msg { margin-top: 5px; font-size: .82rem; color: var(--bp-red); font-weight: 500; }
.bp-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--bp-gray); cursor: pointer; line-height: 1.5; }
.bp-checkbox-label input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; accent-color: var(--bp-lime); cursor: pointer; }
.bp-checkbox-label a { color: var(--bp-navy); font-weight: 600; }
.bp-btn-submit { background: linear-gradient(135deg, var(--bp-lime) 0%, var(--bp-lime-dk) 100%); color: var(--bp-navy); border: none; border-radius: 10px; padding: 14px 28px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; box-shadow: 0 4px 18px rgba(141,198,63,.35); }
.bp-btn-submit:hover { background: linear-gradient(135deg, var(--bp-lime) 0%, var(--bp-lime-dk) 100%); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(141,198,63,.45); filter: brightness(1.05); }
.bp-btn-submit:active { transform: translateY(0); }
.bp-footnote { font-size: .78rem; color: var(--bp-gray); }
.bp-footnote a { color: var(--bp-navy); }
.bp-alert { border-radius: 10px; padding: 14px 18px; font-size: .875rem; margin: 0 32px 20px; }
.bp-alert-danger { background: rgba(192,57,43,.08); border: 1.5px solid rgba(192,57,43,.3); color: #7b1e14; }

/* SUCCESS */
.bp-success-card { padding: 40px 36px; text-align: center; }
.bp-success-icon { font-size: 3.5rem; color: var(--bp-lime); margin-bottom: 12px; animation: pop .4s cubic-bezier(.2,1.5,.6,1) both; }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bp-success-title { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--bp-navy); margin-bottom: 8px; }
.bp-success-sub { color: var(--bp-gray); max-width: 420px; margin: 0 auto 32px; }
.bp-steps { text-align: left; display: flex; flex-direction: column; gap: 20px; max-width: 520px; margin: 0 auto; }
.bp-step { display: flex; gap: 18px; align-items: flex-start; background: var(--bp-light); border-radius: 12px; padding: 18px 20px; border: 1.5px solid var(--bp-border); }
.bp-step-number { width: 38px; height: 38px; border-radius: 50%; background: var(--bp-lime); color: var(--bp-navy); font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bp-step-content h4 { font-weight: 700; font-size: .95rem; color: var(--bp-navy); margin: 0 0 6px; }
.bp-step-content p { font-size: .875rem; color: var(--bp-gray); margin: 0; }
.bp-important-note { margin-top: 10px; background: rgba(192,57,43,.07); border-left: 3px solid var(--bp-red); padding: 8px 12px; font-size: .82rem; border-radius: 0 6px 6px 0; color: #7b1e14; }
.bp-store-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bp-store-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bp-navy); color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 7px; font-size: .82rem; font-weight: 600; transition: background .2s; }
.bp-store-btn:hover { background: var(--bp-navy-dk); color: var(--bp-lime); }
.bp-contact-block { background: rgba(26,31,94,.05); border-radius: 10px; padding: 16px 20px; font-size: .875rem; max-width: 520px; margin: 24px auto 0; }
.bp-contact-block a { color: var(--bp-navy); font-weight: 600; }

/* SIDEBAR */
.bp-info-card, .bp-contact-card, .bp-partners-card { padding: 24px; }
.bp-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--bp-navy); text-transform: uppercase; margin-bottom: 4px; }
.text-accent { color: var(--bp-lime); }
.bp-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bp-feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.bp-feature-list li i { font-size: 1.1rem; color: var(--bp-lime); flex-shrink: 0; margin-top: 2px; }
.bp-feature-list li div { display: flex; flex-direction: column; line-height: 1.3; }
.bp-feature-list li strong { font-size: .9rem; color: var(--bp-navy); }
.bp-feature-list li span { font-size: .8rem; color: var(--bp-gray); }
.bp-contact-person { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.bp-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bp-navy); color: var(--bp-lime); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.bp-whatsapp-btn { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: #25d366; text-decoration: none; }
.bp-whatsapp-btn:hover { color: #1aa84c; }
.bp-location-info p a { color: var(--bp-navy); text-decoration: none; font-weight: 500; }
.bp-location-info p a:hover { color: var(--bp-lime); }
.partner-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--bp-navy); text-transform: uppercase; }

/* FAQ */
.bp-faq-section { padding: 40px 0 20px; }
.bp-faq-grid { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; }
.bp-faq-item { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(26,31,94,.07); overflow: hidden; border: 1.5px solid transparent; transition: border-color .2s; }
.bp-faq-item:has(.bp-faq-question.active) { border-color: var(--bp-lime); }
.bp-faq-question { width: 100%; background: none; border: none; padding: 18px 22px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--bp-navy); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: color .2s; }
.bp-faq-question:hover, .bp-faq-question.active { color: var(--bp-lime-dk); }
.bp-faq-icon { flex-shrink: 0; transition: transform .3s; color: var(--bp-lime); }
.bp-faq-question.active .bp-faq-icon { transform: rotate(180deg); }
.bp-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bp-faq-answer.open { max-height: 400px; }
.bp-faq-answer p { margin: 0; padding: 0 22px 18px; font-size: .9rem; color: var(--bp-gray); line-height: 1.7; }

/* FOOTER */
.bp-footer { background: var(--bp-navy); border-top: 3px solid var(--bp-lime); padding: 28px 0; margin-top: 40px; }
.bp-footer .logo-binck { color: var(--bp-lime); }
.bp-footer .logo-padel { color: #fff; }
.bp-footer a { color: rgba(255,255,255,.6); }
.bp-footer a:hover { color: var(--bp-lime); }

@media (max-width: 575px) {
	.bp-phone-row { flex-direction: column; }
	.bp-landcode { flex: none; width: 100%; }
	.bp-form-card form { padding: 20px 18px 24px; }
	.bp-card-header { padding: 22px 18px 18px; }
	.bp-success-card { padding: 28px 18px; }
}