/** * WooCommerce Integration Styles * * Styles for WP BnB - WooCommerce integration * * @package Magdev\WpBnb */ /* ========================================================================== Cart Item - Booking Data Display ========================================================================== */ .woocommerce-cart .cart_item .bnb-booking-info { margin-top: 8px; padding: 10px; background: #f9f9f9; border-radius: 4px; font-size: 0.9em; } .woocommerce-cart .cart_item .bnb-booking-info dt { display: inline-block; font-weight: 600; min-width: 80px; color: #50575e; } .woocommerce-cart .cart_item .bnb-booking-info dd { display: inline-block; margin: 0 0 4px 0; } /* ========================================================================== Checkout - Booking Summary ========================================================================== */ .bnb-checkout-booking-summary { margin: 20px 0; padding: 15px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 4px; } .bnb-checkout-booking-summary h3 { margin: 0 0 15px 0; padding: 0 0 10px 0; border-bottom: 1px solid #e1e4e8; font-size: 1.1em; color: #2271b1; } .bnb-booking-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #e1e4e8; } .bnb-booking-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .bnb-booking-item strong { display: block; font-size: 1em; color: #1d2327; } .bnb-building-name { display: block; font-size: 0.85em; color: #787c82; margin-top: 2px; } .bnb-booking-details { margin-top: 8px; font-size: 0.9em; color: #50575e; } .bnb-booking-details span { display: inline-block; margin-right: 15px; } .bnb-booking-details span::before { content: "•"; margin-right: 5px; color: #c3c4c7; } .bnb-booking-details span:first-child::before { content: ""; margin-right: 0; } /* ========================================================================== Thank You Page - Booking Confirmation ========================================================================== */ .woocommerce-booking-confirmation { margin: 30px 0; padding: 20px; background: #f0f8f1; border: 1px solid #d1e7d7; border-radius: 4px; } .woocommerce-booking-confirmation h2 { margin: 0 0 15px 0; color: #00a32a; font-size: 1.3em; } .woocommerce-table--booking-details { width: 100%; margin-bottom: 15px; } .woocommerce-table--booking-details th { text-align: left; width: 40%; padding: 8px 12px 8px 0; color: #50575e; font-weight: 600; } .woocommerce-table--booking-details td { padding: 8px 0; } .woocommerce-table--booking-details small { display: block; color: #787c82; margin-top: 2px; } .woocommerce-booking-reference { margin: 20px 0; padding: 10px 15px; background: #f6f7f7; border-radius: 4px; } .woocommerce-booking-reference .bnb-status-badge { margin-left: 10px; } /* ========================================================================== Status Badges ========================================================================== */ .bnb-status-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .bnb-status-pending { background: #fff8e5; color: #9d6a00; } .bnb-status-confirmed { background: #e6f4ea; color: #0a6e31; } .bnb-status-checked_in { background: #e3f2fd; color: #1565c0; } .bnb-status-checked_out { background: #f5f5f5; color: #616161; } .bnb-status-cancelled { background: #ffeaea; color: #d63638; } /* ========================================================================== Booking Form (Frontend) ========================================================================== */ .bnb-wc-booking-form { margin: 20px 0; padding: 20px; background: #fff; border: 1px solid #e1e4e8; border-radius: 4px; } .bnb-wc-booking-form h3 { margin: 0 0 20px 0; padding: 0 0 15px 0; border-bottom: 1px solid #e1e4e8; } .bnb-wc-booking-form .form-row { margin-bottom: 15px; } .bnb-wc-booking-form label { display: block; margin-bottom: 5px; font-weight: 600; } .bnb-wc-booking-form input[type="date"], .bnb-wc-booking-form input[type="number"], .bnb-wc-booking-form select { width: 100%; padding: 10px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 1em; } .bnb-wc-booking-form input[type="date"]:focus, .bnb-wc-booking-form input[type="number"]:focus, .bnb-wc-booking-form select:focus { border-color: #2271b1; outline: none; box-shadow: 0 0 0 1px #2271b1; } .bnb-wc-booking-form .form-row-inline { display: flex; gap: 15px; } .bnb-wc-booking-form .form-row-inline > div { flex: 1; } /* Availability status */ .bnb-availability-status { margin: 15px 0; padding: 10px 15px; border-radius: 4px; display: flex; align-items: center; gap: 8px; } .bnb-availability-status.checking { background: #f6f7f7; color: #787c82; } .bnb-availability-status.available { background: #e6f4ea; color: #0a6e31; } .bnb-availability-status.unavailable { background: #ffeaea; color: #d63638; } .bnb-availability-status .dashicons { font-size: 18px; width: 18px; height: 18px; } /* Price display */ .bnb-wc-price-display { margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 4px; } .bnb-wc-price-display .price-row { display: flex; justify-content: space-between; padding: 5px 0; } .bnb-wc-price-display .price-row.total { border-top: 1px solid #e1e4e8; margin-top: 10px; padding-top: 10px; font-weight: 700; font-size: 1.1em; } /* Services selection */ .bnb-wc-services { margin: 15px 0; } .bnb-wc-services h4 { margin: 0 0 10px 0; font-size: 1em; } .bnb-wc-service-item { display: flex; align-items: center; padding: 10px; margin-bottom: 8px; background: #f9f9f9; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .bnb-wc-service-item:hover { background: #f0f0f0; } .bnb-wc-service-item.selected { background: #e6f4ea; border: 1px solid #d1e7d7; } .bnb-wc-service-item input[type="checkbox"] { margin-right: 10px; } .bnb-wc-service-item .service-name { flex: 1; } .bnb-wc-service-item .service-price { color: #2271b1; font-weight: 600; } .bnb-wc-service-item .service-qty { margin-left: 10px; width: 60px; } /* Add to cart button */ .bnb-wc-booking-form .add-to-cart-btn { width: 100%; padding: 12px 20px; background: #2271b1; color: #fff; border: none; border-radius: 4px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: background 0.2s; } .bnb-wc-booking-form .add-to-cart-btn:hover { background: #135e96; } .bnb-wc-booking-form .add-to-cart-btn:disabled { background: #c3c4c7; cursor: not-allowed; } /* ========================================================================== Admin Order - Booking Info ========================================================================== */ .bnb-order-booking-info { margin-top: 20px; padding: 15px; background: #f6f7f7; border-radius: 4px; } .bnb-order-booking-info h3 { margin: 0 0 12px 0; font-size: 13px; color: #1d2327; } .bnb-order-booking-info p { margin: 0 0 8px 0; font-size: 13px; } .bnb-order-booking-info a { color: #2271b1; } .bnb-order-booking-info a:hover { color: #135e96; } /* ========================================================================== Admin List Table - Order Columns ========================================================================== */ .column-wc_order { width: 10%; } .column-bnb_booking { width: 15%; } .column-bnb_booking small { display: block; color: #787c82; margin-top: 2px; } /* Order action buttons */ .wc-action-button-view_booking::after { font-family: dashicons; content: "\f513"; } /* ========================================================================== Responsive ========================================================================== */ @media screen and (max-width: 768px) { .bnb-wc-booking-form .form-row-inline { flex-direction: column; gap: 0; } .bnb-booking-details span { display: block; margin-right: 0; margin-bottom: 4px; } .bnb-booking-details span::before { content: ""; margin-right: 0; } }