/** * wcwt-frontend.css * * Styles for the Wine Tasting booking widget on the product page. * Calendar is a popup (jQuery UI default) – no inline calendar div needed. */ /* ── Force form.cart to be block/flex so the widget takes full width ─────── */ /* This pushes quantity + Add to Cart button onto their own row below */ form.cart { display: flex; flex-wrap: wrap; } .wcwt-booking-widget { flex: 0 0 100%; width: 100%; box-sizing: border-box; } form.cart .quantity, form.cart .single_add_to_cart_button { flex: 0 0 auto; } /* ── Widget container ───────────────────────────────────────────────────── */ .wcwt-booking-widget { background: #fafafa; border: 1px solid #e2e2e2; border-radius: 6px; padding: 20px 24px; margin: 20px 0 20px; } .wcwt-widget-title { font-size: 1.1em; font-weight: 700; margin: 0 0 16px; color: #2c2c2c; border-bottom: 2px solid #7b2d2d; padding-bottom: 8px; } /* ── Two-column row: date + time ────────────────────────────────────────── */ .wcwt-fields-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; /* align bottoms so labels + inputs line up neatly */ } .wcwt-field-date { flex: 1 1 220px; min-width: 0; } .wcwt-field-time { flex: 0 1 180px; min-width: 140px; } /* Stack on narrow / mobile screens */ @media ( max-width: 600px ) { .wcwt-fields-row { flex-direction: column; gap: 12px; } .wcwt-field-date, .wcwt-field-time { flex: 0 0 100%; min-width: 0; width: 100%; } } /* ── Field labels ───────────────────────────────────────────────────────── */ .wcwt-field { margin-bottom: 0; } .wcwt-field label { display: block; font-size: 0.9em; font-weight: 600; margin-bottom: 5px; color: #444; } .wcwt-field label .required { color: #d63638; margin-left: 2px; } /* ── Date text input ────────────────────────────────────────────────────── */ .wcwt-date-input { width: 100%; box-sizing: border-box; padding: 9px 14px; border: 1px solid #ccc; border-radius: 24px; font-size: 0.95em; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .wcwt-date-input:focus, .wcwt-date-input:hover { border-color: #7b2d2d; outline: none; box-shadow: 0 0 0 2px rgba(123, 45, 45, 0.15); } /* ── Time select ────────────────────────────────────────────────────────── */ .wcwt-time-select { width: 100%; box-sizing: border-box; padding: 9px 32px 9px 14px; border: 1px solid #ccc; border-radius: 24px; font-size: 0.95em; background: #fff; appearance: none; -webkit-appearance: none; /* Custom chevron arrow */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .wcwt-time-select:focus, .wcwt-time-select:hover { border-color: #7b2d2d; outline: none; box-shadow: 0 0 0 2px rgba(123, 45, 45, 0.15); } /* ── jQuery UI Datepicker POPUP overrides ───────────────────────────────── */ /* Popup is appended to by jQuery UI, so these rules use .ui-datepicker */ .ui-datepicker { font-size: 0.9em !important; border: 1px solid #ddd !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; background: #fff !important; z-index: 99999 !important; padding: 10px !important; } /* Header bar */ .ui-datepicker .ui-datepicker-header { border-radius: 6px 6px 0 0; } /* Navigation prev/next buttons */ .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; } /* Closed weekday – greyed with strikethrough */ .ui-datepicker .wcwt-closed-day a, .ui-datepicker .wcwt-closed-day span { color: #bbb !important; text-decoration: line-through !important; cursor: not-allowed !important; } /* Blocked specific date – red tint */ .ui-datepicker .wcwt-blocked-date a, .ui-datepicker .wcwt-blocked-date span { color: #d63638 !important; background: #fde8e8 !important; text-decoration: line-through !important; cursor: not-allowed !important; border-radius: 3px; } /* Selected date */ .ui-datepicker .ui-datepicker-current-day a, .ui-datepicker td .ui-state-active { background: #7b2d2d !important; color: #fff !important; border-radius: 4px !important; border: none !important; } /* Hover on selectable days */ .ui-datepicker td .ui-state-hover { background: #f5e6e6 !important; color: #7b2d2d !important; border-radius: 4px !important; border: none !important; } /* ── Error message ──────────────────────────────────────────────────────── */ .wcwt-error { background: #fde8e8; border: 1px solid #d63638; border-radius: 4px; color: #d63638; font-size: 0.9em; font-weight: 600; padding: 10px 14px; margin-top: 12px; } /* ── Confirmation summary ───────────────────────────────────────────────── */ .wcwt-selection-summary { background: #eaf5ea; border: 1px solid #5b8c5a; border-radius: 4px; color: #3a5c39; font-size: 0.9em; padding: 10px 14px; margin-top: 12px; } /* ── Disabled Add to Cart ───────────────────────────────────────────────── */ .single_add_to_cart_button.wcwt-btn-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }