/** * PCLP Variation Options — CSS * Covers all 6 display modes with CSS-variable theming. * Scoped under .pclp-vo-wrap so nothing leaks outside. * * CSS custom properties (set via PHP in ): * --pclp-vo-radius border radius * --pclp-vo-font-size base font size * --pclp-vo-gap gap between items * * Brand / theme color tokens (inherited from .landing-container): * --pclp-primary main accent (green / blue / purple / gold) * --pclp-primary-dark * --pclp-primary-light */ /* ═══════════════════════════════════════════════════════════════════ DEFAULTS (fallbacks if vars not printed) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-wrap { --pclp-vo-radius: 10px; --pclp-vo-font-size: 14px; --pclp-vo-gap: 8px; /* brand accent — overridden per-theme via landing-container vars */ --pclp-vo-accent: var(--pclp-primary, #16a34a); --pclp-vo-accent-dark: var(--pclp-primary-dark, #15803d); --pclp-vo-accent-light: var(--pclp-primary-light, #dcfce7); --pclp-vo-accent-text: #fff; /* neutral palette */ --pclp-vo-bg: #f8fafc; --pclp-vo-bg-hover: #f1f5f9; --pclp-vo-border: #e2e8f0; --pclp-vo-border-focus: var(--pclp-vo-accent); --pclp-vo-text: #1e293b; --pclp-vo-text-muted: #64748b; --pclp-vo-disabled-bg: #f1f5f9; --pclp-vo-disabled-text: #cbd5e1; --pclp-vo-disabled-border: #e2e8f0; --pclp-vo-shadow: 0 1px 3px rgba(0,0,0,.08); --pclp-vo-shadow-hover: 0 4px 12px rgba(0,0,0,.12); --pclp-vo-shadow-selected: 0 0 0 3px var(--pclp-vo-accent-light); } /* Theme overrides — accent from landing-container classes */ .pclp-theme-modern .pclp-vo-wrap, .pclp-theme-modern .pclp-vo-wrap * { --pclp-vo-accent: #3b82f6; --pclp-vo-accent-dark: #2563eb; --pclp-vo-accent-light: #dbeafe; } .pclp-theme-classic .pclp-vo-wrap, .pclp-theme-classic .pclp-vo-wrap * { --pclp-vo-accent: #7c3aed; --pclp-vo-accent-dark: #6d28d9; --pclp-vo-accent-light: #ede9fe; } .pclp-theme-glow .pclp-vo-wrap, .pclp-theme-glow .pclp-vo-wrap * { --pclp-vo-accent: #f59e0b; --pclp-vo-accent-dark: #d97706; --pclp-vo-accent-light: #fef3c7; } /* ═══════════════════════════════════════════════════════════════════ WRAPPER ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-wrap { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; font-family: inherit; direction: rtl; } /* ═══════════════════════════════════════════════════════════════════ SECTION HEADER (اختر اللون / المقاس) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg, var(--pclp-vo-accent) 0%, var(--pclp-vo-accent-dark) 100%); border-radius: var(--pclp-vo-radius); color: #fff; } .pclp-vo-section-icon { font-size: 18px; line-height: 1; } .pclp-vo-section-title { font-size: calc(var(--pclp-vo-font-size) + 1px); font-weight: 700; letter-spacing: .01em; } /* ═══════════════════════════════════════════════════════════════════ ATTRIBUTE GROUP ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-group { display: flex; flex-direction: column; gap: 10px; } /* ── Attr label row ── */ .pclp-vo-attr-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pclp-vo-attr-name { font-size: var(--pclp-vo-font-size); font-weight: 700; color: var(--pclp-vo-text); } .pclp-vo-attr-selected { font-size: calc(var(--pclp-vo-font-size) - 1px); font-weight: 600; color: var(--pclp-vo-accent); background: var(--pclp-vo-accent-light); padding: 2px 10px; border-radius: 20px; transition: all .2s ease; } /* ═══════════════════════════════════════════════════════════════════ NATIVE SELECT — hidden in non-select modes, visible in select mode ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-native { display: none !important; /* hidden by default; overridden in select mode */ } /* Select mode: show native select, styled */ [data-mode="select"] .pclp-vo-native { display: block !important; width: 100%; padding: 10px 14px; font-size: var(--pclp-vo-font-size); color: var(--pclp-vo-text); background: #fff; border: 2px solid var(--pclp-vo-border); border-radius: var(--pclp-vo-radius); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; appearance: auto; -webkit-appearance: auto; } [data-mode="select"] .pclp-vo-native:hover { border-color: var(--pclp-vo-accent); } [data-mode="select"] .pclp-vo-native:focus { outline: none; border-color: var(--pclp-vo-accent); box-shadow: var(--pclp-vo-shadow-selected); } /* ═══════════════════════════════════════════════════════════════════ OPTIONS CONTAINER — shared ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-options { display: flex; flex-wrap: wrap; gap: var(--pclp-vo-gap); } /* Layout: row (nowrap) vs wrap (default) */ [data-layout="row"] .pclp-vo-options { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; } [data-layout="grid"] .pclp-vo-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--pclp-vo-gap); } /* ─── Shared item base ─── */ .pclp-vo-item { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: var(--pclp-vo-font-size); cursor: pointer; user-select: none; transition: all .2s ease; outline: none; border: none; padding: 0; background: transparent; /* RTL */ direction: rtl; } .pclp-vo-item:focus-visible { outline: 2px solid var(--pclp-vo-accent); outline-offset: 2px; } .pclp-vo-item--disabled, .pclp-vo-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ MODE: BUTTONS (pill / rectangle buttons) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-btn { padding: 8px 20px; background: #fff; border: 2px solid var(--pclp-vo-border); border-radius: var(--pclp-vo-radius); color: var(--pclp-vo-text); font-weight: 600; box-shadow: var(--pclp-vo-shadow); white-space: nowrap; } .pclp-vo-btn:hover:not(.pclp-vo-item--selected) { background: var(--pclp-vo-bg-hover); border-color: var(--pclp-vo-accent); color: var(--pclp-vo-accent); box-shadow: var(--pclp-vo-shadow-hover); transform: translateY(-1px); } .pclp-vo-btn.pclp-vo-item--selected { background: var(--pclp-vo-accent); border-color: var(--pclp-vo-accent); color: var(--pclp-vo-accent-text); box-shadow: 0 4px 14px rgba(0,0,0,.15); transform: translateY(-1px); } .pclp-vo-btn.pclp-vo-item--selected::after { content: ' ✓'; font-size: .9em; } /* ═══════════════════════════════════════════════════════════════════ MODE: SWATCHES (color circles) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-options--swatches { gap: calc(var(--pclp-vo-gap) + 2px); } .pclp-vo-swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; box-shadow: var(--pclp-vo-shadow), inset 0 0 0 2px rgba(255,255,255,.4); padding: 0; overflow: visible; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .pclp-vo-swatch-inner { position: absolute; inset: 0; border-radius: 50%; background: var(--swatch-bg, #ccc); transition: transform .2s ease; } /* text-only swatch (no color meta found) */ .pclp-vo-swatch--text { width: auto; height: 36px; border-radius: calc(var(--pclp-vo-radius) / 1.2); padding: 0 12px; font-size: calc(var(--pclp-vo-font-size) - 1px); font-weight: 600; background: #fff; border: 2px solid var(--pclp-vo-border); color: var(--pclp-vo-text); } .pclp-vo-swatch--text .pclp-vo-swatch-inner { display: none; } /* check mark overlay */ .pclp-vo-swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .pclp-vo-swatch:hover:not(.pclp-vo-item--selected) { border-color: var(--pclp-vo-accent); transform: scale(1.1); box-shadow: var(--pclp-vo-shadow-hover); } .pclp-vo-swatch.pclp-vo-item--selected { border-color: var(--pclp-vo-accent); transform: scale(1.12); box-shadow: var(--pclp-vo-shadow-hover), 0 0 0 3px var(--pclp-vo-accent-light); } .pclp-vo-swatch.pclp-vo-item--selected .pclp-vo-swatch-check { opacity: 1; } /* White swatch: dark check + dark border for visibility */ .pclp-vo-swatch[style*="--swatch-bg:#f9fafb"].pclp-vo-item--selected .pclp-vo-swatch-check, .pclp-vo-swatch[style*="--swatch-bg:#fef9c3"].pclp-vo-item--selected .pclp-vo-swatch-check, .pclp-vo-swatch[style*="--swatch-bg:#fef3c7"].pclp-vo-item--selected .pclp-vo-swatch-check { color: #1e293b; text-shadow: none; } /* text-only swatch selected */ .pclp-vo-swatch--text.pclp-vo-item--selected { background: var(--pclp-vo-accent); border-color: var(--pclp-vo-accent); color: #fff; } .pclp-vo-swatch--text.pclp-vo-item--selected .pclp-vo-swatch-check { display: none; } /* ═══════════════════════════════════════════════════════════════════ MODE: RADIO (list with custom radio dots) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-options--radio { flex-direction: column; gap: calc(var(--pclp-vo-gap) - 2px); } .pclp-vo-radio-label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 2px solid var(--pclp-vo-border); border-radius: var(--pclp-vo-radius); cursor: pointer; transition: all .2s ease; color: var(--pclp-vo-text); font-weight: 500; box-shadow: var(--pclp-vo-shadow); width: 100%; box-sizing: border-box; } .pclp-vo-radio-label:hover { border-color: var(--pclp-vo-accent); background: var(--pclp-vo-bg-hover); } .pclp-vo-radio-label.pclp-vo-item--selected { border-color: var(--pclp-vo-accent); background: var(--pclp-vo-accent-light); color: var(--pclp-vo-accent-dark); } /* hide native radio input */ .pclp-vo-radio-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* custom radio dot */ .pclp-vo-radio-dot { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pclp-vo-border); background: #fff; display: flex; align-items: center; justify-content: center; transition: all .2s ease; } .pclp-vo-radio-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pclp-vo-accent); transform: scale(0); transition: transform .2s ease; } .pclp-vo-item--selected .pclp-vo-radio-dot { border-color: var(--pclp-vo-accent); } .pclp-vo-item--selected .pclp-vo-radio-dot::after { transform: scale(1); } .pclp-vo-radio-text { flex: 1; text-align: right; } /* ═══════════════════════════════════════════════════════════════════ MODE: BOXED CARDS (larger cards with checkmark corner) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-card { flex-direction: column; gap: 4px; min-width: 80px; padding: 12px 16px; background: #fff; border: 2px solid var(--pclp-vo-border); border-radius: var(--pclp-vo-radius); color: var(--pclp-vo-text); font-weight: 600; box-shadow: var(--pclp-vo-shadow); transition: all .2s ease; } .pclp-vo-card:hover:not(.pclp-vo-item--selected) { border-color: var(--pclp-vo-accent); box-shadow: var(--pclp-vo-shadow-hover); transform: translateY(-2px); } .pclp-vo-card.pclp-vo-item--selected { border-color: var(--pclp-vo-accent); background: var(--pclp-vo-accent-light); color: var(--pclp-vo-accent-dark); box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 3px var(--pclp-vo-accent-light); transform: translateY(-2px); } .pclp-vo-card-label { font-size: var(--pclp-vo-font-size); } .pclp-vo-card-check { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--pclp-vo-accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: all .2s ease; } .pclp-vo-card.pclp-vo-item--selected .pclp-vo-card-check { opacity: 1; transform: scale(1); } /* ═══════════════════════════════════════════════════════════════════ MODE: CHIPS (compact inline tags) ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-chip { padding: 5px 14px; background: var(--pclp-vo-bg); border: 1.5px solid var(--pclp-vo-border); border-radius: 20px; color: var(--pclp-vo-text); font-size: calc(var(--pclp-vo-font-size) - 1px); font-weight: 500; transition: all .15s ease; white-space: nowrap; } .pclp-vo-chip:hover:not(.pclp-vo-item--selected) { background: var(--pclp-vo-bg-hover); border-color: var(--pclp-vo-accent); color: var(--pclp-vo-accent); } .pclp-vo-chip.pclp-vo-item--selected { background: var(--pclp-vo-accent); border-color: var(--pclp-vo-accent); color: var(--pclp-vo-accent-text); box-shadow: 0 2px 8px rgba(0,0,0,.15); } /* ═══════════════════════════════════════════════════════════════════ ITEM SIZE VARIANTS Applied by JS reading data-item-size attr on .pclp-vo-wrap ═══════════════════════════════════════════════════════════════════ */ [data-item-size="small"] .pclp-vo-btn { padding: 5px 12px; font-size: calc(var(--pclp-vo-font-size) - 1px); } [data-item-size="large"] .pclp-vo-btn { padding: 12px 28px; font-size: calc(var(--pclp-vo-font-size) + 2px); } [data-item-size="small"] .pclp-vo-swatch { width: 30px; height: 30px; } [data-item-size="large"] .pclp-vo-swatch { width: 50px; height: 50px; } [data-item-size="small"] .pclp-vo-chip { padding: 3px 10px; } [data-item-size="large"] .pclp-vo-chip { padding: 8px 20px; font-size: calc(var(--pclp-vo-font-size) + 1px); } [data-item-size="small"] .pclp-vo-card { padding: 8px 12px; min-width: 60px; } [data-item-size="large"] .pclp-vo-card { padding: 16px 22px; min-width: 100px; } /* ═══════════════════════════════════════════════════════════════════ ANIMATION — entrance ═══════════════════════════════════════════════════════════════════ */ @keyframes pclp-vo-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pclp-vo-wrap { animation: pclp-vo-fadein .3s ease both; } .pclp-vo-item { animation: pclp-vo-fadein .25s ease both; } /* stagger items slightly */ .pclp-vo-item:nth-child(1) { animation-delay: .03s; } .pclp-vo-item:nth-child(2) { animation-delay: .06s; } .pclp-vo-item:nth-child(3) { animation-delay: .09s; } .pclp-vo-item:nth-child(4) { animation-delay: .12s; } .pclp-vo-item:nth-child(5) { animation-delay: .15s; } .pclp-vo-item:nth-child(n+6){ animation-delay: .18s; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .pclp-vo-btn { padding: 7px 14px; } .pclp-vo-card { min-width: 70px; padding: 10px 12px; } .pclp-vo-attr-header { flex-wrap: wrap; } [data-layout="grid"] .pclp-vo-options { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } } /* ═══════════════════════════════════════════════════════════════════ UNAVAILABLE / OUT-OF-STOCK CROSS-OUT ═══════════════════════════════════════════════════════════════════ */ .pclp-vo-item--unavailable { position: relative; opacity: .5; cursor: not-allowed; } .pclp-vo-item--unavailable::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(0,0,0,.12) 4px, rgba(0,0,0,.12) 5px ); pointer-events: none; }