/* ============================================================ DEWPOINT PICKLEBALL LANDING PAGE THEME V1 HERO = DARK NAVY BOOKING = WHITE FEATURES = LIGHT LAVENDER SOCIAL = WHITE NEWS = LIGHT LAVENDER FOOTER = DARK NAVY / PURPLE Loaded AFTER dewpoint-app.css ============================================================ */ :root{ --dp-navy:#020b25; --dp-navy-2:#07143a; --dp-navy-3:#101345; --dp-purple:#7928e8; --dp-purple-2:#9344f3; --dp-blue:#287cf5; --dp-text:#11172b; --dp-muted:#6d758b; --dp-white:#ffffff; --dp-soft:#f7f6fc; --dp-soft-purple:#f5f2ff; --dp-border:#e5e6ef; --dp-shadow: 0 10px 30px rgba(27,28,54,.08); } /* ============================================================ PAGE ============================================================ */ html, body{ background:var(--dp-navy) !important; } body .dp-site{ background:var(--dp-white) !important; } /* ============================================================ HERO / HEADER KEEP THE DARK DEWPOINT LOOK ============================================================ */ body .dp-site .dp-final-nav{ background: rgba(2,9,32,.94) !important; border-bottom: 1px solid rgba(143,87,255,.12) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* * Do not force a white background onto the hero. * Existing hero artwork remains intact. */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-final-board > header{ color:#fff !important; } /* ============================================================ BOOKING SECTION WHITE BAND ============================================================ */ body .dp-site .dp-home-booking{ position:relative !important; padding: 38px clamp(15px,4vw,58px) 42px !important; color:var(--dp-text) !important; background: linear-gradient( 180deg, #ffffff 0%, #fdfdff 100% ) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; } /* Booking title */ body .dp-site .dp-home-booking-title{ text-align:center !important; } body .dp-site .dp-home-booking-title small{ color:var(--dp-purple) !important; font-weight:800 !important; } body .dp-site .dp-home-booking-title h2{ color:#111423 !important; } body .dp-site .dp-home-booking-title p{ color:var(--dp-muted) !important; } /* ============================================================ BOOKING CARD ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking{ max-width:1380px !important; margin-inline:auto !important; overflow:visible !important; } body .dp-site .dp-home-booking .dp-pm-booking .dp-tap-booking-main{ padding:20px !important; color:var(--dp-text) !important; background:#fff !important; border: 1px solid #e5e6ed !important; border-radius:20px !important; box-shadow: 0 14px 45px rgba(25,28,58,.07) !important; overflow:visible !important; } /* ============================================================ DATE STRIP ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .swipe-date-shell{ background:transparent !important; } body .dp-site .dp-home-booking .dp-pm-booking .desktop-date-arrow{ color:#1b2340 !important; background:#fff !important; border: 1px solid #e5e7f0 !important; box-shadow: 0 5px 16px rgba(24,30,55,.07) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button{ color:#171b2b !important; background:#fff !important; border: 1px solid #e4e5ec !important; box-shadow: 0 4px 13px rgba(25,30,55,.05) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button small, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button span{ color:#5c6376 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button b{ color:#111526 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active{ color:#fff !important; background: linear-gradient( 135deg, #812ce9, #6540f3 ) !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(107,55,229,.24) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active small, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active span, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active b{ color:#fff !important; } /* ============================================================ LEGEND ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .slot-legend{ color:#50586d !important; } body .dp-site .dp-home-booking .dp-pm-booking .slot-legend span{ color:#50586d !important; } /* ============================================================ BOOKING GRID ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-grid-scroll{ background:#fff !important; border: 1px solid #e4e6ee !important; border-radius:15px !important; box-shadow:none !important; /* * Booking schedule fits the available container. * Horizontal scrolling is not needed for Dewpoint's 4 courts. */ overflow:hidden !important; width:100%; } body .dp-site .dp-home-booking .dp-pm-booking .tap-slot-grid{ background:#fff !important; display:grid; width:100%; min-width:0; gap:clamp(4px,1vw,8px); grid-template-columns: minmax(clamp(72px,14vw,150px),.72fr) repeat(var(--tap-courts,4),minmax(0,1fr)); } body .dp-site .dp-home-booking .dp-pm-booking .tap-grid-head, body .dp-site .dp-home-booking .dp-pm-booking .tap-time{ color:#161c31 !important; background:#fbfbfd !important; border: 1px solid #edf0f5 !important; min-width:0; box-sizing:border-box; } body .dp-site .dp-home-booking .dp-pm-booking .tap-time b{ color:#151a2a !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.booked b, body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.booked span{ color:#d65b61 !important; } /* ============================================================ INLINE CHECKOUT KEEP CHECKOUT INSIDE WHITE BOOKING SECTION ============================================================ */ body .dp-site .dp-home-booking .dp-inline-checkout{ max-width:1050px !important; margin: 20px auto 0 !important; color:var(--dp-text) !important; background:transparent !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card, body .dp-site .dp-home-booking .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r{ color:var(--dp-text) !important; background:#fff !important; border: 1px solid #e4e5ec !important; border-radius:20px !important; box-shadow: 0 14px 40px rgba(29,31,63,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout h1, body .dp-site .dp-home-booking .dp-inline-checkout h2, body .dp-site .dp-home-booking .dp-inline-checkout h3, body .dp-site .dp-home-booking .dp-inline-checkout h4{ color:#111526 !important; } /* Primary checkout buttons */ body .dp-site .dp-home-booking .dp-inline-checkout .primary, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-main-button{ color:#fff !important; background: linear-gradient( 90deg, #8929e9, #6341ef 48%, #277cf6 ) !important; border:0 !important; box-shadow: 0 9px 24px rgba(103,55,229,.24) !important; } /* ============================================================ FEATURE / WHY DEWPOINT SECTION SOFT LAVENDER BAND ============================================================ */ body .dp-site .dp-final-feature-strip{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:18px !important; padding: 34px clamp(18px,5vw,72px) 42px !important; background: linear-gradient( 180deg, #f8f7fc, #f4f1ff ) !important; } body .dp-site .dp-final-feature-strip > div{ min-height:145px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:24px !important; color:#161b2e !important; text-align:center !important; background:#fff !important; border: 1px solid #e8e5f2 !important; border-radius:17px !important; box-shadow: 0 10px 30px rgba(30,27,63,.06) !important; } body .dp-site .dp-final-feature-strip > div::before{ position:static !important; transform:none !important; width:54px !important; height:54px !important; margin: 0 auto 14px !important; display:grid !important; place-items:center !important; color:#7541dc !important; background:#f0eaff !important; border-radius:50% !important; box-shadow:none !important; } body .dp-site .dp-final-feature-strip > div::after{ margin-top:8px !important; color:#656d80 !important; font-size:11px !important; font-weight:500 !important; line-height:1.55 !important; } /* ============================================================ SOCIAL CONNECT WHITE BAND ============================================================ */ body .dp-site .dp-social-section{ padding: 38px clamp(18px,5vw,72px) 42px !important; color:var(--dp-text) !important; background:#fff !important; } body .dp-site .dp-social-section .dp-section-heading h2{ color:#171b2b !important; } body .dp-site .dp-social-section .dp-section-heading p{ color:#70778b !important; } body .dp-site .dp-social-grid{ max-width:1380px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:16px !important; margin-inline:auto !important; } body .dp-site .dp-social-card{ min-height:145px !important; color:#171b2b !important; background:#fff !important; border: 1px solid #e4e6ed !important; border-radius:15px !important; box-shadow: var(--dp-shadow) !important; } body .dp-site .dp-social-card-head b{ color:#171b2b !important; } body .dp-site .dp-social-card-head small, body .dp-site .dp-social-card p{ color:#737b8e !important; } /* Social buttons */ body .dp-site .dp-social-card button{ color:#fff !important; background: linear-gradient( 90deg, #812be7, #5946ef ) !important; border:0 !important; } /* ============================================================ NEWS & UPDATES LIGHT LAVENDER / GRAY BAND ============================================================ */ body .dp-site .dp-news-section{ padding: 38px clamp(18px,5vw,72px) 46px !important; color:var(--dp-text) !important; background: linear-gradient( 180deg, #f8f7fc, #f3f2f8 ) !important; } body .dp-site .dp-news-section .dp-section-heading h2{ color:#171b2b !important; } body .dp-site .dp-news-section .dp-section-heading p{ color:#70778b !important; } body .dp-site .dp-news-grid{ max-width:1380px !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:18px !important; margin-inline:auto !important; } body .dp-site .dp-news-card{ min-height:210px !important; overflow:hidden !important; color:#171b2b !important; background:#fff !important; border: 1px solid #e4e5ec !important; border-radius:15px !important; box-shadow: var(--dp-shadow) !important; } body .dp-site .dp-news-copy{ background:#fff !important; } body .dp-site .dp-news-copy h3{ color:#171b2b !important; } body .dp-site .dp-news-copy p{ color:#676f83 !important; } body .dp-site .dp-news-meta small{ color:#7928e8 !important; } body .dp-site .dp-news-meta em{ color:#8990a2 !important; } body .dp-site .dp-news-copy button, body .dp-site .dp-view-news{ color:#6d32de !important; } /* ============================================================ FOOTER DARK NAVY / PURPLE ============================================================ */ body .dp-site .dp-footer{ color:#fff !important; background: radial-gradient( circle at 100% 100%, rgba(91,29,190,.24), transparent 37% ), linear-gradient( 115deg, #020b25, #061238 58%, #18083d ) !important; border-top:0 !important; } body .dp-site .dp-footer-grid{ max-width:1380px !important; padding-top:42px !important; padding-bottom:32px !important; } body .dp-site .dp-footer-logo strong, body .dp-site .dp-footer-column h4{ color:#fff !important; } body .dp-site .dp-footer-logo small, body .dp-site .dp-footer-brand p, body .dp-site .dp-footer-column p, body .dp-site .dp-footer-column button{ color:#aab5d3 !important; } body .dp-site .dp-footer-brand > span{ color:#a760ff !important; } body .dp-site .dp-footer-socials span{ color:#fff !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.11) !important; } body .dp-site .dp-footer-bottom{ color:#7886a9 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ PICKLE MANIA STYLE BALLOON KEEP GLASS + DEWPOINT COLORS ============================================================ */ body .dp-pm-balloon{ background: linear-gradient( 145deg, rgba(15,17,57,.88), rgba(35,16,73,.84) ) !important; border: 1px solid rgba(137,97,255,.48) !important; backdrop-filter: blur(14px) saturate(135%) !important; -webkit-backdrop-filter: blur(14px) saturate(135%) !important; box-shadow: 0 18px 55px rgba(8,8,30,.30) !important; } body .dp-pm-balloon .booking-float-checkout{ color:#fff !important; background: linear-gradient( 90deg, #8b28eb, #6542f2, #287bf5 ) !important; border:0 !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-final-feature-strip{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } body .dp-site .dp-social-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } body .dp-site .dp-news-grid{ grid-template-columns: 1fr !important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ /* * BOOKING */ body .dp-site .dp-home-booking{ padding: 28px 12px 30px !important; } body .dp-site .dp-home-booking .dp-pm-booking .dp-tap-booking-main{ padding:10px !important; border-radius:15px !important; } /* * Preserve mobile date swipe fix */ body .dp-site .dp-home-booking .dp-pm-booking .swipe-date-shell{ display:block !important; width:100% !important; overflow:visible !important; } body .dp-site .dp-home-booking .dp-pm-booking .desktop-date-arrow{ display:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip{ display:flex !important; gap:8px !important; overflow-x:auto !important; padding: 5px 4px 10px !important; scrollbar-width:none !important; -webkit-overflow-scrolling: touch !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip::-webkit-scrollbar{ display:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip > button{ flex: 0 0 72px !important; width:72px !important; min-width:72px !important; height:76px !important; scroll-snap-align:start !important; } /* * Booking court table still scrolls horizontally. */ body .dp-site .dp-home-booking .dp-pm-booking .tap-slot-grid{ min-width:0 !important; } /* * FEATURES */ body .dp-site .dp-final-feature-strip{ display:flex !important; gap:12px !important; overflow-x:auto !important; padding: 26px 12px 32px !important; scroll-snap-type: x proximity !important; } body .dp-site .dp-final-feature-strip > div{ flex: 0 0 260px !important; scroll-snap-align: start !important; } /* * SOCIAL */ body .dp-site .dp-social-section, body .dp-site .dp-news-section{ padding: 30px 12px !important; } body .dp-site .dp-social-grid{ grid-template-columns: 1fr !important; } /* * NEWS */ body .dp-site .dp-news-grid{ grid-template-columns: 1fr !important; } /* * FOOTER */ body .dp-site .dp-footer-grid{ grid-template-columns: 1fr !important; gap:25px !important; padding: 34px 18px 24px !important; } body .dp-site .dp-footer-bottom{ flex-direction: column !important; align-items: flex-start !important; gap:6px !important; padding: 14px 18px 22px !important; } } /* ============================================================ HERO DARK NAVY FIX Keep only the hero section dark ============================================================ */ body .dp-site.dp-final-board{ background:transparent !important; overflow:visible !important; } /* Hero wrapper */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-hero-shell, body .dp-site .dp-home-hero, body .dp-site .dp-final-board > header{ background: radial-gradient(circle at 78% 20%, rgba(118,52,255,.28), transparent 28%), radial-gradient(circle at 68% 48%, rgba(41,120,255,.14), transparent 30%), linear-gradient(115deg, #020b25 0%, #06143b 52%, #21084f 100%) !important; color:#fff !important; } /* Hero text */ body .dp-site .dp-final-hero h1, body .dp-site .dp-final-hero h2, body .dp-site .dp-final-hero h3, body .dp-site .dp-final-hero h4, body .dp-site .dp-hero h1, body .dp-site .dp-hero h2, body .dp-site .dp-hero h3, body .dp-site .dp-hero h4, body .dp-site .dp-home-hero h1, body .dp-site .dp-home-hero h2, body .dp-site .dp-home-hero h3, body .dp-site .dp-home-hero h4{ color:#fff !important; } body .dp-site .dp-final-hero p, body .dp-site .dp-final-hero small, body .dp-site .dp-final-hero span, body .dp-site .dp-hero p, body .dp-site .dp-hero small, body .dp-site .dp-hero span, body .dp-site .dp-home-hero p, body .dp-site .dp-home-hero small, body .dp-site .dp-home-hero span{ color:rgba(255,255,255,.86) !important; } /* Big watermark text */ body .dp-site .dp-watermark-logo{ color:rgba(160,145,255,.12) !important; } /* Hero button */ body .dp-site .dp-final-hero .primary, body .dp-site .dp-final-hero .dp-book-now, body .dp-site .dp-hero .primary, body .dp-site .dp-home-hero .primary{ color:#fff !important; background:linear-gradient(90deg,#8c28ea,#6541f1,#2d7bf6) !important; border:0 !important; box-shadow:0 10px 26px rgba(105,56,229,.28) !important; } /* Keep logo side visually blended */ body .dp-site .dp-final-hero .dp-hero-art, body .dp-site .dp-hero .dp-hero-art, body .dp-site .dp-home-hero .dp-hero-art{ background:transparent !important; } /* Make sure the section after hero remains light */ body .dp-site .dp-home-booking{ margin-top:0 !important; position:relative !important; z-index:2 !important; } /* ============================================================ DEWPOINT BALLOON — 50% TIGHTER SPACING ============================================================ */ /* overall balloon slightly slimmer */ body .dp-pm-balloon{ width:min(320px, calc(100vw - 16px)) !important; max-width:320px !important; } /* top summary area */ body .dp-pm-balloon .booking-float-top{ padding:8px 10px !important; gap:6px !important; } /* selected count + total */ body .dp-pm-balloon .booking-float-summary{ margin:0 !important; gap:1px !important; } body .dp-pm-balloon .booking-float-summary b{ margin:0 !important; font-size:11px !important; } body .dp-pm-balloon .booking-float-summary strong{ margin:0 !important; font-size:15px !important; } /* actions */ body .dp-pm-balloon .booking-float-actions{ gap:5px !important; } /* minimize / maximize */ body .dp-pm-balloon .booking-float-toggle{ width:30px !important; height:30px !important; min-width:30px !important; padding:0 !important; border-radius:8px !important; } /* checkout button */ body .dp-pm-balloon .booking-float-checkout{ min-height:30px !important; padding: 6px 10px !important; border-radius:8px !important; font-size:10px !important; } /* selected-bookings container */ body .dp-pm-balloon .booking-float-items{ padding:6px !important; max-height:250px !important; } /* each date group */ body .dp-pm-balloon .dp-booking-date-group{ margin: 0 0 4px !important; padding:5px !important; border-radius:9px !important; } /* date heading */ body .dp-pm-balloon .dp-booking-date-title{ margin: 0 0 3px !important; padding:0 !important; } /* slot list */ body .dp-pm-balloon .dp-balloon-slot-list{ gap:4px !important; } /* each selected court/time */ body .dp-pm-balloon .dp-balloon-slot-list article{ min-height:0 !important; margin:0 !important; padding: 6px 7px !important; gap:6px !important; border-radius:8px !important; } body .dp-pm-balloon .dp-balloon-slot-list article b{ font-size:10px !important; } body .dp-pm-balloon .dp-balloon-slot-list article small{ margin-top:1px !important; font-size:8px !important; } body .dp-pm-balloon .dp-balloon-slot-list article strong{ font-size:10px !important; } /* remove X */ body .dp-pm-balloon .dp-balloon-slot-list article > button{ width:24px !important; height:24px !important; min-width:24px !important; padding:0 !important; font-size:11px !important; } /* ============================================================ MOBILE — EVEN MORE COMPACT ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ width:min(285px, calc(100vw - 12px)) !important; max-width:285px !important; right:6px !important; bottom:6px !important; } body .dp-pm-balloon .booking-float-top{ padding:7px 8px !important; } body .dp-pm-balloon .booking-float-items{ padding:5px !important; max-height:190px !important; } body .dp-pm-balloon .dp-booking-date-group{ padding:4px !important; } body .dp-pm-balloon .dp-balloon-slot-list article{ padding:5px 6px !important; } } /* ============================================================ DEWPOINT BALLOON REDUCE OUTER EDGE/GUTTER ONLY Do NOT tighten internal content ============================================================ */ body .dp-pm-balloon{ padding:5px !important; } /* remove any extra child margin creating the thick frame */ body .dp-pm-balloon .booking-float-top{ margin:0 !important; width:100% !important; } body .dp-pm-balloon .booking-float-items{ margin:0 !important; width:100% !important; } /* keep corners clean against slimmer outer edge */ body .dp-pm-balloon .booking-float-top{ border-radius:13px 13px 0 0 !important; } body .dp-pm-balloon .booking-float-items{ border-radius:0 0 13px 13px !important; } /* MOBILE — same thin outer edge */ @media(max-width:650px){ body .dp-pm-balloon{ padding:5px !important; } } /* ============================================================ DEWPOINT BALLOON — WIDER LAYOUT Keep internal spacing. Only widen the container and use the space better. ============================================================ */ /* DESKTOP */ body .dp-pm-balloon{ width:min( 430px, calc(100vw - 24px) ) !important; max-width:430px !important; padding:5px !important; } /* Date group: small date column on left, booking rows take remaining width */ body .dp-pm-balloon .dp-booking-date-group{ display:grid !important; grid-template-columns: 105px minmax(0,1fr) !important; align-items:center !important; column-gap:10px !important; width:100% !important; } /* Date label */ body .dp-pm-balloon .dp-booking-date-title{ width:100% !important; min-width:0 !important; } /* Selected slot side */ body .dp-pm-balloon .dp-balloon-slot-list{ width:100% !important; min-width:0 !important; } /* Each court selection uses full available width */ body .dp-pm-balloon .dp-balloon-slot-list article{ width:100% !important; box-sizing:border-box !important; } /* ============================================================ MOBILE Almost full-width balloon ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; left:8px !important; right:8px !important; padding:5px !important; } body .dp-pm-balloon .dp-booking-date-group{ grid-template-columns: 82px minmax(0,1fr) !important; column-gap:7px !important; } } /* ============================================================ DEWPOINT LOGO THEME V1 Based on official Dewpoint purple / blue / navy identity ============================================================ */ :root{ --dp-logo-navy:#03091d; --dp-logo-navy2:#071436; --dp-logo-purple:#6d28d9; --dp-logo-purple2:#8b3df0; --dp-logo-blue:#075fc9; --dp-logo-blue2:#1c7df2; --dp-logo-silver:#a9b0bf; --dp-logo-light:#f7f8fc; --dp-logo-white:#ffffff; --dp-logo-gradient: linear-gradient( 90deg, #6d28d9 0%, #7c35e4 34%, #125fc8 68%, #1c7df2 100% ); } /* ============================================================ OVERALL PAGE ============================================================ */ body .dp-site, body .dp-final-board{ background:#03091d !important; } /* ============================================================ NAVIGATION ============================================================ */ body .dp-site .dp-final-nav{ background: linear-gradient( 90deg, rgba(3,9,29,.97), rgba(7,20,54,.97) 55%, rgba(32,10,70,.96) ) !important; border-bottom: 1px solid rgba(111,55,220,.22) !important; box-shadow: 0 8px 30px rgba(0,0,0,.22) !important; } body .dp-site .dp-final-nav a, body .dp-site .dp-final-nav button{ color:#fff !important; } body .dp-site .dp-final-nav a:hover{ color:#9b61f2 !important; } /* ============================================================ HERO ============================================================ */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-home-hero{ background: radial-gradient( circle at 78% 35%, rgba(31,112,238,.20), transparent 24% ), radial-gradient( circle at 67% 30%, rgba(117,43,221,.24), transparent 30% ), linear-gradient( 110deg, #020718 0%, #061338 52%, #250951 100% ) !important; color:#fff !important; } body .dp-site .dp-final-hero h1, body .dp-site .dp-final-hero h2, body .dp-site .dp-hero h1, body .dp-site .dp-hero h2, body .dp-site .dp-home-hero h1, body .dp-site .dp-home-hero h2{ color:#fff !important; } body .dp-site .dp-final-hero p, body .dp-site .dp-hero p, body .dp-site .dp-home-hero p{ color:#d7def0 !important; } /* hero accent / gradient words */ body .dp-site .dp-final-hero .accent, body .dp-site .dp-final-hero .gradient, body .dp-site .dp-hero .accent, body .dp-site .dp-hero .gradient{ background: var(--dp-logo-gradient) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ HERO PRIMARY BUTTON ============================================================ */ body .dp-site .dp-final-hero .primary, body .dp-site .dp-final-hero .dp-book-now, body .dp-site .dp-hero .primary, body .dp-site .dp-home-hero .primary{ color:#fff !important; background: var(--dp-logo-gradient) !important; border:0 !important; box-shadow: 0 10px 28px rgba(76,61,210,.32) !important; } /* ============================================================ BOOKING SECTION WHITE — LIKE APPROVED PREVIEW ============================================================ */ body .dp-site .dp-home-booking{ background: linear-gradient( 180deg, #ffffff, #fbfbfe ) !important; color:#101426 !important; } body .dp-site .dp-home-booking-title small{ color:#702edc !important; } body .dp-site .dp-home-booking-title h2{ color:#101426 !important; } body .dp-site .dp-home-booking-title p{ color:#73798a !important; } /* ============================================================ ACTIVE DATE ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active{ color:#fff !important; background: var(--dp-logo-gradient) !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(90,55,214,.25) !important; } /* ============================================================ FEATURE SECTION VERY LIGHT PURPLE BAND ============================================================ */ body .dp-site .dp-final-feature-strip{ background: linear-gradient( 180deg, #f8f7fc, #f2effb ) !important; } body .dp-site .dp-final-feature-strip > div{ color:#15192a !important; background:#fff !important; border: 1px solid #e6e2f0 !important; box-shadow: 0 10px 28px rgba(30,25,62,.06) !important; } body .dp-site .dp-final-feature-strip > div::before{ color:#fff !important; background: var(--dp-logo-gradient) !important; } /* ============================================================ SOCIAL CONNECT WHITE SECTION ============================================================ */ body .dp-site .dp-social-section{ color:#15192a !important; background:#fff !important; } body .dp-site .dp-social-section .dp-section-heading h2{ color:#15192a !important; } body .dp-site .dp-social-card{ color:#15192a !important; background:#fff !important; border: 1px solid #e5e7ef !important; box-shadow: 0 8px 24px rgba(25,27,55,.06) !important; } body .dp-site .dp-social-card-head b{ color:#15192a !important; } body .dp-site .dp-social-icon{ color:#fff !important; background: var(--dp-logo-gradient) !important; } body .dp-site .dp-social-card button{ color:#fff !important; background: var(--dp-logo-gradient) !important; } /* ============================================================ NEWS & UPDATES VERY LIGHT SECTION ============================================================ */ body .dp-site .dp-news-section{ color:#15192a !important; background: linear-gradient( 180deg, #f8f8fb, #f3f2f8 ) !important; } body .dp-site .dp-news-section .dp-section-heading h2{ color:#15192a !important; } body .dp-site .dp-news-card{ color:#15192a !important; background:#fff !important; border: 1px solid #e4e5ec !important; box-shadow: 0 8px 24px rgba(24,27,55,.06) !important; } body .dp-site .dp-news-copy{ background:#fff !important; } body .dp-site .dp-news-copy h3{ color:#15192a !important; } body .dp-site .dp-news-meta small, body .dp-site .dp-news-copy button, body .dp-site .dp-view-news{ color:#6e30dc !important; } /* ============================================================ PICKLE MANIA BALLOON KEEP STRUCTURE — APPLY DEWPOINT LOGO COLORS ============================================================ */ body .dp-pm-balloon{ color:#fff !important; background: linear-gradient( 145deg, rgba(5,11,31,.91), rgba(17,17,62,.88) ) !important; border: 2px solid rgba(110,59,220,.55) !important; box-shadow: 0 18px 50px rgba(0,0,0,.32), 0 0 24px rgba(37,105,225,.12) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } /* checkout */ body .dp-pm-balloon .booking-float-checkout{ color:#fff !important; background: var(--dp-logo-gradient) !important; border:0 !important; box-shadow: 0 8px 20px rgba(67,66,215,.30) !important; } /* minimize / maximize */ body .dp-pm-balloon .booking-float-toggle{ color:#fff !important; background: rgba(92,49,190,.40) !important; border: 1px solid rgba(144,95,236,.45) !important; } /* scrollbar */ body .dp-pm-balloon .booking-float-items::-webkit-scrollbar-thumb{ background: linear-gradient( #7b34df, #176fdc ) !important; } /* ============================================================ FOOTER DEWPOINT NAVY / PURPLE / BLUE ============================================================ */ body .dp-site .dp-footer{ color:#fff !important; background: radial-gradient( circle at 100% 100%, rgba(100,35,209,.24), transparent 37% ), linear-gradient( 105deg, #020718 0%, #07163c 56%, #26094e 100% ) !important; border-top: 1px solid rgba(103,70,204,.20) !important; } body .dp-site .dp-footer-logo strong{ color:#fff !important; } body .dp-site .dp-footer-logo small{ color:#aeb7c9 !important; } body .dp-site .dp-footer-column h4{ color:#fff !important; } body .dp-site .dp-footer-column p, body .dp-site .dp-footer-column button, body .dp-site .dp-footer-brand p{ color:#aeb8d0 !important; } body .dp-site .dp-footer-brand > span{ color:#8c51ec !important; } body .dp-site .dp-footer-socials span{ color:#fff !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.11) !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-home-hero{ background: radial-gradient( circle at 90% 20%, rgba(111,43,221,.24), transparent 25% ), linear-gradient( 145deg, #020718, #07163b 60%, #210947 ) !important; } body .dp-pm-balloon{ border-width: 1px !important; } } /* ============================================================ DEWPOINT LOADING / SPINNER THEME Replace remaining Pickle Mania green ============================================================ */ /* Common loading wrappers */ body .dp-site .loading, body .dp-site .loader, body .dp-site .app-loader, body .dp-site .page-loader, body .dp-site .loading-screen, body .dp-site .loading-overlay, body .dp-site .loading-wrap{ color:#6d28d9 !important; } /* Circular spinners */ body .dp-site .spinner, body .dp-site .loading-spinner, body .dp-site .loader-spinner, body .dp-site .spinner-border{ border-color: rgba(28,125,242,.20) !important; border-top-color: #6d28d9 !important; border-right-color: #1c7df2 !important; } /* SVG loaders */ body .dp-site .loader svg, body .dp-site .loading svg, body .dp-site .app-loader svg, body .dp-site .page-loader svg{ color:#6d28d9 !important; fill:#6d28d9 !important; stroke:#1c7df2 !important; } /* Loader circles / paths */ body .dp-site .loader svg circle, body .dp-site .loading svg circle, body .dp-site .app-loader svg circle{ stroke:#6d28d9 !important; } body .dp-site .loader svg path, body .dp-site .loading svg path, body .dp-site .app-loader svg path{ fill:#1c7df2 !important; stroke:#1c7df2 !important; } /* Dots loader */ body .dp-site .loader-dot, body .dp-site .loading-dot, body .dp-site .loading-dots span{ background: linear-gradient( 135deg, #6d28d9, #1c7df2 ) !important; color:#fff !important; } /* Progress bars */ body .dp-site .loading-progress, body .dp-site .loader-progress, body .dp-site .progress-bar{ background: linear-gradient( 90deg, #6d28d9, #8b3df0, #1c7df2 ) !important; } /* If the loader uses a pseudo-element */ body .dp-site .loader::before, body .dp-site .loader::after, body .dp-site .loading-spinner::before, body .dp-site .loading-spinner::after{ border-color: rgba(109,40,217,.18) !important; border-top-color: #6d28d9 !important; border-right-color: #1c7df2 !important; } /* Generic old green classes sometimes used by Pickle Mania */ body .dp-site .text-green, body .dp-site .text-success, body .dp-site .loader-success{ color:#6d28d9 !important; } body .dp-site .bg-green, body .dp-site .bg-success{ background: linear-gradient( 90deg, #6d28d9, #1c7df2 ) !important; } /* ============================================================ FULL-PAGE LOADING SCREEN ============================================================ */ body .dp-site .loading-screen, body .dp-site .app-loader, body .dp-site .page-loader{ background: radial-gradient( circle at center, rgba(109,40,217,.12), transparent 28% ), linear-gradient( 135deg, #020718, #071436 58%, #21094a ) !important; } /* Loading text */ body .dp-site .loading-screen p, body .dp-site .loading-screen span, body .dp-site .app-loader p, body .dp-site .app-loader span{ color:#dbe4f6 !important; } /* ============================================================ DEWPOINT EXACT STARTUP / WAITING SCREEN Actual classes from Pickle Mania source: .loading-card .loading-dot .loading-card .logo ============================================================ */ /* Waiting screen */ .loading-card{ min-height:100vh !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; color:#ffffff !important; background: radial-gradient( circle at 50% 42%, rgba(109,40,217,.22), transparent 25% ), radial-gradient( circle at 60% 48%, rgba(28,125,242,.14), transparent 32% ), linear-gradient( 135deg, #020718 0%, #071436 58%, #21094a 100% ) !important; } /* DEWPOINT logo text */ .loading-card .logo{ margin-bottom:24px !important; color:#ffffff !important; font-size:25px !important; text-shadow: 0 0 20px rgba(100,70,230,.22) !important; } /* * Pickle Mania originally makes .logo b lime/green. * Override that exact element. */ .loading-card .logo b{ color:#7c3aed !important; background: linear-gradient( 90deg, #8b3df0, #6d28d9 42%, #1c7df2 ) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* Any icon beside the logo */ .loading-card .logo i{ color:#1c7df2 !important; } /* ============================================================ ACTUAL ANIMATED WAITING DOT This is what was still GREEN. ============================================================ */ .loading-dot{ color:#7c3aed !important; font-size:32px !important; text-shadow: 0 0 10px rgba(109,40,217,.75), 0 0 24px rgba(28,125,242,.45) !important; animation: dewpointLoaderPulse 1s infinite ease-in-out !important; } @keyframes dewpointLoaderPulse{ 0%{ opacity:.40; color:#6d28d9; transform:scale(.90); } 50%{ opacity:1; color:#1c7df2; transform:scale(1.12); } 100%{ opacity:.40; color:#8b3df0; transform:scale(.90); } } /* Waiting text */ .loading-card p{ margin-top:8px !important; color:#cbd5eb !important; font-size:11px !important; letter-spacing:.2px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ .loading-card .logo{ font-size:21px !important; margin-bottom:20px !important; } .loading-dot{ font-size:29px !important; } } /* ============================================================ DEWPOINT MOBILE BALLOON — TRUE CENTER FIX ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ position:fixed !important; left:50% !important; right:auto !important; transform: translateX(-50%) !important; width: calc(100vw - 16px) !important; max-width: 430px !important; bottom: calc( 8px + env(safe-area-inset-bottom) ) !important; margin:0 !important; } } /* Very small phones */ @media(max-width:380px){ body .dp-pm-balloon{ width: calc(100vw - 10px) !important; } } /* ============================================================ DEWPOINT IPHONE BALLOON TOGGLE FIX Larger touch target + Safari-safe interaction ============================================================ */ body .dp-pm-balloon .booking-float-actions{ position:relative !important; z-index:20 !important; pointer-events:auto !important; } body .dp-pm-balloon .booking-float-toggle{ position:relative !important; z-index:30 !important; pointer-events:auto !important; cursor:pointer !important; touch-action:manipulation !important; -webkit-user-select:none !important; user-select:none !important; -webkit-tap-highlight-color: transparent !important; } /* ============================================================ IPHONE / MOBILE Visible button stays compact, touch area is much larger. ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon .booking-float-toggle{ width:36px !important; height:36px !important; min-width:36px !important; display:grid !important; place-items:center !important; padding:0 !important; font-size:14px !important; overflow:visible !important; } /* * Invisible 48 x 48px Apple-friendly touch target. */ body .dp-pm-balloon .booking-float-toggle::after{ content:"" !important; position:absolute !important; width:48px !important; height:48px !important; left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important; } /* * Make sure nothing in the header sits over the toggle. */ body .dp-pm-balloon .booking-float-top{ position:relative !important; z-index:10 !important; overflow:visible !important; pointer-events:auto !important; } body .dp-pm-balloon .booking-float-checkout{ position:relative !important; z-index:10 !important; } /* * Expanded state */ body .dp-pm-balloon:not(.collapsed) .booking-float-items{ display:block !important; overflow-y:auto !important; -webkit-overflow-scrolling: touch !important; } /* * Minimized state */ body .dp-pm-balloon.collapsed .booking-float-items{ display:none !important; } } /* ============================================================ DEWPOINT HERO — REAL LOGO ============================================================ */ body .dp-site .dp-final-art{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:360px !important; overflow:visible !important; } /* glow behind logo */ body .dp-site .dp-final-art::before{ content:"" !important; position:absolute !important; width:72% !important; aspect-ratio:1 !important; border-radius:50% !important; background: radial-gradient( circle, rgba(109,40,217,.28) 0%, rgba(28,125,242,.13) 38%, transparent 70% ) !important; filter: blur(8px) !important; pointer-events:none !important; } body .dp-site .dp-final-logo-wrap{ position:relative !important; z-index:2 !important; width:min(470px,88%) !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:auto !important; } body .dp-site .dp-final-logo-image{ display:block !important; width:100% !important; height:auto !important; max-height:430px !important; object-fit:contain !important; object-position:center !important; filter: drop-shadow( 0 18px 32px rgba(0,0,0,.28) ) drop-shadow( 0 0 18px rgba(100,56,225,.22) ) !important; } /* * Hide old DP placeholder if any old CSS/markup survives. */ body .dp-site .dp-final-artmark{ display:none !important; } /* ============================================================ LARGE DESKTOP ============================================================ */ @media(min-width:1300px){ body .dp-site .dp-final-logo-wrap{ width:min(520px,90%) !important; } } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-final-art{ min-height:300px !important; } body .dp-site .dp-final-logo-wrap{ width:min(390px,84%) !important; } } /* ============================================================ MOBILE Keep logo centered below hero copy ============================================================ */ @media(max-width:650px){ body .dp-site .dp-final-art{ min-height:235px !important; padding: 8px 0 18px !important; } body .dp-site .dp-final-logo-wrap{ width:min( 285px, 76vw ) !important; } body .dp-site .dp-final-art::before{ width:88% !important; } } /* ========================================================= DEWPOINT HERO SIMPLE SLASH LOGO WALLPAPER ========================================================= */ body .dp-site .dp-final-art{ position:relative !important; min-height:430px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; isolation:isolate !important; } /* LARGE RIGHT-HAND SLASH PANEL */ body .dp-site .dp-final-art::before{ content:"" !important; position:absolute !important; top:-12px !important; right:-40px !important; bottom:-12px !important; left:-105px !important; background: linear-gradient( 135deg, rgba(35,76,255,.08) 0%, rgba(99,46,235,.26) 42%, rgba(55,18,127,.55) 100% ) !important; clip-path: polygon( 31% 0, 100% 0, 75% 100%, 0 100% ) !important; z-index:0 !important; filter: drop-shadow(-10px 0 18px rgba(87,59,255,.13)) drop-shadow(0 15px 34px rgba(0,0,0,.18)) !important; pointer-events:none !important; } /* BRIGHT EDGE ON THE SLASH */ body .dp-site .dp-final-art::after{ content:"" !important; position:absolute !important; top:-6px !important; right:-25px !important; bottom:-6px !important; left:-85px !important; background: linear-gradient( 135deg, rgba(65,142,255,.88), rgba(133,65,255,.65), rgba(255,255,255,.12) ) !important; clip-path: polygon( 29.5% 0, 31% 0, 1.5% 100%, 0 100% ) !important; opacity:.8 !important; z-index:1 !important; pointer-events:none !important; } /* LOGO HOLDER */ body .dp-site .dp-final-logo-wrap{ position:relative !important; z-index:2 !important; width:min(480px,82%) !important; margin-left:auto !important; margin-right:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; } /* UPLOADED OWNER LOGO */ body .dp-site .dp-final-logo-image{ display:block !important; width:auto !important; max-width:100% !important; max-height:355px !important; object-fit:contain !important; position:relative !important; z-index:3 !important; filter: drop-shadow(0 18px 30px rgba(0,0,0,.20)) !important; } /* MOBILE / TABLET */ @media (max-width:1100px){ body .dp-site .dp-final-art{ min-height:360px !important; } body .dp-site .dp-final-art::before{ left:-55px !important; right:-25px !important; clip-path: polygon( 26% 0, 100% 0, 78% 100%, 0 100% ) !important; } body .dp-site .dp-final-art::after{ left:-40px !important; } body .dp-site .dp-final-logo-wrap{ width:min(420px,86%) !important; margin-right:20px !important; } body .dp-site .dp-final-logo-image{ max-height:300px !important; } } @media (max-width:860px){ body .dp-site .dp-final-art{ min-height:285px !important; margin-top:10px !important; } body .dp-site .dp-final-art::before{ left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; clip-path: polygon( 17% 0, 100% 0, 83% 100%, 0 100% ) !important; } body .dp-site .dp-final-art::after{ display:none !important; } body .dp-site .dp-final-logo-wrap{ width:min(350px,88%) !important; margin:0 auto !important; } body .dp-site .dp-final-logo-image{ max-height:235px !important; } } /* ========================================================= DEWPOINT HERO RIGHT SIDE WALLPAPER MODE ========================================================= */ body .dp-site .dp-final-art.dp-final-art-wallpaper{ position:relative !important; min-height:430px !important; border-radius:0 !important; overflow:hidden !important; isolation:isolate !important; background: radial-gradient(circle at 30% 50%, rgba(78,123,255,.10), transparent 42%), radial-gradient(circle at 75% 40%, rgba(122,69,255,.20), transparent 48%), linear-gradient(135deg, rgba(7,18,58,.00) 0%, rgba(50,22,114,.28) 100%), var(--dp-hero-wallpaper) !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; background-position: center center, center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; } /* optional slash / divider effect */ body .dp-site .dp-final-art.dp-final-art-wallpaper::before{ content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-32px !important; width:150px !important; background: linear-gradient( 135deg, rgba(255,255,255,0) 0%, rgba(115,88,255,.18) 45%, rgba(88,145,255,.24) 50%, rgba(255,255,255,0) 56% ) !important; clip-path:polygon(100% 0, 45% 0, 0 100%, 55% 100%) !important; z-index:2 !important; pointer-events:none !important; } /* remove old boxed-image sizing if ever still present */ body .dp-site .dp-final-logo-wrap, body .dp-site .dp-final-logo-image{ display:none !important; } @media (max-width:1100px){ body .dp-site .dp-final-art.dp-final-art-wallpaper{ min-height:340px !important; background-size: 100% 100%, 100% 100%, 100% 100%, 88% auto !important; } } @media (max-width:860px){ body .dp-site .dp-final-art.dp-final-art-wallpaper{ min-height:260px !important; background-size: 100% 100%, 100% 100%, 100% 100%, 82% auto !important; } body .dp-site .dp-final-art.dp-final-art-wallpaper::before{ left:-14px !important; width:86px !important; } } /* ========================================================= DEWPOINT FULL HERO WALLPAPER MODE Entire hero uses wallpaper. Existing copy/buttons float above it. ========================================================= */ /* Use the current Dewpoint image as temporary wallpaper. Later this can point to an owner-uploaded wallpaper. */ body .dp-site{ /* * No bundled/static Dewpoint logo fallback. * Venue-owned imagery is managed separately. */ --dp-hero-wallpaper:none; } /* HERO CONTAINER */ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ position:relative !important; overflow:hidden !important; background-image: linear-gradient( 90deg, rgba(1,9,34,.92) 0%, rgba(2,15,58,.84) 34%, rgba(12,17,77,.57) 61%, rgba(57,15,105,.30) 100% ), var(--dp-hero-wallpaper) !important; background-repeat: no-repeat, no-repeat !important; background-position: center, center !important; background-size: cover, cover !important; } /* Ensure copy stays above wallpaper */ body .dp-site .dp-final-grid, body .dp-site .dp-final-copy{ position:relative !important; z-index:3 !important; } /* LEFT COPY REMAINS READABLE */ body .dp-site .dp-final-copy{ max-width:620px !important; } /* subtle backing glow behind copy only */ body .dp-site .dp-final-copy::before{ content:"" !important; position:absolute !important; inset:-45px -75px -45px -55px !important; background: radial-gradient( ellipse at 35% 50%, rgba(0,8,34,.44) 0%, rgba(0,8,34,.26) 46%, transparent 76% ) !important; z-index:-1 !important; pointer-events:none !important; } /* Hide old separate right-side logo/art area */ body .dp-site .dp-final-art, body .dp-site .dp-final-logo-wrap, body .dp-site .dp-final-logo-image{ display:none !important; } /* Keep hero full and spacious */ body .dp-site .dp-final-grid{ grid-template-columns:minmax(0,620px) 1fr !important; min-height:500px !important; align-items:center !important; } /* Text shadows for wallpaper readability */ body .dp-site .dp-final-copy h1, body .dp-site .dp-final-copy .dp-tagline, body .dp-site .dp-final-copy p, body .dp-site .dp-final-copy .dp-hero-perks{ text-shadow:0 2px 18px rgba(0,0,0,.34) !important; } /* Tablet */ @media(max-width:1100px){ body .dp-site .dp-final-grid{ min-height:460px !important; grid-template-columns:minmax(0,560px) 1fr !important; } } /* Mobile */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-position:center !important; } body .dp-site .dp-final-grid{ grid-template-columns:1fr !important; min-height:500px !important; } body .dp-site .dp-final-copy{ max-width:100% !important; } } /* ========================================================= DEWPOINT HERO WALLPAPER RECTANGULAR FIT + REMOVE OLD DP WATERMARK ========================================================= */ /* Remove old decorative DP watermark */ body .dp-site .dp-final-watermark{ display:none !important; } /* Entire hero wallpaper should fit the rectangular hero */ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, 100% 100% !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; } /* Keep floating content above wallpaper */ body .dp-site .dp-final-grid, body .dp-site .dp-final-copy{ position:relative !important; z-index:3 !important; } /* No extra DP pseudo/watermark behind text */ body .dp-site .dp-final-copy::after{ display:none !important; content:none !important; } /* Desktop hero rectangle */ body .dp-site .dp-final-grid{ min-height:500px !important; } /* Tablet */ @media(max-width:1100px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, 100% 100% !important; } } /* Mobile - allow wallpaper to remain full hero background */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: cover, cover !important; background-position:center center !important; } } /* ========================================================= MOBILE HERO WALLPAPER - SHOW FULL IMAGE ========================================================= */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, contain !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color:#081136 !important; } } /* ========================================================= LIVE VENUE HERO WALLPAPERS Desktop = hero_wallpaper_desktop Mobile = hero_wallpaper_mobile ========================================================= */ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ position:relative !important; overflow:hidden !important; background-image: linear-gradient( 90deg, rgba(2,10,35,.78) 0%, rgba(3,15,55,.58) 40%, rgba(25,14,75,.30) 100% ), var(--dp-hero-desktop) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: 100% 100%, 100% 100% !important; } /* Floating content remains above wallpaper */ body .dp-site .dp-final-hero.dp-live-hero-wallpaper .dp-final-copy{ position:relative !important; z-index:3 !important; } /* Old DP watermark gone */ body .dp-site .dp-final-hero .dp-final-watermark{ display:none !important; } /* Old separate right-side logo is no longer needed */ body .dp-site .dp-final-hero .dp-final-art, body .dp-site .dp-final-hero .dp-final-logo-wrap, body .dp-site .dp-final-hero .dp-final-logo-image{ display:none !important; } /* ========================= MOBILE WALLPAPER ========================= */ @media(max-width:860px){ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ background-image: linear-gradient( 90deg, rgba(2,10,35,.68) 0%, rgba(3,15,55,.46) 48%, rgba(25,14,75,.20) 100% ), var(--dp-hero-mobile) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; /* * Show the complete uploaded mobile artwork. * No cropping of the logo. */ background-size: 100% 100%, 100% 100% !important; } } /* ========================================================= DEWPOINT CENTERED REGISTRATION MODAL ========================================================= */ body .dp-site .dp-register-modal{ width:min(680px,calc(100vw - 32px)) !important; max-width:680px !important; max-height:90vh !important; overflow-y:auto !important; } body .dp-site .dp-register-form{ display:flex; flex-direction:column; gap:15px; } body .dp-site .dp-register-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; } body .dp-site .dp-register-grid label{ display:flex; flex-direction:column; gap:7px; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ width:100%; box-sizing:border-box; } body .dp-site .dp-register-spacer{ min-height:1px; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:18px; } body .dp-site .dp-register-modal .dp-login-submit{ width:100%; margin-top:2px; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 24px) !important; max-height:92vh !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr; } body .dp-site .dp-register-spacer{ display:none; } } /* ========================================================= COMPACT DEWPOINT REGISTER MODAL ========================================================= */ body .dp-site .dp-register-modal{ width:min(520px,calc(100vw - 32px)) !important; max-width:520px !important; max-height:88vh !important; padding:24px 26px 22px !important; border-radius:18px !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:14px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:20px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ font-size:9px !important; letter-spacing:4px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:28px !important; line-height:1.05 !important; margin:10px 0 6px !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ font-size:13px !important; margin:0 !important; } body .dp-site .dp-register-form{ gap:11px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr 1fr !important; gap:10px 12px !important; } body .dp-site .dp-register-grid label{ gap:5px !important; font-size:12px !important; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ min-height:42px !important; height:42px !important; padding:9px 12px !important; font-size:13px !important; border-radius:10px !important; } body .dp-site .dp-register-modal .dp-login-submit{ min-height:44px !important; height:44px !important; margin-top:2px !important; font-size:13px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:10px !important; font-size:12px !important; } body .dp-site .dp-register-modal .dp-login-close{ top:12px !important; right:14px !important; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 24px) !important; max-width:440px !important; padding:20px 18px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; } } /* ========================================================= REGISTER TERMS & CONDITIONS ========================================================= */ body .dp-site .dp-register-terms{ display:flex !important; align-items:flex-start !important; gap:9px !important; margin:2px 0 4px !important; cursor:pointer !important; font-size:12px !important; line-height:1.45 !important; color:#64748b !important; } body .dp-site .dp-register-terms input{ width:16px !important; height:16px !important; min-height:16px !important; flex:0 0 16px !important; margin:2px 0 0 !important; padding:0 !important; accent-color:var(--dp-accent) !important; } body .dp-site .dp-register-terms span{ display:block !important; } body .dp-site .dp-register-terms-link{ display:inline !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; color:var(--dp-accent) !important; font:inherit !important; font-weight:800 !important; text-decoration:underline !important; cursor:pointer !important; } /* ========================================================= REGISTER MODAL - FIT NORMAL DESKTOP VIEWPORT ========================================================= */ body .dp-site .dp-register-modal{ width:min(500px,calc(100vw - 32px)) !important; max-width:500px !important; max-height:calc(100vh - 48px) !important; padding:18px 22px 16px !important; border-radius:16px !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:10px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:5px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:18px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ font-size:8px !important; letter-spacing:3px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:24px !important; line-height:1.05 !important; margin:6px 0 4px !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ font-size:12px !important; line-height:1.35 !important; margin:0 !important; } body .dp-site .dp-register-form{ gap:8px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr 1fr !important; gap:8px 10px !important; } body .dp-site .dp-register-grid label{ gap:4px !important; font-size:11px !important; line-height:1.2 !important; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ min-height:38px !important; height:38px !important; padding:7px 10px !important; font-size:12px !important; border-radius:9px !important; } body .dp-site .dp-register-terms{ gap:7px !important; margin:0 !important; font-size:11px !important; line-height:1.3 !important; } body .dp-site .dp-register-terms input{ width:15px !important; height:15px !important; min-height:15px !important; flex:0 0 15px !important; margin-top:1px !important; } body .dp-site .dp-register-modal .dp-login-submit{ height:40px !important; min-height:40px !important; margin-top:0 !important; font-size:12px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:6px !important; font-size:11px !important; } body .dp-site .dp-register-modal .dp-login-close{ top:8px !important; right:10px !important; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 20px) !important; max-width:430px !important; max-height:calc(100vh - 20px) !important; padding:16px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; } } /* ========================================================= DEWPOINT DESKTOP HERO - FINAL FULL COVER Uploaded artwork fills hero. Logo placement comes from the artwork itself. ========================================================= */ @media(min-width:861px){ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ position:relative !important; width:100% !important; aspect-ratio:851 / 315 !important; height:auto !important; min-height:0 !important; background-image: linear-gradient( 90deg, rgba(2,10,35,.58) 0%, rgba(2,10,35,.40) 35%, rgba(5,13,48,.16) 65%, rgba(25,14,75,.05) 100% ), var(--dp-hero-desktop) !important; /* * Cover the complete hero. * The generated artwork already places * the Dewpoint logo on the right. */ background-size: 100% 100%, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color:#020b2b !important; overflow:hidden !important; } body .dp-site .dp-final-hero.dp-live-hero-wallpaper .dp-final-copy{ position:relative !important; z-index:3 !important; } body .dp-site .dp-final-hero .dp-final-watermark{ display:none !important; } body .dp-site .dp-final-hero .dp-final-art, body .dp-site .dp-final-hero .dp-final-logo-wrap, body .dp-site .dp-final-hero .dp-final-logo-image{ display:none !important; } } /* ============================================================ DEWPOINT BOOKING BALLOON FINAL PICKLE MANIA LAYOUT Keep Dewpoint purple/blue colors only. ============================================================ */ body .dp-site .booking-float.dp-pm-balloon{ position:fixed !important; left:50% !important; right:auto !important; bottom:18px !important; transform:translateX(-50%) !important; width:min( 560px, calc(100% - 24px) ) !important; max-width:560px !important; z-index:1000 !important; padding:12px 14px !important; border-radius:18px !important; box-sizing:border-box !important; margin:0 !important; } /* ------------------------------------------------------------ TOP SUMMARY ------------------------------------------------------------ */ body .dp-site .dp-pm-balloon .booking-float-top{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; width:100% !important; margin:0 !important; padding: 0 0 9px 0 !important; border-radius:0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; } body .dp-site .dp-pm-balloon .booking-float-summary{ display:flex !important; flex-direction:column !important; gap:3px !important; } body .dp-site .dp-pm-balloon .booking-float-summary b{ font-size:11px !important; } body .dp-site .dp-pm-balloon .booking-float-summary strong{ font-size:10px !important; } /* ------------------------------------------------------------ ACTIONS ------------------------------------------------------------ */ body .dp-site .dp-pm-balloon .booking-float-actions{ display:flex !important; align-items:center !important; gap:7px !important; } body .dp-site .dp-pm-balloon .booking-float-toggle{ width:34px !important; height:34px !important; min-width:34px !important; padding:0 !important; display:grid !important; place-items:center !important; border-radius:10px !important; font-size:12px !important; } body .dp-site .dp-pm-balloon .booking-float-checkout{ border:0 !important; border-radius:11px !important; padding: 10px 14px !important; font-size:10px !important; font-weight:900 !important; white-space:nowrap !important; cursor:pointer !important; } /* ------------------------------------------------------------ SELECTED BOOKING LIST ------------------------------------------------------------ */ body .dp-site .dp-pm-balloon .booking-float-items{ display:flex !important; flex-direction:column !important; width:100% !important; max-height:190px !important; margin:0 !important; padding:0 !important; overflow-y:auto !important; overflow-x:hidden !important; border-radius:0 !important; } /* * Remove the Dewpoint 2-column date/booking layout. * Pickle Mania uses stacked groups. */ body .dp-site .dp-pm-balloon .dp-booking-date-group{ display:block !important; width:100% !important; margin:0 !important; padding: 8px 2px !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } body .dp-site .dp-pm-balloon .dp-booking-date-group:last-child{ border-bottom:0 !important; } /* Date heading */ body .dp-site .dp-pm-balloon .dp-booking-date-title{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; margin: 0 0 6px 0 !important; } body .dp-site .dp-pm-balloon .dp-booking-date-title span{ font-size:9px !important; font-weight:900 !important; letter-spacing:.5px !important; } body .dp-site .dp-pm-balloon .dp-booking-date-title small{ font-size:8px !important; } /* Slot list */ body .dp-site .dp-pm-balloon .dp-balloon-slot-list{ display:flex !important; flex-direction:column !important; width:100% !important; gap:0 !important; } /* Individual selected booking */ body .dp-site .dp-pm-balloon .dp-balloon-slot-list article{ width:100% !important; min-height:0 !important; margin:0 !important; padding: 8px 2px !important; display:grid !important; grid-template-columns: minmax(0,1fr) auto 26px !important; align-items:center !important; gap:10px !important; border-radius:0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-sizing:border-box !important; } body .dp-site .dp-pm-balloon .dp-balloon-slot-list article:last-child{ border-bottom:0 !important; } body .dp-site .dp-pm-balloon .dp-balloon-slot-list article b{ display:block !important; font-size:10px !important; } body .dp-site .dp-pm-balloon .dp-balloon-slot-list article small{ display:block !important; margin-top:2px !important; font-size:8px !important; } body .dp-site .dp-pm-balloon .dp-balloon-slot-list article strong{ font-size:10px !important; white-space:nowrap !important; } /* Remove selection */ body .dp-site .dp-pm-balloon .dp-balloon-slot-list article > button{ width:24px !important; height:24px !important; min-width:24px !important; padding:0 !important; display:grid !important; place-items:center !important; border-radius:50% !important; font-size:11px !important; } /* ------------------------------------------------------------ COLLAPSED ------------------------------------------------------------ */ body .dp-site .dp-pm-balloon.collapsed .booking-float-items{ display:none !important; } /* ============================================================ MOBILE — PICKLE MANIA STYLE ============================================================ */ @media(max-width:550px){ body .dp-site .booking-float.dp-pm-balloon{ left:50% !important; right:auto !important; bottom: calc( 10px + env(safe-area-inset-bottom) ) !important; transform: translateX(-50%) !important; width: calc(100% - 18px) !important; max-width:none !important; padding: 11px 12px !important; border-radius: 15px !important; } body .dp-site .dp-pm-balloon .booking-float-top{ padding-bottom: 9px !important; } body .dp-site .dp-pm-balloon .booking-float-checkout{ padding: 9px 12px !important; } body .dp-site .dp-pm-balloon .dp-booking-date-group{ display:block !important; padding: 7px 1px !important; } body .dp-site .dp-pm-balloon .dp-balloon-slot-list article{ grid-template-columns: minmax(0,1fr) auto 26px !important; padding: 7px 1px !important; } } /* ============================================================ DEWPOINT COURT GALLERY Booking -> Gallery -> Social ============================================================ */ body .dp-site .dp-court-gallery{ position:relative; padding: 76px max(24px, calc((100vw - 1180px) / 2)) 72px; background: radial-gradient( circle at 15% 10%, rgba(109,40,217,.10), transparent 30% ), radial-gradient( circle at 92% 85%, rgba(28,125,242,.09), transparent 28% ), #f7f8fc; overflow:hidden; } /* ------------------------------------------------------------ HEADING ------------------------------------------------------------ */ body .dp-site .dp-gallery-heading{ max-width:720px; margin:0 auto 34px; text-align:center; } body .dp-site .dp-gallery-kicker{ display:inline-block; margin-bottom:8px; color:#6d28d9; font-size:10px; font-weight:900; letter-spacing:2.6px; } body .dp-site .dp-gallery-heading h2{ margin:0; color:#11172c; font-size: clamp(28px,4vw,46px); font-weight:900; line-height:1.05; letter-spacing:-1.5px; } body .dp-site .dp-gallery-heading p{ max-width:590px; margin: 13px auto 0; color:#677089; font-size:13px; line-height:1.7; } /* ------------------------------------------------------------ SIX PHOTO GRID ------------------------------------------------------------ */ body .dp-site .dp-gallery-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; max-width:1180px; margin:0 auto; } body .dp-site .dp-gallery-photo{ position:relative; min-width:0; aspect-ratio:4 / 3; overflow:hidden; border: 1px solid rgba(77,69,145,.13); border-radius:18px; background:#e9ebf3; box-shadow: 0 12px 34px rgba(27,26,71,.09); isolation:isolate; } body .dp-site .dp-gallery-image{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transition: transform .35s ease, filter .35s ease; } body .dp-site .dp-gallery-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( 180deg, transparent 58%, rgba(3,9,29,.50) 100% ); } body .dp-site .dp-gallery-photo:hover .dp-gallery-image{ transform:scale(1.035); } body .dp-site .dp-gallery-number{ position:absolute; right:12px; bottom:11px; z-index:2; padding: 5px 8px; color:#fff; background: rgba(3,9,29,.66); border: 1px solid rgba(255,255,255,.18); border-radius:8px; backdrop-filter:blur(8px); font-size:8px; font-weight:900; letter-spacing:1px; } /* ------------------------------------------------------------ EMPTY STATE ------------------------------------------------------------ */ body .dp-site .dp-gallery-empty{ max-width:620px; margin:0 auto; padding:48px 24px; text-align:center; color:#687089; background:#fff; border: 1px dashed rgba(109,40,217,.30); border-radius:20px; } body .dp-site .dp-gallery-empty > span{ display:block; margin-bottom:12px; color:#6d28d9; font-size:35px; } body .dp-site .dp-gallery-empty b{ display:block; margin-bottom:7px; color:#181c31; font-size:16px; } body .dp-site .dp-gallery-empty p{ margin:0; font-size:11px; } /* ------------------------------------------------------------ CTA ------------------------------------------------------------ */ body .dp-site .dp-gallery-cta{ display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1180px; margin: 32px auto 0; padding: 25px 28px; color:#fff; background: radial-gradient( circle at 90% 20%, rgba(28,125,242,.28), transparent 34% ), linear-gradient( 105deg, #03091d 0%, #11113f 55%, #39106c 100% ); border: 1px solid rgba(121,77,228,.28); border-radius:19px; box-shadow: 0 15px 40px rgba(4,8,31,.16); } body .dp-site .dp-gallery-cta small{ display:block; margin-bottom:5px; color:#9d72f3; font-size:8px; font-weight:900; letter-spacing:2px; } body .dp-site .dp-gallery-cta h3{ margin:0; color:#fff; font-size:20px; } body .dp-site .dp-gallery-cta p{ margin: 5px 0 0; color:#cdd4e8; font-size:10px; } body .dp-site .dp-gallery-cta button{ flex:0 0 auto; border:0; padding: 13px 18px; color:#fff; background: var( --dp-logo-gradient, linear-gradient( 90deg, #6d28d9, #1c7df2 ) ); border-radius:11px; box-shadow: 0 8px 20px rgba(67,66,215,.27); font-size:9px; font-weight:900; letter-spacing:.7px; cursor:pointer; } /* ============================================================ TABLET ============================================================ */ @media(max-width:900px){ body .dp-site .dp-court-gallery{ padding: 58px 20px; } body .dp-site .dp-gallery-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ body .dp-site .dp-court-gallery{ padding: 45px 12px; } body .dp-site .dp-gallery-heading{ margin-bottom:24px; } body .dp-site .dp-gallery-heading h2{ font-size:28px; } body .dp-site .dp-gallery-heading p{ font-size:11px; } body .dp-site .dp-gallery-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; } body .dp-site .dp-gallery-photo{ border-radius:12px; } body .dp-site .dp-gallery-number{ right:7px; bottom:7px; padding: 4px 6px; font-size:7px; } body .dp-site .dp-gallery-cta{ flex-direction:column; align-items:flex-start; gap:17px; margin-top:22px; padding: 20px 18px; border-radius:15px; } body .dp-site .dp-gallery-cta button{ width:100%; } } /* ============================================================ DEWPOINT COURT GALLERY — WHITE SECTION ============================================================ */ body .dp-site .dp-court-gallery{ background:#ffffff !important; } /* Remove dark-page appearance around gallery */ body .dp-site .dp-gallery-heading h2{ color:#10162b !important; } body .dp-site .dp-gallery-heading p{ color:#687089 !important; } body .dp-site .dp-gallery-kicker{ color:#7428e8 !important; } /* Photo cards remain premium */ body .dp-site .dp-gallery-photo{ background:#eef0f7 !important; border: 1px solid rgba(48,56,94,.16) !important; box-shadow: 0 12px 32px rgba(30,38,75,.10) !important; } /* CTA can remain dark for contrast */ body .dp-site .dp-gallery-cta{ margin-bottom:0 !important; } /* Smooth visual division from Booking -> Gallery */ body .dp-site #dp-court-gallery{ border-top: 1px solid rgba(40,45,80,.07); } /* ============================================================ DEWPOINT LOGIN MODAL — COMPACT FINAL ============================================================ */ body .dp-site .dp-login-modal{ width:min(500px,calc(100% - 28px)) !important; max-width:500px !important; padding:30px 38px 28px !important; border-radius:16px !important; max-height:calc(100vh - 36px) !important; overflow-y:auto !important; } /* Close button */ body .dp-site .dp-login-close{ top:13px !important; right:16px !important; width:30px !important; height:30px !important; font-size:20px !important; } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ body .dp-site .dp-login-modal-head{ margin-bottom:24px !important; } body .dp-site .dp-login-modal-logo{ margin-bottom:20px !important; } body .dp-site .dp-login-modal-logo strong{ font-size:28px !important; line-height:1 !important; } body .dp-site .dp-login-modal-logo small{ margin-top:7px !important; font-size:8px !important; letter-spacing:4px !important; } body .dp-site .dp-login-modal-head h2{ margin:0 !important; font-size:30px !important; line-height:1.05 !important; } body .dp-site .dp-login-modal-head p{ margin:10px 0 0 !important; font-size:13px !important; } /* ------------------------------------------------------------ FORM ------------------------------------------------------------ */ body .dp-site .dp-login-modal form{ gap:15px !important; } body .dp-site .dp-login-modal form > label{ gap:7px !important; font-size:12px !important; } body .dp-site .dp-login-modal input{ min-height:48px !important; height:48px !important; padding:0 15px !important; border-radius:10px !important; font-size:13px !important; } body .dp-site .dp-login-submit{ min-height:50px !important; margin-top:3px !important; padding:0 20px !important; border-radius:25px !important; font-size:12px !important; } /* ------------------------------------------------------------ DIVIDER ------------------------------------------------------------ */ body .dp-site .dp-login-modal-divider{ margin:20px 0 17px !important; font-size:10px !important; } /* ------------------------------------------------------------ REGISTER LINK ------------------------------------------------------------ */ body .dp-site .dp-login-modal-register{ margin:0 !important; font-size:12px !important; } body .dp-site .dp-login-modal-register button{ font-size:12px !important; } /* ------------------------------------------------------------ GUEST NOTE ------------------------------------------------------------ */ body .dp-site .dp-login-modal-note{ display:block !important; margin-top:22px !important; padding-top:16px !important; font-size:9px !important; line-height:1.45 !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-login-modal{ width:calc(100% - 22px) !important; padding:26px 22px 24px !important; border-radius:14px !important; } body .dp-site .dp-login-modal-logo{ margin-bottom:17px !important; } body .dp-site .dp-login-modal-logo strong{ font-size:24px !important; } body .dp-site .dp-login-modal-head h2{ font-size:26px !important; } body .dp-site .dp-login-modal-head{ margin-bottom:20px !important; } body .dp-site .dp-login-modal input{ height:46px !important; min-height:46px !important; } body .dp-site .dp-login-submit{ min-height:48px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL — PLAYER LEVEL SELECT ============================================================ */ body .dp-site .dp-register-modal select{ display:block !important; width:100% !important; height:48px !important; min-height:48px !important; box-sizing:border-box !important; padding: 0 42px 0 15px !important; color:#11172c !important; background-color:#ffffff !important; border: 1px solid #cfd6e6 !important; border-radius:10px !important; font-size:13px !important; font-weight:700 !important; outline:none !important; cursor:pointer !important; appearance:none !important; -webkit-appearance:none !important; background-image: linear-gradient(45deg,transparent 50%,#26324b 50%), linear-gradient(135deg,#26324b 50%,transparent 50%) !important; background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px !important; background-size: 5px 5px, 5px 5px !important; background-repeat:no-repeat !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body .dp-site .dp-register-modal select:hover{ border-color:#aeb9d0 !important; } body .dp-site .dp-register-modal select:focus{ border-color:#6845e8 !important; box-shadow: 0 0 0 3px rgba(104,69,232,.10) !important; } /* Match registration field labels */ body .dp-site .dp-register-modal label{ font-size:12px !important; font-weight:800 !important; color:#11172c !important; } /* Keep the dropdown aligned with the 2-column registration grid */ body .dp-site .dp-register-grid > label{ min-width:0 !important; } @media(max-width:600px){ body .dp-site .dp-register-modal select{ height:46px !important; min-height:46px !important; background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL — COMPACT FINAL ============================================================ */ body .dp-site .dp-register-modal{ width:min(500px,calc(100% - 28px)) !important; max-width:500px !important; padding:22px 32px 22px !important; border-radius:16px !important; max-height:calc(100vh - 30px) !important; overflow-y:auto !important; } /* HEADER */ body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:14px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:12px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:23px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ margin-top:5px !important; font-size:7px !important; letter-spacing:3.5px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:25px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ margin-top:6px !important; font-size:11px !important; } /* FORM */ body .dp-site .dp-register-form{ gap:10px !important; } body .dp-site .dp-register-grid{ gap:9px 12px !important; } body .dp-site .dp-register-modal label{ gap:5px !important; font-size:11px !important; } /* INPUTS + SELECT */ body .dp-site .dp-register-modal input, body .dp-site .dp-register-modal select{ height:44px !important; min-height:44px !important; padding-top:0 !important; padding-bottom:0 !important; border-radius:9px !important; font-size:12px !important; } /* PLAYER LEVEL */ body .dp-site .dp-register-modal select{ background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px !important; } /* TERMS */ body .dp-site .dp-register-terms{ margin-top:2px !important; gap:8px !important; align-items:center !important; } body .dp-site .dp-register-terms input{ width:16px !important; height:16px !important; min-height:16px !important; flex:0 0 16px !important; } body .dp-site .dp-register-terms span{ font-size:10px !important; line-height:1.4 !important; } /* BUTTON */ body .dp-site .dp-register-modal .dp-login-submit{ min-height:44px !important; height:44px !important; margin-top:2px !important; font-size:11px !important; } /* SIGN-IN FOOTER */ body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:10px !important; font-size:10px !important; } body .dp-site .dp-register-modal .dp-login-modal-register button{ font-size:10px !important; } /* CLOSE BUTTON */ body .dp-site .dp-register-modal .dp-login-close{ top:9px !important; right:12px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-register-modal{ width:calc(100% - 18px) !important; padding:20px 18px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; gap:8px !important; } body .dp-site .dp-register-spacer{ display:none !important; } body .dp-site .dp-register-modal input, body .dp-site .dp-register-modal select{ height:43px !important; min-height:43px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL FINAL COMPACT SIZE + TERMS CHECKBOX ALIGNMENT ============================================================ */ body .dp-site .dp-register-modal{ width:min(440px,calc(100% - 24px)) !important; max-width:440px !important; padding:18px 24px 18px !important; border-radius:14px !important; max-height:calc(100vh - 24px) !important; overflow-y:auto !important; } /* ============================================================ HEADER ============================================================ */ body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:11px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:9px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:21px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ margin-top:4px !important; font-size:6px !important; letter-spacing:3px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ margin:0 !important; font-size:22px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ margin:5px 0 0 !important; font-size:9px !important; line-height:1.3 !important; } /* ============================================================ FORM LAYOUT ============================================================ */ body .dp-site .dp-register-form{ gap:8px !important; } body .dp-site .dp-register-grid{ gap:7px 10px !important; } body .dp-site .dp-register-grid > label{ gap:4px !important; font-size:10px !important; line-height:1.15 !important; } /* ============================================================ INPUTS + PLAYER LEVEL ============================================================ */ body .dp-site .dp-register-modal input:not([type="checkbox"]), body .dp-site .dp-register-modal select{ height:39px !important; min-height:39px !important; padding: 0 12px !important; border-radius:8px !important; font-size:10px !important; } body .dp-site .dp-register-modal select{ padding-right:34px !important; background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px !important; } /* ============================================================ TERMS & CONDITIONS — SINGLE ALIGNED ROW ============================================================ */ body .dp-site .dp-register-modal .dp-register-terms{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:7px !important; width:100% !important; margin: 5px 0 2px !important; padding:0 !important; cursor:pointer !important; } /* Checkbox */ body .dp-site .dp-register-modal .dp-register-terms > input[type="checkbox"]{ appearance:auto !important; -webkit-appearance:auto !important; width:15px !important; height:15px !important; min-width:15px !important; min-height:15px !important; max-width:15px !important; max-height:15px !important; flex: 0 0 15px !important; margin:0 !important; padding:0 !important; vertical-align:middle !important; cursor:pointer !important; } /* Terms text */ body .dp-site .dp-register-modal .dp-register-terms > span{ display:inline !important; margin:0 !important; padding:0 !important; color:#1a2137 !important; font-size:9px !important; font-weight:700 !important; line-height:15px !important; } /* Terms link */ body .dp-site .dp-register-modal .dp-register-terms-link{ display:inline !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; color:#ec268f !important; font-size:9px !important; font-weight:800 !important; line-height:15px !important; vertical-align:baseline !important; text-decoration:underline !important; } /* ============================================================ CREATE ACCOUNT ============================================================ */ body .dp-site .dp-register-modal .dp-login-submit{ width:100% !important; height:40px !important; min-height:40px !important; margin-top:2px !important; padding:0 16px !important; border-radius:22px !important; font-size:10px !important; } /* ============================================================ SIGN IN FOOTER ============================================================ */ body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:8px !important; padding:0 !important; font-size:9px !important; } body .dp-site .dp-register-modal .dp-login-modal-register button{ font-size:9px !important; } /* ============================================================ CLOSE ============================================================ */ body .dp-site .dp-register-modal .dp-login-close{ top:7px !important; right:9px !important; width:26px !important; height:26px !important; font-size:17px !important; } /* ============================================================ DESKTOP TWO-COLUMN WIDTH ============================================================ */ @media(min-width:601px){ body .dp-site .dp-register-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-register-modal{ width:calc(100% - 16px) !important; max-width:420px !important; padding:17px 16px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; gap:7px !important; } body .dp-site .dp-register-spacer{ display:none !important; } body .dp-site .dp-register-modal .dp-register-terms{ align-items:flex-start !important; } } /* ============================================================ DEWPOINT LOGIN MODAL MATCH REGISTER CARD SIZE / SPACING ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal){ width: min( 440px, calc(100% - 24px) ) !important; max-width: 440px !important; padding: 18px 24px 18px !important; border-radius: 14px !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; } /* ============================================================ HEADER ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head{ margin-bottom: 14px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo{ margin-bottom: 12px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo strong{ font-size: 21px !important; line-height: 1 !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo small{ margin-top: 4px !important; font-size: 6px !important; letter-spacing: 3px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head h2{ margin: 0 !important; font-size: 22px !important; line-height: 1 !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head p{ margin: 5px 0 0 !important; font-size: 9px !important; line-height: 1.3 !important; } /* ============================================================ FORM ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) form{ gap: 10px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) form > label{ gap: 4px !important; font-size: 10px !important; line-height: 1.15 !important; } /* ============================================================ INPUTS ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) input{ height: 39px !important; min-height: 39px !important; padding: 0 12px !important; border-radius: 8px !important; font-size: 10px !important; } /* ============================================================ SIGN IN BUTTON ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-submit{ width: 100% !important; height: 40px !important; min-height: 40px !important; margin-top: 2px !important; padding: 0 16px !important; border-radius: 22px !important; font-size: 10px !important; } /* ============================================================ OR DIVIDER ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-divider{ margin: 12px 0 10px !important; font-size: 8px !important; } /* ============================================================ CREATE ACCOUNT LINK ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-register{ margin: 0 !important; font-size: 9px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-register button{ font-size: 9px !important; } /* ============================================================ GUEST NOTE ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-note{ display: block !important; margin-top: 12px !important; padding-top: 10px !important; font-size: 7px !important; line-height: 1.35 !important; } /* ============================================================ CLOSE BUTTON ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-close{ top: 7px !important; right: 9px !important; width: 26px !important; height: 26px !important; font-size: 17px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-login-modal:not(.dp-register-modal){ width: calc(100% - 16px) !important; max-width: 420px !important; padding: 17px 16px !important; } } /* ============================================================ DEWPOINT ABOUT SECTION ============================================================ */ body .dp-site .dp-about-section{ position:relative; padding: 76px max(24px,calc((100vw - 1180px)/2)) 78px; background: radial-gradient( circle at 8% 10%, rgba(109,40,217,.07), transparent 27% ), radial-gradient( circle at 92% 88%, rgba(28,125,242,.07), transparent 26% ), #f7f8fc; border-top: 1px solid rgba(37,42,80,.07); } /* Heading */ body .dp-site .dp-about-heading{ max-width:720px; margin: 0 auto 34px; text-align:center; } body .dp-site .dp-about-heading > span{ display:inline-block; margin-bottom:8px; color:#7428e8; font-size:10px; font-weight:900; letter-spacing:2.6px; } body .dp-site .dp-about-heading h2{ margin:0; color:#10162b; font-size: clamp(27px,4vw,43px); font-weight:900; line-height:1.05; letter-spacing:-1.4px; } body .dp-site .dp-about-heading p{ margin: 12px auto 0; color:#687089; font-size:12px; line-height:1.6; } /* ============================================================ FOUR ABOUT CARDS ============================================================ */ body .dp-site .dp-about-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:15px; max-width:1180px; margin:0 auto; } body .dp-site .dp-about-card{ position:relative; min-width:0; min-height:260px; padding: 24px 22px; background:#fff; border: 1px solid rgba(53,58,95,.12); border-radius:18px; box-shadow: 0 10px 28px rgba(25,32,70,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body .dp-site .dp-about-card:hover{ transform: translateY(-3px); border-color: rgba(109,40,217,.24); box-shadow: 0 16px 38px rgba(25,32,70,.11); } /* Icon */ body .dp-site .dp-about-icon{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:23px; color:#fff; background: linear-gradient( 135deg, #7428e8, #167df4 ); border-radius:13px; box-shadow: 0 8px 19px rgba(81,69,222,.22); font-size:17px; font-weight:900; } body .dp-site .dp-about-card.facebook .dp-about-icon{ font-family: Arial, sans-serif; font-size:23px; } /* Labels */ body .dp-site .dp-about-card > small{ display:block; margin-bottom:6px; color:#7428e8; font-size:8px; font-weight:900; letter-spacing:1.7px; } body .dp-site .dp-about-card h3{ margin: 0 0 10px; color:#12182d; font-size:18px; font-weight:900; } body .dp-site .dp-about-card p{ margin:0; color:#687089; font-size:10px; line-height:1.65; } /* Amenities */ body .dp-site .dp-about-amenities{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } body .dp-site .dp-about-amenities span{ display:inline-flex; align-items:center; gap:5px; padding: 6px 8px; color:#343b54; background:#f5f3ff; border: 1px solid rgba(109,40,217,.10); border-radius:8px; font-size:8px; font-weight:700; } body .dp-site .dp-about-amenities i{ color:#7428e8; font-style:normal; } /* Buttons */ body .dp-site .dp-about-card button{ position:absolute; left:22px; bottom:22px; border:0; padding: 9px 12px; color:#fff; background: linear-gradient( 90deg, #6b2ee8, #197df3 ); border-radius:9px; font-size:8px; font-weight:900; letter-spacing:.6px; cursor:pointer; } body .dp-site .dp-about-card button:hover{ filter:brightness(1.06); } /* Address */ body .dp-site .dp-about-address{ font-weight:700; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-about-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-about-section{ padding: 48px 12px; } body .dp-site .dp-about-heading{ margin-bottom:24px; } body .dp-site .dp-about-heading h2{ font-size:27px; } body .dp-site .dp-about-grid{ grid-template-columns:1fr; gap:10px; } body .dp-site .dp-about-card{ min-height:auto; padding: 20px 18px; } body .dp-site .dp-about-icon{ margin-bottom:17px; } body .dp-site .dp-about-card button{ position:static; margin-top:18px; } } /* ============================================================ DEWPOINT ABOUT — LANDING ONLY ============================================================ */ .dp-site .dp-about-section{ padding: 72px max(24px,calc((100vw - 1180px)/2)); background:#f7f8fc; border-top: 1px solid rgba(30,40,80,.07); } .dp-site .dp-about-heading{ max-width:720px; margin: 0 auto 34px; text-align:center; } .dp-site .dp-about-heading > span{ display:block; margin-bottom:8px; color:#7428e8; font-size:9px; font-weight:900; letter-spacing:2.5px; } .dp-site .dp-about-heading h2{ margin:0; color:#10162b; font-size: clamp(27px,4vw,42px); font-weight:900; line-height:1.05; } .dp-site .dp-about-heading p{ margin: 11px 0 0; color:#687089; font-size:11px; } /* FOUR CARDS */ .dp-site .dp-about-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:15px; max-width:1180px; margin:0 auto; } .dp-site .dp-about-card{ min-width:0; min-height:250px; padding:23px 21px; background:#fff; border: 1px solid rgba(45,54,95,.12); border-radius:18px; box-shadow: 0 10px 28px rgba(25,32,70,.07); } .dp-site .dp-about-icon{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:22px; color:#fff; background: linear-gradient( 135deg, #7428e8, #167df4 ); border-radius:13px; font-size:17px; font-weight:900; } .dp-site .dp-about-card.facebook .dp-about-icon{ font-family:Arial,sans-serif; font-size:22px; } .dp-site .dp-about-card > small{ display:block; margin-bottom:6px; color:#7428e8; font-size:8px; font-weight:900; letter-spacing:1.6px; } .dp-site .dp-about-card h3{ margin: 0 0 10px; color:#11172c; font-size:18px; } .dp-site .dp-about-card p{ margin:0; color:#687089; font-size:10px; line-height:1.65; } /* AMENITIES */ .dp-site .dp-about-amenities{ display:flex; flex-wrap:wrap; gap:6px; } .dp-site .dp-about-amenities span{ display:inline-flex; align-items:center; gap:5px; padding:6px 8px; background:#f5f3ff; border-radius:7px; color:#343b54; font-size:8px; font-weight:700; } .dp-site .dp-about-amenities i{ color:#7428e8; font-style:normal; } /* ACTION BUTTONS */ .dp-site .dp-about-body button{ margin-top:18px; border:0; padding:9px 12px; color:#fff; background: linear-gradient( 90deg, #6b2ee8, #197df3 ); border-radius:9px; font-size:8px; font-weight:900; cursor:pointer; } .dp-site .dp-about-address{ font-weight:700; } /* TABLET */ @media(max-width:1000px){ .dp-site .dp-about-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* MOBILE */ @media(max-width:600px){ .dp-site .dp-about-section{ padding: 46px 12px; } .dp-site .dp-about-grid{ grid-template-columns:1fr; gap:10px; } .dp-site .dp-about-card{ min-height:0; } } /* ============================================================ READY TO PLAY CTA — BELOW ABOUT ============================================================ */ .dp-site > .dp-gallery-cta.dp-after-about-cta{ width: min( 1180px, calc(100% - 48px) ) !important; box-sizing: border-box !important; margin: 34px auto 42px !important; } /* Give the About → CTA transition some breathing room */ .dp-site .dp-about-section{ padding-bottom: 56px !important; } /* Footer follows immediately after CTA */ .dp-site > .dp-gallery-cta.dp-after-about-cta + .dp-footer{ margin-top: 0 !important; } /* MOBILE */ @media(max-width:600px){ .dp-site > .dp-gallery-cta.dp-after-about-cta{ width: calc(100% - 24px) !important; margin: 20px auto 28px !important; } } /* ============================================================ READY TO PLAY CTA — INSIDE ABOUT ============================================================ */ .dp-site .dp-about-section .dp-gallery-cta.dp-about-cta{ width:100% !important; max-width:1180px !important; box-sizing:border-box !important; margin: 24px auto 0 !important; } /* Keep CTA visually connected to the four cards */ .dp-site .dp-about-section .dp-about-grid + .dp-gallery-cta{ margin-top: 24px !important; } /* Remove spacing rules from earlier external CTA position */ .dp-site > .dp-gallery-cta.dp-after-about-cta{ width:auto !important; max-width:none !important; margin:0 !important; } @media(max-width:600px){ .dp-site .dp-about-section .dp-gallery-cta.dp-about-cta{ width:100% !important; margin-top: 16px !important; } } /* ============================================================ ABOUT / AMENITIES IMAGE CARDS PHOTO + LOWER 70% THEME SHADE ============================================================ */ .dp-site .dp-about-card.has-background-image{ position:relative; overflow:hidden; min-height:310px; background-image: var(--dp-card-image); background-size:cover; background-position:center; isolation:isolate; } /* * The photo remains much clearer at the top. * The theme shade progressively becomes strong over the * lower ~70% where the text sits. */ .dp-site .dp-about-card.has-background-image::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient( to bottom, rgba(73,43,215,0.02) 0%, rgba(73,43,215,0.05) 25%, rgba(89,43,227,0.35) 38%, rgba(83,40,231,0.68) 52%, rgba(70,36,224,0.88) 72%, rgba(17,117,241,0.96) 100% ); } /* * Small dark tint behind the lower region for excellent * white-text contrast without hiding the image completely. */ .dp-site .dp-about-card.has-background-image::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; background: linear-gradient( to top, rgba(14,22,76,.22), transparent ); pointer-events:none; } /* Push content into the shaded area */ .dp-site .dp-about-card.has-background-image{ display:flex; flex-direction:column; justify-content:flex-end; } /* Icon stays just above the text group */ .dp-site .dp-about-card.has-background-image .dp-about-icon{ margin-top:auto; } /* Text becomes white */ .dp-site .dp-about-card.has-background-image > small, .dp-site .dp-about-card.has-background-image h3, .dp-site .dp-about-card.has-background-image p, .dp-site .dp-about-card.has-background-image .dp-about-body{ color:#fff; } .dp-site .dp-about-card.has-background-image > small{ opacity:.9; } .dp-site .dp-about-card.has-background-image h3{ font-size:22px; } .dp-site .dp-about-card.has-background-image p{ color:rgba(255,255,255,.94); } /* Amenities chips over image */ .dp-site .dp-about-card.has-background-image .dp-about-amenities span{ color:#fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(5px); } .dp-site .dp-about-card.has-background-image .dp-about-amenities i{ color:#fff; } /* ============================================================ OWNER PROFILE IMAGE PREVIEW ============================================================ */ .court-about-image-editor{ display:grid; gap:8px; padding:14px; border: 1px solid rgba(90,98,140,.14); border-radius:14px; background: rgba(248,249,253,.75); } .court-about-image-editor > b{ font-size:12px; } .court-about-image-editor > small{ color:#747b90; font-size:9px; } .court-about-image-preview{ position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; display:grid; place-items:center; background: #eef0f7; background-size:cover; background-position:center; border-radius:12px; } .court-about-image-preview::after{ content:""; position:absolute; inset:auto 0 0; height:70%; background: linear-gradient( to bottom, rgba(104,42,225,.10), rgba(89,42,231,.72), rgba(26,115,241,.92) ); pointer-events:none; } .court-about-image-preview span{ position:relative; z-index:2; color:#858ba2; font-size:10px; font-weight:900; letter-spacing:1.5px; } .court-about-image-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } @media(max-width:600px){ .dp-site .dp-about-card.has-background-image{ min-height:290px; } } /* ============================================================ OWNER PROFILE IMAGE PREVIEW NORMAL IMAGE ONLY — NO LANDING PAGE SHADE ============================================================ */ .court-about-image-preview{ position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; display:grid; place-items:center; background:#eef0f7; background-size:cover; background-position:center; border-radius:12px; } /* Remove the previous 70% gradient from owner profile preview */ .court-about-image-preview::after{ content:none !important; display:none !important; } /* Placeholder only when there is no image */ .court-about-image-preview span{ position:relative; z-index:1; color:#858ba2; font-size:10px; font-weight:900; letter-spacing:1.5px; } /* ============================================================ ABOUT SECTION — FACEBOOK PAGE PREVIEW ============================================================ */ .dp-site .dp-social-preview-body{ display:grid; gap:14px; } .dp-site .dp-facebook-page-preview{ width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 24px; align-items:center; gap:12px; padding:14px; text-align:left; border: 1px solid rgba(24,119,242,.18); border-radius:16px; background: linear-gradient( 135deg, rgba(24,119,242,.08), rgba(255,255,255,.96) ); cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dp-site .dp-facebook-page-preview:hover{ transform:translateY(-2px); border-color: rgba(24,119,242,.38); box-shadow: 0 14px 32px rgba(24,119,242,.12); } .dp-site .dp-facebook-badge{ width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#1877f2; color:#fff; font-family:Arial,sans-serif; font-size:34px; font-weight:900; line-height:1; } .dp-site .dp-facebook-preview-copy{ min-width:0; display:grid; gap:2px; } .dp-site .dp-facebook-preview-copy small{ color:#1877f2; font-size:9px; font-weight:900; letter-spacing:1px; } .dp-site .dp-facebook-preview-copy b{ overflow:hidden; color:#111827; font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .dp-site .dp-facebook-preview-copy em{ color:#667085; font-size:10px; font-style:normal; line-height:1.45; } .dp-site .dp-facebook-arrow{ color:#1877f2; font-size:20px; font-weight:900; } /* ============================================================ ABOUT SECTION — MAP PREVIEW ============================================================ */ .dp-site .dp-map-preview-body{ display:grid; gap:12px; } .dp-site .dp-map-preview{ position:relative; width:100%; height:150px; padding:0; overflow:hidden; border: 1px solid rgba(76,86,130,.15); border-radius:16px; background:#eef1f6; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); } .dp-site .dp-map-preview iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; } .dp-site .dp-map-preview-cover{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background: linear-gradient( to bottom, transparent 35%, rgba(10,18,48,.12) 100% ); color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); } .dp-site .dp-map-preview-cover > span{ width:34px; height:34px; display:grid; place-items:center; margin-bottom:4px; border-radius:50%; background: rgba(88,55,224,.92); font-size:20px; box-shadow: 0 6px 16px rgba(42,30,110,.28); } .dp-site .dp-map-preview-cover b{ font-size:13px; } .dp-site .dp-map-preview-cover small{ font-size:9px; font-weight:700; } .dp-site .dp-about-card.facebook .dp-about-body > button, .dp-site .dp-about-card.map .dp-about-body > button, .dp-site .dp-social-preview-body > button:not(.dp-facebook-page-preview), .dp-site .dp-map-preview-body > button:not(.dp-map-preview){ margin-top:2px; } /* Mobile */ @media(max-width:600px){ .dp-site .dp-map-preview{ height:140px; } .dp-site .dp-facebook-page-preview{ grid-template-columns:42px minmax(0,1fr) 20px; padding:12px; } .dp-site .dp-facebook-badge{ width:42px; height:42px; font-size:30px; } } /* ============================================================ MAP CARD — SAME TREATMENT AS ABOUT / AMENITIES FULL MAP + LOWER 70% THEME SHADE ============================================================ */ .dp-site .dp-about-card.map.has-map-background{ position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background:#eef1f6; } /* Actual map fills entire card */ .dp-site .dp-about-card.map .dp-map-background-layer{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; margin:0; padding:0; overflow:hidden; border:0; border-radius:inherit; background:#eef1f6; cursor:pointer; } .dp-site .dp-about-card.map .dp-map-background-layer iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; pointer-events:none; } /* * Theme overlay. * Top remains clear. * Lower ~70% progressively receives the purple/blue shade. */ .dp-site .dp-about-card.map.has-map-background::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background: linear-gradient( to bottom, rgba(73,43,215,.02) 0%, rgba(73,43,215,.04) 24%, rgba(89,43,227,.32) 38%, rgba(83,40,231,.65) 52%, rgba(70,36,224,.87) 72%, rgba(17,117,241,.96) 100% ); } /* Additional subtle lower contrast */ .dp-site .dp-about-card.map.has-map-background::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; background: linear-gradient( to top, rgba(14,22,76,.24), transparent ); } /* Keep all actual card information above the map */ .dp-site .dp-about-card.map.has-map-background .dp-about-icon, .dp-site .dp-about-card.map.has-map-background > small, .dp-site .dp-about-card.map.has-map-background > h3, .dp-site .dp-about-card.map.has-map-background .dp-about-body{ position:relative; z-index:2; } .dp-site .dp-about-card.map.has-map-background .dp-about-icon{ margin-top:auto; } /* White text like About/Amenities */ .dp-site .dp-about-card.map.has-map-background > small, .dp-site .dp-about-card.map.has-map-background h3, .dp-site .dp-about-card.map.has-map-background .dp-about-address, .dp-site .dp-about-card.map.has-map-background .dp-map-background-body p{ color:#fff; } .dp-site .dp-about-card.map.has-map-background .dp-about-address{ margin:0 0 12px; color:rgba(255,255,255,.95); font-weight:600; line-height:1.45; } /* Open Map button */ .dp-site .dp-about-card.map.has-map-background .dp-map-background-body{ display:grid; gap:10px; width:100%; } .dp-site .dp-about-card.map.has-map-background .dp-map-background-body > button{ width:max-content; margin:0; color:#fff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.15); backdrop-filter: blur(7px); box-shadow: 0 8px 22px rgba(10,20,70,.18); } .dp-site .dp-about-card.map.has-map-background .dp-map-background-body > button:hover{ background: rgba(255,255,255,.24); transform: translateY(-1px); } /* Remove old floating-map presentation */ .dp-site .dp-about-card.map.has-map-background .dp-map-preview{ display:none !important; } @media(max-width:600px){ .dp-site .dp-about-card.map.has-map-background{ min-height:290px; } } /* ============================================================ FACEBOOK CARD — LOWER 70% SHADE MATCH ABOUT / AMENITIES / MAP VISUAL STYLE ============================================================ */ .dp-site .dp-about-card.facebook{ position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background: linear-gradient( 145deg, #ffffff 0%, #f7f8ff 100% ); } /* * Keep the top area light. * Facebook blue + Dewpoint purple gradually shade * the lower ~70% of the card. */ .dp-site .dp-about-card.facebook::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background: linear-gradient( to bottom, rgba(24,119,242,0) 0%, rgba(24,119,242,.02) 25%, rgba(74,62,225,.20) 36%, rgba(77,54,229,.48) 50%, rgba(58,63,224,.78) 70%, rgba(24,119,242,.94) 100% ); } /* Extra lower contrast for readable text */ .dp-site .dp-about-card.facebook::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; background: linear-gradient( to top, rgba(20,31,105,.28), transparent ); } /* Keep content above the gradient */ .dp-site .dp-about-card.facebook .dp-about-icon, .dp-site .dp-about-card.facebook > small, .dp-site .dp-about-card.facebook > h3, .dp-site .dp-about-card.facebook .dp-about-body{ position:relative; z-index:2; } .dp-site .dp-about-card.facebook .dp-about-icon{ margin-top:auto; } /* Lower content becomes white */ .dp-site .dp-about-card.facebook > small, .dp-site .dp-about-card.facebook > h3, .dp-site .dp-about-card.facebook .dp-about-body p{ color:#fff; } .dp-site .dp-about-card.facebook > small{ opacity:.92; } /* Facebook badge preview becomes glassy over the gradient */ .dp-site .dp-about-card.facebook .dp-facebook-page-preview{ border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.15); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(13,28,91,.16); } .dp-site .dp-about-card.facebook .dp-facebook-preview-copy small, .dp-site .dp-about-card.facebook .dp-facebook-preview-copy b, .dp-site .dp-about-card.facebook .dp-facebook-preview-copy em, .dp-site .dp-about-card.facebook .dp-facebook-arrow{ color:#fff; } .dp-site .dp-about-card.facebook .dp-facebook-preview-copy em{ color: rgba(255,255,255,.86); } /* Visit Facebook button */ .dp-site .dp-about-card.facebook .dp-social-preview-body > button:not(.dp-facebook-page-preview){ width:max-content; color:#fff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.15); backdrop-filter: blur(7px); box-shadow: 0 8px 22px rgba(13,28,91,.18); } .dp-site .dp-about-card.facebook .dp-social-preview-body > button:not(.dp-facebook-page-preview):hover{ background: rgba(255,255,255,.25); transform: translateY(-1px); } @media(max-width:600px){ .dp-site .dp-about-card.facebook{ min-height:290px; } } /* ========================================================= DEWPOINT LANDING CHECKOUT — LIGHTER BLUE V1 ========================================================= */ /* Booking/date summary cards */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item, body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary{ color:#fff !important; background: linear-gradient( 135deg, #4f83e8 0%, #3f6fd8 100% ) !important; border: 1px solid #79a5f2 !important; box-shadow: 0 8px 20px rgba(63,111,216,.18) !important; } /* Booking rows in Review Booking */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; border-radius:12px !important; padding:13px 15px !important; margin-bottom:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small{ color:#eaf2ff !important; } /* Payment method cards */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; box-shadow: 0 6px 16px rgba(63,111,216,.14) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ color:#eaf2ff !important; } /* Selected payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ color:#fff !important; background: linear-gradient( 135deg, #3b82f6, #2563eb ) !important; border-color:#93b8ff !important; box-shadow: 0 8px 22px rgba(37,99,235,.22) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button i{ color:#fff !important; } /* Successful booking rows */ body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; border-radius:12px !important; padding:13px 15px !important; margin-bottom:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color:#eaf2ff !important; } /* ========================================================= DEWPOINT CHECKOUT FORCE UNIFORM CONFIRM-BUTTON GRADIENT ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-gradient: linear-gradient( 90deg, #8929e9, #6341ef 48%, #277cf6 ); } /* Top summary / venue header */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 9px 24px rgba(103,55,229,.20) !important; } /* Review booking item rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; border-radius:12px !important; margin-bottom:8px !important; padding:13px 15px !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color:rgba(255,255,255,.88) !important; } /* Discount / voucher dropdown */ body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount select{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout select option{ color:#111526 !important; background:#fff !important; } /* Terms and conditions box */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card *, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions *{ color:#fff !important; } /* Back button */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } /* Payment choices - all blue family */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button i{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:not(.active){ opacity:.78 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ opacity:1 !important; } /* Success status box */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .status-box, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .booking-status, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .success-status{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; } /* Any obvious dark cards inside Dewpoint checkout */ body .dp-site .dp-home-booking .dp-inline-checkout [class*="checkout"] .dark, body .dp-site .dp-home-booking .dp-inline-checkout [class*="booking"] .dark{ background:var(--dp-checkout-gradient) !important; color:#fff !important; } /* ========================================================= DEWPOINT CHECKOUT — CLEAN WHITE / MINIMAL V1 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#101828; --dp-checkout-muted:#667085; --dp-checkout-line:#d8dee9; --dp-checkout-soft:#f8fafc; --dp-checkout-blue:#2563eb; } /* Main checkout surfaces */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card, body .dp-site .dp-home-booking .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r{ background:#fff !important; color:var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow: 0 10px 30px rgba(15,23,42,.06) !important; } /* Venue / booking summary */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item, body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary{ background:#fff !important; color:var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Booking rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 0 !important; border-bottom: 1px solid #e5e9f0 !important; border-radius:0 !important; padding: 12px 0 !important; margin:0 !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color: var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color: var(--dp-checkout-muted) !important; } /* Discount / voucher */ body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount select{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Payment choices */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; opacity:1 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ color: var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ color: var(--dp-checkout-muted) !important; } /* Selected payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ background:#f5f8ff !important; border-color: #8fb3ff !important; box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active i{ color: var(--dp-checkout-blue) !important; } /* Disabled payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled{ background:#f6f7f9 !important; color:#98a2b3 !important; border-color:#e4e7ec !important; opacity:1 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled small{ color:#98a2b3 !important; } /* Terms box */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card *, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions *{ color: var(--dp-checkout-ink) !important; } /* Back button becomes simple text-style control */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Success status areas */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .status-box, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .booking-status, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .success-status{ background:#f8fafc !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; } /* Keep only main action colorful */ body .dp-site .dp-home-booking .dp-inline-checkout .primary, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-main-button{ color:#fff !important; background: linear-gradient( 90deg, #8929e9, #6341ef 48%, #277cf6 ) !important; border:0 !important; box-shadow: 0 9px 24px rgba(103,55,229,.20) !important; } /* ========================================================= DEWPOINT CHECKOUT — READABILITY PATCH V2 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#101828; --dp-checkout-muted:#475467; --dp-checkout-soft:#667085; --dp-checkout-line:#d0d5dd; } /* --------------------------------------------------------- GLOBAL TYPE SIZE BOOST --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card, body .dp-site .dp-home-booking .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r{ font-size:14px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h1{ font-size:34px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h2{ font-size:30px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h3{ font-size:22px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h4{ font-size:18px !important; } body .dp-site .dp-home-booking .dp-inline-checkout p, body .dp-site .dp-home-booking .dp-inline-checkout label, body .dp-site .dp-home-booking .dp-inline-checkout span, body .dp-site .dp-home-booking .dp-inline-checkout small, body .dp-site .dp-home-booking .dp-inline-checkout b, body .dp-site .dp-home-booking .dp-inline-checkout strong, body .dp-site .dp-home-booking .dp-inline-checkout button, body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout input{ font-size:14px !important; } /* --------------------------------------------------------- BOOKING ROWS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b{ font-size:14px !important; color:var(--dp-checkout-ink) !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ font-size:16px !important; color:var(--dp-checkout-ink) !important; font-weight:800 !important; } /* --------------------------------------------------------- DATE / VENUE SUMMARY BOXES --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item{ color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary b, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item b{ font-size:15px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary small, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item small{ font-size:12px !important; color:#e5edff !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout label{ color:var(--dp-checkout-ink) !important; font-weight:600 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount label, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select-label, body .dp-site .dp-home-booking .dp-inline-checkout select + label, body .dp-site .dp-home-booking .dp-inline-checkout .discount-label{ color:var(--dp-checkout-ink) !important; font-size:14px !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select{ color:var(--dp-checkout-ink) !important; font-size:14px !important; font-weight:600 !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL --------------------------------------------------------- */ /* General summary rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card hr + div, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row, body .dp-site .dp-home-booking .dp-inline-checkout .total-row, body .dp-site .dp-home-booking .dp-inline-checkout .price-row, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row{ color:var(--dp-checkout-ink) !important; } /* Labels like Subtotal / Discount / Total */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .price-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row span:first-child{ color:var(--dp-checkout-muted) !important; font-size:14px !important; font-weight:700 !important; } /* Amounts */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .price-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row span:last-child{ color:var(--dp-checkout-ink) !important; font-size:15px !important; font-weight:800 !important; } /* Force the LAST summary row (usually Total) to stand out */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .summary-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .checkout-summary-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .price-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .totals-row:last-child{ border-top:1px solid var(--dp-checkout-line) !important; padding-top:12px !important; margin-top:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .summary-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .checkout-summary-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .price-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .totals-row:last-child span{ color:#111827 !important; font-size:17px !important; font-weight:900 !important; } /* --------------------------------------------------------- PAYMENT METHOD CARDS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ font-size:14px !important; font-weight:700 !important; color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } /* --------------------------------------------------------- TERMS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box b, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms b, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions b{ font-size:14px !important; font-weight:800 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box small, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms small, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } /* --------------------------------------------------------- BACK BUTTON --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ font-size:13px !important; font-weight:700 !important; } /* ========================================================= DEWPOINT CHECKOUT FINAL READABILITY PATCH ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#111827; --dp-checkout-muted:#475467; --dp-checkout-line:#d0d5dd; } /* --------------------------------------------------------- TOP SUMMARY TAB --------------------------------------------------------- */ /* keep the box, but make it cleaner */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item{ color:var(--dp-checkout-ink) !important; } /* remove/hide the Dewpoint title line */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary b, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item b{ display:none !important; } /* keep date visible and readable */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary small, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item small{ display:block !important; font-size:18px !important; font-weight:800 !important; color:#ffffff !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout label, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card label{ color:var(--dp-checkout-ink) !important; font-size:16px !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout select{ color:var(--dp-checkout-ink) !important; font-size:15px !important; font-weight:700 !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL — FORCE TO BLACK --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"]{ color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] strong{ color:var(--dp-checkout-ink) !important; } /* strong emphasis for total row */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"]{ border-top:1px solid var(--dp-checkout-line) !important; padding-top:10px !important; margin-top:6px !important; font-weight:900 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] strong{ color:#000000 !important; font-size:16px !important; font-weight:900 !important; } /* ========================================================= DEWPOINT CHECKOUT FOCUS MODE During checkout show only: HEADER → CHECKOUT → FOOTER ========================================================= */ /* Hide every main landing section except nav, booking and footer whenever the checkout exists inside the booking section. */ /* * CHECKOUT FULL-LANDING MODE * Previously all landing sections were hidden here. * They now remain visible so header navigation keeps working. */ /* Specifically protect the three sections we want visible */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) > .dp-final-nav{ display:flex !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) > .dp-home-booking{ display:block !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) > .dp-footer{ display:block !important; } /* Remove excess landing-page spacing during checkout */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:32px !important; padding-bottom:50px !important; } /* Hide the normal booking-board heading while already checking out. The checkout itself becomes the main content. */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking-title{ display:none !important; } /* Give checkout a clean centered width */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:min(100% - 32px,1050px) !important; margin:0 auto !important; } /* Mobile spacing */ @media (max-width:650px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:20px !important; padding-bottom:35px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:calc(100% - 20px) !important; } } /* ========================================================= DEWPOINT CHECKOUT — DISCOUNT TABS V1 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box{ margin:18px 0 10px !important; padding:16px !important; background:#fff !important; border:1px solid #d6dde8 !important; border-radius:14px !important; color:#111827 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box > b{ display:block; font-size:16px !important; font-weight:800 !important; color:#111827 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box > small{ display:block; margin-top:3px; font-size:12px !important; color:#667085 !important; } /* Pills */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs button{ cursor:pointer; color:#111827 !important; background:#fff !important; border:1px solid #cbd5e1 !important; border-radius:999px !important; padding:9px 17px !important; font-size:13px !important; font-weight:750 !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs button.active{ color:#fff !important; background:#194681 !important; border-color:#194681 !important; } /* Voucher field */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:13px; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry input{ width:100%; color:#111827 !important; background:#fff !important; border:1px solid #cbd5e1 !important; border-radius:9px !important; padding:11px 13px !important; font-size:13px !important; outline:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry input:focus{ border-color:#7aa2df !important; box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button{ border:0 !important; border-radius:9px !important; padding:0 18px !important; min-height:42px !important; color:#fff !important; background:#8a94a3 !important; font-size:13px !important; font-weight:800 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button:not(:disabled){ background:#194681 !important; cursor:pointer; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button:disabled{ opacity:.55 !important; } /* Mobile */ @media (max-width:650px){ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry{ grid-template-columns:1fr; } } /* ========================================================= DEWPOINT CHECKOUT — COMPACT SINGLE-VIEW MODE HEADER → CHECKOUT → FOOTER ========================================================= */ /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-final-nav{ min-height:66px !important; padding-top:8px !important; padding-bottom:8px !important; } /* --------------------------------------------------------- BOOKING SECTION --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:18px !important; padding-bottom:18px !important; min-height:auto !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:min(94%,920px) !important; max-width:920px !important; margin:0 auto !important; } /* --------------------------------------------------------- BACK BUTTON --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-back{ padding:7px 12px !important; margin-bottom:8px !important; font-size:11px !important; border-radius:7px !important; } /* --------------------------------------------------------- MAIN CHECKOUT CARD --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding:18px 20px !important; border-radius:15px !important; } /* Checkout kicker */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card .title small{ font-size:10px !important; } /* Review Booking */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card .title h2{ font-size:20px !important; margin-top:2px !important; margin-bottom:10px !important; } /* --------------------------------------------------------- DATE --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .multi-date-checkout > section > b, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .multi-date-checkout > div > b{ font-size:14px !important; } /* --------------------------------------------------------- COURT BOOKING ROWS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items{ margin-bottom:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article{ padding:9px 0 !important; min-height:auto !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article small{ font-size:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article strong{ font-size:13px !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box{ margin:10px 0 7px !important; padding:11px 13px !important; border-radius:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box > b{ font-size:13px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box > small{ font-size:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-tabs{ margin-top:8px !important; gap:6px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-tabs button{ padding:7px 13px !important; font-size:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry{ margin-top:8px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry input{ padding:8px 11px !important; min-height:36px !important; font-size:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry button{ min-height:36px !important; padding:0 14px !important; font-size:11px !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .price-line, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-total-row, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .summary-line{ padding-top:7px !important; padding-bottom:7px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card > div > span, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card > div > b{ line-height:1.2 !important; } /* --------------------------------------------------------- PAYMENT METHODS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice{ margin:10px 0 !important; gap:5px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button{ min-height:46px !important; padding:8px 11px !important; border-radius:9px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button small{ font-size:9px !important; } /* --------------------------------------------------------- TERMS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms{ margin-top:9px !important; padding:10px 12px !important; border-radius:9px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms > b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms p{ margin:4px 0 7px !important; font-size:9px !important; line-height:1.35 !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms label{ font-size:9px !important; } /* --------------------------------------------------------- CONFIRM BUTTON --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-main-button{ margin-top:9px !important; min-height:38px !important; padding:8px 16px !important; font-size:12px !important; border-radius:8px !important; } /* --------------------------------------------------------- FOOTER — COMPACT ONLY DURING CHECKOUT --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer{ padding-top:18px !important; padding-bottom:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-grid{ padding-top:0 !important; padding-bottom:10px !important; gap:20px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-logo strong{ font-size:18px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-logo small, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-column p, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-column button{ font-size:10px !important; line-height:1.35 !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-column h4{ font-size:11px !important; margin-bottom:5px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-footer-bottom{ padding-top:8px !important; margin-top:8px !important; font-size:10px !important; } /* --------------------------------------------------------- LARGE DESKTOP — FIT MORE COMFORTABLY IN ONE VIEW --------------------------------------------------------- */ @media (min-width:1100px) and (min-height:760px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:12px !important; padding-bottom:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding-top:14px !important; padding-bottom:14px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width:650px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:calc(100% - 14px) !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding:14px 12px !important; } } /* ========================================================= DEWPOINT CHECKOUT — ULTRA COMPACT V2 ========================================================= */ @media (min-width:900px){ /* whole checkout section */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ padding:8px 0 10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:min(86%,760px) !important; max-width:760px !important; margin:0 auto !important; } /* back button */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-back{ padding:5px 10px !important; margin:0 0 5px !important; font-size:9px !important; border-radius:6px !important; } /* main card */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding:12px 14px !important; border-radius:12px !important; } /* checkout title */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .title small{ font-size:8px !important; line-height:1 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .title h2{ font-size:17px !important; line-height:1.05 !important; margin:2px 0 7px !important; } /* date banner */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > div:first-child, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > section:first-child{ min-height:34px !important; padding:7px 10px !important; margin-bottom:4px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > div:first-child b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > section:first-child b{ font-size:12px !important; } /* booking rows */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items{ margin-bottom:6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ padding:6px 0 !important; gap:6px !important; min-height:34px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ font-size:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article strong{ font-size:11px !important; } /* discount */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box{ padding:8px 10px !important; margin:7px 0 5px !important; border-radius:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box > b{ font-size:11px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box > small{ font-size:8px !important; margin-top:1px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-tabs{ margin-top:5px !important; gap:5px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-tabs button{ padding:5px 10px !important; font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry{ margin-top:5px !important; gap:5px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry input{ min-height:30px !important; padding:6px 8px !important; font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry button{ min-height:30px !important; padding:0 10px !important; font-size:9px !important; } /* subtotal / discount / total */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row{ padding:5px 0 !important; min-height:auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row span, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row span, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row span{ font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row b{ font-size:10px !important; } /* payment methods */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ margin:7px 0 !important; gap:4px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > b{ font-size:10px !important; margin-bottom:1px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button{ min-height:38px !important; padding:6px 9px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button small{ font-size:7px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button i{ font-size:11px !important; } /* terms */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms{ margin-top:6px !important; padding:7px 9px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms > b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms p{ margin:2px 0 4px !important; font-size:7px !important; line-height:1.2 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms label{ font-size:7px !important; line-height:1.15 !important; } /* confirm button */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-main-button{ min-height:32px !important; margin-top:6px !important; padding:6px 12px !important; font-size:9px !important; border-radius:7px !important; } /* footer */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer{ padding-top:10px !important; padding-bottom:6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-grid{ padding:0 0 5px !important; gap:12px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-logo strong{ font-size:16px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-column h4{ font-size:10px !important; margin-bottom:2px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-logo small, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-column p, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-column button{ font-size:9px !important; line-height:1.2 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-bottom{ padding-top:4px !important; margin-top:4px !important; font-size:9px !important; } } /* ========================================================= DEWPOINT CHECKOUT — FIT ENTIRE CHECKOUT IN DESKTOP VIEW ========================================================= */ @media (min-width:900px){ /* Much less white space around checkout */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ padding:4px 0 6px !important; min-height:0 !important; } /* Scale checkout as one complete unit */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:min(94vw,980px) !important; max-width:980px !important; margin:0 auto !important; zoom:.78; } /* Smaller outside wrapper */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-shell{ margin:0 !important; padding:0 !important; } /* Back button close to checkout */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-back{ margin:0 0 4px !important; } /* Reduce remaining card spacing */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding:12px 16px !important; } /* Date */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout{ margin-top:4px !important; margin-bottom:4px !important; } /* Booking row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ padding:5px 0 !important; } /* Discount */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box{ margin:5px 0 !important; padding:8px 10px !important; } /* Payment methods become one horizontal row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:6px !important; margin:6px 0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > b{ grid-column:1 / -1 !important; margin:0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button{ min-height:44px !important; margin:0 !important; } /* Terms compact */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms{ padding:7px 10px !important; margin:5px 0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms p{ margin:2px 0 4px !important; } /* Confirm */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-main-button{ margin-top:5px !important; min-height:34px !important; } /* Compact footer specifically while checking out */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer{ padding-top:8px !important; padding-bottom:6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-grid{ padding-top:0 !important; padding-bottom:4px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-footer-bottom{ margin-top:3px !important; padding-top:3px !important; } } /* Don't zoom mobile */ @media (max-width:899px){ body .dp-site .dp-home-booking .dp-inline-checkout{ zoom:1 !important; } } /* ========================================================= DEWPOINT CHECKOUT — CENTER + COURT/TIME/AMOUNT ALIGNMENT ========================================================= */ @media (min-width:900px){ /* Center the scaled checkout correctly */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ display:flex !important; justify-content:center !important; align-items:flex-start !important; padding:4px 0 6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:980px !important; max-width:980px !important; margin:0 auto !important; position:relative !important; left:0 !important; right:0 !important; transform-origin:top center !important; zoom:.78; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-shell{ width:100% !important; max-width:100% !important; margin:0 auto !important; } /* ----------------------------------------------------- BOOKING TABLE HEADER ----------------------------------------------------- */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout::before{ content:"COURT TIME AMOUNT"; display:grid !important; grid-template-columns: minmax(150px,.8fr) minmax(250px,1.4fr) minmax(120px,.5fr) !important; align-items:center !important; padding:6px 0 !important; margin-top:4px !important; border-bottom: 1px solid #d8dee8 !important; color:#667085 !important; font-size:9px !important; font-weight:800 !important; letter-spacing:.05em !important; white-space:normal !important; } /* ----------------------------------------------------- EACH BOOKING ROW Court | Time | Amount ----------------------------------------------------- */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ display:grid !important; grid-template-columns: minmax(150px,.8fr) minmax(250px,1.4fr) minmax(120px,.5fr) !important; align-items:center !important; gap:12px !important; padding:7px 0 !important; margin:0 !important; border-bottom: 1px solid #e2e7ef !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article > div{ display:contents !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article b{ grid-column:1 !important; margin:0 !important; color:#111827 !important; font-size:10px !important; font-weight:800 !important; text-align:left !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ grid-column:2 !important; margin:0 !important; color:#475467 !important; font-size:9px !important; font-weight:500 !important; text-align:left !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article strong{ grid-column:3 !important; margin:0 !important; color:#111827 !important; font-size:10px !important; font-weight:900 !important; text-align:right !important; white-space:nowrap !important; } } /* Mobile keeps natural stacked spacing */ @media (max-width:899px){ body .dp-site .dp-home-booking .checkout-items article{ display:grid !important; grid-template-columns: .75fr 1.25fr auto !important; align-items:center !important; gap:6px !important; } body .dp-site .dp-home-booking .checkout-items article > div{ display:contents !important; } body .dp-site .dp-home-booking .checkout-items article strong{ text-align:right !important; } } /* ========================================================= DEWPOINT CHECKOUT — COMPRESSED WIDTH V1 ========================================================= */ @media (min-width:900px){ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:720px !important; max-width:720px !important; margin:0 auto !important; zoom:.82 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-shell{ width:100% !important; max-width:100% !important; margin:0 auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding-left:14px !important; padding-right:14px !important; } /* booking table columns */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout::before{ grid-template-columns: 1fr 1.15fr auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ grid-template-columns: 1fr 1.15fr auto !important; gap:10px !important; } /* payment cards stay on one row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ grid-template-columns:repeat(3,1fr) !important; gap:5px !important; } } /* ========================================================= DEWPOINT CHECKOUT — LARGER BOOKING TIME ========================================================= */ @media (min-width:900px){ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; letter-spacing:.01em !important; } } @media (max-width:899px){ body .dp-site .dp-home-booking .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; } } /* ========================================================= DEWPOINT CHECKOUT — LARGER BOOKING TIME ========================================================= */ @media (min-width:900px){ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; letter-spacing:.01em !important; } } @media (max-width:899px){ body .dp-site .dp-home-booking .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; } } /* ========================================================= DEWPOINT ACTIVE BOOKING HOLD LOCK V1 ========================================================= */ body.dp-active-booking-hold .dp-home-booking .tap-cell.available{ cursor:not-allowed !important; opacity:.58 !important; } /* Keep schedule visible, but visually indicate it cannot be selected while another booking is awaiting payment. */ body.dp-active-booking-hold .dp-home-booking .tap-cell.available:hover{ transform:none !important; box-shadow:none !important; } /* ========================================================= DEWPOINT MY BOOKING PAGE MODE Header → My Booking → Footer ========================================================= */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) > *:not(.dp-final-nav):not(.dp-home-booking):not(.dp-footer){ display:none !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) > .dp-final-nav{ display:flex !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) > .dp-home-booking{ display:block !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) > .dp-footer{ display:block !important; } /* Hide normal booking heading while inside My Booking */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-home-booking-title{ display:none !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-home-booking{ padding-top:48px !important; padding-bottom:64px !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings{ width:min(100% - 32px, 1100px) !important; margin:0 auto !important; } /* ========================================================= DEWPOINT MY BOOKING PAGE VIOLET THEME + SLIMMER CARDS ========================================================= */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ){ background:#f8f9fc !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-home-booking{ padding-top:32px !important; padding-bottom:44px !important; } /* page width */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings{ width:min(100% - 32px, 980px) !important; margin:0 auto !important; } /* top hero / header card */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings > section:first-child, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .panel:first-child{ background: linear-gradient( 135deg, #2d0b75 0%, #5b22c9 52%, #8c4cff 100% ) !important; border:0 !important; border-radius:18px !important; padding:22px 24px !important; box-shadow:0 14px 34px rgba(76, 36, 170, .16) !important; } /* all main green action buttons -> violet */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings button, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings a, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .primary{ border-radius:10px !important; } /* + Book a Court / View Court Booking */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings button.primary, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings a.primary, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings button[class*="book"], body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings a[class*="book"]{ color:#fff !important; background: linear-gradient( 90deg, #7b2ff7 0%, #933bff 45%, #4c7dff 100% ) !important; border:0 !important; box-shadow:0 8px 20px rgba(123, 47, 247, .18) !important; } /* slimmer outer container */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings > section:not(:first-child), body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .panel{ border-radius:18px !important; padding:14px 16px !important; } /* slimmer booking cards / rows */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings article, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .booking-card, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .my-booking-row, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .my-booking-item, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings li{ min-height:72px !important; padding:12px 14px !important; border-radius:14px !important; margin-bottom:10px !important; } /* inner text a bit tighter */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings small{ font-size:11px !important; line-height:1.35 !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings b, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings strong{ line-height:1.25 !important; } /* slimmer right-side action button */ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings article button, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings article a{ min-height:38px !important; padding:0 14px !important; font-size:12px !important; } /* mobile */ @media (max-width: 768px){ body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings{ width:min(100% - 20px, 100%) !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings > section:first-child, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .panel:first-child{ padding:18px 18px !important; } body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings article, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .booking-card, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .my-booking-row, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings .my-booking-item, body .dp-site:has( .dp-home-booking .dp-inline-my-bookings ) .dp-inline-my-bookings li{ min-height:64px !important; padding:10px 12px !important; } } /* ========================================================= DEWPOINT MY BOOKING — EXACT CLASS OVERRIDES V2 ========================================================= */ /* Violet My Booking header */ .dp-inline-my-bookings .booking-page-head{ background:linear-gradient(135deg,#34126d 0%,#6428c8 55%,#8b4cff 100%) !important; border:none !important; border-radius:18px !important; padding:22px 28px !important; min-height:auto !important; box-shadow:0 12px 28px rgba(85,38,170,.18) !important; } /* * Legacy My Bookings header color removed. * The dedicated DewpointMyBookingsPage now owns its own * light-card typography through .dp-myb-* classes. */ /* Violet buttons */ .dp-inline-my-bookings .booking-page-head > button, .dp-inline-my-bookings .booking-page-cards article > button, .dp-inline-my-bookings .booking-empty button{ background:linear-gradient(90deg,#762ce8,#944cff) !important; color:#fff !important; border:none !important; box-shadow:none !important; } /* Slimmer outer list */ .dp-inline-my-bookings .booking-list-page{ padding:12px 16px !important; border-radius:16px !important; } /* Less vertical gap */ .dp-inline-my-bookings .booking-page-cards{ gap:8px !important; } /* Slim booking rows */ .dp-inline-my-bookings .booking-page-cards article{ min-height:68px !important; padding:10px 16px !important; margin:0 !important; border-radius:12px !important; } /* Compact text */ .dp-inline-my-bookings .booking-page-cards article h3{ margin:0 0 2px !important; font-size:13px !important; } .dp-inline-my-bookings .booking-page-cards article p{ margin:0 0 2px !important; font-size:10px !important; } .dp-inline-my-bookings .booking-page-cards article small{ font-size:9px !important; } /* Smaller badge */ .dp-inline-my-bookings .booking-page-cards article em{ padding:5px 8px !important; font-size:8px !important; } /* Slim View button */ .dp-inline-my-bookings .booking-page-cards article > button{ min-height:34px !important; padding:0 14px !important; font-size:10px !important; border-radius:9px !important; } /* Violet back link */ .dp-inline-my-bookings .page-back, .dp-inline-my-bookings > button:first-child{ color:#6d28d9 !important; } @media (max-width:768px){ .dp-inline-my-bookings .booking-page-head{ padding:18px !important; } .dp-inline-my-bookings .booking-page-cards article{ min-height:62px !important; padding:9px 12px !important; } } /* ========================================================= DEWPOINT MY BOOKING — TEXT COLOR FIX ========================================================= */ .dp-inline-my-bookings .booking-list-page, .dp-inline-my-bookings .booking-page-cards article{ color:#111827 !important; } /* Main booking texts */ .dp-inline-my-bookings .booking-page-cards article h3, .dp-inline-my-bookings .booking-page-cards article h4, .dp-inline-my-bookings .booking-page-cards article p, .dp-inline-my-bookings .booking-page-cards article small, .dp-inline-my-bookings .booking-page-cards article span, .dp-inline-my-bookings .booking-page-cards article b, .dp-inline-my-bookings .booking-page-cards article strong{ color:#111827 !important; } /* Secondary / muted text */ .dp-inline-my-bookings .booking-page-cards article small, .dp-inline-my-bookings .booking-page-cards article p{ color:#374151 !important; } /* Status text like reserved / cancelled */ .dp-inline-my-bookings .booking-page-cards article .status, .dp-inline-my-bookings .booking-page-cards article .booking-status, .dp-inline-my-bookings .booking-page-cards article em{ color:#1f2937 !important; } /* Keep the badge readable */ .dp-inline-my-bookings .booking-page-cards article em{ background:#eef2f7 !important; border:1px solid #d7dee8 !important; } /* Make sure links/buttons inside cards are readable too */ .dp-inline-my-bookings .booking-page-cards article a{ color:#111827 !important; } /* ========================================================= DEWPOINT COURT BOOKING DETAILS — VIOLET THEME ========================================================= */ /* Main booking detail header */ .dp-inline-my-bookings .court-detail-page > header{ background:linear-gradient( 135deg, #34126d 0%, #6428c8 55%, #8b4cff 100% ) !important; border:none !important; border-radius:18px !important; padding:24px 28px !important; color:#fff !important; box-shadow: 0 12px 28px rgba(85,38,170,.16) !important; } /* Header text stays white */ .dp-inline-my-bookings .court-detail-page > header small, .dp-inline-my-bookings .court-detail-page > header h2, .dp-inline-my-bookings .court-detail-page > header p{ color:#fff !important; } /* Court name / status row */ .dp-inline-my-bookings .court-detail-page .detail-status{ color:#111827 !important; } /* Booking information cards */ .dp-inline-my-bookings .court-detail-page .details label{ background:#f7f7fb !important; color:#6b7280 !important; border:1px solid #ececf3 !important; border-radius:12px !important; padding:14px !important; } /* Date / Schedule / Payment / Amount values */ .dp-inline-my-bookings .court-detail-page .details label b{ color:#111827 !important; } /* Reserved badge */ .dp-inline-my-bookings .court-detail-page .detail-status span{ background:#f1e9ff !important; color:#6d28d9 !important; border:1px solid #dcc8ff !important; } /* Back to My Bookings button */ .dp-inline-my-bookings .page-back{ color:#6d28d9 !important; border-color:#8b5cf6 !important; background:#fff !important; } .dp-inline-my-bookings .page-back:hover{ background:#f6f0ff !important; } /* Slightly cleaner panel */ .dp-inline-my-bookings .court-detail-page{ border-radius:18px !important; padding:20px !important; } /* ========================================================= DEWPOINT ACTIVE HOLD — PLAIN WHITE / BLACK V2 ========================================================= */ /* Main recovery container */ body .dp-inline-checkout .payment-recovery-page, body .dp-inline-checkout .payment-recovery-card{ background:#ffffff !important; background-image:none !important; color:#111111 !important; } /* Main card */ body .dp-inline-checkout .payment-recovery-card{ border:1px solid #d9dee7 !important; box-shadow:0 10px 28px rgba(0,0,0,.08) !important; } /* HEADER — remove dark blue completely */ body .dp-inline-checkout .payment-recovery-card > header{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } /* All header text black */ body .dp-inline-checkout .payment-recovery-card > header small, body .dp-inline-checkout .payment-recovery-card > header h2, body .dp-inline-checkout .payment-recovery-card > header p, body .dp-inline-checkout .payment-recovery-card > header b, body .dp-inline-checkout .payment-recovery-card > header strong, body .dp-inline-checkout .payment-recovery-card > header span{ color:#111111 !important; text-shadow:none !important; } /* Check icon */ body .dp-inline-checkout .payment-recovery-icon{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:2px solid #111111 !important; box-shadow:none !important; } /* Countdown timer */ body .dp-inline-checkout .payment-recovery-timer{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Venue row */ body .dp-inline-checkout .payment-recovery-venue{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } /* Venue text */ body .dp-inline-checkout .payment-recovery-venue *{ color:#111111 !important; } /* Individual held booking rows */ body .dp-inline-checkout .payment-recovery-items article{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; box-shadow:none !important; } /* ALL row text black — including price */ body .dp-inline-checkout .payment-recovery-items article *, body .dp-inline-checkout .payment-recovery-items article strong, body .dp-inline-checkout .payment-recovery-items article small, body .dp-inline-checkout .payment-recovery-items article b{ color:#111111 !important; } /* Amount to Pay */ body .dp-inline-checkout .payment-recovery-total{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } /* Amount text and price */ body .dp-inline-checkout .payment-recovery-total *{ color:#111111 !important; } /* Resume Payment = black */ body .dp-inline-checkout .payment-recovery-actions .primary{ background:#111111 !important; background-image:none !important; color:#ffffff !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Cancel Hold = white */ body .dp-inline-checkout .payment-recovery-cancel{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Note at bottom */ body .dp-inline-checkout .payment-recovery-note{ color:#555555 !important; } /* Remove accidental inherited gradients from recovery card */ body .dp-inline-checkout .payment-recovery-card div:not(.payment-recovery-icon), body .dp-inline-checkout .payment-recovery-card article{ background-image:none !important; } /* ========================================================= ACTIVE HOLD RECOVERY — REMOVE BOX/TAB COLORS Plain white blocks, black text ========================================================= */ body .dp-site .dp-inline-checkout .payment-recovery-card{ background:#ffffff !important; border:1px solid #d9dee7 !important; box-shadow:0 10px 24px rgba(0,0,0,.08) !important; } /* top header purple box */ body .dp-site .dp-inline-checkout .payment-recovery-card > header{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* venue dark box */ body .dp-site .dp-inline-checkout .payment-recovery-venue{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* booking item dark box */ body .dp-site .dp-inline-checkout .payment-recovery-items article{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* total box */ body .dp-site .dp-inline-checkout .payment-recovery-total{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* remove any inherited colored panels inside the hold card */ body .dp-site .dp-inline-checkout .payment-recovery-card div, body .dp-site .dp-inline-checkout .payment-recovery-card section, body .dp-site .dp-inline-checkout .payment-recovery-card article{ background-image:none !important; } /* all text black */ body .dp-site .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-inline-checkout .payment-recovery-card b, body .dp-site .dp-inline-checkout .payment-recovery-card strong, body .dp-site .dp-inline-checkout .payment-recovery-card h2, body .dp-site .dp-inline-checkout .payment-recovery-card p, body .dp-site .dp-inline-checkout .payment-recovery-card small, body .dp-site .dp-inline-checkout .payment-recovery-card span{ color:#111111 !important; text-shadow:none !important; } /* timer box */ body .dp-site .dp-inline-checkout .payment-recovery-timer{ background:#ffffff !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* check icon */ body .dp-site .dp-inline-checkout .payment-recovery-icon{ background:#ffffff !important; color:#111111 !important; border:2px solid #111111 !important; box-shadow:none !important; } /* keep buttons readable */ body .dp-site .dp-inline-checkout .payment-recovery-actions .primary{ background:#111111 !important; background-image:none !important; color:#ffffff !important; border:1px solid #111111 !important; } body .dp-site .dp-inline-checkout .payment-recovery-cancel{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; } /* ========================================================= ACTIVE HOLD RECOVERY — RESTORE RESUME PAYMENT BUTTON COLOR ========================================================= */ body .dp-site .payment-recovery-actions .primary, body .dp-site .dp-inline-checkout .payment-recovery-actions .primary{ background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#ffffff !important; border:0 !important; box-shadow:0 10px 24px rgba(103,55,229,.22) !important; } body .dp-site .payment-recovery-actions .primary:hover, body .dp-site .dp-inline-checkout .payment-recovery-actions .primary:hover{ filter:brightness(1.03) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE / BLACK CLEAN THEME Keep accent only on Confirm Booking ========================================================= */ /* Main payment shell */ body .dp-site .dp-inline-checkout .payment-page, body .dp-site .dp-inline-checkout .checkout-payment, body .dp-site .dp-inline-checkout .payment-shell{ background:#ffffff !important; color:#111111 !important; } /* All payment panels white */ body .dp-site .dp-inline-checkout .checkout-payment section, body .dp-site .dp-inline-checkout .payment-page section, body .dp-site .dp-inline-checkout .checkout-payment > div, body .dp-site .dp-inline-checkout .payment-page > div{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border-color:#dfe3e8 !important; box-shadow:none !important; } /* Timer / Amount / GCash / receipt blocks */ body .dp-site .dp-inline-checkout .payment-timer, body .dp-site .dp-inline-checkout .payment-amount, body .dp-site .dp-inline-checkout .payment-channel-card, body .dp-site .dp-inline-checkout .manual-payment-proof, body .dp-site .dp-inline-checkout .payment-proof, body .dp-site .dp-inline-checkout .payment-receipt{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #dfe3e8 !important; box-shadow:none !important; } /* Remove colored backgrounds from nested elements */ body .dp-site .dp-inline-checkout .checkout-payment div, body .dp-site .dp-inline-checkout .payment-page div{ background-image:none !important; } /* All payment text black */ body .dp-site .dp-inline-checkout .checkout-payment h1, body .dp-site .dp-inline-checkout .checkout-payment h2, body .dp-site .dp-inline-checkout .checkout-payment h3, body .dp-site .dp-inline-checkout .checkout-payment h4, body .dp-site .dp-inline-checkout .checkout-payment p, body .dp-site .dp-inline-checkout .checkout-payment small, body .dp-site .dp-inline-checkout .checkout-payment span, body .dp-site .dp-inline-checkout .checkout-payment b, body .dp-site .dp-inline-checkout .checkout-payment strong, body .dp-site .dp-inline-checkout .checkout-payment label, body .dp-site .dp-inline-checkout .payment-page h1, body .dp-site .dp-inline-checkout .payment-page h2, body .dp-site .dp-inline-checkout .payment-page h3, body .dp-site .dp-inline-checkout .payment-page p, body .dp-site .dp-inline-checkout .payment-page small, body .dp-site .dp-inline-checkout .payment-page span, body .dp-site .dp-inline-checkout .payment-page b, body .dp-site .dp-inline-checkout .payment-page strong, body .dp-site .dp-inline-checkout .payment-page label{ color:#111111 !important; text-shadow:none !important; } /* Receipt upload box */ body .dp-site .dp-inline-checkout .manual-payment-proof{ background:#ffffff !important; } body .dp-site .dp-inline-checkout .manual-payment-proof input{ background:#ffffff !important; color:#111111 !important; border:1px solid #bfc6d0 !important; } /* File upload area */ body .dp-site .dp-inline-checkout input[type="file"]{ background:#ffffff !important; color:#111111 !important; } /* Reference number input */ body .dp-site .dp-inline-checkout input[type="text"]{ background:#ffffff !important; color:#111111 !important; border:1px solid #bfc6d0 !important; } /* QR / image area stays white */ body .dp-site .dp-inline-checkout .manual-payment-proof img{ background:#ffffff !important; } /* Generic payment buttons become white */ body .dp-site .dp-inline-checkout .checkout-payment button, body .dp-site .dp-inline-checkout .payment-page button{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* ========================================================= KEEP ONLY CONFIRM BOOKING COLORED ========================================================= */ body .dp-site .dp-inline-checkout button.primary, body .dp-site .dp-inline-checkout .confirm-booking, body .dp-site .dp-inline-checkout button[class*="confirm"]{ background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#ffffff !important; border:none !important; box-shadow:0 10px 24px rgba(103,55,229,.20) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE BOXES / BLACK TEXT Amount to Pay / GCash / Receipt ========================================================= */ /* AMOUNT TO PAY box */ body .dp-site .dp-inline-checkout .payment-amount, body .dp-site .dp-inline-checkout [class*="payment-amount"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-amount *, body .dp-site .dp-inline-checkout [class*="payment-amount"] *{ color:#111111 !important; text-shadow:none !important; } /* GCASH box */ body .dp-site .dp-inline-checkout .payment-channel-card, body .dp-site .dp-inline-checkout .manual-payment-card, body .dp-site .dp-inline-checkout [class*="gcash"], body .dp-site .dp-inline-checkout [class*="payment-channel"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-channel-card *, body .dp-site .dp-inline-checkout .manual-payment-card *, body .dp-site .dp-inline-checkout [class*="gcash"] *, body .dp-site .dp-inline-checkout [class*="payment-channel"] *{ color:#111111 !important; text-shadow:none !important; } /* RECEIPT box */ body .dp-site .dp-inline-checkout .payment-receipt, body .dp-site .dp-inline-checkout .manual-payment-proof, body .dp-site .dp-inline-checkout .upload-proof, body .dp-site .dp-inline-checkout [class*="receipt"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-receipt *, body .dp-site .dp-inline-checkout .manual-payment-proof *, body .dp-site .dp-inline-checkout .upload-proof *, body .dp-site .dp-inline-checkout [class*="receipt"] *{ color:#111111 !important; text-shadow:none !important; } /* Upload area inside receipt */ body .dp-site .dp-inline-checkout input[type="file"], body .dp-site .dp-inline-checkout input[type="text"], body .dp-site .dp-inline-checkout textarea{ background:#ffffff !important; color:#111111 !important; border:1px solid #cfd6e0 !important; } /* Dashed upload dropzone */ body .dp-site .dp-inline-checkout .payment-receipt label, body .dp-site .dp-inline-checkout .manual-payment-proof label, body .dp-site .dp-inline-checkout .upload-proof label{ background:#ffffff !important; color:#111111 !important; border-color:#b9c2d0 !important; } /* Keep only confirm button colored */ body .dp-site .dp-inline-checkout button.primary, body .dp-site .dp-inline-checkout .confirm-booking, body .dp-site .dp-inline-checkout button[class*="confirm"]{ background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#ffffff !important; border:none !important; box-shadow:0 10px 24px rgba(103,55,229,.20) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — FORCE WHITE BOXES Amount to Pay / GCash / Receipt / Reference Number ========================================================= */ body .dp-site .dp-inline-checkout .payment-screen .payment-amount, body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card, body .dp-site .dp-inline-checkout .payment-screen .payment-receipt, body .dp-site .dp-inline-checkout .payment-screen .payment-proof, body .dp-site .dp-inline-checkout .payment-screen .receipt-upload, body .dp-site .dp-inline-checkout .payment-screen .upload-payment-receipt, body .dp-site .dp-inline-checkout .payment-screen .proof-upload, body .dp-site .dp-inline-checkout .payment-screen .reference-field, body .dp-site .dp-inline-checkout .payment-screen .reference-number-field, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"], body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"], body .dp-site .dp-inline-checkout .payment-screen [class*="receipt"], body .dp-site .dp-inline-checkout .payment-screen [class*="proof"], body .dp-site .dp-inline-checkout .payment-screen [class*="reference"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .payment-amount *, body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card *, body .dp-site .dp-inline-checkout .payment-screen .payment-receipt *, body .dp-site .dp-inline-checkout .payment-screen .payment-proof *, body .dp-site .dp-inline-checkout .payment-screen .receipt-upload *, body .dp-site .dp-inline-checkout .payment-screen .upload-payment-receipt *, body .dp-site .dp-inline-checkout .payment-screen .proof-upload *, body .dp-site .dp-inline-checkout .payment-screen .reference-field *, body .dp-site .dp-inline-checkout .payment-screen .reference-number-field *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="receipt"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="proof"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="reference"] *{ color:#111111 !important; text-shadow:none !important; } /* QR / GCash area */ body .dp-site .dp-inline-checkout .payment-screen img{ background:#ffffff !important; } /* upload dropzone */ body .dp-site .dp-inline-checkout .payment-screen label, body .dp-site .dp-inline-checkout .payment-screen .upload-area, body .dp-site .dp-inline-checkout .payment-screen .dropzone{ background:#ffffff !important; color:#111111 !important; border:1px dashed #bfc8d8 !important; } /* reference input */ body .dp-site .dp-inline-checkout .payment-screen input[type="text"], body .dp-site .dp-inline-checkout .payment-screen input[type="search"], body .dp-site .dp-inline-checkout .payment-screen input:not([type="file"]), body .dp-site .dp-inline-checkout .payment-screen textarea{ background:#ffffff !important; color:#111111 !important; border:1px solid #cfd6e0 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen input[type="text"]::placeholder, body .dp-site .dp-inline-checkout .payment-screen input[type="search"]::placeholder, body .dp-site .dp-inline-checkout .payment-screen input:not([type="file"])::placeholder, body .dp-site .dp-inline-checkout .payment-screen textarea::placeholder{ color:#6b7280 !important; } /* keep only confirm button colored */ body .dp-site .dp-inline-checkout .payment-screen .primary, body .dp-site .dp-inline-checkout .payment-screen button.primary, body .dp-site .dp-inline-checkout .payment-screen .confirm-booking, body .dp-site .dp-inline-checkout .payment-screen button[class*="confirm"]{ background:linear-gradient(90deg,#8b2be8 0%,#6b43ef 48%,#2f7df6 100%) !important; color:#ffffff !important; border:none !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE CARD FIX countdown text black amount to pay white gcash card white ========================================================= */ body .dp-site .dp-inline-checkout .payment-screen [class*="timer"], body .dp-site .dp-inline-checkout .payment-screen [class*="remaining"]{ background:#ffffff !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen [class*="timer"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="remaining"] *{ color:#111111 !important; text-shadow:none !important; } /* AMOUNT TO PAY box */ body .dp-site .dp-inline-checkout .payment-screen .payment-amount, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"], body .dp-site .dp-inline-checkout .payment-screen [class*="amount-to-pay"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .payment-amount *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="amount-to-pay"] *{ color:#111111 !important; text-shadow:none !important; } /* GCASH / manual payment card */ body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"], body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"], body .dp-site .dp-inline-checkout .payment-screen [class*="payment-method"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card *, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-method"] *{ color:#111111 !important; text-shadow:none !important; } /* keep QR visible on white */ body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card img, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] img, body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"] img{ background:#ffffff !important; border-radius:16px !important; } /* keep only action buttons colored */ body .dp-site .dp-inline-checkout .payment-screen .primary, body .dp-site .dp-inline-checkout .payment-screen button.primary, body .dp-site .dp-inline-checkout .payment-screen .confirm-booking, body .dp-site .dp-inline-checkout .payment-screen button[class*="confirm"]{ background:linear-gradient(90deg,#8b2be8 0%,#6b43ef 48%,#2f7df6 100%) !important; color:#ffffff !important; border:none !important; } /* ========================================================= DEWPOINT COURTS — PERMANENT LIGHT/WHITE BOARD Prevent theme spillover from coloring entire booking area. Selected individual slot may remain violet. ========================================================= */ body .dp-site .dp-home-booking .dp-pm-booking{ background:#ffffff !important; background-image:none !important; color:#111111 !important; } body .dp-site .dp-home-booking .dp-pm-booking .dp-tap-booking-main{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e5e6ed !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-grid-scroll{ background:#ffffff !important; background-image:none !important; } /* ========================================================= DEWPOINT REAL PLAYER ROUTES V1 /checkout /my-bookings ========================================================= */ /* --------------------------------------------------------- /checkout — dedicated order/payment page --------------------------------------------------------- */ body.dp-route-checkout{ background:#f7f8fb !important; } body.dp-route-checkout .dp-site > *:not(.dp-final-nav):not(.dp-home-booking):not(.dp-footer){ display:none !important; } body.dp-route-checkout .dp-site > .dp-final-nav{ display:flex !important; } body.dp-route-checkout .dp-site > .dp-home-booking{ display:block !important; padding-top:34px !important; padding-bottom:54px !important; min-height:calc(100vh - 170px) !important; } body.dp-route-checkout .dp-site > .dp-footer{ display:block !important; } body.dp-route-checkout .dp-home-booking-title{ display:none !important; } body.dp-route-checkout .dp-inline-checkout{ width:min(100% - 32px, 1050px) !important; margin:0 auto !important; } /* --------------------------------------------------------- /my-bookings — dedicated booking page --------------------------------------------------------- */ body.dp-route-my-bookings{ background:#f8f9fc !important; } body.dp-route-my-bookings .dp-site > *:not(.dp-final-nav):not(.dp-home-booking):not(.dp-footer){ display:none !important; } body.dp-route-my-bookings .dp-site > .dp-final-nav{ display:flex !important; } body.dp-route-my-bookings .dp-site > .dp-home-booking{ display:block !important; min-height:calc(100vh - 170px) !important; } body.dp-route-my-bookings .dp-site > .dp-footer{ display:block !important; } body.dp-route-my-bookings .dp-home-booking-title{ display:none !important; } body.dp-route-my-bookings .dp-inline-my-bookings{ width:min(100% - 32px,980px) !important; margin:0 auto !important; } /* ========================================================= DEWPOINT CHECKOUT V2 Completely independent checkout design. No old payment-box styling is reused. ========================================================= */ body.dp-route-checkout{ background:#f7f8fb !important; } body.dp-route-checkout .dp-home-booking{ padding:0 !important; background:#f7f8fb !important; } body.dp-route-checkout .dp-inline-checkout{ width:100% !important; max-width:none !important; margin:0 !important; zoom:1 !important; } body.dp-route-checkout .dp-new-checkout-page{ width:min(100% - 48px, 1180px) !important; min-height:720px; margin:0 auto !important; padding:44px 0 72px !important; color:#102342 !important; font-family:inherit !important; } .dp-new-checkout-page *, .dp-new-checkout-page *::before, .dp-new-checkout-page *::after{ box-sizing:border-box; } .dp-new-checkout-heading{ display:grid; grid-template-columns:120px 1fr 120px; align-items:center; margin-bottom:18px; } .dp-new-checkout-heading h1{ margin:0; text-align:center; font-size:34px; line-height:1.1; color:#102342; } .dp-new-checkout-heading button{ appearance:none; border:0; background:transparent; color:#173f73; font-weight:700; cursor:pointer; text-align:left; } .dp-new-hold-banner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:44px; margin-bottom:20px; padding:10px 16px; border:1px solid #d6eee5; border-radius:12px; background:#eafaf3 !important; color:#065f46 !important; } .dp-new-hold-banner strong{ color:#065f46 !important; font-size:15px; } .dp-new-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 24px; } .dp-new-steps > div{ position:relative; display:flex; align-items:center; gap:10px; min-height:42px; color:#9aa4b5; font-weight:700; } .dp-new-steps > div::after{ content:""; position:absolute; left:42px; right:-10px; top:20px; height:1px; background:#dfe5ed; z-index:0; } .dp-new-steps > div:last-child::after{ display:none; } .dp-new-steps i{ position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#edf1f6; color:#173f73; font-style:normal; font-weight:900; } .dp-new-steps span{ position:relative; z-index:1; padding-right:8px; background:#f7f8fb; } .dp-new-steps > div.active{ color:#173f73; } .dp-new-steps > div.active i{ background:#173f73; color:#fff; } .dp-new-checkout-layout{ display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:24px; align-items:start; } .dp-new-main-card, .dp-new-summary{ background:#fff !important; border:1px solid #dfe5ed !important; box-shadow:0 2px 8px rgba(15,35,65,.05) !important; } .dp-new-main-card{ padding:26px !important; border-radius:20px !important; } .dp-new-main-card > h2{ margin:0 0 5px; font-size:23px; color:#102342 !important; } .dp-new-subtitle{ margin:0 0 22px; color:#111827; -webkit-text-fill-color:#111827; opacity:1; filter:none; line-height:1.5; } .dp-new-date-card{ overflow:hidden; margin-bottom:16px; border:1px solid #dfe5ed; border-radius:16px; background:#fff !important; } .dp-new-date-card > header, .dp-new-date-card > footer{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#fbfcfe !important; } .dp-new-date-card > header{ border-bottom:1px solid #e6ebf1; } .dp-new-date-card > footer{ border-top:1px solid #e6ebf1; } .dp-new-date-card article{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; padding:14px 16px; border-bottom:1px solid #eef1f5; background:#fff !important; } .dp-new-date-card article:last-of-type{ border-bottom:0; } .dp-new-date-card article span{ color:#6b778d !important; } .dp-new-date-card article strong, .dp-new-date-card footer strong{ color:#102342 !important; } .dp-new-discount{ padding:16px; margin:16px 0; border:1px solid #dfe5ed; border-radius:16px; background:#fff !important; } .dp-new-discount > small{ display:block; margin:3px 0 12px; color:#77849a !important; } .dp-new-discount > div{ display:flex; gap:8px; } .dp-new-discount button{ border:1px solid #cfd8e4; border-radius:999px; padding:8px 16px; background:#fff; color:#173f73; font-weight:700; cursor:pointer; } .dp-new-discount button.selected{ background:#173f73; border-color:#173f73; color:#fff; } .dp-new-warning{ margin:16px 0; padding:13px 15px; border-radius:12px; background:#fff8e6 !important; color:#aa5c00 !important; } .dp-new-terms{ display:flex; gap:10px; align-items:flex-start; padding:16px; border:1px solid #dfe5ed; border-radius:14px; background:#fff !important; color:#233a5e !important; } .dp-new-terms input, .dp-new-confirm input{ width:18px; height:18px; flex:0 0 auto; } .dp-new-review-actions{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; } .dp-new-review-actions button{ min-height:44px; border-radius:999px; padding:0 22px; font-weight:800; cursor:pointer; } .dp-new-review-actions button.text{ padding-left:0; border:0; background:transparent; color:#173f73; } .dp-new-review-actions button.primary{ border:0; background:#173f73; color:#fff; } .dp-new-review-actions button:disabled{ opacity:.45; cursor:not-allowed; } .dp-new-summary{ position:sticky; top:110px; padding:20px !important; border-radius:20px !important; } .dp-new-summary > small{ display:block; margin-bottom:14px; color:#708097 !important; font-weight:800; } .dp-new-summary section{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #e8edf3; } .dp-new-summary section > b{ display:block; margin-bottom:8px; color:#102342; } .dp-new-summary article{ display:grid; grid-template-columns:1fr auto; gap:12px; padding:8px 10px; border-radius:10px; background:#fbfcfe !important; } .dp-new-summary article + article{ margin-top:6px; } .dp-new-summary article span:last-child{ color:#6c7890 !important; text-align:right; } .dp-new-summary-row, .dp-new-summary-total{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; } .dp-new-summary-total{ border-top:1px solid #e3e8ef; font-size:20px; font-weight:900; } .dp-new-summary-total strong{ color:#102342 !important; font-size:24px; } .dp-new-white-card{ margin-top:16px; padding:18px !important; border:1px solid #dfe5ed !important; border-radius:16px !important; background:#fff !important; background-image:none !important; color:#102342 !important; box-shadow:none !important; } .dp-new-white-card *{ color:#102342; } .dp-new-amount{ display:flex; justify-content:space-between; align-items:center; } .dp-new-amount small{ color:#6d7a90 !important; font-weight:800; } .dp-new-amount strong{ font-size:28px; color:#102342 !important; } .dp-new-methods > b{ display:block; margin-bottom:12px; } .dp-new-methods > div{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .dp-new-methods button{ min-height:52px; display:flex; justify-content:space-between; align-items:center; border:1px solid #d8e0ea; border-radius:12px; background:#fff !important; color:#102342 !important; padding:0 14px; font-weight:800; cursor:pointer; } .dp-new-methods button.selected{ border:2px solid #173f73; background:#f4f7fb !important; } .dp-new-methods button:disabled{ opacity:.35; cursor:not-allowed; } .dp-new-destination{ display:flex; flex-direction:column; align-items:center; text-align:center; } .dp-new-destination > small{ font-weight:900; color:#6d7a90 !important; letter-spacing:.08em; } .dp-new-destination > b{ margin-top:8px; font-size:18px; } .dp-new-destination > span{ margin-top:4px; color:#65738a !important; } .dp-new-destination > img{ width:min(260px,70%); max-height:280px; object-fit:contain; margin-top:18px; border:1px solid #e0e5ec; border-radius:14px; background:#fff; padding:10px; } .dp-new-receipt > b{ display:block; margin-bottom:12px; } .dp-new-upload{ min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px dashed #cbd5e2; border-radius:14px; background:#fff !important; cursor:pointer; } .dp-new-upload > span{ font-size:26px; } .dp-new-upload > small{ color:#718096 !important; } .dp-new-upload input, .dp-new-receipt-preview input{ display:none; } .dp-new-receipt-preview{ display:grid; gap:12px; } .dp-new-receipt-preview img{ width:min(300px,100%); max-height:280px; object-fit:contain; justify-self:center; border-radius:12px; border:1px solid #dfe5ed; } .dp-new-receipt-preview label{ justify-self:center; cursor:pointer; color:#173f73; font-weight:800; } .dp-new-reference{ display:block; margin-top:16px; } .dp-new-reference span{ display:block; margin-bottom:7px; font-weight:700; } .dp-new-reference input{ width:100%; height:44px; padding:0 12px; border:1px solid #cfd8e4; border-radius:10px; background:#fff !important; color:#102342 !important; outline:none; } .dp-new-confirm{ display:flex; align-items:flex-start; gap:10px; } .dp-new-final-button{ width:100%; min-height:50px; margin-top:16px; border:0; border-radius:12px; background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#fff !important; font-weight:900; cursor:pointer; } .dp-new-final-button:disabled{ opacity:.45; cursor:not-allowed; } .dp-new-checkout-error{ margin-bottom:16px; padding:12px 14px; border:1px solid #fecaca; border-radius:12px; background:#fff1f2; color:#b42318; font-weight:700; } .dp-new-checkout-loading{ min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #dfe5ed; border-radius:20px; background:#fff; } .dp-new-checkout-loading b{ font-size:18px; } .dp-new-checkout-loading span{ color:#718096; } .dp-new-success{ max-width:700px; margin:60px auto; padding:48px 36px; text-align:center; border:1px solid #dfe5ed; border-radius:22px; background:#fff; } .dp-new-success > span{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#eafaf3; color:#087857; font-size:30px; font-weight:900; } .dp-new-success small{ color:#6e7c91; font-weight:900; letter-spacing:.08em; } .dp-new-success h1{ margin:8px 0; color:#102342; } .dp-new-success p{ margin-bottom:22px; color:#66758b; } .dp-new-success button{ min-height:46px; padding:0 24px; border:0; border-radius:999px; background:#173f73; color:#fff; font-weight:900; cursor:pointer; } @media (max-width:900px){ body.dp-route-checkout .dp-new-checkout-page{ width:min(100% - 24px,100%) !important; padding-top:28px !important; } .dp-new-checkout-layout{ grid-template-columns:1fr; } .dp-new-summary{ position:static; order:-1; } .dp-new-checkout-heading{ grid-template-columns:70px 1fr 70px; } .dp-new-checkout-heading h1{ font-size:28px; } } @media (max-width:600px){ .dp-new-checkout-page{ padding-top:20px !important; } .dp-new-main-card{ padding:16px !important; border-radius:16px !important; } .dp-new-steps{ gap:8px; } .dp-new-steps span{ font-size:12px; } .dp-new-date-card article{ grid-template-columns:1fr auto; } .dp-new-date-card article span{ grid-column:1/-1; grid-row:2; } .dp-new-methods > div{ grid-template-columns:1fr; } .dp-new-review-actions{ flex-direction:column-reverse; align-items:stretch; } .dp-new-review-actions button{ width:100%; } .dp-new-summary{ padding:16px !important; } } /* ========================================================= DEWPOINT REAL /CHECKOUT — DESKTOP WIDTH UNLOCK V1 Neutralize all legacy compact/zoom checkout rules. ========================================================= */ /* Full-width checkout section */ body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) > .dp-home-booking{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding: 36px clamp(24px,3vw,56px) 72px !important; min-height:calc(100vh - 90px) !important; box-sizing:border-box !important; } /* Kill old 760px / 920px / 980px + zoom:.78 rules */ body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; position:static !important; left:auto !important; right:auto !important; zoom:1 !important; transform:none !important; scale:none !important; box-sizing:border-box !important; } /* Actual new checkout content wrapper */ body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout .dp-new-checkout-page{ width:min(94vw,1440px) !important; max-width:1440px !important; margin-left:auto !important; margin-right:auto !important; padding: 10px 0 72px !important; zoom:1 !important; transform:none !important; } /* Desktop: give the booking/payment column plenty of room */ @media (min-width:1100px){ body.dp-route-checkout .dp-new-checkout-layout{ grid-template-columns: minmax(0,1fr) 360px !important; gap:28px !important; } body.dp-route-checkout .dp-new-main-card{ width:100% !important; max-width:none !important; } body.dp-route-checkout .dp-new-summary{ width:100% !important; max-width:none !important; } } /* Large monitors */ @media (min-width:1500px){ body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout .dp-new-checkout-page{ width:min(90vw,1440px) !important; } } /* Tablet / mobile remains responsive */ @media (max-width:900px){ body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) > .dp-home-booking{ padding: 24px 14px 48px !important; } body.dp-route-checkout .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout .dp-new-checkout-page{ width:100% !important; max-width:none !important; } body.dp-route-checkout .dp-new-checkout-layout{ grid-template-columns:1fr !important; } } /* ========================================================= DEWPOINT MY BOOKINGS V2 Dedicated /my-bookings layout ========================================================= */ body.dp-route-my-bookings{ background:#f7f7fb; } /* --------------------------------------------------------- ROUTE CANVAS --------------------------------------------------------- */ body.dp-route-my-bookings .dp-site:has(.dp-myb-page) > .dp-home-booking{ width:100%; max-width:none; margin:0; padding:0; display:block; background:#f7f7fb; } body.dp-route-my-bookings .dp-site:has(.dp-myb-page) .dp-inline-my-bookings{ width:100%; max-width:none; margin:0; padding:0; zoom:1; transform:none; } /* --------------------------------------------------------- PAGE --------------------------------------------------------- */ .dp-myb-page{ width:min(94vw,1440px); margin:0 auto; padding:54px 0 70px; color:#17171f; font-family:inherit; } .dp-myb-heading{ margin:0 0 30px; } .dp-myb-heading h1{ margin:0; font-size:clamp(30px,3vw,46px); line-height:1.1; font-weight:800; letter-spacing:-1.4px; color:#17171f; } .dp-myb-heading p{ margin:9px 0 0; font-size:15px; color:#747480; } /* --------------------------------------------------------- LOADING / ERROR --------------------------------------------------------- */ .dp-myb-loading{ min-height:420px; display:grid; place-items:center; font-size:15px; color:#767681; } .dp-myb-error{ margin:0 0 20px; padding:14px 17px; border:1px solid #f2c9c9; border-radius:12px; background:#fff5f5; color:#a83c3c; font-size:14px; } /* ========================================================= PAYMENT PENDING ========================================================= */ .dp-myb-hold{ position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) 170px minmax(270px,.9fr); gap:26px; align-items:center; margin:0 0 38px; padding:28px 30px; border:1px solid #cfc9f8; border-radius:18px; background: linear-gradient( 110deg, #f7f5ff 0%, #ffffff 58%, #faf9ff 100% ); box-shadow: 0 12px 30px rgba(53,45,110,.07); } .dp-myb-hold::before{ content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 5px 5px 0; background:linear-gradient(180deg,#6657d8,#8375ed); } .dp-myb-hold-copy{ padding-left:8px; } .dp-myb-hold-copy small{ display:block; margin-bottom:9px; font-size:11px; font-weight:800; letter-spacing:1.6px; color:#6256c7; } .dp-myb-hold-copy h2{ margin:0; max-width:520px; font-size:21px; line-height:1.3; font-weight:800; color:#1d1c25; } .dp-myb-hold-copy p{ margin:8px 0 0; max-width:500px; font-size:13px; line-height:1.55; color:#767482; } /* COUNTDOWN */ .dp-myb-timer{ text-align:center; padding:8px 14px; border-left:1px solid #e3e1ef; border-right:1px solid #e3e1ef; } .dp-myb-timer small{ display:block; margin-bottom:5px; font-size:11px; color:#878491; } .dp-myb-timer strong{ display:block; font-size:31px; line-height:1; letter-spacing:1px; color:#5146bb; } .dp-myb-timer span{ display:block; margin-top:7px; font-size:8px; letter-spacing:1.4px; color:#9996a3; } /* HELD SLOT */ .dp-myb-held-summary{ padding:18px 20px; border:1px solid #e4e2ef; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(25,20,60,.04); } .dp-myb-held-summary > b{ display:block; margin-bottom:12px; font-size:12px; color:#37343f; } .dp-myb-held-summary article{ display:grid; grid-template-columns:1fr; gap:2px; padding:9px 0; border-top:1px solid #efedf5; } .dp-myb-held-summary article b{ font-size:13px; } .dp-myb-held-summary article span{ font-size:11px; color:#7f7b89; } .dp-myb-held-summary footer{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:12px; border-top:1px solid #e8e5f0; } .dp-myb-held-summary footer b{ font-size:12px; } .dp-myb-held-summary footer strong{ font-size:20px; color:#4f45b8; } /* HOLD ACTIONS */ .dp-myb-hold-actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; margin-top:-6px; } .dp-myb-hold-actions button{ min-height:42px; padding:0 18px; border:1px solid #c8c3ef; border-radius:10px; background:#fff; color:#5147aa; font-size:13px; font-weight:700; cursor:pointer; } .dp-myb-hold-actions button.primary{ min-width:160px; border-color:transparent; background:linear-gradient(135deg,#5c50c7,#7668df); color:#fff; box-shadow:0 7px 18px rgba(88,74,191,.18); } .dp-myb-hold-actions button:hover{ transform:translateY(-1px); } .dp-myb-hold-actions button:disabled{ opacity:.55; cursor:not-allowed; transform:none; } /* ========================================================= BOOKING SECTIONS ========================================================= */ .dp-myb-section{ margin:0 0 32px; border:1px solid #e6e5eb; border-radius:17px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(28,25,50,.035); } .dp-myb-section > header{ min-height:74px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #ecebf0; } .dp-myb-section > header > div{ display:flex; align-items:center; gap:10px; } .dp-myb-section > header span{ display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#f0edff; color:#6155c5; font-size:14px; } .dp-myb-section > header h2{ margin:0; font-size:17px; font-weight:800; color:#222129; } .dp-myb-section > header i{ display:grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:#efedf8; color:#6259ad; font-size:11px; font-style:normal; font-weight:700; } .dp-myb-section > header > button{ min-height:39px; padding:0 15px; border:1px solid #c9c4ef; border-radius:9px; background:#fff; color:#564cb2; font-size:12px; font-weight:700; cursor:pointer; } /* ========================================================= TABLE ========================================================= */ .dp-myb-table{ width:100%; overflow-x:auto; } .dp-myb-table-head, .dp-myb-row{ min-width:1120px; display:grid; grid-template-columns: 1.05fr 1.35fr 1.25fr 1.15fr .95fr 1.1fr .75fr .9fr; align-items:center; gap:14px; } .dp-myb-table-head{ min-height:47px; padding:0 21px; background:#fafafd; border-bottom:1px solid #ecebf0; } .dp-myb-table-head span{ font-size:9px; font-weight:800; letter-spacing:.8px; color:#96939d; } .dp-myb-row{ min-height:78px; padding:11px 21px; border-bottom:1px solid #efedf2; font-size:12px; color:#4a4851; } .dp-myb-row:last-child{ border-bottom:0; } .dp-myb-row:hover{ background:#fcfbff; } .dp-myb-ref{ font-size:11px; font-weight:800; color:#4f46a9; } .dp-myb-court{ display:flex; flex-direction:column; gap:2px; } .dp-myb-court b{ font-size:13px; color:#27262d; } .dp-myb-court small{ font-size:10px; color:#92909a; } /* STATUS PILLS */ .dp-myb-status, .dp-myb-payment{ display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; } .dp-myb-status.confirmed, .dp-myb-status.completed{ background:#eaf8f1; color:#22865a; } .dp-myb-status.reserved{ background:#eef2ff; color:#5264b9; } .dp-myb-status.cancelled{ background:#fff0f0; color:#bf5252; } .dp-myb-status.pending{ background:#fff5e7; color:#ad7721; } .dp-myb-payment.paid{ background:#ecf8f2; color:#25845b; } .dp-myb-payment.pending{ background:#fff5e8; color:#ae7625; } .dp-myb-payment.refunded{ background:#f1effd; color:#6255b7; } /* DETAIL BUTTON */ .dp-myb-details{ min-height:33px; padding:0 11px; border:1px solid #d2cee9; border-radius:8px; background:#fff; color:#564da8; font-size:10px; font-weight:700; cursor:pointer; } /* EMPTY */ .dp-myb-empty{ min-height:120px; display:grid; place-items:center; padding:25px; color:#8a8791; font-size:13px; } /* ========================================================= HELP CARD ========================================================= */ .dp-myb-help{ min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:18px 22px; border:1px solid #ddd9f5; border-radius:15px; background:#f8f6ff; } .dp-myb-help b{ font-size:13px; color:#39344d; } .dp-myb-help p{ margin:5px 0 0; font-size:11px; color:#7c778b; } .dp-myb-help button{ min-height:39px; padding:0 15px; border:1px solid #c8c1ee; border-radius:9px; background:#fff; color:#5147aa; font-size:11px; font-weight:700; cursor:pointer; } /* ========================================================= BOOKING DETAIL MODAL ========================================================= */ .dp-myb-modal{ position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:24px; background:rgba(19,17,31,.46); backdrop-filter:blur(4px); } .dp-myb-modal > section{ width:min(92vw,620px); max-height:88vh; overflow:auto; border:1px solid #ddd9ef; border-radius:18px; background:#fff; box-shadow:0 25px 80px rgba(20,16,55,.22); } .dp-myb-modal > section > header{ display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid #eceaf2; } .dp-myb-modal header small{ font-size:9px; font-weight:800; letter-spacing:1.3px; color:#7166c8; } .dp-myb-modal header h2{ margin:5px 0 0; font-size:20px; } .dp-myb-modal header button{ width:34px; height:34px; border:0; border-radius:9px; background:#f3f1f8; color:#55515f; font-size:22px; cursor:pointer; } .dp-myb-modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:22px 24px 26px; } .dp-myb-modal-grid label{ display:flex; flex-direction:column; gap:5px; padding:13px 14px; border:1px solid #eceaf1; border-radius:11px; background:#fafafd; } .dp-myb-modal-grid small{ font-size:9px; font-weight:700; color:#93909b; } .dp-myb-modal-grid b{ font-size:13px; color:#302e37; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1000px){ .dp-myb-page{ width:min(94vw,900px); padding-top:38px; } .dp-myb-hold{ grid-template-columns:1fr 160px; } .dp-myb-held-summary{ grid-column:1 / -1; } } @media(max-width:700px){ .dp-myb-page{ width:calc(100% - 28px); padding:30px 0 50px; } .dp-myb-heading h1{ font-size:31px; } .dp-myb-hold{ grid-template-columns:1fr; gap:18px; padding:22px 18px; } .dp-myb-timer{ border-left:0; border-right:0; border-top:1px solid #e3e1ef; border-bottom:1px solid #e3e1ef; padding:16px 10px; } .dp-myb-held-summary{ grid-column:auto; } .dp-myb-hold-actions{ grid-column:auto; display:grid; grid-template-columns:1fr; } .dp-myb-section > header{ min-height:auto; padding:17px; flex-wrap:wrap; } .dp-myb-section > header > button{ width:100%; } .dp-myb-help{ align-items:flex-start; flex-direction:column; } .dp-myb-help button{ width:100%; } .dp-myb-modal-grid{ grid-template-columns:1fr; } } /* ========================================================= DEWPOINT MY BOOKINGS WIDTH / CONTAINER FIX ========================================================= */ body.dp-route-my-bookings .dp-inline-my-bookings, body.dp-route-my-bookings .dp-myb-page, body.dp-route-my-bookings .dp-myb-shell, body.dp-route-my-bookings .dp-home-booking .dp-inline-my-bookings{ width:min(100% - 64px, 1280px) !important; max-width:1280px !important; margin:32px auto 56px !important; padding-left:0 !important; padding-right:0 !important; } /* inner cards should follow container width */ body.dp-route-my-bookings .dp-myb-hold, body.dp-route-my-bookings .dp-myb-section, body.dp-route-my-bookings .dp-myb-help, body.dp-route-my-bookings .dp-myb-table{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } /* keep table usable on smaller screens */ body.dp-route-my-bookings .dp-myb-table-wrap, body.dp-route-my-bookings .dp-myb-section{ overflow-x:auto !important; } /* slightly tighter top spacing */ body.dp-route-my-bookings .dp-inline-my-bookings{ padding-top:24px !important; } /* ========================================================= DEWPOINT MY BOOKINGS ONE-VIEW DESKTOP TABLE V1 No horizontal left/right scrolling ========================================================= */ @media (min-width:901px){ body.dp-route-my-bookings .dp-myb-section{ overflow:hidden !important; } body.dp-route-my-bookings .dp-myb-table{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } body.dp-route-my-bookings .dp-myb-table-head, body.dp-route-my-bookings .dp-myb-row{ width:100% !important; min-width:0 !important; max-width:100% !important; grid-template-columns: minmax(0,1.10fr) minmax(0,1.20fr) minmax(0,1.10fr) minmax(0,1.10fr) minmax(0,.88fr) minmax(0,.98fr) minmax(0,.58fr) minmax(124px,1.16fr) !important; gap:8px !important; box-sizing:border-box !important; } body.dp-route-my-bookings .dp-myb-table-head{ padding-left:16px !important; padding-right:16px !important; } body.dp-route-my-bookings .dp-myb-row{ padding-left:16px !important; padding-right:16px !important; } body.dp-route-my-bookings .dp-myb-table-head > *, body.dp-route-my-bookings .dp-myb-row > *{ min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; } body.dp-route-my-bookings .dp-myb-ref{ overflow-wrap:anywhere; word-break:break-word; font-size:10px !important; } body.dp-route-my-bookings .dp-myb-row{ font-size:11px !important; } body.dp-route-my-bookings .dp-myb-court b{ font-size:12px !important; } body.dp-route-my-bookings .dp-myb-court small{ white-space:normal; line-height:1.25; } body.dp-route-my-bookings .dp-myb-status, body.dp-route-my-bookings .dp-myb-payment{ max-width:100%; padding-left:7px; padding-right:7px; font-size:9px !important; } body.dp-route-my-bookings .dp-myb-details{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding: 9px 6px !important; white-space:nowrap !important; text-align:center !important; font-size:10px !important; } } /* On smaller displays use card-like rows instead of forcing a sideways desktop table. */ @media (max-width:900px){ body.dp-route-my-bookings .dp-myb-table{ overflow-x:hidden !important; } body.dp-route-my-bookings .dp-myb-table-head{ display:none !important; } body.dp-route-my-bookings .dp-myb-row{ min-width:0 !important; width:100% !important; grid-template-columns:1fr 1fr !important; gap:12px 18px !important; padding:18px !important; } body.dp-route-my-bookings .dp-myb-row > *{ min-width:0 !important; } body.dp-route-my-bookings .dp-myb-details{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding: 10px 8px !important; white-space:normal !important; overflow-wrap:anywhere !important; text-align:center !important; } } /* ========================================================= DEWPOINT MOBILE NAVIGATION My Bookings / Checkout / Landing ========================================================= */ .dp-mobile-menu-toggle{ display:none; } /* * The new dedicated My Bookings page owns its typography. * These are normal declarations, not !important overrides. */ body.dp-route-my-bookings .dp-myb-hold-copy h2{ color:#1d1c25; } body.dp-route-my-bookings .dp-myb-hold-copy p{ color:#767482; } body.dp-route-my-bookings .dp-myb-held-summary{ color:#17171f; } @media(max-width:768px){ body .dp-site .dp-final-nav{ position:relative; flex-wrap:wrap; } body .dp-site .dp-final-nav .dp-mobile-menu-toggle{ display:flex; width:42px; height:42px; margin-left:auto; padding:9px 8px; border:1px solid #8b73df; border-radius:10px; background:#6f4ad2; box-shadow: 0 6px 18px rgba(24,18,70,.28); flex-direction:column; justify-content:center; gap:5px; cursor:pointer; } body .dp-site .dp-final-nav .dp-mobile-menu-toggle span{ display:block; width:100%; height:2px; border-radius:99px; background:#fff; transition: transform .18s ease, opacity .18s ease; } body .dp-site .dp-final-nav .dp-nav-links, body .dp-site .dp-final-nav .dp-nav-actions{ display:none; width:100%; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-nav-links{ display:grid; grid-template-columns:1fr; gap:4px; order:20; width:100%; padding:12px; background:#0b1230; border-radius:12px 12px 0 0; box-shadow: 0 14px 28px rgba(0,0,0,.28); position:relative; z-index:50; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-nav-actions{ display:grid; grid-template-columns:1fr; gap:8px; order:21; width:100%; padding:4px 12px 14px; background:#0b1230; border-radius:0 0 12px 12px; position:relative; z-index:50; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-nav-links button, body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-nav-actions button{ width:100%; min-height:44px; padding:0 14px; text-align:left; justify-content:flex-start; color:#ffffff; background:#151e43; border:1px solid rgba(255,255,255,.08); border-radius:8px; font-weight:800; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-player-welcome{ display:block; padding:8px 4px; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle span:nth-child(2){ opacity:0; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } } /* ========================================================= DEWPOINT MY BOOKINGS FINAL TYPOGRAPHY OWNERSHIP V1 Dedicated route only — neutralizes legacy theme cascade ========================================================= */ /* Page subtitle */ body.dp-route-my-bookings .dp-myb-heading p{ color:#6f6b78 !important; -webkit-text-fill-color:#6f6b78 !important; opacity:1 !important; filter:none !important; } /* PAYMENT PENDING eyebrow */ body.dp-route-my-bookings .dp-myb-hold-copy small{ color:#6256c7 !important; -webkit-text-fill-color:#6256c7 !important; opacity:1 !important; filter:none !important; } /* Main payment-pending title */ body.dp-route-my-bookings .dp-myb-hold-copy h2{ color:#17171f !important; -webkit-text-fill-color:#17171f !important; opacity:1 !important; filter:none !important; } /* Payment-pending description */ body.dp-route-my-bookings .dp-myb-hold-copy p{ color:#686571 !important; -webkit-text-fill-color:#686571 !important; opacity:1 !important; filter:none !important; } /* Countdown label */ body.dp-route-my-bookings .dp-myb-timer small{ color:#777381 !important; -webkit-text-fill-color:#777381 !important; opacity:1 !important; } /* Countdown value */ body.dp-route-my-bookings .dp-myb-timer strong{ color:#5146bb !important; -webkit-text-fill-color:#5146bb !important; opacity:1 !important; } /* MIN / SEC */ body.dp-route-my-bookings .dp-myb-timer span{ color:#85818d !important; -webkit-text-fill-color:#85818d !important; opacity:1 !important; } /* Upcoming / History section titles */ body.dp-route-my-bookings .dp-myb-section > header h2{ color:#17171f !important; -webkit-text-fill-color:#17171f !important; opacity:1 !important; filter:none !important; } /* Section icon */ body.dp-route-my-bookings .dp-myb-section > header > div > span{ color:#6155c5 !important; -webkit-text-fill-color:#6155c5 !important; opacity:1 !important; } /* Booking count badge */ body.dp-route-my-bookings .dp-myb-section > header i{ color:#6259ad !important; -webkit-text-fill-color:#6259ad !important; opacity:1 !important; } /* ========================================================= MOBILE MENU Hide BOOK NOW inside hamburger only Desktop BOOK NOW remains unchanged ========================================================= */ @media(max-width:768px){ body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-nav-actions .dp-book-top{ display:none !important; } } /* Mobile hamburger styling is maintained in the main DEWPOINT MOBILE NAVIGATION block above. */ /* ========================================================= DEWPOINT MOBILE FLOATING ACCOUNT MENU V3 Logged out: DEWPOINT ☰ COURTS LOGIN SIGNUP Logged in: DEWPOINT ○ Hi, Name COURTS MY BOOKING LOGOUT ========================================================= */ .dp-mobile-account-actions, .dp-mobile-user-trigger{ display:none; } @media(max-width:768px){ /* * Header stays one clean row. */ body .dp-site .dp-final-nav{ display:flex; align-items:center; position:relative; flex-wrap:nowrap; } /* * Original section navigation is not used as the * mobile dropdown anymore. * * The account wrapper has dedicated mobile actions. */ body .dp-site .dp-final-nav .dp-nav-links{ display:none !important; } /* * Hide original desktop auth controls. */ body .dp-site .dp-final-nav .dp-nav-actions{ display:none !important; } /* * ----------------------------------------------------- * ACCOUNT WRAPPER * Dropdown is positioned relative to this element. * ----------------------------------------------------- */ body .dp-site .dp-final-nav .dp-account-menu-wrap{ position:relative; display:flex; align-items:center; justify-content:flex-end; margin-left:auto; } /* * ----------------------------------------------------- * LOGGED OUT HAMBURGER * ----------------------------------------------------- */ body .dp-site .dp-final-nav .dp-mobile-menu-toggle{ display:flex; width:38px; height:38px; margin:0; padding:6px; flex-direction:column; justify-content:center; gap:5px; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; } body .dp-site .dp-final-nav .dp-mobile-menu-toggle > span{ display:block; width:100%; height:2px; border-radius:20px; background:#ffffff; transition: transform .18s ease, opacity .18s ease; } /* * Hamburger -> X. */ body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle > span:nth-child(1){ transform: translateY(7px) rotate(45deg); } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle > span:nth-child(2){ opacity:0; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-mobile-menu-toggle > span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* * ----------------------------------------------------- * LOGGED IN * * ○ Hi, Mikko * * No box. * Whole control is clickable. * ----------------------------------------------------- */ body .dp-site .dp-final-nav .dp-mobile-user-trigger{ display:flex; align-items:center; justify-content:center; gap:7px; margin:0; padding:6px 0 6px 10px; min-height:38px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#ffffff; font-size:14px; font-weight:800; line-height:1; cursor:pointer; white-space:nowrap; } /* * Same small user icon as desktop. */ body .dp-site .dp-final-nav .dp-mobile-user-trigger::before{ content:''; width:18px; height:18px; flex:0 0 18px; border: 2px solid rgba(255,255,255,.92); border-radius:50%; box-sizing:border-box; background: radial-gradient( circle at 50% 35%, #ffffff 0 2.5px, transparent 3px ), radial-gradient( ellipse at 50% 82%, #ffffff 0 5px, transparent 5.5px ); } /* * No arrow on mobile either. */ body .dp-site .dp-final-nav .dp-mobile-user-chevron{ display:none !important; } /* * ----------------------------------------------------- * FLOATING MENU * ----------------------------------------------------- */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-account-actions{ display:none; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-account-menu-wrap .dp-mobile-account-actions{ position:absolute; top:calc(100% + 8px); right:0; width:205px; display:grid; grid-template-columns:1fr; gap:7px; padding:9px; background:#0b1230; border: 1px solid rgba(255,255,255,.10); border-radius:12px; box-shadow: 0 18px 42px rgba(0,0,0,.30); z-index:10000; } /* * Mobile menu buttons. */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-account-button{ display:flex; width:100%; min-height:44px; align-items:center; justify-content:flex-start; padding:0 14px; border: 1px solid rgba(255,255,255,.08); border-radius:9px; background:#182143; color:#ffffff; font-size:13px; font-weight:800; letter-spacing:.02em; text-align:left; cursor:pointer; } /* * Desktop duplicate COURTS item is not needed on mobile. */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-desktop-courts{ display:none !important; } /* * Logged-out actions. */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-login, body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-signup{ color:#c6a4ff; } /* * Logout distinction. */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-logout{ color:#ff7785; border-color: rgba(255,100,120,.20); } body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-account-button:active{ background:#202b53; } /* * Book-now button never appears in the header dropdown. */ body .dp-site .dp-final-nav .dp-book-top{ display:none !important; } } /* ========================================================= DEWPOINT DESKTOP ACCOUNT DROPDOWN V2 LOGGED OUT: HOME | FEATURES | GALLERY | ABOUT | LOGIN LOGGED IN: HOME | FEATURES | GALLERY | ABOUT | MY BOOKING | [Hi, Name] Hi, Name dropdown: COURTS LOGOUT ========================================================= */ /* * The wrapper behaves transparently on mobile. * Existing mobile ordering remains unchanged. */ @media(max-width:768px){ body .dp-site .dp-final-nav .dp-account-menu-wrap{ display:contents; } /* * Mobile already has COURTS in its navigation menu. */ body .dp-site .dp-final-nav .dp-desktop-courts{ display:none !important; } } /* ========================================================= DESKTOP ========================================================= */ @media(min-width:769px){ /* * Account wrapper lives at the far right of the header. * Dropdown positioning is relative to THIS wrapper, * not the whole navigation bar. */ body .dp-site .dp-final-nav .dp-account-menu-wrap{ position:relative; display:flex; align-items:center; margin-left:auto; } /* * ----------------------------------------------------- * LOGGED-OUT DESKTOP * * HOME FEATURES GALLERY ABOUT ........ LOGIN * * COURTS is accessible through the booking CTA/section. * MY BOOKING appears after login. * ----------------------------------------------------- */ body .dp-site .dp-final-nav:not(:has(.dp-mobile-user-trigger)) .dp-nav-links .dp-mobile-courts-item, body .dp-site .dp-final-nav:not(:has(.dp-mobile-user-trigger)) .dp-nav-links .dp-mobile-mybooking-item{ display:none; } /* * Keep the original desktop LOGIN controls. */ body .dp-site .dp-final-nav:not(:has(.dp-mobile-user-trigger)) .dp-nav-actions{ display:flex; } /* * Remove BOOK NOW from the desktop header. * Main booking CTA remains on the page. */ body .dp-site .dp-final-nav .dp-book-top{ display:none; } /* * ----------------------------------------------------- * LOGGED-IN NAVIGATION * * IMPORTANT: * Never convert .dp-nav-links into a dropdown. * These remain normal header links at all times. * ----------------------------------------------------- */ body .dp-site .dp-final-nav:has(.dp-mobile-user-trigger) .dp-nav-links{ position:static; display:flex; width:auto; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; } body .dp-site .dp-final-nav:has(.dp-mobile-user-trigger) .dp-nav-links > button{ display:inline-flex; } /* * COURTS moves into the Hi, Mikko dropdown. */ body .dp-site .dp-final-nav:has(.dp-mobile-user-trigger) .dp-nav-links .dp-mobile-courts-item{ display:none; } /* * MY BOOKING STAYS IN THE HEADER. */ body .dp-site .dp-final-nav:has(.dp-mobile-user-trigger) .dp-nav-links .dp-mobile-mybooking-item{ display:inline-flex; } /* * Hide old: * Hi, Mikko + Logout * * because the new account button replaces those controls. */ body .dp-site .dp-final-nav:has(.dp-mobile-user-trigger) .dp-nav-actions{ display:none; } /* * ----------------------------------------------------- * [ Hi, Mikko ] * ----------------------------------------------------- */ /* * Clean desktop account trigger: * * ○ Hi, Mikko * * No box. Entire control remains clickable. */ body .dp-site .dp-final-nav .dp-mobile-user-trigger{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:4px 0; min-height:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#ffffff; font-size:14px; font-weight:800; line-height:1; cursor:pointer; white-space:nowrap; transition:opacity .16s ease; } body .dp-site .dp-final-nav .dp-mobile-user-trigger:hover{ opacity:.80; } /* * Small user-circle icon. */ body .dp-site .dp-final-nav .dp-mobile-user-trigger::before{ content:''; width:18px; height:18px; flex:0 0 18px; border:2px solid rgba(255,255,255,.92); border-radius:50%; box-sizing:border-box; background: radial-gradient( circle at 50% 35%, #ffffff 0 2.5px, transparent 3px ), radial-gradient( ellipse at 50% 82%, #ffffff 0 5px, transparent 5.5px ); } /* * User requested no arrow on desktop. * Mobile arrow remains available. */ body .dp-site .dp-final-nav .dp-mobile-user-trigger .dp-mobile-user-chevron{ display:none; } /* * ----------------------------------------------------- * NORMAL ACCOUNT DROPDOWN * * Sits directly BELOW [ Hi, Mikko ]. * Does not modify header links. * ----------------------------------------------------- */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-account-actions{ display:none; } body .dp-site .dp-final-nav.dp-mobile-menu-open .dp-account-menu-wrap .dp-mobile-account-actions{ position:absolute; top:calc(100% + 8px); right:0; width:205px; display:grid; grid-template-columns:1fr; gap:7px; padding:9px; background:#0b1230; border: 1px solid rgba(255,255,255,.10); border-radius:12px; box-shadow: 0 18px 42px rgba(0,0,0,.28); z-index:10000; } /* * Login / Signup are not part of logged-in desktop dropdown. */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-login, body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-signup{ display:none; } /* * COURTS + LOGOUT */ body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-desktop-courts, body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-logout{ display:flex; width:100%; min-height:44px; align-items:center; justify-content:flex-start; padding:0 14px; border: 1px solid rgba(255,255,255,.08); border-radius:9px; background:#182143; font-size:13px; font-weight:800; text-align:left; cursor:pointer; } body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-desktop-courts{ color:#ffffff; } body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-logout{ color:#ff7785; border-color: rgba(255,100,120,.20); } body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-desktop-courts:hover, body .dp-site .dp-final-nav .dp-account-menu-wrap .dp-mobile-logout:hover{ background:#202b53; } } /* ========================================================= DEWPOINT DESKTOP HEADER ALIGNMENT V1 Keep logo, navigation and account trigger on one center line. ========================================================= */ @media(min-width:769px){ body .dp-site .dp-final-nav{ display:flex; align-items:center; } body .dp-site .dp-final-nav .dp-nav-links{ align-self:center; align-items:center; } body .dp-site .dp-final-nav .dp-nav-links > button{ display:inline-flex; align-items:center; justify-content:center; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; min-height:40px; line-height:1; } body .dp-site .dp-final-nav .dp-account-menu-wrap{ align-self:center; align-items:center; height:40px; min-height:40px; margin-top:0; margin-bottom:0; } body .dp-site .dp-final-nav .dp-mobile-user-trigger{ height:40px; min-height:40px; display:flex; align-items:center; justify-content:center; margin:0; padding:0; line-height:1; } body .dp-site .dp-final-nav .dp-mobile-user-trigger::before{ margin:0; align-self:center; } } /* DEWPOINT UNIFIED ACCOUNT MENU V4 CSS START */ /* --------------------------------------------------------- Disable legacy duplicate account/mobile controls --------------------------------------------------------- */ body .dp-site .dp-final-nav > .dp-account-menu-wrap, body .dp-site .dp-final-nav > .dp-mobile-account-actions, body .dp-site .dp-final-nav > .dp-mobile-user-trigger, body .dp-site .dp-final-nav > .dp-mobile-menu-toggle, body .dp-site .dp-final-nav > .dp-mobile-header-user{ display:none !important; } /* * Original React auth buttons stay in the DOM so * Sign In can reuse their existing React handler. * They are simply not displayed. */ body .dp-site .dp-final-nav > .dp-nav-actions{ display:none !important; } /* --------------------------------------------------------- Unified account dropdown --------------------------------------------------------- */ body .dp-site .dp-final-nav{ overflow:visible !important; } body .dp-site .dp-final-nav .dp-account-v4{ position:relative; display:flex; align-items:center; justify-content:flex-end; margin-left:auto; flex:0 0 auto; z-index:10050; } body .dp-site .dp-final-nav .dp-account-v4-trigger{ appearance:none; position:relative; border:0; padding:10px 12px; background:transparent; color:#ffffff; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; letter-spacing:.9px; opacity:.92; white-space:nowrap; } body .dp-site .dp-final-nav .dp-account-v4-trigger:hover{ background:transparent; opacity:1; } body .dp-site .dp-final-nav .dp-account-v4-user{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:15px; line-height:1; } body .dp-site .dp-final-nav .dp-account-v4-chevron{ font-size:14px; line-height:1; transition:transform .18s ease; } body .dp-site .dp-final-nav .dp-account-v4.is-open .dp-account-v4-chevron{ transform:rotate(180deg); } /* --------------------------------------------------------- Dropdown box --------------------------------------------------------- */ body .dp-site .dp-final-nav .dp-account-v4-menu{ position:absolute; top:calc(100% + 10px); right:0; width:220px; padding:9px; display:none; gap:6px; background:#101833; border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow: 0 18px 42px rgba(0,0,0,.35); z-index:10060; } body .dp-site .dp-final-nav .dp-account-v4.is-open .dp-account-v4-menu{ display:grid; } body .dp-site .dp-final-nav .dp-account-v4-item{ width:100%; min-height:44px; padding:10px 14px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:#182140; color:#ffffff; display:flex; align-items:center; justify-content:flex-start; text-align:left; cursor:pointer; font:inherit; font-size:15px; font-weight:800; line-height:1.2; } body .dp-site .dp-final-nav .dp-account-v4-item:hover{ background:#222d55; border-color: rgba(143,94,255,.55); } /* Sign Up accent */ body .dp-site .dp-final-nav .dp-account-v4-item[data-action="signup"]{ background: linear-gradient( 135deg, #6d35e8, #9b3de4 ); border-color:transparent; } /* --------------------------------------------------------- MOBILE Same exact four menu items --------------------------------------------------------- */ @media(max-width:768px){ body .dp-site .dp-final-nav{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; padding-left:14px !important; padding-right:12px !important; } /* * Keep the existing center navigation out of the * mobile header. Navigation is now from this menu. */ body .dp-site .dp-final-nav .dp-nav-links{ display:none !important; } body .dp-site .dp-final-nav .dp-account-v4{ margin-left:auto !important; } body .dp-site .dp-final-nav .dp-account-v4-trigger{ min-height:40px; padding:7px 8px; gap:6px; font-size:15px; } body .dp-site .dp-final-nav .dp-account-v4-label{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body .dp-site .dp-final-nav .dp-account-v4-menu{ position:absolute; right:0; top:calc(100% + 8px); width:min( 280px, calc(100vw - 24px) ); padding:9px; } body .dp-site .dp-final-nav .dp-account-v4-item{ min-height:46px; font-size:15px; padding:11px 14px; } } /* DEWPOINT UNIFIED ACCOUNT MENU V4 CSS END */ /* ========================================================= DEWPOINT TERMS MODAL V1 ========================================================= */ .view-booking-terms{ width:100%; margin:10px 0 4px; padding:11px 14px; border:1px solid #d9dfea; border-radius:12px; background:#fff; color:#5539c9; font-weight:700; cursor:pointer; text-align:left; } .view-booking-terms:hover{ background:#faf9ff; } .dewpoint-terms-modal-backdrop{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(19,24,38,.58); backdrop-filter:blur(4px); } .dewpoint-terms-modal{ width:min(720px,100%); max-height:min(82vh,760px); display:flex; flex-direction:column; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.24); overflow:hidden; } .dewpoint-terms-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 14px; border-bottom:1px solid #e8eaf0; } .dewpoint-terms-modal-head small{ display:block; margin-bottom:3px; font-size:11px; font-weight:800; letter-spacing:.08em; color:#7357d4; } .dewpoint-terms-modal-head h2{ margin:0; color:#161a22; } .dewpoint-terms-close{ flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%; background:#f0f1f5; color:#232630; font-size:26px; line-height:1; cursor:pointer; } .dewpoint-terms-modal-copy{ flex:1; overflow-y:auto; padding:20px 22px; white-space:pre-line; color:#313641; font-size:14px; line-height:1.65; } .dewpoint-terms-done{ margin:0 22px 22px; min-height:46px; } @media (max-width:640px){ .dewpoint-terms-modal-backdrop{ padding:12px; align-items:flex-end; } .dewpoint-terms-modal{ width:100%; max-height:88vh; border-radius:20px 20px 12px 12px; } .dewpoint-terms-modal-head{ padding:18px 18px 12px; } .dewpoint-terms-modal-copy{ padding:16px 18px; font-size:13px; } .dewpoint-terms-done{ margin:0 18px 18px; } } /* DEWPOINT NEW CHECKOUT TERMS DIALOG V1 */ .dp-new-terms-box{ border:1px solid #dbe2ee; border-radius:14px; background:#fff; padding:16px; display:flex; flex-direction:column; gap:14px; } .dp-new-terms-heading{ display:flex; justify-content:space-between; align-items:center; gap:16px; } .dp-new-terms-heading > div{ display:flex; flex-direction:column; gap:4px; } .dp-new-terms-heading small{ color:#111827; -webkit-text-fill-color:#111827; opacity:1; filter:none; line-height:1.45; } .dp-new-view-terms{ display:inline-flex; width:max-content; align-items:center; border:0; background:transparent; padding:4px 0; margin:0 0 8px; color:#4f46e5; font-weight:700; cursor:pointer; white-space:nowrap; } .dp-new-view-terms:hover{ text-decoration:underline; } .dp-new-terms-box .dp-new-terms{ margin:0; padding-top:13px; border-top:1px solid #edf0f5; } .dp-new-terms-dialog{ position:fixed; inset:0; margin:auto; width:min(720px,calc(100vw - 36px)); max-height:82vh; padding:0; border:0; border-radius:20px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.28); } .dp-new-terms-dialog::backdrop{ background:rgba(8,15,35,.62); } .dp-new-terms-dialog-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid #e7eaf0; } .dp-new-terms-dialog-head h2{ margin:2px 0 0; } .dp-new-terms-dialog-close{ width:36px; height:36px; border:0; border-radius:50%; font-size:24px; cursor:pointer; } .dp-new-terms-dialog-copy{ padding:22px 24px; max-height:52vh; overflow:auto; white-space:pre-line; line-height:1.65; } .dp-new-terms-dialog-done{ width:calc(100% - 48px); margin:0 24px 24px; } @media(max-width:700px){ .dp-new-terms-heading{ flex-direction:column; align-items:flex-start; } .dp-new-view-terms{ white-space:normal; } .dp-new-terms-dialog{ width:calc(100vw - 20px); max-height:88vh; } .dp-new-terms-dialog-copy{ max-height:58vh; } }