/* ========================================================================== DAEDAL Checkout Builder — Design System v2.0 اصول: توکن‌های رنگی جفت (سطح + متن) تا خوانایی در هر تم تضمین شود، SVG به‌جای فونت آیکون، منحنی‌های حرکتی مدرن، احترام به prefers-reduced-motion. همه چیز زیر .dcb-scope است؛ به body و قالب وابسته نیست (المنتور/ویجت هم کار می‌کند). ========================================================================== */ /* ---------- ۰) فونت داخلی + سخت‌سازی در برابر قالب ---------- فونت وزیرمتن (OFL) داخل افزونه است تا فونت تزئینی/عجیب قالب باعث بهم‌ریختگی نشود. حالت‌ها: dcb-font-fd (ارقام فارسی، پیش‌فرض) | dcb-font-vazir (ارقام لاتین) | dcb-font-site (فونت خود سایت) */ @font-face { font-family: "DCB Vazir FD"; src: url("../fonts/dcb-vazir-fd-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "DCB Vazir FD"; src: url("../fonts/dcb-vazir-fd-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; } @font-face { font-family: "DCB Vazir FD"; src: url("../fonts/dcb-vazir-fd-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "DCB Vazir FD"; src: url("../fonts/dcb-vazir-fd-800.woff2") format("woff2"); font-weight: 800 900; font-display: swap; } @font-face { font-family: "DCB Vazir"; src: url("../fonts/dcb-vazir-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } .dcb-scope { font-family: "DCB Vazir FD", "DCB Vazir", Tahoma, sans-serif !important; --dcb-lh: 1.7; --dcb-ta: start; font-style: normal; text-align: start; } .dcb-scope.dcb-font-vazir { font-family: "DCB Vazir", Tahoma, sans-serif !important; } .dcb-scope.dcb-font-site { font-family: inherit !important; } .dcb-scope *, .dcb-scope *::before, .dcb-scope *::after { box-sizing: border-box; font-family: inherit !important; letter-spacing: normal !important; word-spacing: normal !important; text-transform: none !important; text-shadow: none; font-style: normal; } .dcb-scope svg, .dcb-scope svg * { letter-spacing: normal !important; } /* حذف حاشیه/فاصله/ارتفاع خط تحمیلی قالب (با :where تا قوانین خود افزونه که بعدتر می‌آیند همیشه برنده باشند) */ .dcb-scope.dcb-scope :where(h1, h2, h3, h4, h5, h6, p, div, span, strong, small, b, em, i, del, ins, bdi, a, label, ul, ol, li, dl, dt, dd, form, article, aside, section, nav, header, footer, figure) { margin: 0; flex: 0 1 auto; min-height: 0; float: none; text-indent: 0; } .dcb-scope.dcb-scope :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd) { padding: 0; font-size: inherit; font-weight: inherit; } .dcb-scope.dcb-scope :where(ul, ol) { list-style: none; } .dcb-scope.dcb-scope :where(button, input, select, textarea) { margin: 0; letter-spacing: normal; text-transform: none; --dcb-lh: 1.4; } .dcb-scope.dcb-scope :where(img, svg, picture) { max-width: 100%; vertical-align: middle; } /* ---------- ۱) توکن‌ها ---------- */ .dcb-scope { --dcb-ease: cubic-bezier(.22, 1, .36, 1); --dcb-spring: cubic-bezier(.34, 1.56, .64, 1); --dcb-dx: 1; --dcb-surface: var(--dcb-light-surface, #ffffff); --dcb-text: #0f172a; --dcb-muted: #64748b; --dcb-page: #f4f6fb; --dcb-surface-2: rgba(127, 127, 127, .09); --dcb-border: rgba(100, 116, 139, .24); --dcb-on-primary: #ffffff; --dcb-danger: #e11d48; --dcb-success: #059669; --dcb-warning: #d97706; --dcb-primary-soft: rgba(37, 99, 235, .11); --dcb-primary-ring: rgba(37, 99, 235, .32); --dcb-btn-radius: max(12px, calc(var(--dcb-radius, 16px) - 2px)); --dcb-shadow: var(--dcb-shadow-lvl, 0 6px 20px rgba(0, 0, 0, .1)); position: relative; max-width: var(--dcb-container-w, 1200px); margin-inline: auto; font-size: calc(var(--dcb-fs, 15px) + 1px); --dcb-lh: 1.7; color: var(--dcb-text); -webkit-font-smoothing: antialiased; } .dcb-scope.dcb-rtl { --dcb-dx: -1; } .dcb-scope, .dcb-scope *, .dcb-scope *::before, .dcb-scope *::after { box-sizing: border-box; } @supports (color: color-mix(in srgb, red 10%, transparent)) { .dcb-scope { --dcb-primary-soft: color-mix(in srgb, var(--dcb-primary) 11%, transparent); --dcb-primary-ring: color-mix(in srgb, var(--dcb-primary) 32%, transparent); } } /* حالت تیره (صریح، یا تشخیص‌داده‌شده برای حالت «هماهنگ با سایت») */ .dcb-scope[data-dcb-mode="dark"] { --dcb-surface: var(--dcb-dark-surface, #17181c); --dcb-text: #f1f5f9; --dcb-muted: #94a3b8; --dcb-page: var(--dcb-dark-page, #0d0d10); --dcb-border: rgba(148, 163, 184, .22); --dcb-shadow: 0 14px 38px rgba(0, 0, 0, .42); --dcb-danger: #fb7185; --dcb-success: #34d399; --dcb-warning: #fbbf24; } /* قبل از اجرای جاوااسکریپت، تنظیم سیستم‌عامل را اعمال کن (کاهش پرش رنگ) */ @media (prefers-color-scheme: dark) { .dcb-scope[data-dcb-theme="site"]:not([data-dcb-mode]) { --dcb-surface: var(--dcb-dark-surface, #17181c); --dcb-text: #f1f5f9; --dcb-muted: #94a3b8; --dcb-border: rgba(148, 163, 184, .22); } } /* تم صریح (روشن/تیره) پس‌زمینه خودش را دارد تا خوانایی با رنگ صفحه سایت تداخل نکند */ .dcb-scope[data-dcb-theme="light"], .dcb-scope[data-dcb-theme="dark"] { /* پیش‌فرض شفاف: رنگ صفحهٔ سایت دیده می‌شود. اگر مدیر «رنگ کادر پشت صفحه» را تنظیم کند، همان اعمال می‌شود. */ background: var(--dcb-panel-bg, transparent); padding: var(--dcb-panel-pad, 0); border-radius: calc(var(--dcb-radius, 16px) + 6px); } /* ---------- ۲) آیکون‌ها ---------- */ .dcb-scope .dcb-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; flex: 0 0 auto; --dcb-lh: 1; } .dcb-scope .dcb-icon .dcb-svg { width: 100%; height: 100%; display: block; overflow: visible; } .dcb-scope .dcb-icon--text { font-size: 1.2em; width: auto; } .dcb-scope .dcb-btn__icon { transition: transform .35s var(--dcb-ease); } /* ---------- ۳) دکمه‌ها ---------- */ .dcb-scope .dcb-btn { --_h: 46px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: var(--_h); padding: 0 1.6em; margin: 0; border: 0 !important; border-radius: var(--dcb-btn-radius) !important; font-family: inherit; font-size: .98em; font-weight: 700; --dcb-lh: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none !important; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: none; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform .35s var(--dcb-ease), box-shadow .35s var(--dcb-ease), background-color .25s ease, color .25s ease, filter .25s ease; } .dcb-scope .dcb-btn:focus-visible, .dcb-scope .dcb-icon-btn:focus-visible, .dcb-scope .dcb-qty__btn:focus-visible { outline: 3px solid var(--dcb-primary-ring); outline-offset: 2px; } .dcb-scope .dcb-btn--sm { --_h: 36px; padding: 0 1.1em; font-size: .91em; } .dcb-scope .dcb-btn--md { --_h: 46px; } .dcb-scope .dcb-btn--lg { --_h: 54px; padding: 0 2em; font-size: 1.05em; } .dcb-scope .dcb-btn--block { display: flex; width: 100%; } .dcb-scope .dcb-btn[disabled], .dcb-scope .dcb-btn.is-disabled { opacity: .55; pointer-events: none; } /* دکمه اصلی: گرادیان + نور عبوری (sheen) + سایه رنگی */ .dcb-scope .dcb-btn--primary { background: linear-gradient(135deg, var(--dcb-primary) 0%, var(--dcb-secondary, var(--dcb-primary)) 130%) !important; color: var(--dcb-on-primary) !important; box-shadow: 0 12px 26px -10px var(--dcb-primary-ring), inset 0 1px 0 rgba(255, 255, 255, .28); } .dcb-scope .dcb-btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(calc(var(--dcb-dx) * -130%)); transition: transform .75s var(--dcb-ease); } .dcb-scope .dcb-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px var(--dcb-primary-ring), inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--dcb-on-primary) !important; } .dcb-scope .dcb-btn--primary:hover::before { transform: translateX(calc(var(--dcb-dx) * 130%)); } .dcb-scope .dcb-btn--primary:active { transform: translateY(0) scale(.975); transition-duration: .12s; } /* دکمه ثانویه/بازگشت (Ghost) */ .dcb-scope .dcb-btn--ghost { background: var(--dcb-surface-2) !important; color: var(--dcb-text) !important; box-shadow: inset 0 0 0 1.5px var(--dcb-border); } .dcb-scope .dcb-btn--ghost:hover { background: var(--dcb-primary-soft) !important; color: var(--dcb-primary) !important; box-shadow: inset 0 0 0 1.5px var(--dcb-primary); transform: translateY(-1px); } .dcb-scope .dcb-btn--ghost:active { transform: scale(.97); } /* دکمه نرم (Soft) */ .dcb-scope .dcb-btn--soft { background: var(--dcb-primary-soft) !important; color: var(--dcb-primary) !important; } .dcb-scope .dcb-btn--soft:hover { background: var(--dcb-primary) !important; color: var(--dcb-on-primary) !important; transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--dcb-primary-ring); } .dcb-scope .dcb-btn--soft:active { transform: scale(.97); } /* دکمه متنی */ .dcb-scope .dcb-btn--text { background: transparent !important; color: var(--dcb-muted) !important; padding: 0 .9em; } .dcb-scope .dcb-btn--text:hover { color: var(--dcb-primary) !important; background: var(--dcb-primary-soft) !important; } .dcb-scope .dcb-btn--danger.dcb-btn--text:hover { color: var(--dcb-danger) !important; background: rgba(225, 29, 72, .1) !important; } /* حرکت فلش دکمه‌ها */ .dcb-scope .dcb-btn:hover .dcb-icon--dir.dcb-btn__icon { transform: translateX(calc(var(--dcb-dx) * 5px)); } .dcb-scope .dcb-step-back-btn:hover .dcb-btn__icon, .dcb-scope .dcb-continue-shopping-btn:hover .dcb-btn__icon { transform: translateX(calc(var(--dcb-dx) * -5px)); } /* حالت بارگذاری روی دکمه */ .dcb-scope .dcb-btn.is-loading { pointer-events: none; color: transparent !important; } .dcb-scope .dcb-btn.is-loading > * { opacity: 0; } .dcb-scope .dcb-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: dcb-spin .7s linear infinite; } .dcb-scope .dcb-btn--ghost.is-loading::after, .dcb-scope .dcb-btn--soft.is-loading::after { border-color: var(--dcb-primary-ring); border-top-color: var(--dcb-primary); } /* سبک دکمه: outline */ .dcb-scope.dcb-btn-outline .dcb-btn--primary { background: transparent !important; color: var(--dcb-primary) !important; box-shadow: inset 0 0 0 2px var(--dcb-primary); } .dcb-scope.dcb-btn-outline .dcb-btn--primary:hover { background: var(--dcb-primary) !important; color: var(--dcb-on-primary) !important; } .dcb-scope.dcb-btn-ghost .dcb-btn--primary { background: var(--dcb-primary-soft) !important; color: var(--dcb-primary) !important; box-shadow: none; } .dcb-scope.dcb-btn-ghost .dcb-btn--primary:hover { background: var(--dcb-primary) !important; color: var(--dcb-on-primary) !important; } /* افکت هاور */ .dcb-scope.dcb-hover-glow .dcb-btn--primary:hover { box-shadow: 0 0 0 4px var(--dcb-primary-ring), 0 14px 40px -8px var(--dcb-primary-ring); transform: none; } .dcb-scope.dcb-hover-scale .dcb-btn--primary:hover { transform: scale(1.03); } .dcb-scope.dcb-hover-none .dcb-btn--primary:hover { transform: none; } /* دکمه آیکونی */ .dcb-scope .dcb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin: 0; flex: 0 0 auto; border: 0 !important; border-radius: 12px !important; cursor: pointer; background: var(--dcb-surface-2) !important; color: var(--dcb-muted) !important; text-decoration: none !important; --dcb-lh: 1; transition: transform .3s var(--dcb-spring), background-color .2s ease, color .2s ease, box-shadow .2s ease; } .dcb-scope .dcb-icon-btn .dcb-icon { width: 19px; height: 19px; } .dcb-scope .dcb-icon-btn:hover { transform: scale(1.1); } .dcb-scope .dcb-icon-btn:active { transform: scale(.9); } .dcb-scope .dcb-icon-btn--danger:hover { background: var(--dcb-danger) !important; color: #fff !important; box-shadow: 0 8px 18px -8px var(--dcb-danger); } .dcb-scope .dcb-icon-btn--primary { background: var(--dcb-primary) !important; color: var(--dcb-on-primary) !important; box-shadow: 0 8px 18px -8px var(--dcb-primary-ring); } .dcb-scope .dcb-icon-btn--primary:hover { box-shadow: 0 10px 22px -6px var(--dcb-primary-ring); } .dcb-scope .dcb-icon-btn--soft:hover { background: var(--dcb-primary) !important; color: var(--dcb-on-primary) !important; } /* ریپل */ .dcb-ripple-effect { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: rgba(255, 255, 255, .45); transform: scale(0); animation: dcb-ripple .65s ease-out forwards; } .dcb-scope .dcb-method-card .dcb-ripple-effect, .dcb-scope .dcb-btn--ghost .dcb-ripple-effect, .dcb-scope .dcb-btn--soft .dcb-ripple-effect { background: var(--dcb-primary-ring); } /* ---------- ۴) کارت ---------- */ .dcb-scope .dcb-card { position: relative; background: var(--dcb-surface); color: var(--dcb-text); border: 1px solid var(--dcb-border); border-radius: var(--dcb-radius, 16px); box-shadow: var(--dcb-shadow); transition: box-shadow .35s var(--dcb-ease), transform .35s var(--dcb-ease), border-color .25s ease; } .dcb-scope .dcb-card a:not(.dcb-btn):not(.dcb-icon-btn) { color: inherit; } .dcb-scope .dcb-card__header { display: flex; align-items: center; gap: 12px; padding: calc(16px * var(--dcb-space, 1)) calc(20px * var(--dcb-space, 1)); cursor: pointer; user-select: none; } .dcb-scope .dcb-card__icon { width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--dcb-primary-soft); color: var(--dcb-primary); font-size: 18px; } .dcb-scope .dcb-card__title { margin: 0; padding: 0; font-size: 1.05em; font-weight: 800; flex: 1; color: var(--dcb-text); --dcb-lh: 1.5; } .dcb-scope .dcb-card__chevron { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--dcb-muted); transition: transform .35s var(--dcb-ease); } .dcb-scope .dcb-card__chevron .dcb-icon { width: 18px; height: 18px; } .dcb-scope .dcb-card.is-collapsed .dcb-card__chevron { transform: rotate(-90deg); } .dcb-scope .dcb-card.is-collapsed .dcb-card__body { display: none; } .dcb-scope .dcb-card__body { padding: 0 calc(20px * var(--dcb-space, 1)) calc(20px * var(--dcb-space, 1)); } /* ---------- ۵) اینپوت‌ها (خوانایی کامل در تم تیره/روشن؛ غلبه بر قالب) ---------- */ .dcb-scope label { color: var(--dcb-text); font-weight: 600; font-size: .9em; } .dcb-scope abbr.required, .dcb-scope .required { color: var(--dcb-danger); text-decoration: none; border: 0; } .dcb-scope input[type="text"], .dcb-scope input[type="email"], .dcb-scope input[type="tel"], .dcb-scope input[type="password"], .dcb-scope input[type="number"], .dcb-scope input[type="search"], .dcb-scope input[type="url"], .dcb-scope textarea, .dcb-scope select { width: 100%; min-height: 48px; padding: 10px 14px; margin: 0; background: var(--dcb-surface-2) !important; color: var(--dcb-text) !important; border: 1.5px solid var(--dcb-border) !important; border-radius: max(10px, calc(var(--dcb-radius, 16px) - 6px)) !important; font-family: inherit; font-size: 1em; box-shadow: none !important; transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease; } .dcb-scope textarea { min-height: 96px; resize: vertical; } .dcb-scope input::placeholder, .dcb-scope textarea::placeholder { color: var(--dcb-muted); opacity: .85; } .dcb-scope input:focus, .dcb-scope select:focus, .dcb-scope textarea:focus { outline: none; border-color: var(--dcb-primary) !important; box-shadow: 0 0 0 4px var(--dcb-primary-ring) !important; } .dcb-scope .woocommerce-invalid input, .dcb-scope .woocommerce-invalid select, .dcb-scope .woocommerce-invalid .select2-selection, .dcb-scope .dcb-invalid input, .dcb-scope .dcb-invalid select, .dcb-scope .dcb-invalid .select2-selection { border-color: var(--dcb-danger) !important; } .dcb-scope input[type="checkbox"], .dcb-scope input[type="radio"] { accent-color: var(--dcb-primary); width: 18px; height: 18px; min-height: 0; vertical-align: middle; } .dcb-scope .select2-container { width: 100% !important; } .dcb-scope .select2-container .select2-selection--single { height: 48px; background: var(--dcb-surface-2) !important; border: 1.5px solid var(--dcb-border) !important; border-radius: max(10px, calc(var(--dcb-radius, 16px) - 6px)) !important; } .dcb-scope .select2-container--default .select2-selection--single .select2-selection__rendered { --dcb-lh: 45px; color: var(--dcb-text); padding-inline: 14px; } .dcb-scope .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } .dcb-scope .select2-container--open .select2-selection--single, .dcb-scope .select2-container--focus .select2-selection--single { border-color: var(--dcb-primary) !important; box-shadow: 0 0 0 4px var(--dcb-primary-ring); } /* اعلان‌های ووکامرس داخل scope */ .dcb-scope .woocommerce-info, .dcb-scope .woocommerce-message, .dcb-scope .woocommerce-error, .dcb-scope .dcb-empty-note { list-style: none; margin: 0 0 16px; padding: 14px 18px !important; background: var(--dcb-surface) !important; color: var(--dcb-text) !important; border: 1px solid var(--dcb-border) !important; border-inline-start: 4px solid var(--dcb-primary) !important; border-radius: calc(var(--dcb-radius, 16px) - 4px) !important; box-shadow: var(--dcb-shadow); font-size: .95em; } .dcb-scope .woocommerce-info::before, .dcb-scope .woocommerce-message::before, .dcb-scope .woocommerce-error::before { display: none !important; } .dcb-scope .woocommerce-error { border-inline-start-color: var(--dcb-danger) !important; } .dcb-scope .woocommerce-message { border-inline-start-color: var(--dcb-success) !important; } .dcb-scope .woocommerce-info a, .dcb-scope .woocommerce-message a:not(.button) { color: var(--dcb-primary) !important; font-weight: 700; } .dcb-scope .woocommerce-error li { margin: 4px 0; } /* ---------- ۶) چیپ، بج، پراگرس، لودینگ ---------- */ .dcb-scope .dcb-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .77em; font-weight: 800; --dcb-lh: 1.7; color: #fff; background: var(--dcb-accent, #22c55e); background: linear-gradient(135deg, var(--dcb-accent, #22c55e), color-mix(in srgb, var(--dcb-accent, #22c55e) 70%, #000)); box-shadow: 0 6px 14px -6px var(--dcb-accent, #22c55e); } .dcb-scope .dcb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: .81em; font-weight: 700; --dcb-lh: 1.8; background: var(--dcb-surface-2); color: var(--dcb-muted); } .dcb-scope .dcb-chip .dcb-icon { width: 14px; height: 14px; } .dcb-scope .dcb-chip--in-stock { background: rgba(5, 150, 105, .13); color: var(--dcb-success); } .dcb-scope .dcb-chip--out-of-stock { background: rgba(225, 29, 72, .13); color: var(--dcb-danger); } .dcb-scope .dcb-chip--low-stock { background: rgba(217, 119, 6, .14); color: var(--dcb-warning); } .dcb-scope .dcb-chip--save { background: rgba(5, 150, 105, .13); color: var(--dcb-success); } .dcb-scope .dcb-progress { height: 10px; border-radius: 999px; background: var(--dcb-surface-2); overflow: hidden; position: relative; } .dcb-scope .dcb-progress__fill { height: 100%; width: var(--p, 0%); border-radius: inherit; position: relative; overflow: hidden; background: linear-gradient(90deg, var(--dcb-primary), var(--dcb-secondary, var(--dcb-primary))); transform-origin: var(--dcb-origin, right); animation: dcb-grow 1.1s var(--dcb-ease) both; } .dcb-scope:not(.dcb-rtl) .dcb-progress__fill { --dcb-origin: left; } .dcb-scope .dcb-progress__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%); background-size: 200% 100%; animation: dcb-shimmer 2.2s linear infinite; } .dcb-scope .dcb-progress__labels { display: flex; justify-content: space-between; font-size: .79em; color: var(--dcb-muted); margin-top: 6px; } .dcb-scope .dcb-skeleton, .dcb-scope.is-loading .dcb-card { position: relative; } .dcb-scope .dcb-card.is-busy { pointer-events: none; } .dcb-scope .dcb-card.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--dcb-surface) 70%, transparent) 40%, transparent 60%); background-size: 250% 100%; animation: dcb-shimmer 1.2s linear infinite; backdrop-filter: saturate(.8); } /* Toast */ .dcb-toast-host { position: fixed; inset-inline: 0; bottom: 18px; z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; padding: 0 14px; } .dcb-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 460px; width: max-content; padding: 12px 14px 12px 18px; border-radius: 16px; font-size: 14px; --dcb-lh: 1.6; font-weight: 600; background: #0f172a; color: #f8fafc; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .5); animation: dcb-toast-in .5s var(--dcb-spring) both; } .dcb-toast.is-leaving { animation: dcb-toast-out .3s ease forwards; } .dcb-toast--error { background: #7f1d1d; } .dcb-toast--success .dcb-toast__dot { background: #34d399; } .dcb-toast__dot { width: 9px; height: 9px; border-radius: 50%; background: #60a5fa; flex: 0 0 auto; } .dcb-toast--error .dcb-toast__dot { background: #fda4af; } .dcb-toast__action { margin-inline-start: 6px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; padding: 6px 14px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; transition: background .2s; } .dcb-toast__action:hover { background: rgba(255, 255, 255, .26); } /* ---------- ۷) کارت انتخابی (ارسال/پرداخت) ---------- */ .dcb-scope .dcb-method-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 22px 10px 14px; min-height: 164px; text-align: center; cursor: pointer; border-radius: max(12px, calc(var(--dcb-radius, 16px) - 3px)); border: 1.5px solid var(--dcb-border); background: var(--dcb-surface); color: var(--dcb-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px -14px rgba(15, 23, 42, .18); transition: transform .4s var(--dcb-spring), border-color .25s ease, background-color .25s ease, box-shadow .3s ease; } .dcb-scope .dcb-method-card:hover { transform: translateY(-3px); border-color: var(--dcb-primary); box-shadow: 0 14px 28px -14px var(--dcb-primary-ring); } .dcb-scope .dcb-method-card:active { transform: scale(.96); } .dcb-scope .dcb-method-card.is-selected { border-color: var(--dcb-primary); background: linear-gradient(180deg, var(--dcb-surface) 0%, var(--dcb-primary-soft) 140%); box-shadow: 0 0 0 3px var(--dcb-primary-ring), 0 16px 30px -18px var(--dcb-primary); } .dcb-scope .dcb-method-card__radio { position: absolute; opacity: 0; pointer-events: none; } .dcb-scope .dcb-method-card__check { position: absolute; top: 8px; inset-inline-end: 8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--dcb-primary); transform: scale(0); opacity: 0; transition: transform .45s var(--dcb-spring), opacity .2s; } .dcb-scope .dcb-method-card__check .dcb-icon { width: 13px; height: 13px; } .dcb-scope .dcb-method-card.is-selected .dcb-method-card__check { transform: scale(1); opacity: 1; } /* اندازه ثابت جعبه آیکون: تصویر سفارشی/SVG همیشه با حفظ نسبت داخل همین کادر می‌نشیند (بدون بهم‌ریختگی) */ .dcb-scope { --dcb-micon: 76px; } .dcb-scope.dcb-micon-sm { --dcb-micon: 60px; } .dcb-scope.dcb-micon-lg { --dcb-micon: 92px; } .dcb-scope .dcb-method-card__icon { position: relative; flex: 0 0 auto; width: var(--dcb-micon); height: var(--dcb-micon); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 9px; box-sizing: border-box; overflow: visible; background: radial-gradient(circle at 50% 30%, var(--dcb-surface) 0%, var(--dcb-primary-soft) 100%); transition: transform .5s var(--dcb-spring), background-color .25s; } .dcb-scope .dcb-method-card__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dcb-primary-ring); opacity: .5; } .dcb-scope .dcb-method-card__icon svg, .dcb-scope .dcb-method-card__icon img, .dcb-scope .dcb-method-detail-panel__disc svg, .dcb-scope .dcb-method-detail-panel__disc img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 8px rgba(30, 27, 75, .16)); } .dcb-scope .dcb-method-card:hover .dcb-method-card__icon { transform: translateY(-2px) scale(1.05); } .dcb-scope .dcb-method-card.is-selected .dcb-method-card__icon { transform: scale(1.06); background: radial-gradient(circle at 50% 30%, var(--dcb-surface) 0%, var(--dcb-primary-soft) 100%); } .dcb-scope .dcb-method-card.is-selected .dcb-method-card__icon::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--dcb-primary); } .dcb-scope .dcb-method-card.is-selected .dcb-method-card__icon svg, .dcb-scope .dcb-method-card.is-selected .dcb-method-card__icon img { animation: dcb-float-sm 3.2s ease-in-out infinite; } @keyframes dcb-float-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .dcb-scope .dcb-method-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; font-weight: 800; font-size: .92em; --dcb-lh: 1.45; width: 100%; } .dcb-scope .dcb-method-card__subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .79em; color: var(--dcb-muted); --dcb-lh: 1.5; width: 100%; } .dcb-scope .dcb-method-card__cost { font-weight: 800; font-size: .83em; color: var(--dcb-primary); } .dcb-scope .dcb-method-card__badge { position: absolute; top: 0; inset-inline-start: 10px; z-index: 3; margin: 0; padding: 3px 9px 4px; border-radius: 0 0 9px 9px; font-size: .71em; --dcb-lh: 1.4; font-weight: 800; white-space: nowrap; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; } .dcb-scope .dcb-method-card__check { top: 9px; } /* ---------- ۸) انیمیشن‌ها ---------- */ @keyframes dcb-rise { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes dcb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dcb-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } @keyframes dcb-spin { to { transform: rotate(360deg); } } @keyframes dcb-ripple { to { transform: scale(3.2); opacity: 0; } } @keyframes dcb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes dcb-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dcb-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes dcb-tick { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-6px); opacity: 0; } 41% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes dcb-toast-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes dcb-toast-out { to { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes dcb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes dcb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes dcb-pulse-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes dcb-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } .dcb-scope.dcb-anim-fade-on:not(.dcb-ready) .dcb-card, .dcb-scope.dcb-anim-fade-on:not(.dcb-ready) .dcb-stepper, .dcb-scope.dcb-anim-fade-on:not(.dcb-ready) .dcb-coupon-bar, .dcb-scope.dcb-anim-fade-on:not(.dcb-ready) .dcb-upsell-section { animation: dcb-rise .7s var(--dcb-ease) both; animation-delay: calc(var(--i, 0) * 70ms); } .dcb-scope.dcb-anim-slide-on .dcb-card.is-active-step .dcb-card__body, .dcb-scope.dcb-anim-slide-on .dcb-method-detail-panel.is-active { animation: dcb-rise .5s var(--dcb-ease) both; } .dcb-scope.dcb-anim-bounce-on .dcb-badge { animation: dcb-bounce 1.8s ease-in-out infinite; } .dcb-scope.dcb-anim-glow-on .dcb-method-card.is-selected, .dcb-scope.dcb-anim-glow-on .dcb-free-shipping-card.is-reached { box-shadow: 0 0 0 3px var(--dcb-primary-ring), 0 0 30px -4px var(--dcb-primary-ring); } .dcb-scope.dcb-anim-hover-on .dcb-card:hover { box-shadow: var(--dcb-shadow), 0 0 0 1px var(--dcb-primary-soft); } .dcb-scope.dcb-anim-scale-on .dcb-qty__btn:active, .dcb-scope.dcb-anim-scale-on .dcb-icon-btn:active { transform: scale(.88); } .dcb-scope .dcb-tick { animation: dcb-tick .5s var(--dcb-ease); } /* ---------- ۹) سبک‌های طراحی (Design Style) ---------- */ .dcb-scope.dcb-style-minimal .dcb-card { box-shadow: none; } .dcb-scope.dcb-style-minimal .dcb-btn--primary { box-shadow: none; } .dcb-scope.dcb-style-apple .dcb-card { border-radius: calc(var(--dcb-radius, 16px) + 8px); border-color: transparent; } .dcb-scope.dcb-style-apple { --dcb-btn-radius: 999px; } .dcb-scope.dcb-style-stripe .dcb-card { border-radius: 10px; box-shadow: 0 2px 5px rgba(50, 50, 93, .08), 0 1px 2px rgba(0, 0, 0, .06); } .dcb-scope.dcb-style-stripe { --dcb-btn-radius: 8px; } .dcb-scope.dcb-style-shopify .dcb-card { box-shadow: none; border-width: 1.5px; } .dcb-scope.dcb-style-shopify { --dcb-btn-radius: 8px; } .dcb-scope.dcb-style-material .dcb-card { border: 0; } .dcb-scope.dcb-style-glassmorphism .dcb-card, .dcb-scope.dcb-glass-on .dcb-card { background: color-mix(in srgb, var(--dcb-surface) 62%, transparent); -webkit-backdrop-filter: blur(var(--dcb-blur, 14px)) saturate(1.4); backdrop-filter: blur(var(--dcb-blur, 14px)) saturate(1.4); border-color: rgba(255, 255, 255, .18); } /* ---------- ۱۰) کاهش حرکت ---------- */ @media (prefers-reduced-motion: reduce) { /* ملایم: انیمیشن‌های ورود و انتقال‌های کوتاه می‌مانند؛ حرکت‌های بی‌پایان (شناور، درخشش) فقط یک‌بار اجرا می‌شوند */ .dcb-scope *, .dcb-scope *::before, .dcb-scope *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .dcb-scope .dcb-method-card__icon svg, .dcb-scope .dcb-method-card__icon img { animation: none !important; } } /* Stepper (shared by cart & checkout) */ .dcb-scope .dcb-stepper { display: flex; align-items: flex-start; justify-content: center; padding: 22px 8px 28px; margin: 0 0 6px; } .dcb-scope .dcb-stepper__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 76px; } .dcb-scope .dcb-stepper__circle { position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dcb-surface); color: var(--dcb-muted); border: 2px solid var(--dcb-border); transition: transform .5s var(--dcb-spring), background .35s ease, color .3s ease, border-color .3s ease, box-shadow .4s ease; } .dcb-scope .dcb-stepper__icon { width: 20px; height: 20px; transition: opacity .2s ease, transform .4s var(--dcb-spring); } .dcb-scope .dcb-stepper__check { position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #059669); color: #fff; opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .25s ease, transform .55s var(--dcb-spring); } .dcb-scope .dcb-stepper__check .dcb-icon { width: 20px; height: 20px; } .dcb-scope .dcb-stepper__check path { stroke-dasharray: 30; stroke-dashoffset: 30; } .dcb-scope .dcb-stepper__step.is-done .dcb-stepper__check path { animation: dcb-draw .5s .15s var(--dcb-ease) forwards; } .dcb-scope .dcb-stepper__step.is-current .dcb-stepper__circle { transform: scale(1.12); color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--dcb-primary), var(--dcb-secondary, var(--dcb-primary))); box-shadow: 0 0 0 6px var(--dcb-primary-soft), 0 14px 26px -10px var(--dcb-primary-ring); } .dcb-scope .dcb-stepper__step.is-current .dcb-stepper__circle::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--dcb-primary); animation: dcb-pulse-ring 2s ease-out infinite; pointer-events: none; } .dcb-scope .dcb-stepper__step.is-done .dcb-stepper__circle { border-color: transparent; box-shadow: 0 10px 20px -10px rgba(5, 150, 105, .7); } .dcb-scope .dcb-stepper__step.is-done .dcb-stepper__check { opacity: 1; transform: none; } .dcb-scope .dcb-stepper__step.is-done .dcb-stepper__icon { opacity: 0; } .dcb-scope .dcb-stepper__label { font-size: .85em; color: var(--dcb-muted); white-space: nowrap; font-weight: 600; transition: color .25s ease; } .dcb-scope .dcb-stepper__step.is-current .dcb-stepper__label { color: var(--dcb-primary); font-weight: 800; } .dcb-scope .dcb-stepper__step.is-done .dcb-stepper__label { color: var(--dcb-success); } .dcb-scope .dcb-stepper__line { flex: 1; max-width: 90px; min-width: 24px; height: 3px; border-radius: 3px; background: var(--dcb-border); margin-top: 22px; position: relative; overflow: hidden; } .dcb-scope .dcb-stepper__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #22c55e, #059669); transform: scaleX(0); transform-origin: var(--dcb-origin, right); transition: transform .7s var(--dcb-ease); } .dcb-scope:not(.dcb-rtl) .dcb-stepper__line::after { --dcb-origin: left; } .dcb-scope .dcb-stepper__step.is-done + .dcb-stepper__line::after { transform: scaleX(1); } @media (max-width: 640px) { .dcb-scope .dcb-stepper { padding: 14px 0 20px; } .dcb-scope .dcb-stepper__step { min-width: 58px; } .dcb-scope .dcb-stepper__label { font-size: .75em; } .dcb-scope .dcb-stepper__circle { width: 40px; height: 40px; } .dcb-scope .dcb-stepper__line { margin-top: 19px; min-width: 14px; } } /* ---------- سخت‌سازی نهایی (قوانین تهاجمی قالب: ارتفاع دکمه/فیلد، کشیده‌شدن چیپ‌ها و ...) ---------- */ .dcb-scope .dcb-btn { height: var(--_h) !important; min-height: var(--_h) !important; padding-block: 0 !important; --dcb-lh: 1.2; width: auto; max-width: 100%; } .dcb-scope .dcb-btn--block { width: 100% !important; } .dcb-scope .dcb-btn > span { flex: 0 0 auto; } .dcb-scope input[type="text"], .dcb-scope input[type="email"], .dcb-scope input[type="tel"], .dcb-scope input[type="password"], .dcb-scope input[type="number"], .dcb-scope input[type="search"], .dcb-scope input[type="url"], .dcb-scope select { height: 48px !important; min-height: 48px !important; --dcb-lh: 1.4; } .dcb-scope .dcb-coupon-form, .dcb-scope .dcb-coupon-input-row { display: flex; flex-direction: row; gap: 10px; align-items: stretch; } .dcb-scope .dcb-coupon-input-row input, .dcb-scope .dcb-coupon-field { flex: 1 1 auto; min-width: 0; width: auto; } .dcb-scope .dcb-coupon-input-row .dcb-btn, .dcb-scope .dcb-coupon-form .dcb-btn { flex: 0 0 auto; } .dcb-scope .dcb-chip { flex: 0 0 auto !important; width: auto !important; max-width: 100%; align-self: flex-start; } .dcb-scope .dcb-count-pill, .dcb-scope .dcb-badge { flex: 0 0 auto !important; width: auto !important; } /* ---------- ابعاد ثابت دکمه‌های کوچک و شمارنده (مقاوم در برابر height/padding قالب) ---------- */ .dcb-scope .dcb-icon-btn { width: 40px !important; height: 40px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; --dcb-lh: 1; flex: 0 0 auto; } .dcb-scope .dcb-qty__btn { width: 34px !important; height: 34px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; --dcb-lh: 1; } .dcb-scope .dcb-qty .dcb-qty__input { width: 46px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; --dcb-lh: 34px; } .dcb-scope .dcb-remove-coupon { width: 22px !important; height: 22px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; flex: 0 0 auto; } .dcb-scope .dcb-qty { flex: 0 0 auto; height: auto; } /* ---------- قفل ارتفاع خط و جهت متن (مقاوم در برابر قوانین !important قالب) ---------- قالب نمی‌تواند متغیر --dcb-lh را تغییر دهد؛ هر کلاس افزونه مقدار خودش را با این متغیر تعیین می‌کند. */ .dcb-scope.dcb-scope.dcb-scope, .dcb-scope.dcb-scope.dcb-scope *, .dcb-scope.dcb-scope.dcb-scope *::before, .dcb-scope.dcb-scope.dcb-scope *::after { line-height: var(--dcb-lh, 1.7) !important; } .dcb-scope.dcb-scope.dcb-scope :is(h1, h2, h3, h4, h5, h6, p) { text-align: var(--dcb-ta, start) !important; margin: 0 !important; padding: 0 !important; } .dcb-scope .dcb-cart-empty-card, .dcb-scope .dcb-trust-badge, .dcb-scope .dcb-method-card { --dcb-ta: center; } .dcb-scope .dcb-coupon-label { margin: 0 !important; } /* ===== v2.5 ===== */ /* محتوا داخل بلوک «کد» (pre) قرار گرفته بود: فاصله‌ها و خط‌شکن‌های قالب به‌صورت فضای خالی دیده می‌شد */ .dcb-scope.dcb-scope { white-space: normal !important; tab-size: 4; font-variant-ligatures: normal; } .dcb-scope .dcb-nowrap, .dcb-scope .dcb-btn, .dcb-scope .dcb-count-pill { white-space: nowrap; } .dcb-scope .dcb-qty { direction: rtl; } .dcb-scope .dcb-qty__btn.is-remove { color: var(--dcb-danger, #e11d48); } .dcb-scope .dcb-qty__btn.is-remove:hover { background: rgba(225, 29, 72, .12) !important; } .dcb-scope .dcb-qty__input { -moz-appearance: textfield; text-align: center !important; } /* دکمهٔ «بازگردانی» در اعلان */ .dcb-toast { gap: 10px; } .dcb-toast .dcb-toast__action { position: relative; display: inline-flex !important; align-items: center; gap: 6px; margin-inline: 8px 0 !important; padding: 0 16px !important; height: 34px !important; min-height: 0 !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 999px !important; background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)) !important; color: #fff !important; font: inherit !important; font-size: .9em !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25) !important; cursor: pointer; overflow: hidden; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s !important; } .dcb-toast .dcb-toast__action::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 0 0-15-6.7L3 13'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 0 0-15-6.7L3 13'/%3E%3C/svg%3E") center/contain no-repeat; } .dcb-toast .dcb-toast__action:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .18)) !important; transform: translateY(-1px); } .dcb-toast .dcb-toast__action:active { transform: scale(.94); } .dcb-toast { position: relative; overflow: hidden; } .dcb-toast__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .55); transform-origin: right center; animation: dcb-toast-bar linear forwards; } @keyframes dcb-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ===== v3.0.1: اگر خروجی داخل بلوک «کد» (pre) یا کانتینر روشنِ قالب قرار گرفته باشد، پس‌زمینهٔ سفید/خاکستری و فونت کد آن حذف می‌شود ===== */ pre:has(> .dcb-scope), pre:has(> .woocommerce > .dcb-scope), pre.wp-block-code:has(.dcb-scope), code:has(> .dcb-scope) { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: inherit !important; white-space: normal !important; overflow: visible !important; font-family: inherit !important; font-size: inherit !important; box-shadow: none !important; border-radius: 0 !important; } .wp-block-code:has(.dcb-scope) code { background: transparent !important; padding: 0 !important; white-space: normal !important; }