/* * GLS DK — Checkout selector and modal. * * Scoped to .wc-gls-dk-* classes so we don't collide with theme styles. * Keep this restrained — themes are unpredictable; we just want the * modal and the shop list to be readable and tappable on mobile. */ #wc-gls-dk-selector .wc-gls-dk-current { background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px; padding: 0.6em 0.8em; margin-bottom: 0.5em; line-height: 1.4; } #wc-gls-dk-selector .button { margin: 0; } /* Floating selector on Block Checkout. * * Block Checkout's React tree reconciles its descendants, so we can't * inject inline between the shipping rates and the next block — anything * we put there gets ejected on re-render. Instead we attach the selector * directly to and pin it as a fixed-position card. is * stable; React never reconciles it. * * Visually this lives in the bottom-right of the viewport, with a clear * label so it's obviously connected to the shipping selection above. */ .wc-gls-dk-floating { position: fixed; bottom: 24px; right: 24px; z-index: 99998; width: min(360px, calc(100vw - 32px)); padding: 16px 18px; background: #ffffff; border: 1px solid #d6d6d8; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); font-size: 14px; line-height: 1.4; } .wc-gls-dk-floating::before { content: ""; display: block; width: 36px; height: 3px; background: #0b3d91; border-radius: 2px; margin-bottom: 10px; } .wc-gls-dk-floating-label { font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; color: #1d2327; } .wc-gls-dk-floating .wc-gls-dk-current { background: #f6f7f7; border: 1px solid #e2e4e7; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; font-size: 0.92rem; } .wc-gls-dk-floating .button, .wc-gls-dk-floating .wc-gls-dk-open { display: block; width: 100%; padding: 10px 14px; background: #0b3d91; color: #ffffff; border: 0; border-radius: 4px; cursor: pointer; font-weight: 600; text-align: center; } .wc-gls-dk-floating .wc-gls-dk-open:hover { background: #08306e; } @media (max-width: 600px) { .wc-gls-dk-floating { bottom: 12px; right: 12px; left: 12px; width: auto; } } /* Modal */ #wc-gls-dk-modal { position: fixed; inset: 0; z-index: 999999; display: none; align-items: stretch; justify-content: center; } #wc-gls-dk-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .wc-gls-dk-modal-inner { position: relative; margin: auto; background: #fff; width: min(960px, 96vw); max-height: 92vh; overflow: auto; padding: 24px; border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); z-index: 1; } .wc-gls-dk-modal-inner h2 { margin: 0 0 16px; font-size: 1.25rem; } .wc-gls-dk-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 10px; } #wc-gls-dk-search-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } #wc-gls-dk-search-form label { font-weight: 600; } #wc-gls-dk-search-form input[type="text"] { width: 130px; padding: 6px 10px; } .wc-gls-dk-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 380px; } @media (max-width: 700px) { .wc-gls-dk-body { grid-template-columns: 1fr; } } #wc-gls-dk-map { width: 100%; min-height: 380px; border-radius: 6px; background: #eef0f2; } #wc-gls-dk-shop-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; } .wc-gls-dk-shop { padding: 12px; border: 1px solid #e2e4e7; border-radius: 6px; margin-bottom: 10px; transition: background 200ms ease, border-color 200ms ease; } .wc-gls-dk-shop.is-selected { border-color: #2271b1; background: #f0f6fc; } .wc-gls-dk-shop.is-hover { background: #fffceb; } .wc-gls-dk-shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .wc-gls-dk-dist { color: #50575e; font-size: 0.85rem; } .wc-gls-dk-shop-addr { margin-bottom: 8px; color: #2c3338; } .wc-gls-dk-hours summary { cursor: pointer; color: #2271b1; margin-bottom: 6px; } .wc-gls-dk-hours dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: 0.9rem; } .wc-gls-dk-hours dt { font-weight: 600; } .wc-gls-dk-shop-select { margin-top: 6px; } #wc-gls-dk-status { margin: 8px 0 0; color: #50575e; min-height: 1.2em; }