/* ======================================== Clubband Cart & Quote System Styles ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap'); /* * Popup layer order * ----------------- * Keep the cart below third-party body-level popups. Flatpickr normally * appends its calendar to , and Google's reCAPTCHA challenge is also * rendered outside the cart panel. Giving the cart the maximum integer * z-index hides both of those interactive layers behind it. */ .flatpickr-calendar { z-index: 1000002 !important; background: #fff !important; border: 1px solid #000 !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; font-family: "Montserrat", sans-serif !important; color: #000 !important; } .flatpickr-months, .flatpickr-weekdays { background: #fff !important; border-bottom: 1px solid #eee !important; } .flatpickr-day { color: #333 !important; } /* ---- MOBILE MENU & iOS FIXES ---- */ /* Fix iOS Safari refusing to click nested elements */ .clubband-quote-btn * { pointer-events: none !important; } /* Stay above site headers/mobile menus, but below interactive popovers. */ .clubband-cart-overlay { z-index: 999998 !important; } #clubband-cart-panel { z-index: 999999 !important; } .flatpickr-day:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; } /* Fix quote button clicking on iOS Safari */ .clubband-quote-btn * { pointer-events: none; } .flatpickr-day.selected { background: #000 !important; border-color: #000 !important; color: #fff !important; } .flatpickr-day.today { border-color: #000 !important; } .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday { color: #000 !important; font-family: "Bebas Neue", sans-serif !important; letter-spacing: 1px; fill: #000 !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #000 !important; color: #000 !important; } .flatpickr-current-month input.cur-year { color: #000 !important; } .flatpickr-day.flatpickr-disabled { color: #ccc !important; } /* ---- Add Button ---- */ .clubband-add-btn { display: flex; justify-content: center; align-items: center; width: 100%; padding: 16px 24px; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; font-size: 20px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; text-decoration: none; font-family: "Bebas Neue", sans-serif; } .clubband-add-btn:hover { background: #333; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-decoration: none; } .clubband-add-btn.clubband-added { background: #fff; color: #000; border-color: #000; } .clubband-add-btn.clubband-added:hover { background: #000; color: #fff; } .clubband-add-btn .clubband-btn-icon { font-size: 16px; font-weight: 700; margin-right: 8px; } /* ---- Quote Button (Header) ---- */ .clubband-quote-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; font-size: 18px; font-weight: 400; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; position: relative; font-family: "Bebas Neue", sans-serif; text-transform: uppercase; } .clubband-quote-btn:hover { background: #fff; color: #000; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-decoration: none; } .clubband-quote-count { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #000; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-family: "Montserrat", sans-serif; border: 1px solid #000; } .clubband-quote-btn:hover .clubband-quote-count { background: #000; color: #fff; } /* ---- Cart Panel (Slide-out) ---- */ .clubband-cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999998; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(4px); } .clubband-cart-open .clubband-cart-overlay { opacity: 1; visibility: visible; } #clubband-cart-panel { position: fixed; top: 0; right: -500px; width: 480px; max-width: 95vw; height: 100vh; background: #fff; color: #000; z-index: 999999; transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid #000; } #clubband-cart-panel.clubband-cart-open { right: 0; } /* Cart Header */ .clubband-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 30px; background: #000; /* Black Background */ border-bottom: 2px solid #000; flex-shrink: 0; } .clubband-cart-header h3 { margin: 0; color: #fff; /* White Text */ font-size: 28px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; font-family: "Bebas Neue", sans-serif; } .clubband-cart-close { background: none; border: none; color: #fff; /* White Close Icon */ font-size: 32px; cursor: pointer; padding: 0 4px; transition: transform 0.2s; line-height: 1; opacity: 1; } .clubband-cart-close:hover { transform: rotate(90deg); } /* Cart Body - Scrollable */ .clubband-cart-body { flex: 1; overflow-y: auto; padding: 30px; font-family: "Montserrat", sans-serif; background: #fff; } .clubband-cart-body::-webkit-scrollbar { width: 6px; } .clubband-cart-body::-webkit-scrollbar-track { background: #fff; border-left: 1px solid #000; } .clubband-cart-body::-webkit-scrollbar-thumb { background: #000; border-radius: 0; } /* Cart Empty State */ .clubband-cart-empty { text-align: center; padding: 80px 20px; color: #000; } .clubband-cart-empty-icon { font-size: 48px; margin-bottom: 24px; opacity: 1; filter: none; color: #000; } .clubband-cart-empty p { font-size: 16px; color: #000; margin: 0; font-family: "Montserrat", sans-serif; font-weight: 600; } /* Cart Items */ .clubband-cart-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 0; margin-bottom: 0; background: transparent; border-bottom: 1px solid #000; transition: background 0.2s; } .clubband-cart-item:first-child { padding-top: 0; } .clubband-cart-item:last-child { border-bottom: none; } .clubband-cart-item:hover { background: transparent; } .clubband-cart-item-info { display: flex; flex-direction: column; gap: 6px; flex: 1; } .clubband-cart-item-category { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #000; font-weight: 700; font-family: "Bebas Neue", sans-serif; } .clubband-cart-item-name { font-size: 22px; font-weight: normal; color: #000; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.5px; line-height: 1.1; } .clubband-cart-item-desc { font-size: 13px; color: #000; font-family: "Montserrat", sans-serif; line-height: 1.4; font-weight: 500; } .clubband-cart-item-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .clubband-cart-item-price { font-size: 22px; font-weight: normal; color: #000; font-family: "Bebas Neue", sans-serif; } .clubband-cart-remove { background: #fff; border: 1px solid #000; color: #000; font-size: 14px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 0; transition: all 0.2s; line-height: 1; padding: 0; } .clubband-cart-remove:hover { background: #000; color: #fff; border-color: #000; } /* Cart Content (totals + form) */ .clubband-cart-content { display: none; } /* Cart Totals */ .clubband-cart-totals { margin-top: 30px; padding: 24px; background: #fff; border-radius: 0; border: 2px solid #000; } .clubband-cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .clubband-cart-total-row.clubband-cart-total-main { border-top: 2px solid #000; margin-top: 16px; padding-top: 20px; } .clubband-cart-total-label { color: #000; font-size: 14px; font-family: "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .clubband-cart-total-main .clubband-cart-total-label { color: #000; font-size: 22px; font-family: "Bebas Neue", sans-serif; } .clubband-cart-total-amount, .clubband-cart-deposit-amount { color: #000; font-weight: normal; font-size: 20px; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.5px; } .clubband-cart-total-main .clubband-cart-total-amount { font-size: 36px; } .clubband-cart-clear { display: block; width: 100%; margin-top: 16px; padding: 10px; background: transparent; border: none; color: #000; font-size: 12px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: 1px; text-decoration: underline; font-weight: 600; } .clubband-cart-clear:hover { background: #000; color: #fff; text-decoration: none; } /* ---- Cart Form ---- */ .clubband-cart-form-section { margin-top: 40px; padding-top: 0; border-top: none; } .clubband-cart-form-section h4 { color: #000 !important; font-size: 24px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 24px 0; font-family: "Bebas Neue", sans-serif !important; border-bottom: 2px solid #000; display: inline-block; padding-bottom: 4px; } .clubband-cart-form .clubband-form-row { display: flex; gap: 16px; margin-bottom: 16px; } .clubband-cart-form .clubband-form-field { flex: 1; display: flex; flex-direction: column; gap: 6px; } .clubband-cart-form .clubband-form-field.clubband-form-full { flex: 0 0 100%; } .clubband-cart-form label { font-size: 11px; color: #000; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-family: "Montserrat", sans-serif; } .clubband-cart-form input, .clubband-cart-form select, .clubband-cart-form textarea { padding: 14px 16px; background: #fff; border: 1px solid #000; /* Square corners for every field — override any theme input rounding. */ border-radius: 0 !important; color: #000; font-size: 15px; font-weight: 500; transition: all 0.2s; font-family: "Montserrat", sans-serif; width: 100%; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1.5; min-height: 52px; /* Fix consistently equal height */ } .clubband-cart-form input:focus, .clubband-cart-form select:focus, .clubband-cart-form textarea:focus { outline: none; background: #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 1); border-color: #000; } .clubband-cart-form input::placeholder, .clubband-cart-form textarea::placeholder { color: #000; opacity: 0.4; font-weight: 500; } .clubband-cart-form select { cursor: pointer; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 10px; padding-right: 40px; } .clubband-cart-form select option { background: #fff; color: #000; padding: 10px; } .clubband-cart-form textarea { resize: vertical; min-height: 100px; } .clubband-cart-form .g-recaptcha { margin: 16px 0; } .clubband-cart-submit-btn { width: 100%; padding: 18px 24px; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; font-size: 22px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; margin-top: 16px; font-family: "Bebas Neue", sans-serif; } .clubband-cart-submit-btn:hover { background: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); } .clubband-cart-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---- Fallback Toast ---- */ .clubband-toast { position: fixed; top: 20px; right: 20px; padding: 16px 24px; border-radius: 0; font-size: 14px; font-weight: 600; z-index: 1000000; transform: translateX(120%); transition: transform 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); font-family: "Montserrat", sans-serif; color: #000; background: #fff; border: 2px solid #000; } .clubband-toast-show { transform: translateX(0); } .clubband-toast-success { border-left: 10px solid #000; } .clubband-toast-error { border-left: 10px solid #000; /* Use black for error too, maybe distinguishing text? */ } /* ======================================== Dynamic Pricing Cards ======================================== */ /* ---- Pricing Wrapper ---- */ .clubband-pricing-wrapper { max-width: 1280px; margin: 0 auto; padding: 40px 20px; } /* ---- Tab Navigation ---- */ .clubband-pricing-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 50px; background: transparent; padding: 0; max-width: 800px; margin-left: auto; margin-right: auto; border-bottom: 1px solid #000; } .clubband-pricing-tab { flex: 1; padding: 16px 24px; background: transparent; color: #000; border: 1px solid transparent; border-bottom: none; border-radius: 0; font-size: 20px; font-weight: normal; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; font-family: "Bebas Neue", sans-serif; position: relative; opacity: 0.6; } .clubband-pricing-tab:hover { color: #000; opacity: 1; } .clubband-pricing-tab.clubband-pricing-tab-active { background: #fff; color: #000; border: 1px solid #000; border-bottom: 1px solid #fff; margin-bottom: -1px; opacity: 1; } /* ---- Loading State ---- */ .clubband-pricing-loading { text-align: center; padding: 80px 20px; color: #000; font-family: "Montserrat", sans-serif; } .clubband-pricing-spinner { width: 50px; height: 50px; border: 4px solid #eee; border-top-color: #000; border-radius: 50%; margin: 0 auto 20px; animation: clubband-spin 0.8s linear infinite; } @keyframes clubband-spin { to { transform: rotate(360deg); } } .clubband-pricing-loading p { font-size: 16px; margin: 0; } /* ---- Error State ---- */ .clubband-pricing-error { text-align: center; padding: 60px 20px; color: #000; background: #fff; border-radius: 0; border: 1px solid #000; font-family: "Montserrat", sans-serif; } .clubband-pricing-error p { margin: 0; font-size: 16px; font-weight: 700; } /* ---- Empty State ---- */ .clubband-pricing-empty { text-align: center; padding: 60px; color: #000; font-size: 16px; font-family: "Montserrat", sans-serif; } /* ---- Pricing Cards Grid ---- */ .clubband-pricing-cards { display: grid; /* Column count will be overridden inline by PHP/JS if needed, defaulting to 4 */ grid-template-columns: repeat(var(--pricing-columns, 4), 1fr); gap: 40px; } /* ---- Individual Card ---- */ .clubband-pricing-card { background: #fff; border: 1px solid #000; border-radius: 0; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; } .clubband-pricing-card:hover { transform: translateY(-8px); border-color: #000; box-shadow: 10px 10px 0 rgba(0, 0, 0, 1); } /* Card Image */ .clubband-pricing-card-image { width: 100%; height: 260px; overflow: hidden; position: relative; filter: grayscale(100%); transition: filter 0.4s; border-bottom: 1px solid #000; } .clubband-pricing-card:hover .clubband-pricing-card-image { filter: grayscale(0%); } .clubband-pricing-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); } .clubband-pricing-card:hover .clubband-pricing-card-image img { transform: scale(1.05); } /* Card Body */ .clubband-pricing-card-body { padding: 32px; display: flex; flex-direction: column; flex: 1; background: #fff; } .clubband-pricing-card-name { margin: 0 0 16px 0; font-size: 32px; font-weight: 600; color: #000 !important; line-height: 1.1; font-family: "Bebas Neue", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; } .clubband-pricing-card-desc { font-size: 15px; color: #000; line-height: 1.6; margin: 0 0 32px 0; flex: 1; font-family: "Montserrat", sans-serif; text-align: center; font-weight: 500; } /* Card Footer */ .clubband-pricing-card-footer { display: flex; flex-direction: column; align-items: center; padding: 0; /* Fix: remove negative margins to ensure full width placement naturally */ margin: 20px -32px -32px -32px; border-top: none; margin-top: auto; } .clubband-pricing-card-price { font-size: 42px; font-weight: normal; color: #000; margin-bottom: 24px; letter-spacing: 1px; font-family: "Bebas Neue", sans-serif; } /* ---- Responsive ---- */ @media (max-width: 768px) { #clubband-cart-panel { width: 100%; max-width: 100vw; } .clubband-cart-form .clubband-form-row { flex-direction: column; gap: 12px; } .clubband-cart-item { flex-direction: row; gap: 12px; align-items: center; } .clubband-cart-item-info { gap: 4px; } .clubband-cart-item-name { font-size: 18px; } .clubband-cart-item-price { font-size: 18px; } .clubband-cart-item-actions { align-self: center; } .clubband-pricing-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .clubband-pricing-tabs { max-width: 100%; gap: 0; } .clubband-pricing-tab { padding: 12px; font-size: 16px; } .clubband-pricing-card-image { height: 200px; } .clubband-pricing-card-price { font-size: 36px; } } @media (max-width: 480px) { .clubband-cart-header { padding: 20px; } .clubband-cart-body { padding: 20px; } .clubband-cart-header h3 { font-size: 24px; } .clubband-pricing-cards { grid-template-columns: 1fr; } .clubband-pricing-card-name { font-size: 28px; } }