/* Sibalom booking field additions — reuses the base booking plugin's
   .wpd-modal shell and CSS custom properties for visual consistency. */

/* The base plugin's own "My Calendar" page (wp-dashboard/events.php, not
   ours to edit) wraps the Create Booking form + Booking Calendar in one
   shared .summary-card, which reads as one big white card instead of two
   separate ones, and each inner card's border relies on the
   "border-base-300" Tailwind utility — which, like the same class on our
   own bookings admin table, isn't actually shipped in the compiled theme
   CSS and falls back to a plain black border. Since that template can't be
   touched directly, both are fixed here instead. :has() is scoped to
   #wpd-event-form (the base plugin's own unique create-form ID) so this
   never touches .summary-card wherever else it's used across the rest of
   the dashboard theme. */
.summary-card:has(#wpd-event-form) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.summary-card:has(#wpd-event-form) .border.border-base-300.rounded-xl.overflow-hidden {
  background: #fff;
  border-color: #dcdcde;
  /* This card's literal Tailwind "overflow-hidden" class (there for its
     rounded corners) also clips our From/Until date popovers — which are
     absolutely positioned *inside* it — the instant they'd extend past the
     card's own edge, silently cutting off the calendar's rightmost column.
     Safe to turn off here: the card's background/border already round
     correctly from border-radius alone (that doesn't need overflow:hidden),
     and nothing else in this card relies on being clipped to it. */
  overflow: visible;
}

/* Same border-base-300-falls-back-to-black bug, but on each card's own
   header divider (a separate element from the card's outer border above) —
   missed the first time around. Also equalizes the two header heights:
   "Booking Calendar"'s header is naturally taller than "Create Booking"'s
   plain-text one because it carries the Month/Week/Day buttons; a shared
   min-height + vertical centering makes both match regardless of content. */
.summary-card:has(#wpd-event-form) .border.border-base-300.rounded-xl.overflow-hidden > .border-b.border-base-300 {
  border-bottom-color: #dcdcde;
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  box-sizing: border-box;
}

.snp-addon-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem 1rem;
}

@media (max-width: 480px) {
  .snp-addon-list {
    grid-template-columns: 1fr;
  }
}

/* Quantity field revealed under a checked, quantity-enabled add-on
   ("Allow quantity" in SNP Settings). grid-column: 1 / -1 forces it onto
   its own full-width row inside .snp-addon-list's 2-column grid — without
   it, this extra grid item would take up one add-on's own column slot and
   shove every add-on after it sideways by one cell. Indented roughly under
   its checkbox's label text (not under the checkbox itself). */
.snp-addon-qty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.15rem 0 0.35rem 1.6rem;
  font-size: 0.8125rem;
  color: #5A7080;
}

.snp-addon-qty[hidden] {
  display: none;
}

.snp-addon-qty input[type="number"] {
  width: 70px;
}

#wpd-event-form .snp-addon-qty input[type="number"] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 8px;
    width: 60px;
}

.snp-payment-section .snp-co-addon-qty {
    padding: 0 8px !important;
    height: 30px !important;
    width: 60px !important;
    font-size: 14px !important;
}

.snp-addon-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ── Availability calendar grid — shared by every date popover ──────────── */

.snp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.snp-cal-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.snp-cal-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr — bare 1fr tracks refuse to shrink below
     their content's min-content size, which silently overflowed the grid
     past a constrained-width parent (see .snp-cal-popover's width: 75%). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.snp-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  font-size: 0.8125rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
}

.snp-cal-cell--head {
  font-weight: 600;
  /* var(--color-primary) doesn't exist wherever this renders on the public
     front-end (it's a wp-dashboard-main/DaisyUI theme variable that page
     never loads), so hsl(var(--color-primary) / X) was silently invalid
     CSS here and everywhere else it appeared in this file — this and the
     other fixes below swap in real colors from the site's own palette. */
  color: rgba(90, 112, 128, 0.7);
  aspect-ratio: auto;
  padding: 0.25rem 0;
}

.snp-cal-cell--empty {
  background: transparent;
}

.snp-cal-cell--day {
  cursor: pointer;
  transition: background 0.15s;
}

.snp-cal-cell--day:hover:not(.is-disabled) {
  background: #57913d;
}

.snp-cal-nav .btn {
    background-color: #57913d;
    color: #fff;
}

.snp-cal-cell--day.is-disabled {
  background: #eef5e8;
  color: rgba(90, 112, 128, 0.5);
  cursor: not-allowed;
  /* Also stops :hover from registering at all, so there's no way for a
     disabled cell to visually react to the mouse — belt-and-suspenders on
     top of the JS-side `disabled` attribute already blocking the click. */
  pointer-events: none;
}
.snp-cal-popover button.snp-cal-cell {
    padding: 15px 10px;
}

/* This — not the disabled/past-date styling above — is what the calendar's
   "Unavailable" legend actually refers to: a day inside the range but
   specifically closed via Blocked Dates. It was invisible before (the
   broken hsl(var(--color-error)) fix above applies here too), which is
   exactly why the legend looked like it was labeling nothing. */
.snp-cal-cell--day.is-blocked {
  background: #fbdada;
  color: #b91c1c;
}

.snp-cal-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.snp-cal-swatch--blocked {
  background: #f3a9a9;
}

#snp-booking-shortcode .btn {
    background-color: #57913d;
    border-radius: 50px 50px 50px 50px;
  	margin-top: 20px;
}
#snp-booking-shortcode .snp-cal-nav .btn {
    padding: 0px 12px 6px;
    font-size: 25px;
}

.snp-sc-date-group {
    margin-bottom: 10px;
}

#snp-sc-package-description {
    margin: 10px 0;
}

/* Total isn't an editable field on the dashboard form either — same
   "readout, not an input" treatment as the shortcode's total. */
#snp_total_amount {
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
    text-align: right;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Total Amount + Submit Booking share one row — button on the far left,
   total on the right — matching the front-end shortcode's layout. */
.snp-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #dcdcde;
    padding-top: 1rem;
    margin-top: 0.25rem;
}

.snp-total-group {
    margin: 0;
}

/* ── Edit-modal read-only summary ────────────────────────────────────────── */

.snp-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.snp-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
}

.snp-summary-row dt {
  color: #5A7080;
}

.snp-summary-row dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

/* Package/Visitors/Add-ons/Total — a table (built entirely by
 * renderSummaryTable() in snp-booking.js) instead of a label/list pair, so
 * every amount lands in the same right-aligned column regardless of how
 * long its row's label is, lined up under Total. */
.snp-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.snp-summary-table td {
  padding: 0.2rem 0;
}

.snp-summary-table__amount {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-weight: 500;
  padding-left: 1rem;
}

.snp-summary-table__total-row td {
  border-top: 1px solid #E2E8ED;
  padding-top: 0.5rem;
  font-weight: 700;
}

.snp-summary-extra {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #E2E8ED;
}

.snp-summary-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5A7080;
  margin-top: 0.35rem;
}

.snp-summary-section-title:first-child {
  margin-top: 0;
}

/* margin doesn't apply to table cells — .snp-summary-table's own rows use
 * this same class (see renderSummaryTable() in snp-booking.js), so it
 * needs a padding-based equivalent instead. */
.snp-summary-table td.snp-summary-section-title {
  margin-top: 0;
  padding-top: 0.55rem;
}

.snp-summary-table tr:first-child td.snp-summary-section-title {
  padding-top: 0.2rem;
}

.snp-summary-receipt img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 0.5rem;
  border: 1px solid #E2E8ED;
  display: block;
}

/* Edit modal header — title (with the Edit Booking link appended right
 * into its own text, see below) + a new email/phone subheader, stacked in
 * .snp-modal-title-group; the close button stays the header's only other
 * child, so .wpd-modal-header's own `justify-content: space-between`
 * still works unmodified (see the DOMContentLoaded move in
 * snp-booking.js, which builds this group once on load). */

.snp-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

#snp-modal-subheader {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #5A7080;
}

.snp-modal-subheader__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.snp-modal-subheader__row i {
  width: 0.85rem;
  text-align: center;
  color: #5A7080;
  font-size: 0.75em;
}

#snp-modal-subheader a {
  color: #2563EB;
  text-decoration: none;
}

#snp-modal-subheader a:hover,
#snp-modal-subheader a:focus {
  text-decoration: underline;
}

/* Icon-only edit link, inline right beside the customer name in the title
 * itself (aria-label carries "Edit Booking" for screen readers, since
 * there's no visible text). */
#snp-summary-edit-link {
  display: inline-flex;
  align-items: center;
  color: #2563EB;
  margin-left: 0.5rem;
  vertical-align: middle;
}

#snp-summary-edit-link:hover,
#snp-summary-edit-link:focus {
  color: #1d4ed8;
}

#snp-summary-edit-link .fa-pen {
  font-size: 0.8rem;
}

/* Belt-and-suspenders for the checkout-booking toggle in the wpd_event_click
 * listener (snp-booking.js): .btn and .form-group-wrapper are DaisyUI/base-
 * plugin classes that set their own `display`, which can silently outrank
 * the bare [hidden] attribute's default the same way .snp-cal-popover's own
 * `display` did above — so these need the same explicit override. */
.form-group-wrapper[hidden],
#wpd-edit-save[hidden],
#wpd-delete-selection-btn[hidden],
#snp-summary-edit-link[hidden],
.snp-summary-extra[hidden],
.snp-summary-receipt[hidden] {
  display: none !important;
}

/* ── Wider Edit modal for a checkout booking's full details ──────────────── */
/* .wpd-modal-box's own 520px max-width (wpd-booking-scheduling-main's
 * styles.css) fits the base plugin's plain 4-field Event form fine, but is
 * too cramped once the Status/Billing/Payment sections above are showing —
 * toggled onto #wpd-edit-modal .wpd-modal-box alongside everything else in
 * the wpd_event_click listener, so a plain Event edit is unaffected. The
 * modal itself has no max-height/scroll of its own, so this also adds one
 * — otherwise the extra content could push the footer buttons off-screen
 * with no way to reach them. */
.wpd-modal-box--snp-wide {
  max-width: 640px !important;
}

.wpd-modal-box--snp-wide .wpd-modal-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}

/* ── [snp_booking_form] front-end shortcode ──────────────────────────────── */

.snp-sc-message {
  background: #fbdada;
  color: #b91c1c;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
}

/* Real POST target for "Proceed to Booking" — see class-snp-shortcode.php
   and class-snp-booking-session.php. Never shown; JS only fills in its
   fields and calls submit(). */
.snp-sc-hidden-form {
  display: none;
}

.snp-sc-date-group {
  position: relative;
}

/* Package select + its Number of Packages qty field side by side — the
   qty field stays a fixed, small width regardless of how the row's own
   width changes, the select takes up whatever's left. */
.snp-sc-package-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.snp-sc-package-select {
  flex: 1 1 auto;
  min-width: 0;
}

.snp-sc-package-qty-group {
  flex: 0 0 auto;
  width: 4.5rem;
}

.snp-sc-package-qty-group .form-input {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
}

@media (max-width: 480px) {
  .snp-sc-package-row {
    flex-wrap: wrap;
  }
  .snp-sc-package-qty-group {
    width: 5.5rem;
  }
}

/* Generic 2-up field row — From date/Until date (front-end shortcode and
   the dashboard's Create Booking form) and, in the Create Booking form's
   own Billing Information section, Email/Phone (see
   SNP_Booking_Fields::render_create_fields()). */
.snp-sc-date-range {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
}

@media (max-width: 480px) {
  .snp-sc-date-range {
    grid-template-columns: 1fr;
  }
}

/* Positioning parent for each date field's popover (an :absolute child) so
   it anchors to that field instead of some further-out ancestor. Used by
   both the dashboard form's From/Until fields and (via .snp-sc-date-group
   below) the front-end shortcode's. */
.snp-date-field {
  position: relative;
}

/* Fixed width, deliberately NOT tied to the field's own width (.snp-sc-date-
   group / .snp-date-field, its positioning parent) — it's fine for the
   popover to be wider than the input it opened from; a day-picker just
   needs enough room to be comfortable to read/tap. Day-cell font size is
   scoped to this popover specifically (not the shared .snp-cal-cell class)
   so any other calendar grid reusing those same classes elsewhere isn't
   affected. */
.snp-cal-popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 20;
  width: 320px;
  /* Keeps the fixed 320px from overflowing off-screen on narrow phones,
     where the field it's anchored to can sit close to the viewport edge. */
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 1.25rem;
  animation: wpdModalIn 0.15s ease;
  /* Belt-and-suspenders against the grid below ever rendering a hair wider
     than this box (e.g. sub-pixel rounding across 7 columns) — clips it
     instead of letting it visibly bleed past the rounded corners. */
  overflow: hidden;
}

.snp-cal-popover[hidden] {
  display: none;
}

.snp-cal-popover .snp-cal-grid {
  /* Explicit width/box-sizing — without this the grid could compute its
     track widths a hair wider than the popover's actual padded content
     box, pushing the rightmost (Saturday) column's cells past the
     popover's edge instead of staying inside it. */
  width: 100%;
  box-sizing: border-box;
  gap: 6px;
}

.snp-cal-popover .snp-cal-cell {
  font-size: 0.8125rem;
}

/* Day cells default to aspect-ratio: 1 (square, sized off the grid's
   column width) — with the popover now a fixed, more generous 320px wide,
   that would make each row quite tall (6 possible rows), so height is
   still kept independent of width, just given more room than before now
   that there's a bigger popover to fill. */
.snp-cal-popover .snp-cal-cell--day,
.snp-cal-popover .snp-cal-cell--empty {
  aspect-ratio: auto;
  height: 34px;
}

/* Total Amount + Proceed to Booking share one row — button on the far
   left, total on the right — with a divider above separating the row from
   Visitor Type. */
.snp-sc-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid #dcdcde;
  padding-top: 1rem;
  margin-top: 0.25rem;
}

.snp-sc-total-group {
  margin: 0;
}

/* Total isn't an editable field, just a live-updating readout — no label. */
#snp-sc-total-amount {
  border: none;
  background: transparent;
  padding: 0;
  width: auto;
  text-align: right;
  font-size: 1.375rem;
  font-weight: 700;
  box-shadow: unset;
}

/* Overrides the generic "#snp-booking-shortcode .btn" full-width/margin-top
   default for this one button — sized to its own content, vertically
   centered in the row instead of pushed down by that default spacing.
   Needs the #snp-booking-shortcode prefix to actually win: that generic
   rule is an ID+class selector, which beats a class-only selector
   regardless of source order. */
#snp-booking-shortcode .snp-sc-proceed-btn {
  display: inline-flex;
  width: fit-content;
  margin-top: 0;
  box-shadow: none;
}

/* Disabled while the picked dates aren't bookable (see scRangeBlocked/
   scCottageUnavailable in snp-booking.js) — a solid gray instead of the
   theme's own default disabled treatment (usually just a faded/lower-
   opacity version of the button's normal green), so it reads clearly as
   "can't click this" rather than "still the primary action, just dim". */
#snp-booking-shortcode .snp-sc-proceed-btn:disabled {
  background-color: #d1d5db;
  border-color: #d1d5db;
  color: #6b7280;
  opacity: 1;
  cursor: not-allowed;
}

/* Separate the dashboard form's fields from each other. */
.form-group-wrapper .form-group {
  margin-bottom: 1.25rem;
}

.form-group-wrapper .form-group:last-child {
  margin-bottom: 0;
}

/* Shorter fields specifically on the Create Booking form (My Calendar) —
   the base plugin's own .form-input (wp-dashboard-main/assets/css/styles.css)
   is sized for a short single-field form; this one has grown to 8 fields
   across Billing Information + Booking Details, so a bit less height per
   field keeps it from running too long. #wpd-event-form (the base
   plugin's own create-form ID) scopes this to just this form — nothing
   else using .form-input elsewhere (checkout page, booking-edit.php, the
   shortcode) is affected. */
#wpd-event-form .form-input {
  padding: 6px 10px;
}

/* Section labels inside the Create Booking form (SNP_Booking_Fields::
   render_create_fields()) — "Billing Information" / "Booking Details" —
   a flat form-group-wrapper otherwise has no visual grouping at all. */
.snp-form-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
}

.snp-form-section-title:not(:first-child) {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}

/* Standard visually-hidden technique — content stays in the accessibility
   tree (screen readers, click-to-focus via the <label>'s for=) but takes
   no visual space, unlike `hidden`/`display:none` which remove it from
   both. Not the theme's own "sr-only" (a Tailwind utility that may not
   actually be in the compiled bundle — see the border-base-300 note
   earlier in this file) — self-contained so it always works regardless.
   Used by the Create Booking form's Billing Information fields, whose
   placeholder text stands in for the label on screen. */
.snp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cottage field on the Create Booking form (SNP_Booking_Fields::
   render_create_fields()) — same rules as booking-edit.php's own Cottage
   field (snp-dashboard-pages.css), duplicated here rather than shared
   since that stylesheet isn't loaded on this page (My Calendar isn't one
   of SNP_Assets::enqueue_dashboard_pages()'s own pages). */
.snp-field-error-notice {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #b32d2e;
}

.snp-cottage-field {
  margin-bottom: 1rem;
}

/* ── Required-field markers (same convention as snp-checkout.css) ────────── */

.snp-required-mark {
  color: #dc2626;
  font-weight: 700;
}

.snp-required-hint {
  margin: 0.25rem 0 0.5rem;
  font-style: italic;
}

/* ── Visitor type breakdown (dashboard form + shortcode) ─────────────────── */

.snp-visitor-type-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
}

@media (max-width: 480px) {
  .snp-visitor-type-list {
    grid-template-columns: 1fr;
  }
}

.snp-visitor-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.snp-visitor-type-row label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.875rem;
}

.snp-visitor-type-rate {
  font-size: 0.75rem;
  color: #5A7080;
}

.snp-visitor-type-row input[type="number"] {
  width: 70px;
  flex-shrink: 0;
}

/* ── WYSIWYG package description output ──────────────────────────────────── */

/* Darker than the default .form-hint gray — this is real body content
   (the package description), not a small aside, so it needs more contrast
   to actually be legible. */
#snp_package_description,
#snp-sc-package-description {
  color: #1A303D;
}

/* list-style: disc/decimal explicitly — the dashboard theme's own compiled
   CSS resets all <ul>/<ol> to no markers by default (a common Tailwind
   "preflight" base reset), which silently strips whatever bullet/numbered
   list formatting was actually used in the wp_editor() description field
   on the SNP Settings page, so the front-end stopped matching what admins
   see/build there. */
#snp_package_description ul,
#snp-sc-package-description ul {
  list-style: disc outside;
  margin: 0.25rem 0 0 1.1rem;
  padding: 0;
}

#snp_package_description ol,
#snp-sc-package-description ol {
  list-style: decimal outside;
  margin: 0.25rem 0 0 1.1rem;
  padding: 0;
}

#snp_package_description li,
#snp-sc-package-description li {
  display: list-item;
}

#snp_package_description p,
#snp-sc-package-description p {
  margin: 0 0 0.5rem;
}

#snp_package_description p:last-child,
#snp-sc-package-description p:last-child {
  margin-bottom: 0;
}
.snp-bookings-table-card tbody td,
.snp-bookings-table-card thead th{
    padding: 10px 20px !important;
}
.snp-bookings-table-card thead tr{
    background-color: #C8E6B8 !important;
    color: #1A303D !important;
}
.snp-bookings-table-card tbody td{
    vertical-align: middle !important;
}
.snp-bookings-table-card .table {
    margin: 0 !important;
}