/* CT Check Delivery – Frontend Styles */ .ct-cd-widget { position: relative; display: inline-block; max-width: 100%; box-sizing: border-box; } .ct-cd-widget *, .ct-cd-widget *::before, .ct-cd-widget *::after { box-sizing: border-box; } /* ---------- Trigger Button (header widget) ---------- */ .ct-cd-trigger-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6e6e6; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; max-width: 100%; } .ct-cd-trigger-btn:hover { background: #fafafa; } .ct-cd-pin-icon { display: inline-flex; color: #e91e63; flex-shrink: 0; } .ct-cd-btn-text { display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; text-align: left; } .ct-cd-btn-label { font-size: 11px; color: #767676; white-space: nowrap; } .ct-cd-btn-value { font-size: 14px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .ct-cd-chevron { display: inline-flex; color: #999; flex-shrink: 0; transition: transform .15s ease; } .ct-cd-widget.is-open .ct-cd-chevron { transform: rotate(180deg); } /* ---------- Product Widget (single product / service page) ---------- */ .ct-cd-product-box { display: flex; align-items: center; gap: 10px; background: #f8f8f8; border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin: 14px 0; flex-wrap: wrap; } .ct-cd-product-box.ct-cd-unavailable { background: #fdecea; border-color: #f5c6c2; } .ct-cd-product-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .ct-cd-product-line { font-size: 14px; color: #1a1a1a; font-weight: 600; } .ct-cd-unavailable-text { color: #c62828; font-weight: 500; } .ct-cd-product-sub { font-size: 13px; color: #4caf50; margin-top: 2px; } .ct-cd-product-box .ct-cd-trigger-btn.ct-cd-change-link { background: transparent; border: none; color: #e91e63; font-weight: 600; font-size: 13px; padding: 4px 8px; text-decoration: underline; } .ct-cd-product-box .ct-cd-trigger-btn.ct-cd-change-link:hover { background: rgba(0,0,0,.03); } /* ---------- Panel: shared popup/dropdown shell ---------- * Appended straight to by frontend.js (see initPanel()) rather than * left nested inside the header widget's own markup — a header with any * transform/overflow/filter on an ancestor breaks position:fixed for a * nested descendant (it becomes fixed to that ancestor instead of the * viewport), which is what caused the panel to overlap/misplace itself * next to the theme's own search bar. Being a direct child of with * no such ancestor in between avoids that entirely. */ .ct-cd-panel { position: fixed; z-index: 999999; display: none; } .ct-cd-panel.is-open { display: block; } /* The panel is appended straight to by frontend.js (see comment above), so it never inherits the ".ct-cd-widget *" box-sizing reset. Themes that set box-sizing / padding globally on button & input (e.g. Bootstrap-based themes) then leak into it, which is what was hiding the close icon and overlapping the search placeholder. Reset + re-scope everything here so the panel is self-contained regardless of theme CSS. */ .ct-cd-panel, .ct-cd-panel *, .ct-cd-panel *::before, .ct-cd-panel *::after { box-sizing: border-box; } .ct-cd-panel.ct-cd-mode-popup { inset: 0; } .ct-cd-mode-popup .ct-cd-panel-overlay { position: fixed; inset: 0; background: rgba(20,20,20,.55); } .ct-cd-mode-popup .ct-cd-panel-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 520px; max-width: 92vw; max-height: 82vh; } .ct-cd-mode-dropdown .ct-cd-panel-overlay { display: none; } /* top/left are set inline by frontend.js (openPanel()), computed from the trigger button's live getBoundingClientRect() each time it opens, since this panel is no longer a positioned descendant of the button to anchor against via plain CSS. */ .ct-cd-mode-dropdown .ct-cd-panel-box { position: relative; width: 360px; max-width: 90vw; max-height: 420px; box-shadow: 0 12px 32px rgba(0,0,0,.16); } .ct-cd-panel-box { background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .ct-cd-panel-head { display: flex; align-items: flex-start; gap: 10px; padding: 20px 20px 12px; } .ct-cd-panel-head-icon { width: 34px; height: 34px; border-radius: 50%; background: #fde8ee; color: #e91e63; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ct-cd-panel-head-text { flex: 1; min-width: 0; } .ct-cd-panel-head-text h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; } .ct-cd-panel-head-text p { margin: 2px 0 0; font-size: 12.5px; color: #767676; } .ct-cd-panel-close { background: #f2f2f2; border: none; border-radius: 50%; width: 28px; height: 28px; padding: 0; margin: 0; font: inherit; line-height: 1; appearance: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; flex-shrink: 0; } .ct-cd-panel-close:hover { background: #e6e6e6; } .ct-cd-panel-close svg { display: block; flex-shrink: 0; pointer-events: none; } .ct-cd-panel-search { position: relative; margin: 0 20px 12px; display: flex; align-items: center; } .ct-cd-panel-search svg { position: absolute; left: 12px; color: #999; pointer-events: none; } .ct-cd-search-input { width: 100%; margin: 0; padding: 10px 36px; border: 1px solid #e6e6e6; border-radius: 10px; font-size: 14px; font-family: inherit; line-height: normal; outline: none; appearance: none; transition: border-color .15s ease; } .ct-cd-search-input:focus { border-color: #e91e63; } .ct-cd-search-spinner { position: absolute; right: 12px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #e6e6e6; border-top-color: #e91e63; display: none; animation: ct-cd-spin .7s linear infinite; } .ct-cd-panel.is-searching .ct-cd-search-spinner { display: block; } @keyframes ct-cd-spin { to { transform: rotate(360deg); } } .ct-cd-panel-body { padding: 4px 20px 20px; overflow-y: auto; } .ct-cd-section-label { font-size: 11px; letter-spacing: .04em; font-weight: 700; color: #999; margin: 14px 0 10px; text-transform: uppercase; } .ct-cd-popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 480px) { .ct-cd-popular-grid { grid-template-columns: repeat(2, 1fr); } } .ct-cd-popular-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #f7f7f7; border: 1.5px solid #e6e6e6; border-radius: 10px; padding: 12px 6px; cursor: pointer; text-align: center; transition: border-color .15s ease, background-color .15s ease; } .ct-cd-popular-card:hover { border-color: #ccc; } .ct-cd-popular-card.is-selected { border-color: #e91e63; background: #fff5f8; } .ct-cd-popular-card .ct-cd-card-icon { width: 30px; height: 30px; border-radius: 50%; background: #fde8ee; color: #e91e63; display: flex; align-items: center; justify-content: center; } .ct-cd-popular-card.is-selected .ct-cd-card-icon { background: #e91e63; color: #fff; } .ct-cd-popular-card .ct-cd-card-name { font-size: 13px; font-weight: 600; color: #333; } .ct-cd-check-badge { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #e91e63; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .ct-cd-all-list { display: flex; flex-direction: column; } .ct-cd-list-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px; border-bottom: 1px solid #f2f2f2; cursor: pointer; font-size: 14px; color: #333; } .ct-cd-list-item:hover { background: #fafafa; } .ct-cd-list-item.is-selected { color: #e91e63; font-weight: 700; } .ct-cd-list-item .ct-cd-item-meta { font-size: 12px; color: #999; } .ct-cd-list-item .ct-cd-item-unavailable { color: #c62828; font-size: 12px; } .ct-cd-no-results { text-align: center; color: #999; font-size: 13px; padding: 24px 0; } .ct-cd-loading { display: none; justify-content: center; gap: 6px; padding: 24px 0; } .ct-cd-panel.is-loading .ct-cd-loading { display: flex; } .ct-cd-panel.is-loading .ct-cd-popular-section, .ct-cd-panel.is-loading .ct-cd-all-section { display: none; } .ct-cd-loading span { width: 8px; height: 8px; border-radius: 50%; background: #e91e63; opacity: .3; animation: ct-cd-bounce 1s infinite ease-in-out; } .ct-cd-loading span:nth-child(2) { animation-delay: .15s; } .ct-cd-loading span:nth-child(3) { animation-delay: .3s; } @keyframes ct-cd-bounce { 0%,80%,100% { opacity: .3; transform: scale(.8);} 40% { opacity: 1; transform: scale(1);} } /* ---------- WooCommerce checkout summary ---------- */ .ct-cd-checkout-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f8f8f8; border: 1px solid #eee; border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 14px; } .ct-cd-checkout-change-btn { margin-left: auto; background: none; border: none; color: #e91e63; text-decoration: underline; cursor: pointer; font-size: 13px; } .ct-cd-unavailable-notice { color: #c62828; font-weight: 600; } body.ct-cd-noscroll { overflow: hidden; }