/* Dedicated full-page template (public/views/full-page-template.php).
   Full-bleed background, generous padding, and its own responsive
   breakpoints so the page looks intentional at any viewport size,
   independent of the active theme. */
.dbp-page-shell{
	width:100%;max-width:100vw;overflow-x:hidden;
	background:linear-gradient(180deg,#f4f9f6 0%,#fff 40%);
	padding:56px 24px;box-sizing:border-box;
}
.dbp-page-inner{max-width:1040px;margin:0 auto;width:100%;}
@media (max-width:760px){.dbp-page-shell{padding:28px 16px;}}
@media (max-width:480px){.dbp-page-shell{padding:18px 10px;}}

/* Outer wrapper: always fills whatever container it's placed in
   (Elementor column, Gutenberg block, theme content area, etc.) so the
   widget is full-width by default. Use [demo_booking max_width="760px"]
   (or any CSS width value) on the shortcode to cap it if desired.

   container-type:inline-size turns this into a query container: every
   breakpoint below responds to the WIDGET's own rendered width, not the
   browser viewport. This matters because the widget is often dropped
   into a narrower Elementor column/section on an otherwise wide desktop
   screen - a plain @media query only looks at viewport width and would
   never "see" that the widget itself has gone narrow, so the 2-column
   layout would try to render full-size inside a cramped column and
   overflow/clip. Plain @media rules are kept too, as a fallback for the
   handful of older browsers without container query support. */
.dbp-widget-wrap{
	width:100%;max-width:100%;box-sizing:border-box;overflow:visible;
	container-type:inline-size;container-name:dbpw;
}

.dbp-booking-widget{
	--dbp-brand:#0c3d2e;
	--dbp-brand-light:#14532d;
	--dbp-mint:#eaf7f0;
	--dbp-border:#e4e9e6;
	width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	background:#fff;border-radius:24px;overflow:hidden;
	box-shadow:0 20px 50px rgba(12,61,46,.12),0 2px 8px rgba(12,61,46,.06);
	border:1px solid var(--dbp-border);
}
.dbp-booking-widget *{box-sizing:border-box;}

/* min-width:0 on every grid/flex track below is the key fix: without it,
   browsers won't let a 1fr track shrink smaller than its content's natural
   width, so the 2-column "date + time slots" step (shown after picking a
   date) forces the whole widget wider than its container and the overflow
   gets clipped at the page edge instead of wrapping responsively. */
.dbp-bw-grid{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);width:100%;min-width:0;}
@media (max-width:760px){.dbp-bw-grid{grid-template-columns:minmax(0,1fr);}}
@container dbpw (max-width:760px){.dbp-bw-grid{grid-template-columns:minmax(0,1fr) !important;}}

.dbp-bw-sidebar{background:#fbfdfc;border-right:1px solid var(--dbp-border);padding:32px 26px;min-width:0;}
.dbp-bw-logo{width:44px;height:44px;border-radius:12px;background:var(--dbp-mint);display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;}
.dbp-bw-logo img{width:100%;height:100%;object-fit:cover;}
.dbp-bw-logo-fallback{color:var(--dbp-brand);font-weight:800;font-size:18px;}
.dbp-bw-team{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a958f;margin-bottom:6px;}
.dbp-bw-title{margin:0 0 14px;font-size:19px;font-weight:800;color:#1f2937;line-height:1.3;}
.dbp-bw-duration{font-size:13.5px;font-weight:700;color:var(--dbp-brand);margin-bottom:14px;}
.dbp-bw-desc{font-size:13.5px;color:#6b7a72;line-height:1.6;margin:0;}

.dbp-bw-summary{display:flex;gap:10px;align-items:flex-start;margin-top:24px;padding:14px;background:var(--dbp-mint);border-radius:14px;}
.dbp-bw-summary-icon{font-size:18px;}
.dbp-bw-summary-date{font-weight:800;font-size:13.5px;color:var(--dbp-brand);}
.dbp-bw-summary-sub{font-size:12px;color:#5a655f;margin-top:2px;}

.dbp-bw-main{padding:30px 32px;min-width:0;}
.dbp-bw-heading{margin:0 0 4px;font-size:clamp(15px,4vw,17px);font-weight:800;color:#1f2937;}
.dbp-bw-hint{margin:0 0 18px;font-size:13px;color:#8a958f;}
.dbp-bw-tzrow{margin-top:14px;font-size:12.5px;color:#8a958f;word-break:break-word;}

.dbp-bw-twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;width:100%;}
@media (max-width:640px){.dbp-bw-twocol{grid-template-columns:minmax(0,1fr);}}
@container dbpw (max-width:640px){.dbp-bw-twocol{grid-template-columns:minmax(0,1fr) !important;gap:24px !important;}}
.dbp-bw-col{min-width:0;}

/* Elementor/Gutenberg containers sometimes impose their own overflow or
   width rules on the wrapping element - neutralize those so the widget can
   always render at its intended full width and grow in height freely
   when a step change (e.g. selecting a date) reveals more content. */
.elementor-widget-container .dbp-widget-wrap,
.elementor-element .dbp-widget-wrap,
.wp-block-shortcode .dbp-widget-wrap,
.wp-block-shortcode .dbp-booking-widget{
	width:100% !important;max-width:100% !important;overflow:visible !important;height:auto !important;
}

/* Calendar */
.dbp-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.dbp-cal-label{font-weight:800;font-size:15px;color:#1f2937;}
.dbp-cal-arrow{
	flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;
	border:1px solid var(--dbp-border);background:#fff;cursor:pointer;
	font-size:15px;line-height:1;color:var(--dbp-brand);
	display:flex;align-items:center;justify-content:center;
	appearance:none;-webkit-appearance:none;
}
.dbp-cal-arrow:hover{background:var(--dbp-mint);border-color:var(--dbp-brand);}
.dbp-cal{min-width:0;width:100%;}
.dbp-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px 4px;width:100%;}
.dbp-cal-dow{text-align:center;font-size:11px;font-weight:700;color:#9aa39d;padding-bottom:8px;text-transform:uppercase;}
.dbp-cal-blank{visibility:hidden;}
.dbp-cal-day{
	aspect-ratio:1/1;border-radius:50%;border:none;background:var(--dbp-mint);color:var(--dbp-brand);
	font-weight:700;font-size:clamp(11px,3.2vw,13.5px);cursor:pointer;transition:all .15s ease;
	min-height:30px;min-width:0;
}
.dbp-cal-day:hover:not(:disabled){background:var(--dbp-brand);color:#fff;transform:scale(1.06);}
.dbp-cal-day-selected{background:var(--dbp-brand) !important;color:#fff !important;box-shadow:0 4px 12px rgba(12,61,46,.35);}
.dbp-cal-day-today{box-shadow:inset 0 0 0 2px var(--dbp-brand);}
.dbp-cal-day-past{background:transparent;color:#d1d5db;cursor:default;}

/* Slot list */
.dbp-slot-list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;overflow-x:hidden;padding-right:2px;width:100%;min-width:0;}
.dbp-slot-btn{width:100%;padding:14px;border:1.5px solid var(--dbp-border);border-radius:12px;background:#fff;color:var(--dbp-brand);font-weight:700;font-size:14.5px;cursor:pointer;transition:all .15s ease;min-height:44px;}
@media (max-width:640px){.dbp-slot-list{max-height:280px;}}
.dbp-slot-btn:hover{border-color:var(--dbp-brand);}
.dbp-slot-btn.selected{background:linear-gradient(135deg,var(--dbp-brand),var(--dbp-brand-light));color:#fff;border-color:var(--dbp-brand);box-shadow:0 6px 16px rgba(12,61,46,.25);}

/* Step 3 form */
.dbp-bw-back{background:none;border:none;color:var(--dbp-brand);font-weight:700;font-size:13.5px;cursor:pointer;padding:0;margin-bottom:18px;}
.dbp-bw-chip{background:var(--dbp-mint);color:var(--dbp-brand);padding:14px 16px;border-radius:14px;font-size:14px;margin-bottom:22px;}
.dbp-bw-field{margin-bottom:16px;}
.dbp-bw-field label{display:block;font-size:12.5px;font-weight:700;color:#3f4a44;margin-bottom:6px;}
.dbp-req{font-weight:400;color:#9aa39d;text-transform:none;font-size:11.5px;}
.dbp-booking-widget input[type=text],
.dbp-booking-widget input[type=email],
.dbp-booking-widget input[type=tel]{
	width:100%;padding:13px 14px;border:1.5px solid var(--dbp-border);border-radius:12px;
	font-size:16px;background:#fbfdfc;transition:border-color .15s ease,box-shadow .15s ease;
	min-height:44px;
}
.dbp-booking-widget input:focus{outline:none;border-color:var(--dbp-brand);box-shadow:0 0 0 4px rgba(12,61,46,.08);background:#fff;}
.dbp-phone-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;}
.dbp-phone-row #dbp-country-code{text-align:center;font-weight:700;}
@media (max-width:360px){.dbp-phone-row{grid-template-columns:minmax(0,1fr);}}

.dbp-bw-infobox{display:flex;gap:12px;align-items:flex-start;background:var(--dbp-mint);border-radius:14px;padding:16px;margin:6px 0 20px;}
.dbp-bw-infobox-icon{font-size:20px;}
.dbp-bw-infobox strong{font-size:14px;color:#1f2937;}
.dbp-bw-infobox p{margin:4px 0 0;font-size:12.5px;color:#5a655f;}

.dbp-bw-submit{width:100%;}
.dbp-form-error{color:#c0392b;font-size:13px;margin-top:10px;min-height:16px;}

/* Buttons (shared) */
.dbp-btn{padding:14px 22px;border-radius:14px;border:none;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;transition:transform .12s ease,box-shadow .12s ease;min-height:44px;}
.dbp-btn-primary{background:linear-gradient(135deg,var(--dbp-brand),var(--dbp-brand-light));color:#fff;box-shadow:0 8px 20px rgba(12,61,46,.25);}
.dbp-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(12,61,46,.3);}
.dbp-btn-outline{background:#fff;border:1.5px solid var(--dbp-border);color:var(--dbp-brand);flex:1;}
.dbp-btn-outline:hover{border-color:var(--dbp-brand);}
.dbp-form-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;}
@media (max-width:480px){.dbp-form-actions{flex-direction:column;}.dbp-form-actions .dbp-btn{width:100%;}}

/* Confirmation */
.dbp-confirm-box{text-align:center;padding:20px 0;}
.dbp-check-icon{width:64px;height:64px;border-radius:50%;background:var(--dbp-mint);color:#1a7f4e;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 6px 16px rgba(26,127,78,.2);}
.dbp-confirm-box p{color:#4b5563;font-size:14.5px;margin:6px 0;}

/* My-bookings table (unrelated shortcode) */
.dbp-my-bookings .dbp-table{width:100%;border-collapse:collapse;}
.dbp-my-bookings .dbp-table th,.dbp-my-bookings .dbp-table td{padding:12px;border-bottom:1px solid var(--dbp-border);font-size:14px;text-align:left;}
.dbp-badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.dbp-badge-pending{background:#fff7e6;color:#b7791f;}
.dbp-badge-approved{background:#e6f7ee;color:#1a7f4e;}
.dbp-badge-cancelled,.dbp-badge-rejected{background:#fdeaea;color:#c0392b;}
.dbp-maintenance{padding:24px;text-align:center;color:#7c8a83;font-size:14px;}

@media (max-width:480px){
	.dbp-bw-main{padding:22px 18px;}
	.dbp-bw-sidebar{padding:22px 18px;}
	.dbp-bw-twocol{gap:24px;}
	.dbp-cal-grid{gap:2px;}
	.dbp-btn{padding:13px 18px;font-size:14px;}
}

@media (max-width:760px){
	/* On mobile the sidebar sits above the main content; trim its
	   padding/description so the important step content isn't pushed
	   too far below the fold. */
	.dbp-bw-sidebar{padding-bottom:18px;}
	.dbp-bw-desc{display:none;}
	.dbp-bw-summary{margin-top:14px;}
}

@media (max-width:360px){
	.dbp-cal-day{font-size:11px;}
	.dbp-bw-title{font-size:16px;}
}

/* Container-query versions of the above: these take over whenever the
   widget's own box (not the browser viewport) crosses each width, which
   is what actually happens inside narrow Elementor columns/sections. */
@container dbpw (max-width:480px){
	.dbp-bw-main{padding:22px 18px !important;}
	.dbp-bw-sidebar{padding:22px 18px !important;}
	.dbp-cal-grid{gap:2px !important;}
	.dbp-btn{padding:13px 18px !important;font-size:14px !important;}
	.dbp-form-actions{flex-direction:column;}
	.dbp-form-actions .dbp-btn{width:100%;}
}

@container dbpw (max-width:760px){
	.dbp-bw-sidebar{padding-bottom:18px !important;}
	.dbp-bw-desc{display:none !important;}
	.dbp-bw-summary{margin-top:14px !important;}
}

@container dbpw (max-width:360px){
	.dbp-cal-day{font-size:11px !important;}
	.dbp-bw-title{font-size:16px !important;}
	.dbp-phone-row{grid-template-columns:minmax(0,1fr) !important;}
}