body { background-color: var(--page-bg) !important; color: var(--text-color) !important; position: relative; } #top-site-alert { position: fixed; top: -100px; left: 0; width: 100%; padding: 15px 20px; background: #ef4444; color: #fff; text-align: center; font-weight: 500; font-size: 1rem; z-index: 2147483647 !important; transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); } #top-site-alert.show { top: 0; } .site-container { max-width: 1140px; margin: 0 auto; padding: 0 var(--global-padding) 50px var(--global-padding) !important; min-height: calc(100vh - 120px); } .banner-slider-wrapper { position: relative; width: 100%; margin-top: 10px; margin-bottom: 25px; border-radius: var(--slider-radius); overflow: hidden; } .swipe-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .swipe-container::-webkit-scrollbar { display: none; } .banner-slide { flex: 0 0 100%; scroll-snap-align: start; width: 100%; } .banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--slider-radius); pointer-events: none; } .unified-grid { margin-top: 25px; display: grid !important; grid-template-columns: repeat(var(--grid-cols-pc), minmax(0, 1fr)) !important; gap: var(--grid-gap) !important; padding-bottom: 40px; align-items: start; } .unified-grid.category-folders-grid { grid-template-columns: repeat(var(--category-folder-grid-cols-pc, var(--grid-cols-pc)), minmax(0, 1fr)) !important; } .unified-grid.category-products-grid { grid-template-columns: repeat(var(--category-product-grid-cols-pc, var(--grid-cols-pc)), minmax(0, 1fr)) !important; } .royal-card { display: flex; flex-direction: column; text-decoration: none; background-color: transparent !important; border: none !important; height: 100%; transition: transform 0.22s ease, filter 0.22s ease; border-radius: var(--card-radius) !important; overflow: hidden; cursor: pointer; gap: 5px; min-width: 0; } @media (hover: hover) and (pointer: fine) { .royal-card:hover { transform: translateY(-4px); filter: saturate(1.04); } } .royal-card:active { transform: scale(0.97); } .royal-img-wrapper { position: relative; width: 100%; aspect-ratio: var(--category-aspect-ratio, 1 / 1) !important; border-radius: var(--card-radius, 8px) !important; overflow: hidden; flex-shrink: 0; background-color: transparent !important; border: none !important; box-shadow: none !important; isolation: isolate; } .royal-img-wrapper img { width: 100%; height: 100%; object-fit: var(--category-object-fit, cover) !important; display: block; } [data-theme="dark"] .royal-img-wrapper, body.dark-mode .royal-img-wrapper, body.dark-theme .royal-img-wrapper, body.theme-dark .royal-img-wrapper { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } .text-placeholder-bg { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, var(--auth-color), #2563eb) !important; color: #ffffff !important; font-weight: 700 !important; font-size: 0.95rem !important; text-align: center !important; padding: 12px !important; box-sizing: border-box !important; line-height: 1.4; } [data-theme="dark"] .text-placeholder-bg { background: linear-gradient(135deg, #111827, #1f2937) !important; color: #e5e7eb !important; border: 1px solid var(--border-color) !important; } .fav-badge-img { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: none; align-items: center; justify-content: center; color: #ef4444; font-size: 1.1rem; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.15); pointer-events: none; } .fav-badge-img.active { display: flex; } .unavailable-ribbon { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 11; background: rgba(239, 68, 68, 0.94); color: #ffffff; border-radius: 8px; padding: 7px 8px; font-size: 0.78rem; font-weight: 800; text-align: center; box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25); } .royal-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px 2px 10px 2px; gap: 4px; text-align: center; } .royal-title-text { color: var(--prod-title-color) !important; margin: 0; font-weight: 600 !important; font-size: 0.95rem; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; width: 100%; } .cat-title-text { color: var(--cat-title-color) !important; margin: 0; font-weight: 600 !important; font-size: 0.95rem; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; width: 100%; } .royal-price-text { color: var(--prod-price-color) !important; margin: 0; font-weight: 600 !important; font-size: 0.9rem; width: 100%; text-align: center !important; } .search-container { margin-top: 22px; width: 100%; } .search-input-cat { background-color: var(--search-bg) !important; color: var(--text-color) !important; border: 1px solid transparent !important; padding: 15px 25px !important; font-size: 1rem !important; font-family: 'Tajawal', sans-serif !important; font-weight: 400 !important; border-radius: 50px !important; width: 100%; outline: none !important; box-shadow: none !important; -webkit-appearance: none; transition: 0.3s ease; } .search-input-cat::placeholder { color: #9a9a9a !important; font-family: 'Tajawal', sans-serif !important; font-weight: 400 !important; opacity: 1; } [data-theme="dark"] .search-input-cat { border: 1px solid #1a2f34 !important; } [data-theme="dark"] .search-input-cat::placeholder { color: #888888 !important; font-weight: 400 !important; } .empty-state-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: #94a3b8; grid-column: 1 / -1; } .empty-state-box i { font-size: 4rem; opacity: 0.4; margin-bottom: 15px; } .empty-state-box h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-color); margin-bottom: 5px; } .empty-state-box p { font-size: 0.95rem; font-weight: 500; margin: 0; } .custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35) !important; z-index: 99999 !important; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .custom-modal-overlay.show-modal { opacity: 1; visibility: visible; } .custom-modal-content { background-color: var(--modal-bg, var(--page-bg, #ffffff)); border: 1px solid var(--border-color, #e2e8f0); border-radius: var(--modal-border-radius) !important; width: calc(100% - (var(--modal-side-margin) * 2)) !important; max-width: 420px !important; margin: 0 auto !important; box-sizing: border-box; padding: 25px 20px; position: relative; box-shadow: 0 15px 45px rgba(0,0,0,0.18); transform: translateY(30px) scale(0.95); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .custom-modal-overlay.show-modal .custom-modal-content { transform: translateY(0) scale(1); } .success-modal-content { text-align: center; padding: 25px 20px !important; } .success-icon { font-size: 4rem; color: #10b981; margin-bottom: 15px; } .success-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; color: var(--text-color); } .success-subtitle { font-size: 0.9rem; color: var(--modal-muted-text, #64748b); margin-bottom: 25px; } .success-info-box { background: var(--box-bg, #f8fafc); border: 1px dashed var(--border-color, #cbd5e1); border-radius: 12px; padding: 15px; margin-bottom: 25px; } .success-info-label { font-size: 0.8rem; color: var(--modal-muted-text, #64748b); margin-bottom: 6px; } .success-info-value { font-size: 1.15rem; font-weight: 700; color: var(--text-color); direction: ltr; } .modal-header-flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; direction: rtl; } .modal-title-flex { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 500; color: var(--text-color, #1e293b); margin: 0; text-align: right; } .modal-price-badge { background-color: #0f172a; color: #ffffff; padding: 6px 14px; border-radius: 8px; font-weight: 500; font-size: 0.85rem; direction: rtl; text-align: right; } .modal-qty-total-row { display: flex; gap: 10px; margin-bottom: 5px; flex-direction: row; } .modal-box-pill, .modal-box-pill-field { flex: 1; border: 1px solid var(--border-color) !important; border-radius: 50px !important; padding: 12px 15px; text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative; margin-top: 15px; background-color: var(--modal-field-bg, transparent); transition: all 0.3s ease; min-height: 55px; } .modal-box-pill:focus-within, .modal-box-pill-field:focus-within { border-color: #3b82f6 !important; box-shadow: 0 0 5px rgba(59, 130, 246, 0.4); } .modal-box-pill input, .modal-box-pill select, .modal-box-pill-field input { width: 100%; background: transparent; border: none; text-align: center; font-size: 14px !important; font-weight: 500 !important; color: var(--modal-field-text, #666666) !important; outline: none; } .modal-box-pill select option { background-color: var(--page-bg); color: #666666; } .box-label { box-shadow: none; font-size: 0.78rem; font-weight: 500; color: var(--modal-muted-text, #64748b); position: absolute; top: 0; right: 25px; transform: translateY(-50%); background: var(--page-bg); padding: 0 8px; z-index: 2; } .modal-main-input-new { width: 100%; background: transparent !important; color: var(--modal-field-text, #666666) !important; border: none !important; padding: 3px 0; font-size: 14px !important; font-weight: 500 !important; outline: none; text-align: center; } .modal-btns-flex { display: flex; gap: 10px; margin: 20px -4px 0; flex-direction: row; } .modal-btn-buy { background: var(--auth-color) !important; color: #ffffff; border: none; border-radius: 50px !important; height: 59px; padding: 0 18px; font-size: 0.95rem; font-family: 'Tajawal', sans-serif !important; font-weight: 700; cursor: pointer; flex: 1; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .modal-btn-buy:hover { opacity: 0.85; } .modal-btn-buy:disabled { opacity: 0.7; cursor: not-allowed; } .spinner-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; display: none; } @keyframes spin { to { transform: rotate(360deg); } } .modal-btn-cancel { background: transparent; color: #ef4444; border: 1px solid #ef4444; border-radius: 50px !important; height: 59px; padding: 0 18px; font-size: 0.95rem; font-family: 'Tajawal', sans-serif !important; font-weight: 600; cursor: pointer; flex: 1; transition: 0.2s; text-decoration: none; display: flex; align-items: center; justify-content: center; } .modal-btn-cancel:hover { background: rgba(239, 68, 68, 0.05) !important; } .modal-btn-cancel:active { background: rgba(239, 68, 68, 0.15) !important; transform: scale(0.95); box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); } .modal-desc-box { margin-top: 20px; padding: 10px; font-size: 0.85rem; color: var(--modal-muted-text, #64748b); text-align: right !important; line-height: 1.6; font-weight: 500; white-space: pre-wrap; word-wrap: break-word; border-right: 2px solid #3b82f6 !important; border-radius: 5px !important; max-height: 4.9em; overflow-y: auto; } [data-theme="dark"] .custom-modal-content { background-color: var(--modal-bg) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } [data-theme="dark"] .modal-box-pill, [data-theme="dark"] .modal-box-pill-field, [data-theme="dark"] .success-info-box { background-color: var(--modal-field-bg) !important; border-color: var(--border-color) !important; color: var(--modal-field-text) !important; } [data-theme="dark"] .custom-modal-overlay { background: rgba(0, 0, 0, 0.65) !important; } [data-theme="dark"] .success-info-box, [data-theme="dark"] .modal-box-pill, [data-theme="dark"] .modal-box-pill-field { background-color: var(--modal-field-bg) !important; border-color: var(--border-color) !important; color: var(--modal-field-text) !important; } [data-theme="dark"] .box-label { background: var(--modal-bg) !important; color: var(--modal-muted-text) !important; } [data-theme="dark"] .modal-desc-box { color: var(--modal-muted-text) !important; border-right-color: var(--main-color) !important; } [data-theme="dark"] .search-input-cat:focus { background-color: var(--modal-bg) !important; border-color: var(--main-color) !important; } [data-theme="dark"] .custom-modal-content, body.dark-mode .custom-modal-content, body.dark-theme .custom-modal-content, body.theme-dark .custom-modal-content { background-color: var(--modal-bg, var(--card-bg, var(--box-bg, #111827))) !important; border-color: var(--border-color, #334155) !important; color: var(--text-color, #f8fafc) !important; } [data-theme="dark"] .modal-box-pill, [data-theme="dark"] .modal-box-pill-field, [data-theme="dark"] .success-info-box, body.dark-mode .modal-box-pill, body.dark-mode .modal-box-pill-field, body.dark-mode .success-info-box { background-color: var(--modal-bg, var(--card-bg, var(--box-bg, #111827))) !important; border-color: var(--border-color, #334155) !important; } [data-theme="dark"] .box-label, body.dark-mode .box-label { background: var(--card-bg, var(--box-bg, #111827)) !important; } @media (max-width: 899.98px) { .unified-grid { grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr)) !important; } .unified-grid.category-folders-grid { grid-template-columns: repeat(var(--category-folder-grid-cols-mobile, var(--grid-cols-mobile)), minmax(0, 1fr)) !important; } .unified-grid.category-products-grid { grid-template-columns: repeat(var(--category-product-grid-cols-mobile, var(--grid-cols-mobile)), minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .royal-title-text, .cat-title-text { font-size: 0.75rem !important; font-weight: 600 !important; } .royal-price-text { font-size: 0.8rem !important; } } .custom-modal-content, .custom-modal-content input, .custom-modal-content select, .custom-modal-content textarea, .custom-modal-content button, .custom-modal-content a, .modal-title-flex, .modal-price-badge, .box-label, .modal-desc-box { font-family: 'Tajawal', sans-serif !important; } .custom-modal-content .modal-box-pill, .custom-modal-content .modal-box-pill-field { background-color: var(--modal-field-bg, #e9ecef) !important; border: none !important; border-radius: 50px !important; min-height: 56px; padding: 13px 16px; box-shadow: none !important; transition: background-color .25s ease, box-shadow .25s ease, transform .2s ease; } .custom-modal-content .modal-box-pill:focus-within, .custom-modal-content .modal-box-pill-field:focus-within { background-color: color-mix(in srgb, var(--modal-field-bg, #e9ecef) 92%, var(--auth-color) 8%) !important; border: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-color) 12%, transparent) !important; transform: translateY(-1px); } .custom-modal-content .modal-box-pill input, .custom-modal-content .modal-box-pill select, .custom-modal-content .modal-box-pill-field input, .custom-modal-content .modal-main-input-new { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--modal-field-text, #555f6d) !important; font-weight: 600 !important; outline: none !important; } .custom-modal-content .box-label { background: var(--modal-bg, var(--page-bg, #ffffff)) !important; color: var(--modal-muted-text, #64748b) !important; border-radius: 999px; padding: 1px 8px; } [data-theme="dark"] .custom-modal-content .modal-box-pill, [data-theme="dark"] .custom-modal-content .modal-box-pill-field, body.dark-mode .custom-modal-content .modal-box-pill, body.dark-mode .custom-modal-content .modal-box-pill-field, body.dark-theme .custom-modal-content .modal-box-pill, body.dark-theme .custom-modal-content .modal-box-pill-field, body.theme-dark .custom-modal-content .modal-box-pill, body.theme-dark .custom-modal-content .modal-box-pill-field { background-color: var(--modal-field-bg, #202a38) !important; border: none !important; box-shadow: none !important; } [data-theme="dark"] .custom-modal-content .box-label, body.dark-mode .custom-modal-content .box-label, body.dark-theme .custom-modal-content .box-label, body.theme-dark .custom-modal-content .box-label { background: var(--modal-bg, #111827) !important; } #modal-dynamic-content > .modal-qty-total-row { margin-bottom: 5px !important; } #modal-dynamic-content > .modal-box-pill-field { margin-top: 25px !important; } #modal-dynamic-content > .modal-box-pill-field + .modal-box-pill-field { margin-top: 21px !important; } @media (max-width: 480px) { #modal-dynamic-content > .modal-box-pill-field { margin-top: 22px !important; } .modal-btn-buy, .modal-btn-cancel { height: 57px !important; } } .ios-device .custom-modal-content .modal-btn-buy, .ios-device .custom-modal-content .modal-btn-cancel { height: 63px !important; min-height: 63px !important; padding-top: 0 !important; padding-bottom: 0 !important; } @supports (-webkit-touch-callout: none) { .custom-modal-content .modal-btn-buy, .custom-modal-content .modal-btn-cancel { height: 63px !important; min-height: 63px !important; } } #custom-purchase-modal .modal-btns-flex { gap: 12px; } #custom-purchase-modal .modal-btn-buy, #custom-purchase-modal .modal-btn-cancel { position: relative; overflow: hidden; min-height: 59px; border-radius: 50px !important; font-family: 'Tajawal', sans-serif !important; font-weight: 700 !important; letter-spacing: 0; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: transform .16s ease, background .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease, filter .20s ease !important; } #custom-purchase-modal .modal-btn-buy { background: linear-gradient( 135deg, color-mix(in srgb, var(--auth-color) 88%, #ffffff 12%), var(--auth-color) ) !important; border: 1px solid color-mix(in srgb, var(--auth-color) 82%, transparent) !important; color: #ffffff !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--auth-color) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.16); } #custom-purchase-modal .modal-btn-buy:hover { opacity: 1 !important; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 11px 23px color-mix(in srgb, var(--auth-color) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } #custom-purchase-modal .modal-btn-buy:active { transform: translateY(1px) scale(.97) !important; filter: brightness(.94); box-shadow: 0 5px 12px color-mix(in srgb, var(--auth-color) 20%, transparent), inset 0 2px 5px rgba(0,0,0,.10); } #custom-purchase-modal .modal-btn-cancel { background: color-mix(in srgb, #ef4444 5%, transparent) !important; color: #ef4444 !important; border: 1.5px solid color-mix(in srgb, #ef4444 72%, transparent) !important; box-shadow: 0 7px 16px rgba(239,68,68,.08), inset 0 1px 0 rgba(255,255,255,.36); } #custom-purchase-modal .modal-btn-cancel:hover { background: color-mix(in srgb, #ef4444 10%, transparent) !important; color: #dc2626 !important; border-color: #ef4444 !important; transform: translateY(-1px); box-shadow: 0 9px 18px rgba(239,68,68,.13); } #custom-purchase-modal .modal-btn-cancel:active, #custom-purchase-modal .modal-btn-cancel.is-pressed { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; transform: translateY(1px) scale(.96) !important; filter: brightness(.98); box-shadow: 0 6px 15px rgba(239,68,68,.30), inset 0 2px 5px rgba(127,29,29,.16) !important; } #custom-purchase-modal .modal-btn-cancel.is-pressed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at center, rgba(255,255,255,.22), transparent 62%); pointer-events: none; } .ios-device #custom-purchase-modal .modal-btn-buy, .ios-device #custom-purchase-modal .modal-btn-cancel { height: 64px !important; min-height: 64px !important; font-size: .97rem !important; } @supports (-webkit-touch-callout: none) { #custom-purchase-modal .modal-btn-buy, #custom-purchase-modal .modal-btn-cancel { height: 64px !important; min-height: 64px !important; } } .banner-slider-wrapper.category-banner-custom { width: min(100%, var(--category-banner-width, 1600px)); height: auto; aspect-ratio: var(--category-banner-width, 1600) / var(--category-banner-height, 500); border-radius: var(--category-banner-radius, var(--slider-radius, 10px)); margin-left: auto; margin-right: auto; } .banner-slider-wrapper.category-banner-custom .swipe-container, .banner-slider-wrapper.category-banner-custom .banner-slide, .banner-slider-wrapper.category-banner-custom .banner-slide > a { height: 100%; } .banner-slider-wrapper.category-banner-custom .banner-slide > a { display: block; } .banner-slider-wrapper.category-banner-custom .main-banner { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; } .royal-card.service-unavailable-card { cursor: not-allowed !important; } .royal-card.service-unavailable-card .royal-img-wrapper { position: relative !important; overflow: hidden !important; isolation: isolate !important; } .royal-card.service-unavailable-card .royal-img-wrapper::before, .royal-card.service-unavailable-card .royal-img-wrapper::after { display: none !important; content: none !important; } .royal-card.service-unavailable-card .royal-img-wrapper img, .royal-card.service-unavailable-card .text-placeholder-bg { filter: none !important; opacity: 1 !important; } .royal-card.service-unavailable-card .unavailable-ribbon { position: absolute !important; top: 17px !important; right: -31px !important; left: auto !important; bottom: auto !important; z-index: 20 !important; display: block !important; width: 150px !important; min-height: 0 !important; padding: 5px 0 6px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(135deg, #f43f5e 0%, #e11d48 48%, #9f1239 100%) !important; color: #fff !important; font-size: .58rem !important; font-weight: 900 !important; line-height: 1.1 !important; text-align: center !important; box-shadow: 0 5px 12px rgba(159, 18, 57, .22) !important; transform: rotate(45deg) !important; transform-origin: center !important; white-space: nowrap !important; pointer-events: none !important; } .royal-card.service-unavailable-card .unavailable-ribbon i { display: none !important; } :root { --kayan-fast-transition: .14s; --kayan-fast-animation: .28s; } #top-site-alert, .banner-slider-wrapper, .banner-slider-wrapper *, .swipe-container, .unified-grid, .unified-grid *, .royal-card, .royal-card *, .search-container, .search-container *, .custom-modal-overlay, .custom-modal-overlay *, .success-modal-content, .success-modal-content * { transition-duration: var(--kayan-fast-transition) !important; } .custom-modal-content, .custom-modal-overlay, .royal-card, .banner-slide, .spinner-loading, #top-site-alert { animation-duration: var(--kayan-fast-animation) !important; transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important; } a, button, .royal-card, .modal-btn-buy, .modal-btn-cancel, .search-input-cat, .fav-badge-img { touch-action: manipulation; } .custom-modal-content { transform: translateY(18px) scale(.98); } @media (prefers-reduced-motion: reduce) { #top-site-alert, .banner-slider-wrapper *, .unified-grid *, .royal-card *, .custom-modal-overlay *, .success-modal-content * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } #custom-purchase-modal.custom-modal-overlay { background: rgba(15, 23, 42, .48) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px !important; } #custom-purchase-modal .purchase-modal-content, #custom-purchase-modal .custom-modal-content { width: min(428px, calc(100vw - 32px)) !important; max-width: 428px !important; padding: 26px 24px 28px !important; border-radius: 7px !important; background: var(--modal-bg, #fff) !important; border: 1px solid color-mix(in srgb, var(--border-color, #dbe3ec) 82%, #fff 18%) !important; box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important; overflow: hidden; } #custom-purchase-modal .modal-header-flex { direction: rtl; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; margin: 0 0 42px !important; } #custom-purchase-modal .modal-title-flex { direction: rtl; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; min-width: 0; color: var(--text-color, #2b2f36) !important; font-size: 1.08rem !important; font-weight: 800 !important; line-height: 1.35 !important; text-align: right !important; } #custom-purchase-modal #modal-service-name { display: block; min-width: 0; max-width: 245px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #custom-purchase-modal #modal-heart-icon { flex: 0 0 auto; color: #e33445 !important; cursor: pointer; font-size: 1.42rem !important; line-height: 1 !important; filter: drop-shadow(0 5px 10px rgba(227, 52, 69, .16)); } #custom-purchase-modal .modal-price-stack { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 7px !important; flex: 0 0 auto; } #custom-purchase-modal .modal-price-badge { direction: ltr !important; background: #103351 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 8px 14px !important; min-width: 70px; text-align: center !important; font-size: .88rem !important; font-weight: 900 !important; line-height: 1 !important; box-shadow: 0 8px 18px rgba(16, 51, 81, .18) !important; } #custom-purchase-modal #modal-sec-price-badge { display: none; color: #f5a400 !important; font-size: .76rem !important; font-weight: 900 !important; margin: 0 !important; text-align: left !important; direction: rtl !important; } #custom-purchase-modal #modal-dynamic-content { display: flex; flex-direction: column; gap: 0; } #custom-purchase-modal .modal-qty-total-row { display: flex !important; gap: 12px !important; margin: 0 0 16px !important; flex-direction: row !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field { min-height: 61px !important; margin-top: 0 !important; padding: 0 20px !important; border-radius: 999px !important; background: var(--modal-bg, #fff) !important; border: 1px solid #d9e1ea !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } #custom-purchase-modal .modal-box-pill-field { width: 100%; margin-bottom: 12px !important; } #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within { border-color: #d9e1ea !important; box-shadow: none !important; transform: none !important; } #custom-purchase-modal .box-label { top: 0 !important; right: 34px !important; transform: translateY(-50%) !important; background: transparent !important; background-color: transparent !important; color: #9aa5b1 !important; padding: 0 8px !important; font-size: .80rem !important; font-weight: 900 !important; pointer-events: none; max-width: calc(100% - 68px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3 !important; line-height: 1.25 !important; border-radius: 999px; } #custom-purchase-modal .box-label::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 5px; transform: translateY(-50%); background: var(--modal-bg, #fff); z-index: -1; border-radius: 999px; } #custom-purchase-modal .modal-box-pill input, #custom-purchase-modal .modal-box-pill select, #custom-purchase-modal .modal-box-pill-field input, #custom-purchase-modal .modal-main-input-new { height: 100% !important; min-height: 54px !important; padding: 0 0 0 4px !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: var(--text-color, #243044) !important; font-size: .88rem !important; font-weight: 800 !important; text-align: center !important; caret-color: #0b3a5b !important; } #custom-purchase-modal .modal-box-pill input::placeholder, #custom-purchase-modal .modal-box-pill-field input::placeholder, #custom-purchase-modal .modal-main-input-new::placeholder { color: #9aa5b1 !important; opacity: 1 !important; font-size: .86rem !important; font-weight: 900 !important; text-align: center !important; } #custom-purchase-modal .modal-box-pill select { cursor: pointer; text-align-last: center; } #custom-purchase-modal #modal-price-display { direction: rtl !important; color: #103351 !important; } #custom-purchase-modal #manual-verification-box { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 0 18px !important; text-align: center !important; } #custom-purchase-modal .modal-verify-btn { direction: ltr !important; min-width: 240px !important; height: 39px !important; padding: 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; border-radius: 999px !important; border: 1px solid #b9cfbd !important; background: #fbfdfb !important; color: #8190a3 !important; font-family: 'Tajawal', sans-serif !important; font-size: .84rem !important; font-weight: 900 !important; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important; } #custom-purchase-modal .modal-verify-btn i { width: 42px; height: 100%; display: flex; align-items: center; justify-content: center; color: #008a14 !important; border-right: 1px solid #d4dfd6; margin-left: -8px; padding-right: 2px; } #custom-purchase-modal .modal-verify-btn:hover { border-color: #008a14 !important; color: #667085 !important; box-shadow: 0 10px 22px rgba(0, 128, 20, .10) !important; } #custom-purchase-modal #verify-status-msg { min-height: 20px; margin-top: 10px; color: var(--modal-muted-text, #64748b); font-size: .82rem; font-weight: 900; } #custom-purchase-modal .modal-btns-flex { display: flex !important; flex-direction: row-reverse !important; gap: 18px !important; margin: 18px 0 0 !important; } #custom-purchase-modal .modal-btn-buy, #custom-purchase-modal .modal-btn-cancel { height: 56px !important; min-height: 56px !important; border-radius: 999px !important; font-size: .95rem !important; font-weight: 900 !important; box-shadow: none !important; } #custom-purchase-modal .modal-btn-buy { background: #007a08 !important; border: 1px solid #007a08 !important; color: #fff !important; } #custom-purchase-modal .modal-btn-buy:hover { background: #006b07 !important; border-color: #006b07 !important; transform: translateY(-1px); } #custom-purchase-modal .modal-btn-cancel { background: transparent !important; color: #ef3340 !important; border: 1.5px solid #ef3340 !important; } #custom-purchase-modal .modal-btn-cancel:hover { background: rgba(239, 51, 64, .06) !important; color: #dc2626 !important; } #custom-purchase-modal .modal-desc-box { margin-top: 28px !important; padding: 0 0 0 12px !important; border: 0 !important; border-left: 4px solid #007a08 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; color: #f00 !important; font-size: .85rem !important; font-weight: 900 !important; line-height: 1.8 !important; text-align: right !important; max-height: 6.4em !important; } #custom-purchase-modal #order-executing-msg { margin-top: 14px !important; color: #007a08 !important; } [data-theme="dark"] #custom-purchase-modal .purchase-modal-content, [data-theme="dark"] #custom-purchase-modal .custom-modal-content, body.dark-mode #custom-purchase-modal .purchase-modal-content, body.dark-mode #custom-purchase-modal .custom-modal-content { background: var(--modal-bg, #111827) !important; border-color: rgba(148, 163, 184, .22) !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field { background: #111827 !important; border-color: #273549 !important; } [data-theme="dark"] #custom-purchase-modal .box-label, body.dark-mode #custom-purchase-modal .box-label { color: #94a3b8 !important; background: transparent !important; background-color: transparent !important; } [data-theme="dark"] #custom-purchase-modal .box-label::before, body.dark-mode #custom-purchase-modal .box-label::before { background: var(--modal-bg, #111827); } [data-theme="dark"] #custom-purchase-modal .modal-verify-btn, body.dark-mode #custom-purchase-modal .modal-verify-btn { background: #111827 !important; border-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { border-color: #273549 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new, body.dark-mode #custom-purchase-modal .modal-box-pill input, body.dark-mode #custom-purchase-modal .modal-box-pill-field input, body.dark-mode #custom-purchase-modal .modal-main-input-new { caret-color: #60a5fa !important; } @media (max-width: 480px) { #custom-purchase-modal.custom-modal-overlay { padding: 10px !important; } #custom-purchase-modal .purchase-modal-content, #custom-purchase-modal .custom-modal-content { width: calc(100vw - 20px) !important; padding: 24px 18px 26px !important; } #custom-purchase-modal .modal-header-flex { margin-bottom: 36px !important; } #custom-purchase-modal #modal-service-name { max-width: 205px; } #custom-purchase-modal .modal-btns-flex { gap: 16px !important; } #custom-purchase-modal .modal-verify-btn { min-width: 238px !important; } } #success-purchase-modal.custom-modal-overlay { background: rgba(15, 23, 42, .48) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #success-purchase-modal .modal-btns-flex { display: flex !important; flex-direction: row-reverse !important; gap: 18px !important; margin: 18px 0 0 !important; } #success-purchase-modal .modal-btn-buy, #success-purchase-modal .modal-btn-cancel { height: 56px !important; min-height: 56px !important; flex: 1 1 0 !important; border-radius: 999px !important; font-size: .95rem !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; box-shadow: none !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field { min-height: 60px !important; background: linear-gradient(180deg, #f4f6f8 0%, #edf1f5 100%) !important; border: 1px solid #dfe6ee !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,23,42,.025), 0 8px 18px rgba(15,23,42,.035) !important; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover { background: linear-gradient(180deg, #eef2f6 0%, #e7edf3 100%) !important; border-color: #d5dde8 !important; } #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within { background: linear-gradient(180deg, #e3e9f0 0%, #dce4ed 100%) !important; border-color: #c5d0dd !important; transform: translateY(-1px) !important; box-shadow: inset 0 2px 5px rgba(15,23,42,.055), 0 12px 26px rgba(15,23,42,.075) !important; } #custom-purchase-modal .box-label { top: -11px !important; right: 32px !important; left: auto !important; padding: 3px 12px 2px !important; border-radius: 999px !important; background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%) !important; border: 1px solid #dfe6ee !important; color: #8a96a6 !important; font-size: .78rem !important; font-weight: 900 !important; line-height: 1.15 !important; box-shadow: 0 3px 10px rgba(15,23,42,.045) !important; z-index: 3 !important; } #custom-purchase-modal .box-label::before { content: none !important; display: none !important; } #custom-purchase-modal .modal-box-pill:focus-within .box-label, #custom-purchase-modal .modal-box-pill-field:focus-within .box-label { background: linear-gradient(180deg, #dfe7ef 0%, #d6e0ea 100%) !important; border-color: #c4cfdd !important; color: #475569 !important; } #custom-purchase-modal .modal-box-pill input, #custom-purchase-modal .modal-box-pill select, #custom-purchase-modal .modal-box-pill-field input, #custom-purchase-modal .modal-main-input-new { background: transparent !important; color: #263548 !important; caret-color: #102f4a !important; font-size: .9rem !important; font-weight: 900 !important; } #custom-purchase-modal .modal-box-pill input::placeholder, #custom-purchase-modal .modal-box-pill-field input::placeholder, #custom-purchase-modal .modal-main-input-new::placeholder { color: #8f9baa !important; opacity: 1 !important; font-weight: 900 !important; } #custom-purchase-modal .modal-box-pill:focus-within input::placeholder, #custom-purchase-modal .modal-box-pill-field:focus-within input::placeholder, #custom-purchase-modal .modal-main-input-new:focus::placeholder { color: #6f7c8c !important; } #custom-purchase-modal #modal-price-display { color: #0f3554 !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field { background: linear-gradient(180deg, #1b2635 0%, #162131 100%) !important; border-color: #2c3a4f !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 22px rgba(0,0,0,.16) !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover { background: linear-gradient(180deg, #202d3f 0%, #1a2637 100%) !important; border-color: #37465d !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { background: linear-gradient(180deg, #27364a 0%, #202d40 100%) !important; border-color: #4b5d76 !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.18), 0 14px 28px rgba(0,0,0,.24) !important; } [data-theme="dark"] #custom-purchase-modal .box-label, body.dark-mode #custom-purchase-modal .box-label { background: linear-gradient(180deg, #202c3d 0%, #172333 100%) !important; border-color: #34445a !important; color: #aab7c8 !important; box-shadow: 0 4px 12px rgba(0,0,0,.22) !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within .box-label, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within .box-label { background: linear-gradient(180deg, #2b3b50 0%, #223044 100%) !important; border-color: #4c607a !important; color: #d6e1f0 !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input, [data-theme="dark"] #custom-purchase-modal .modal-box-pill select, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new, body.dark-mode #custom-purchase-modal .modal-box-pill input, body.dark-mode #custom-purchase-modal .modal-box-pill select, body.dark-mode #custom-purchase-modal .modal-box-pill-field input, body.dark-mode #custom-purchase-modal .modal-main-input-new { color: #e5edf7 !important; caret-color: #7dd3fc !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill input::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill-field input::placeholder, body.dark-mode #custom-purchase-modal .modal-main-input-new::placeholder { color: #9aa8bb !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field, #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover, #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { border: 0 !important; border-color: transparent !important; outline: 0 !important; } #custom-purchase-modal .purchase-modal-content .modal-box-pill, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field, #custom-purchase-modal .purchase-modal-content .modal-box-pill:hover, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:hover, #custom-purchase-modal .purchase-modal-content .modal-box-pill:focus-within, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:focus-within { background: #eef1f5 !important; background-color: #eef1f5 !important; background-image: none !important; border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; } #custom-purchase-modal .purchase-modal-content .modal-box-pill::after, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field::after { content: none !important; display: none !important; } #custom-purchase-modal .purchase-modal-content .box-label { background: transparent !important; color: #8b96a6 !important; border: 0 !important; box-shadow: none !important; } #custom-purchase-modal .purchase-modal-content .modal-box-pill input, #custom-purchase-modal .purchase-modal-content .modal-box-pill select, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field input, #custom-purchase-modal .purchase-modal-content .modal-main-input-new, #custom-purchase-modal .purchase-modal-content #modal-price-display { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #12324a !important; -webkit-text-fill-color: #12324a !important; text-shadow: none !important; } #custom-purchase-modal .purchase-modal-content .modal-box-pill input::placeholder, #custom-purchase-modal .purchase-modal-content .modal-box-pill-field input::placeholder, #custom-purchase-modal .purchase-modal-content .modal-main-input-new::placeholder { color: #8b96a6 !important; -webkit-text-fill-color: #8b96a6 !important; opacity: 1 !important; } [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill-field, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill-field:focus-within, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-box-pill, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-box-pill-field { background: #1a2433 !important; background-color: #1a2433 !important; background-image: none !important; border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .box-label, body.dark-mode #custom-purchase-modal .purchase-modal-content .box-label, body.dark-theme #custom-purchase-modal .purchase-modal-content .box-label { background: transparent !important; color: #cbd5e1 !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill input, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill select, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-box-pill-field input, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content .modal-main-input-new, [data-theme="dark"] #custom-purchase-modal .purchase-modal-content #modal-price-display, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill input, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill select, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-box-pill-field input, body.dark-mode #custom-purchase-modal .purchase-modal-content .modal-main-input-new, body.dark-mode #custom-purchase-modal .purchase-modal-content #modal-price-display, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-box-pill input, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-box-pill select, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-box-pill-field input, body.dark-theme #custom-purchase-modal .purchase-modal-content .modal-main-input-new, body.dark-theme #custom-purchase-modal .purchase-modal-content #modal-price-display { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; text-shadow: none !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field, #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover, #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within { background: #eef1f5 !important; border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 22px rgba(15,23,42,.035) !important; } #custom-purchase-modal .box-label, #custom-purchase-modal .modal-box-pill .box-label, #custom-purchase-modal .modal-box-pill-field .box-label { background: transparent !important; color: #7f8b9b !important; border: 0 !important; box-shadow: none !important; font-weight: 900 !important; } #custom-purchase-modal .modal-box-pill input, #custom-purchase-modal .modal-box-pill select, #custom-purchase-modal .modal-box-pill-field input, #custom-purchase-modal .modal-main-input-new, #custom-purchase-modal #modal-price-display { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #12324a !important; -webkit-text-fill-color: #12324a !important; text-shadow: none !important; } #custom-purchase-modal .modal-box-pill input::placeholder, #custom-purchase-modal .modal-box-pill-field input::placeholder, #custom-purchase-modal .modal-main-input-new::placeholder { color: #8f9bac !important; -webkit-text-fill-color: #8f9bac !important; opacity: 1 !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .custom-modal-content .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .custom-modal-content .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .custom-modal-content .modal-box-pill, body.dark-mode #custom-purchase-modal .custom-modal-content .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-theme #custom-purchase-modal .modal-box-pill, body.dark-theme #custom-purchase-modal .modal-box-pill-field, body.dark-theme #custom-purchase-modal .custom-modal-content .modal-box-pill, body.dark-theme #custom-purchase-modal .custom-modal-content .modal-box-pill-field { background: #1a2433 !important; border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 26px rgba(0,0,0,.22) !important; } [data-theme="dark"] #custom-purchase-modal .box-label, [data-theme="dark"] #custom-purchase-modal .modal-box-pill .box-label, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field .box-label, body.dark-mode #custom-purchase-modal .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill-field .box-label, body.dark-theme #custom-purchase-modal .box-label, body.dark-theme #custom-purchase-modal .modal-box-pill .box-label, body.dark-theme #custom-purchase-modal .modal-box-pill-field .box-label { background: transparent !important; color: #cbd5e1 !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input, [data-theme="dark"] #custom-purchase-modal .modal-box-pill select, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new, [data-theme="dark"] #custom-purchase-modal #modal-price-display, body.dark-mode #custom-purchase-modal .modal-box-pill input, body.dark-mode #custom-purchase-modal .modal-box-pill select, body.dark-mode #custom-purchase-modal .modal-box-pill-field input, body.dark-mode #custom-purchase-modal .modal-main-input-new, body.dark-mode #custom-purchase-modal #modal-price-display, body.dark-theme #custom-purchase-modal .modal-box-pill input, body.dark-theme #custom-purchase-modal .modal-box-pill select, body.dark-theme #custom-purchase-modal .modal-box-pill-field input, body.dark-theme #custom-purchase-modal .modal-main-input-new, body.dark-theme #custom-purchase-modal #modal-price-display { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; text-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill input::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill-field input::placeholder, body.dark-mode #custom-purchase-modal .modal-main-input-new::placeholder, body.dark-theme #custom-purchase-modal .modal-box-pill input::placeholder, body.dark-theme #custom-purchase-modal .modal-box-pill-field input::placeholder, body.dark-theme #custom-purchase-modal .modal-main-input-new::placeholder { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; opacity: .88 !important; } .site-container[class*="category-product-theme-"] .royal-card.product-card{position:relative} .category-product-theme-pill_glow .royal-card.product-card{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;min-height:62px;padding:8px 12px!important;border-radius:999px!important;background:#eee!important;box-shadow:0 0 20px rgba(34,197,94,.28)!important;overflow:visible!important} .category-product-theme-pill_glow .royal-card.product-card:hover{transform:translateY(-2px)!important;box-shadow:0 0 26px rgba(34,197,94,.42)!important} .category-product-theme-pill_glow .royal-card.product-card .royal-img-wrapper{width:48px!important;height:48px!important;min-width:48px!important;aspect-ratio:1/1!important;border-radius:50%!important;background:#dbeafe!important;box-shadow:0 6px 18px rgba(15,23,42,.16)!important;order:0} .category-product-theme-pill_glow .royal-card.product-card .royal-img-wrapper img,.category-product-theme-pill_glow .royal-card.product-card .text-placeholder-bg{border-radius:50%!important} .category-product-theme-pill_glow .royal-card.product-card .royal-content{flex:1;align-items:flex-start!important;text-align:right!important;padding:0!important;min-width:0} .category-product-theme-pill_glow .royal-card.product-card .royal-title-text{color:#f00!important;font-weight:800!important;font-size:.86rem!important;text-align:right!important} .category-product-theme-pill_glow .royal-card.product-card .royal-price-text{color:#0f172a!important;font-size:.75rem!important;text-align:right!important} .category-product-theme-glass_orbit .royal-card.product-card{padding:14px!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(239,246,255,.62))!important;border:1px solid rgba(148,163,184,.26)!important;box-shadow:0 18px 42px rgba(15,23,42,.10)!important;backdrop-filter:blur(12px)} .category-product-theme-glass_orbit .royal-card.product-card::before{content:"";position:absolute;inset:8px;border-radius:20px;border:1px dashed rgba(59,130,246,.25);pointer-events:none} .category-product-theme-glass_orbit .royal-card.product-card .royal-img-wrapper{border-radius:22px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 34px rgba(37,99,235,.15)!important} .category-product-theme-glass_orbit .royal-card.product-card .royal-title-text{font-weight:900!important;color:#1e3a8a!important}.category-product-theme-glass_orbit .royal-card.product-card .royal-price-text{color:#059669!important;font-weight:900!important} .category-product-theme-neon_frame .royal-card.product-card{padding:10px!important;border-radius:22px!important;background:linear-gradient(145deg,#07111f,#111827)!important;border:1px solid rgba(34,211,238,.35)!important;box-shadow:0 0 0 1px rgba(34,211,238,.12),0 18px 42px rgba(34,211,238,.18)!important} .category-product-theme-neon_frame .royal-card.product-card::after{content:"";position:absolute;inset:-1px;border-radius:23px;background:linear-gradient(135deg,rgba(34,211,238,.55),transparent,rgba(168,85,247,.45));z-index:-1;filter:blur(10px);opacity:.55} .category-product-theme-neon_frame .royal-card.product-card .royal-img-wrapper{border-radius:18px!important;box-shadow:0 0 24px rgba(34,211,238,.22)!important} .category-product-theme-neon_frame .royal-card.product-card .royal-title-text{color:#e0f2fe!important;font-weight:900!important}.category-product-theme-neon_frame .royal-card.product-card .royal-price-text{color:#67e8f9!important;font-weight:900!important} .category-product-theme-luxury_shadow .royal-card.product-card{padding:12px!important;border-radius:26px!important;background:#fff!important;border:1px solid rgba(226,232,240,.92)!important;box-shadow:0 20px 46px rgba(15,23,42,.12),0 2px 0 rgba(255,255,255,.9) inset!important} .category-product-theme-luxury_shadow .royal-card.product-card .royal-img-wrapper{border-radius:22px!important;box-shadow:0 14px 30px rgba(15,23,42,.13)!important} .category-product-theme-luxury_shadow .royal-card.product-card .royal-title-text{font-weight:900!important;color:#111827!important}.category-product-theme-luxury_shadow .royal-card.product-card .royal-price-text{display:inline-flex!important;justify-content:center;align-self:center;width:auto!important;padding:5px 12px;border-radius:999px;background:#fef3c7;color:#92400e!important;font-weight:900!important} .category-product-theme-compact_line .royal-card.product-card{flex-direction:row!important;align-items:center!important;gap:12px!important;min-height:74px;padding:10px 12px!important;border-radius:18px!important;background:linear-gradient(90deg,#fff,#f8fafc)!important;border:1px solid #e2e8f0!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important} .category-product-theme-compact_line .royal-card.product-card .royal-img-wrapper{width:58px!important;height:58px!important;min-width:58px!important;aspect-ratio:1/1!important;border-radius:16px!important;box-shadow:0 8px 18px rgba(15,23,42,.10)!important} .category-product-theme-compact_line .royal-card.product-card .royal-content{padding:0!important;align-items:flex-start!important;text-align:right!important} .category-product-theme-compact_line .royal-card.product-card .royal-title-text{text-align:right!important;font-weight:800!important;color:#0f172a!important}.category-product-theme-compact_line .royal-card.product-card .royal-price-text{text-align:right!important;color:#2563eb!important;font-weight:900!important} [data-theme="dark"] .category-product-theme-pill_glow .royal-card.product-card{background:#111827!important;box-shadow:0 0 22px rgba(34,197,94,.18)!important}[data-theme="dark"] .category-product-theme-pill_glow .royal-card.product-card .royal-price-text{color:#e5e7eb!important}[data-theme="dark"] .category-product-theme-glass_orbit .royal-card.product-card{background:linear-gradient(145deg,rgba(15,23,42,.86),rgba(30,41,59,.66))!important;border-color:rgba(148,163,184,.2)!important}[data-theme="dark"] .category-product-theme-luxury_shadow .royal-card.product-card,[data-theme="dark"] .category-product-theme-compact_line .royal-card.product-card{background:#111827!important;border-color:#26344d!important}[data-theme="dark"] .category-product-theme-luxury_shadow .royal-card.product-card .royal-title-text,[data-theme="dark"] .category-product-theme-compact_line .royal-card.product-card .royal-title-text{color:#e5edf7!important} @media (max-width:600px){.category-product-theme-pill_glow .royal-card.product-card{min-height:56px;padding:7px 9px!important;gap:10px!important}.category-product-theme-pill_glow .royal-card.product-card .royal-img-wrapper{width:42px!important;height:42px!important;min-width:42px!important}.category-product-theme-compact_line .royal-card.product-card{min-height:66px;padding:9px!important}.category-product-theme-compact_line .royal-card.product-card .royal-img-wrapper{width:50px!important;height:50px!important;min-width:50px!important}} .category-product-theme-wide_banner .royal-card.product-card{border-radius:22px!important;background:#fff!important;border:1px solid #e2e8f0!important;padding:10px!important;box-shadow:0 14px 36px rgba(15,23,42,.08)!important} .category-product-theme-wide_banner .royal-card.product-card .royal-img-wrapper{aspect-ratio:16/7!important;border-radius:18px!important;box-shadow:0 12px 26px rgba(15,23,42,.10)!important} .category-product-theme-wide_banner .royal-card.product-card .royal-title-text{font-weight:900!important;color:#0f172a!important}.category-product-theme-wide_banner .royal-card.product-card .royal-price-text{color:#16a34a!important;font-weight:900!important} .category-product-theme-floating_badge .royal-card.product-card{position:relative;padding:0 0 12px!important;border-radius:24px!important;background:#fff!important;border:1px solid rgba(226,232,240,.85)!important;box-shadow:0 16px 38px rgba(15,23,42,.10)!important;overflow:visible!important} .category-product-theme-floating_badge .royal-card.product-card .royal-img-wrapper{aspect-ratio:4/5!important;border-radius:24px 24px 16px 16px!important;box-shadow:0 16px 34px rgba(15,23,42,.12)!important} .category-product-theme-floating_badge .royal-card.product-card .royal-price-text{position:absolute;top:10px;right:10px;width:auto!important;padding:6px 11px;border-radius:999px;background:rgba(15,23,42,.86);color:#fff!important;font-weight:900!important;z-index:12} .category-product-theme-floating_badge .royal-card.product-card .royal-title-text{font-weight:900!important;color:#111827!important;padding-inline:8px} .category-product-theme-gradient_tile .royal-card.product-card{padding:12px!important;border-radius:28px!important;background:linear-gradient(135deg,#eef2ff,#ecfeff 45%,#f0fdf4)!important;border:1px solid rgba(125,211,252,.35)!important;box-shadow:0 18px 44px rgba(14,165,233,.12)!important} .category-product-theme-gradient_tile .royal-card.product-card .royal-img-wrapper{aspect-ratio:3/2!important;border-radius:24px!important;background:linear-gradient(135deg,#38bdf8,#22c55e)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 16px 28px rgba(14,165,233,.18)!important} .category-product-theme-gradient_tile .royal-card.product-card .royal-title-text{font-weight:900!important;color:#075985!important}.category-product-theme-gradient_tile .royal-card.product-card .royal-price-text{font-weight:900!important;color:#047857!important} .category-product-theme-slim_store .royal-card.product-card{flex-direction:row!important;align-items:center!important;gap:12px!important;min-height:58px;padding:8px 10px!important;border-radius:14px!important;background:#fff!important;border:1px solid #e5e7eb!important;box-shadow:0 6px 18px rgba(15,23,42,.055)!important} .category-product-theme-slim_store .royal-card.product-card .royal-img-wrapper{width:46px!important;height:46px!important;min-width:46px!important;aspect-ratio:1/1!important;border-radius:12px!important;box-shadow:none!important} .category-product-theme-slim_store .royal-card.product-card .royal-content{padding:0!important;align-items:flex-start!important;text-align:right!important} .category-product-theme-slim_store .royal-card.product-card .royal-title-text{text-align:right!important;font-weight:800!important;color:#111827!important}.category-product-theme-slim_store .royal-card.product-card .royal-price-text{text-align:right!important;color:#ef4444!important;font-weight:900!important;font-size:.78rem!important} .category-product-theme-pro_capsule .royal-card.product-card{flex-direction:row!important;align-items:center!important;gap:14px!important;min-height:70px;padding:10px 14px!important;border-radius:999px!important;background:linear-gradient(135deg,#0f172a,#1e293b)!important;border:1px solid rgba(148,163,184,.24)!important;box-shadow:0 18px 40px rgba(15,23,42,.20)!important;overflow:visible!important} .category-product-theme-pro_capsule .royal-card.product-card .royal-img-wrapper{width:54px!important;height:54px!important;min-width:54px!important;aspect-ratio:1/1!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.24)!important} .category-product-theme-pro_capsule .royal-card.product-card .royal-content{padding:0!important;align-items:flex-start!important;text-align:right!important} .category-product-theme-pro_capsule .royal-card.product-card .royal-title-text{color:#f8fafc!important;font-weight:900!important;text-align:right!important}.category-product-theme-pro_capsule .royal-card.product-card .royal-price-text{color:#fbbf24!important;font-weight:900!important;text-align:right!important} .category-product-theme-cube_3d .royal-card.product-card{transform-style:preserve-3d;perspective:900px;padding:12px!important;border-radius:24px!important;background:linear-gradient(145deg,#fff,#e2e8f0)!important;border:1px solid rgba(148,163,184,.35)!important;box-shadow:12px 16px 0 rgba(15,23,42,.10),0 24px 44px rgba(15,23,42,.12)!important} .category-product-theme-cube_3d .royal-card.product-card:hover{transform:translateY(-6px) rotateX(5deg) rotateY(-5deg)!important}.category-product-theme-cube_3d .royal-card.product-card .royal-img-wrapper{aspect-ratio:1/1!important;border-radius:20px!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 14px 30px rgba(15,23,42,.18)!important}.category-product-theme-cube_3d .royal-card.product-card::before{content:"3D";position:absolute;top:10px;left:10px;z-index:14;background:#111827;color:#fff;border-radius:999px;padding:4px 8px;font-size:.66rem;font-weight:900} .category-product-theme-depth_3d .royal-card.product-card{padding:14px!important;border-radius:28px!important;background:linear-gradient(160deg,#1d4ed8,#7c3aed)!important;box-shadow:0 18px 0 #172554,0 34px 52px rgba(30,64,175,.35)!important;border:0!important}.category-product-theme-depth_3d .royal-card.product-card:hover{transform:translateY(-8px)!important;box-shadow:0 26px 0 #172554,0 44px 62px rgba(30,64,175,.38)!important}.category-product-theme-depth_3d .royal-card.product-card .royal-img-wrapper{aspect-ratio:5/4!important;border-radius:22px!important;box-shadow:0 16px 28px rgba(0,0,0,.24)!important}.category-product-theme-depth_3d .royal-card.product-card .royal-title-text{color:#fff!important;font-weight:900!important}.category-product-theme-depth_3d .royal-card.product-card .royal-price-text{color:#fde68a!important;font-weight:900!important} .category-product-theme-hover_3d .royal-card.product-card{padding:12px!important;border-radius:26px!important;background:#111827!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 40px rgba(0,0,0,.28)!important;transform-style:preserve-3d}.category-product-theme-hover_3d .royal-card.product-card:hover{transform:translateY(-7px) rotate(-1deg)!important}.category-product-theme-hover_3d .royal-card.product-card .royal-img-wrapper{aspect-ratio:4/3!important;border-radius:22px!important;transform:translateZ(22px);box-shadow:0 20px 36px rgba(0,0,0,.30)!important}.category-product-theme-hover_3d .royal-card.product-card .royal-title-text{color:#f8fafc!important;font-weight:900!important}.category-product-theme-hover_3d .royal-card.product-card .royal-price-text{color:#34d399!important;font-weight:900!important} .category-product-theme-arcade_3d .royal-card.product-card{padding:13px!important;border-radius:18px!important;background:linear-gradient(135deg,#18181b,#3f3f46)!important;border:2px solid #f97316!important;box-shadow:8px 8px 0 #7c2d12,0 24px 42px rgba(124,45,18,.24)!important}.category-product-theme-arcade_3d .royal-card.product-card:hover{transform:translate(-3px,-5px)!important;box-shadow:12px 13px 0 #7c2d12,0 30px 50px rgba(124,45,18,.28)!important}.category-product-theme-arcade_3d .royal-card.product-card .royal-img-wrapper{aspect-ratio:16/10!important;border-radius:14px!important;border:2px solid rgba(255,255,255,.18)!important}.category-product-theme-arcade_3d .royal-card.product-card .royal-title-text{color:#fff7ed!important;font-weight:900!important}.category-product-theme-arcade_3d .royal-card.product-card .royal-price-text{color:#fb923c!important;font-weight:900!important} [data-theme="dark"] .category-product-theme-wide_banner .royal-card.product-card,[data-theme="dark"] .category-product-theme-floating_badge .royal-card.product-card,[data-theme="dark"] .category-product-theme-slim_store .royal-card.product-card{background:#111827!important;border-color:#26344d!important} [data-theme="dark"] .category-product-theme-wide_banner .royal-card.product-card .royal-title-text,[data-theme="dark"] .category-product-theme-floating_badge .royal-card.product-card .royal-title-text,[data-theme="dark"] .category-product-theme-slim_store .royal-card.product-card .royal-title-text{color:#e5edf7!important} @media (max-width:600px){.category-product-theme-slim_store .royal-card.product-card{min-height:54px}.category-product-theme-pro_capsule .royal-card.product-card{min-height:62px;padding:8px 10px!important}.category-product-theme-pro_capsule .royal-card.product-card .royal-img-wrapper{width:46px!important;height:46px!important;min-width:46px!important}} #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field, #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover, #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { border: 0 !important; outline: 0 !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field, #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover, #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { border: 0 !important; outline: 0 !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field { min-height: 62px !important; padding: 0 22px !important; border-radius: 999px !important; background: #eef1f5 !important; background-color: #eef1f5 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; transform: none !important; } #custom-purchase-modal .modal-box-pill::after, #custom-purchase-modal .modal-box-pill-field::after { content: none !important; display: none !important; } #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover { background: #eef1f5 !important; background-color: #eef1f5 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within { background: #eef1f5 !important; background-color: #eef1f5 !important; background-image: none !important; border: 0 !important; transform: none !important; box-shadow: none !important; } #custom-purchase-modal .box-label { top: 9px !important; right: 28px !important; left: auto !important; transform: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; color: #8a96a3 !important; font-size: .72rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .01em !important; box-shadow: none !important; max-width: calc(100% - 56px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; z-index: 4 !important; } #custom-purchase-modal .box-label::before { content: none !important; display: none !important; } #custom-purchase-modal .modal-box-pill:focus-within .box-label, #custom-purchase-modal .modal-box-pill-field:focus-within .box-label { color: #526171 !important; background: transparent !important; border: 0 !important; } #custom-purchase-modal .modal-box-pill input, #custom-purchase-modal .modal-box-pill select, #custom-purchase-modal .modal-box-pill-field input, #custom-purchase-modal .modal-main-input-new { position: relative !important; z-index: 2 !important; min-height: 62px !important; height: 62px !important; padding: 17px 8px 0 !important; background: transparent !important; border: 0 !important; color: #17334a !important; font-size: .92rem !important; font-weight: 950 !important; text-align: center !important; caret-color: #071f34 !important; } #custom-purchase-modal .modal-box-pill input::placeholder, #custom-purchase-modal .modal-box-pill-field input::placeholder, #custom-purchase-modal .modal-main-input-new::placeholder { color: #96a1ad !important; opacity: 1 !important; font-size: .88rem !important; font-weight: 900 !important; text-align: center !important; } #custom-purchase-modal .modal-box-pill:focus-within input::placeholder, #custom-purchase-modal .modal-box-pill-field:focus-within input::placeholder, #custom-purchase-modal .modal-main-input-new:focus::placeholder { color: #6e7c8b !important; } #custom-purchase-modal #modal-price-display { color: #0d3454 !important; text-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field { background: #1a2433 !important; background-color: #1a2433 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover { background: #1a2433 !important; background-color: #1a2433 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { background: #1a2433 !important; background-color: #1a2433 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .box-label, body.dark-mode #custom-purchase-modal .box-label { color: #a8b4c3 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within .box-label, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within .box-label, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within .box-label { color: #d8e4f2 !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input, [data-theme="dark"] #custom-purchase-modal .modal-box-pill select, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new, body.dark-mode #custom-purchase-modal .modal-box-pill input, body.dark-mode #custom-purchase-modal .modal-box-pill select, body.dark-mode #custom-purchase-modal .modal-box-pill-field input, body.dark-mode #custom-purchase-modal .modal-main-input-new { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; text-shadow: none !important; } [data-theme="dark"] #custom-purchase-modal .modal-box-pill input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field input::placeholder, [data-theme="dark"] #custom-purchase-modal .modal-main-input-new::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill input::placeholder, body.dark-mode #custom-purchase-modal .modal-box-pill-field input::placeholder, body.dark-mode #custom-purchase-modal .modal-main-input-new::placeholder { color: #9aa8bb !important; } #custom-purchase-modal .modal-box-pill, #custom-purchase-modal .modal-box-pill-field, #custom-purchase-modal .custom-modal-content .modal-box-pill, #custom-purchase-modal .custom-modal-content .modal-box-pill-field, #custom-purchase-modal .modal-box-pill:hover, #custom-purchase-modal .modal-box-pill-field:hover, #custom-purchase-modal .modal-box-pill:focus-within, #custom-purchase-modal .modal-box-pill-field:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:hover, [data-theme="dark"] #custom-purchase-modal .modal-box-pill:focus-within, [data-theme="dark"] #custom-purchase-modal .modal-box-pill-field:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill, body.dark-mode #custom-purchase-modal .modal-box-pill-field, body.dark-mode #custom-purchase-modal .modal-box-pill:hover, body.dark-mode #custom-purchase-modal .modal-box-pill-field:hover, body.dark-mode #custom-purchase-modal .modal-box-pill:focus-within, body.dark-mode #custom-purchase-modal .modal-box-pill-field:focus-within { border: 0 !important; border-color: transparent !important; outline: 0 !important; } #custom-purchase-modal #modal-form.purchase-login-fields { --purchase-input-bg: #f3f4f6; --purchase-input-border: #dbe5ee; --purchase-input-focus: var(--main-color, #1e3a8a); --purchase-input-ring: color-mix(in srgb, var(--purchase-input-focus) 18%, transparent); } :is([data-theme="dark"], [data-bs-theme="dark"], body.dark-mode, body.dark-theme) #custom-purchase-modal #modal-form.purchase-login-fields { --purchase-input-bg: #1f2937; --purchase-input-border: #334155; --purchase-input-focus: var(--main-color, #1e3a8a); --purchase-input-ring: color-mix(in srgb, var(--purchase-input-focus) 16%, transparent); } #custom-purchase-modal #modal-form.purchase-login-fields .modal-box-pill, #custom-purchase-modal #modal-form.purchase-login-fields .modal-box-pill-field { box-sizing: border-box; background: var(--purchase-input-bg) !important; border: 1px solid var(--purchase-input-border) !important; border-radius: 999px !important; outline: 3px solid transparent !important; outline-offset: 2px !important; box-shadow: none !important; transform: none !important; transition: border-color .22s ease, outline-color .22s ease, transform .22s ease !important; } #custom-purchase-modal #modal-form.purchase-login-fields .modal-box-pill:focus-within, #custom-purchase-modal #modal-form.purchase-login-fields .modal-box-pill-field:focus-within { background: var(--purchase-input-bg) !important; border-color: var(--purchase-input-focus) !important; outline-color: var(--purchase-input-ring) !important; transform: translateY(-1px) !important; box-shadow: none !important; } #custom-purchase-modal #modal-form.purchase-login-fields :is(.modal-box-pill, .modal-box-pill-field) :is(input, select, textarea) { background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; }
#custom-purchase-modal #modal-form.purchase-login-fields input::placeholder, #custom-purchase-modal #modal-form.purchase-login-fields textarea::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; opacity: 0 !important; }