/** * AGH UX Commerce — Main Stylesheet v1.5.4 * * RTL-first design system for Iran market WooCommerce UX. * Covers: cart drawer, cart page, checkout page, product widget. * Uses CSS custom properties for admin-overridable theming. * Mobile-first responsive with no external dependencies. * * Checkout UX elements rendered via native WC hooks (v1.5.0+): * - .agh-tutorial-bar / .agh-tutorial-btn : woocommerce_before_checkout_form * - .agh-vpn-notice : woocommerce_review_order_before_submit * - #place_order.agh-co-submit-btn : woocommerce_order_button_html filter * * @package AGH_UX_Commerce */ /* ── Design Tokens ──────────────────────────────────────────────────────────── */ :root { /* برند کوهدار */ --agh-primary: #0A3E43; --agh-primary-hover: #072e32; --agh-primary-text: #ffffff; --agh-gold: #E0C26D; --agh-gold-hover: #c9a94e; --agh-green: #27ae60; --agh-green-hover: #219150; --agh-success: #27ae60; --agh-success-light: #f0fdf4; --agh-danger: #e53e3e; --agh-danger-light: #fff5f5; --agh-warning: #d97706; --agh-warning-light: #fffbeb; --agh-cashback: #0891b2; --agh-cashback-light: #ecfeff; --agh-bg: #f4f6f8; --agh-card-bg: #ffffff; --agh-border: #e2e8f0; --agh-border-radius: 12px; --agh-shadow-sm: 0 1px 3px rgba(0,0,0,.08); --agh-shadow-md: 0 4px 12px rgba(0,0,0,.08); --agh-shadow-lg: 0 10px 30px rgba(0,0,0,.12); --agh-text: #1a1a2e; --agh-text-muted: #64748b; --agh-text-light: #94a3b8; --agh-font: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif; --agh-transition: 280ms cubic-bezier(.4, 0, .2, 1); --agh-drawer-width: 400px; --agh-container-max: 1240px; } /* ── Base: Direction & Font ─────────────────────────────────────────────────── */ .agh-cart-page, .agh-checkout-page, .agh-cart-drawer, .agh-products-grid { direction: rtl; font-family: var(--agh-font); color: var(--agh-text); } /* ── Layout Container ────────────────────────────────────────────────────────── */ .agh-container { max-width: var(--agh-container-max); margin-inline: auto; padding-inline: 20px; padding-block: 32px; } /* ── Spinner ─────────────────────────────────────────────────────────────────── */ .agh-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: agh-spin .7s linear infinite; vertical-align: middle; } @keyframes agh-spin { to { transform: rotate(360deg); } } /* ── Body Lock (scroll prevention when drawer open) ─────────────────────────── */ body.agh-body-locked { overflow: hidden; /* Compensate for scrollbar removal to prevent layout shift */ padding-inline-end: var(--scrollbar-width, 0px); } /* ═══════════════════════════════════════════════════════════════════════════ CART DRAWER — برند کوهدار ═══════════════════════════════════════════════════════════════════════════ */ .agh-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity var(--agh-transition), visibility var(--agh-transition); backdrop-filter: blur(2px); } .agh-drawer-overlay.agh-overlay--visible { opacity: 1; visibility: visible; } .agh-cart-drawer { position: fixed; top: 0; right: 0; width: 340px; max-width: 100vw; height: 100dvh; background: #fff; z-index: 9999; display: flex; flex-direction: column; box-shadow: -4px 0 30px rgba(0,0,0,.15); transform: translateX(100%); transition: transform var(--agh-transition); direction: rtl; font-family: var(--agh-font); } @media (max-width: 480px) { .agh-cart-drawer { width: 100vw; } } .agh-cart-drawer.agh-drawer--open { transform: translateX(0); } /* Header */ .agh-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--agh-primary); color: #fff; flex-shrink: 0; } .agh-drawer-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: #fff; } .agh-drawer-count { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 400; } .agh-drawer-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: rgba(255,255,255,.15); border-radius: 8px; cursor: pointer; color: #fff; font-size: 15px; font-weight: 700; transition: background var(--agh-transition); flex-shrink: 0; } .agh-drawer-close:hover { background: rgba(255,255,255,.3); } /* Body */ .agh-drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; position: relative; scroll-behavior: smooth; background: #f7f8fa; } .agh-drawer-body.agh-loading { opacity: .6; pointer-events: none; } /* Free shipping bar */ .agh-drawer-shipping-bar { background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--agh-border); } .agh-shipping-hint { margin: 0 0 8px; color: var(--agh-text); font-size: 13px; } .agh-shipping-hint strong { color: var(--agh-primary); } .agh-shipping-success { margin: 0; color: var(--agh-success); font-weight: 700; font-size: 13px; } .agh-progress-bar { height: 7px; background: #e8ecef; border-radius: 99px; overflow: hidden; } .agh-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--agh-success), #52c77c); transition: width var(--agh-transition); min-width: 4px; } /* Drawer Items */ .agh-drawer-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .agh-drawer-item { background: #fff; border-radius: 10px; border: 1px solid var(--agh-border); padding: 12px; display: flex; gap: 10px; align-items: flex-start; transition: opacity var(--agh-transition), transform var(--agh-transition); position: relative; } .agh-drawer-item.agh-item--removing { opacity: .3; transform: translateX(20px); pointer-events: none; } /* حذف (x) بالای کارت */ .agh-remove-item { position: absolute; top: 8px; left: 8px; background: none; border: none; cursor: pointer; color: var(--agh-text-muted); padding: 2px; font-size: 16px; font-weight: 700; line-height: 1; transition: color var(--agh-transition); } .agh-remove-item:hover { color: var(--agh-danger); } /* تصویر */ .agh-item-image-link { flex-shrink: 0; } .agh-item-image { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #f5f5f5; display: block; } /* اطلاعات */ .agh-item-details { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 24px; /* فضا برای دکمه حذف */ } .agh-item-title { font-size: 13px; font-weight: 600; color: var(--agh-text); text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .agh-item-title:hover { color: var(--agh-primary); } /* کنترل تعداد + قیمت */ .agh-item-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .agh-item-price { font-size: 12px; font-weight: 700; color: var(--agh-success); } .agh-qty-control { display: flex; align-items: center; border: 1.5px solid var(--agh-border); border-radius: 8px; overflow: hidden; } .agh-qty-btn { width: 28px; height: 28px; border: none; background: #f5f5f5; color: var(--agh-text); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms; flex-shrink: 0; } .agh-qty-btn:hover:not(:disabled) { background: #e0e0e0; } .agh-qty-btn:disabled { opacity: .4; cursor: not-allowed; } .agh-qty-display { padding-inline: 8px; font-size: 14px; font-weight: 700; min-width: 28px; text-align: center; color: var(--agh-text); } .agh-qty-input { width: 36px; height: 28px; border: none; text-align: center; font-size: 13px; font-weight: 700; background: transparent; font-family: var(--agh-font); } /* Footer Summary */ .agh-drawer-footer { flex-shrink: 0; border-top: 1px solid var(--agh-border); background: #fff; } .agh-drawer-summary-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .agh-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--agh-text); } .agh-summary-row strong { font-size: 16px; color: var(--agh-primary); font-weight: 800; } .agh-cashback-row { color: var(--agh-cashback); font-size: 12px; } .agh-cashback-amount { font-weight: 700; } .agh-min-order-warning { background: var(--agh-warning-light); color: var(--agh-warning); border-radius: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .agh-login-nudge { font-size: 12px; color: var(--agh-text-muted); text-align: center; } .agh-login-nudge a { color: var(--agh-primary); font-weight: 600; text-decoration: none; } /* دکمه‌های CTA */ .agh-drawer-actions { display: flex; flex-direction: column; gap: 8px; } .agh-btn-primary, .agh-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; border-radius: 10px; font-family: var(--agh-font); font-size: 14px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: background var(--agh-transition), opacity var(--agh-transition); } .agh-btn-primary { background: var(--agh-success); color: #fff; } .agh-btn-primary:hover { background: var(--agh-green-hover); color: #fff; } .agh-btn-primary.agh-btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .agh-btn-secondary { background: var(--agh-primary); color: #fff; } .agh-btn-secondary:hover { background: var(--agh-primary-hover); color: #fff; } /* Empty state */ .agh-drawer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 16px; text-align: center; } .agh-drawer-empty p { color: var(--agh-text-muted); font-size: 14px; margin: 0; } .agh-drawer-empty .agh-btn-secondary { width: auto; padding: 10px 24px; } /* ═══════════════════════════════════════════════════════════════════════════ CART PAGE — برند کوهدار ═══════════════════════════════════════════════════════════════════════════ */ .agh-cart-page { direction: rtl; font-family: var(--agh-font); background: var(--agh-bg); min-height: 60vh; } .agh-cart-page .agh-container { padding-block: 24px; } /* cashback notice مطابق تصویر ۲ */ .agh-cashback-notice { background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; font-weight: 500; } .agh-cashback-notice strong { font-weight: 800; } .agh-cashback-notice-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; } /* shipping progress */ .agh-cart-shipping-bar { background: #fff; border: 1px solid var(--agh-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--agh-text); } .agh-cart-shipping-bar p { margin: 0 0 8px; } .agh-cart-shipping-bar p strong { color: var(--agh-success); } /* Cart rows */ .agh-cart-rows { display: flex; flex-direction: column; gap: 0; } .agh-cart-row { background: #fff; border: 1px solid var(--agh-border); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; gap: 14px; align-items: center; transition: box-shadow var(--agh-transition); } .agh-cart-row:hover { box-shadow: var(--agh-shadow-sm); } .agh-cart-row.agh-row--updating { opacity: .6; pointer-events: none; } .agh-cart-row.agh-row--removing { opacity: .3; pointer-events: none; } .agh-cart-row-image { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f5f5f5; } @media (max-width: 480px) { .agh-cart-row-image { width: 70px; height: 70px; } } .agh-cart-row-body { flex: 1; min-width: 0; } .agh-cart-row-title { font-size: 14px; font-weight: 600; color: var(--agh-text); text-decoration: none; display: block; margin-bottom: 8px; line-height: 1.4; } .agh-cart-row-title:hover { color: var(--agh-primary); } .agh-cart-row-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* qty inline control */ .agh-cart-inline-qty { display: flex; align-items: center; border: 1.5px solid var(--agh-border); border-radius: 8px; overflow: hidden; } .agh-cart-inline-qty .agh-qty-btn { width: 32px; height: 32px; border: none; background: #f5f5f5; color: var(--agh-text); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; } .agh-cart-inline-qty .agh-qty-btn:hover { background: var(--agh-border); } .agh-cart-inline-qty input { width: 40px; height: 32px; border: none; text-align: center; font-family: var(--agh-font); font-size: 14px; font-weight: 700; background: #fff; } .agh-cart-row-price { font-size: 14px; font-weight: 700; color: var(--agh-success); } .agh-cart-row-remove { background: none; border: none; cursor: pointer; color: var(--agh-text-muted); padding: 4px; font-size: 18px; transition: color var(--agh-transition); flex-shrink: 0; } .agh-cart-row-remove:hover { color: var(--agh-danger); } .agh-cart-row-subtotal { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 100px; } .agh-cart-row-subtotal small { font-size: 11px; color: var(--agh-text-muted); } .agh-cart-row-subtotal strong { font-size: 15px; font-weight: 800; color: var(--agh-primary); } /* Cart summary */ .agh-cart-summary-card { background: #fff; border-radius: 12px; border: 1px solid var(--agh-border); padding: 20px; box-shadow: var(--agh-shadow-sm); } .agh-cart-summary-title { font-size: 15px; font-weight: 700; color: var(--agh-primary); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--agh-gold); } .agh-cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--agh-text); margin-bottom: 10px; } .agh-cart-summary-total { font-size: 16px; font-weight: 800; color: var(--agh-primary); } .agh-cart-summary-divider { height: 1px; background: var(--agh-border); margin: 12px 0; } #agh-checkout-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: var(--agh-success); color: #fff; border: none; border-radius: 10px; margin-top: 12px; font-family: var(--agh-font); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--agh-transition); } #agh-checkout-cta:hover { background: var(--agh-green-hover); } #agh-checkout-cta.agh-btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ CHECKOUT PAGE SHARED COMPONENTS These classes are used by both Classic and Block checkout paths. They are NOT scoped to body.agh-checkout-active because they apply to elements injected via woocommerce_before_checkout_form and similar hooks which fire outside the
tag — the body class is not yet reliable at that point in the Classic render order. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tutorial bar (injected via woocommerce_before_checkout_form) ── */ .agh-tutorial-bar { background: var(--agh-gold); padding: 10px 16px; text-align: center; } .agh-tutorial-btn { color: var(--agh-primary); font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.3); padding: 6px 18px; border-radius: 20px; transition: background var(--agh-transition); } .agh-tutorial-btn:hover { background: rgba(255,255,255,.55); } /* ── VPN notice (injected via woocommerce_review_order_before_submit) ── */ .agh-vpn-notice { font-size: 13px; text-align: center; margin: 8px 0 12px; color: var(--agh-text-muted); direction: rtl; font-family: var(--agh-font); } /* ── Card (used by Classic template remnants and cart page) ── */ .agh-co-card { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); padding: 20px; margin-bottom: 16px; box-shadow: var(--agh-shadow-sm); } .agh-co-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--agh-primary); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--agh-gold); } .agh-co-icon { font-size: 18px; } /* ── Field helpers ── */ .agh-co-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 480px) { .agh-co-row-split { grid-template-columns: 1fr; } } .agh-co-field { margin-bottom: 14px; } .agh-co-field:last-child { margin-bottom: 0; } .agh-co-label { display: block; font-size: 13px; font-weight: 600; color: var(--agh-text); margin-bottom: 6px; } .agh-req { color: var(--agh-danger); font-size: 11px; margin-right: 2px; } .agh-co-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--agh-border); border-radius: 8px; font-family: var(--agh-font); font-size: 14px; color: var(--agh-text); background: #fff; box-sizing: border-box; transition: border-color var(--agh-transition), box-shadow var(--agh-transition); outline: none; } .agh-co-input:focus { border-color: var(--agh-primary); box-shadow: 0 0 0 3px rgba(10,62,67,.12); } .agh-co-input.agh-field--error { border-color: var(--agh-danger); } .agh-co-textarea { min-height: 80px; resize: vertical; line-height: 1.6; } /* ── Payment gateway cards (cart drawer checkout CTA context) ── */ .agh-co-gateways { display: flex; flex-direction: column; gap: 10px; } .agh-co-gateway { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--agh-border); border-radius: 10px; cursor: pointer; transition: border-color var(--agh-transition), background var(--agh-transition); } .agh-co-gateway--active { border-color: var(--agh-primary); background: rgba(10,62,67,.04); } .agh-co-gateway-radio { position: absolute; opacity: 0; pointer-events: none; } .agh-co-gateway-icon { font-size: 22px; flex-shrink: 0; } .agh-co-gateway-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .agh-co-gateway-info strong { font-size: 14px; color: var(--agh-text); } .agh-co-gateway-info small { font-size: 12px; color: var(--agh-text-muted); } .agh-co-gateway-check { width: 22px; height: 22px; border-radius: 50%; background: var(--agh-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; flex-shrink: 0; transition: background var(--agh-transition), color var(--agh-transition); } .agh-co-gateway--active .agh-co-gateway-check { background: var(--agh-primary); color: #fff; } /* ── Summary card (used by Classic checkout aside + cart drawer) ── */ .agh-co-summary-card { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); box-shadow: var(--agh-shadow-md); overflow: hidden; } @media (min-width: 900px) { .agh-co-summary-card { position: sticky; top: 80px; } } .agh-co-summary-header { display: flex; justify-content: space-between; padding: 14px 18px; background: var(--agh-primary); color: #fff; font-size: 14px; font-weight: 700; } .agh-co-items { list-style: none; padding: 0; margin: 0; } .agh-co-item { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--agh-border); font-size: 13px; } .agh-co-item-name { flex: 1; color: var(--agh-text); line-height: 1.4; } .agh-co-item-name em { color: var(--agh-text-muted); font-style: normal; font-size: 12px; } .agh-co-item-price { font-weight: 700; color: var(--agh-primary); white-space: nowrap; font-size: 13px; } .agh-co-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--agh-border); border-radius: 6px; overflow: hidden; flex-shrink: 0; } .agh-co-qty-btn { width: 26px; height: 28px; border: none; background: var(--agh-bg); color: var(--agh-text); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms; } .agh-co-qty-btn:hover { background: var(--agh-border); } .agh-co-qty-ctrl span { padding-inline: 8px; font-size: 13px; font-weight: 700; min-width: 20px; text-align: center; } .agh-co-summary-rows { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .agh-co-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--agh-text); } .agh-co-summary-row strong { color: var(--agh-primary); font-size: 14px; } .agh-co-summary-divider { height: 1px; background: var(--agh-border); margin: 2px 0; } .agh-co-total-row { font-size: 15px; font-weight: 700; } .agh-co-free-ship { color: var(--agh-success); font-size: 12px; } .agh-co-shipping-row { font-size: 12px; } /* ── Submit button (shared between Classic custom template and WC native) ── */ .agh-co-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 36px); margin: 0 18px 16px; padding: 14px; background: var(--agh-success); color: #fff; border: none; border-radius: 10px; font-family: var(--agh-font); font-size: 15px; font-weight: 700; cursor: pointer; transition: background var(--agh-transition), transform 100ms; } .agh-co-submit-btn:hover:not(:disabled) { background: var(--agh-green-hover); transform: translateY(-1px); } .agh-co-submit-btn:disabled { opacity: .7; cursor: not-allowed; } .agh-co-submit-btn .agh-btn-loading { display: none; align-items: center; gap: 8px; } .agh-co-submit-btn.agh-btn--loading .agh-btn-text { display: none; } .agh-co-submit-btn.agh-btn--loading .agh-btn-loading { display: flex; } .agh-co-submit-btn .agh-spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; width: 16px; height: 16px; } /* ── WC native #place_order button overrides ─────────────────────────────── */ /* width/padding corrections so the button fills the order-review column. */ /* All other states (hover, disabled, loading) cascade from above. */ #place_order.agh-co-submit-btn { width: 100%; margin: 0 0 16px; padding: 14px 24px; font-size: 16px; border-radius: var(--agh-border-radius); } #place_order.agh-co-submit-btn.agh-btn--loading { opacity: .85; cursor: wait; } /* ── Checkout message (legacy, used by AJAX error display) ── */ .agh-checkout-message { padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 18px; } .agh-checkout-message.agh-msg--success { background: var(--agh-success-light); color: var(--agh-success); border: 1px solid #86efac; } .agh-checkout-message.agh-msg--error { background: var(--agh-danger-light); color: var(--agh-danger); border: 1px solid #fca5a5; } .agh-co-trust { list-style: none; padding: 12px 18px 16px; margin: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--agh-border); } .agh-co-trust li { font-size: 12px; color: var(--agh-text-muted); display: flex; align-items: center; gap: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ CHECKOUT PAGE — WC NATIVE FORM STYLING Scoped entirely under body.agh-checkout-active. This class is added by Checkout_Template::add_body_classes() using agh_ux_is_checkout_page() — reliable for Classic AND Block-based checkout. ALL styles here are PRESENTATION ONLY. Data, validation, and submission remain 100% owned by WooCommerce. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page level ──────────────────────────────────────────────────────────── */ body.agh-checkout-active { background: var(--agh-bg); font-family: var(--agh-font); direction: rtl; } /* ── Container max-width and centering ───────────────────────────────────── */ body.agh-checkout-active .woocommerce, body.agh-checkout-active .woocommerce-page .woocommerce { max-width: 1100px; margin: 0 auto; padding: 24px 16px; direction: rtl; font-family: var(--agh-font); } body.agh-checkout-active .woocommerce-checkout { direction: rtl; font-family: var(--agh-font); } /* ── 2-column grid: billing left, order review right ─────────────────────── */ /* Matches the v1.4 custom template layout exactly. */ /* WC Classic: #customer_details + h3#order_review_heading + #order_review */ /* WC Blocks: block renderer handles its own grid; these rules are inert. */ body.agh-checkout-active form.checkout, body.agh-checkout-active form.woocommerce-checkout { display: grid; grid-template-columns: 1fr 380px; grid-template-areas: "fields review" "fields review"; gap: 24px; align-items: start; direction: rtl; } @media (max-width: 900px) { body.agh-checkout-active form.checkout, body.agh-checkout-active form.woocommerce-checkout { grid-template-columns: 1fr; grid-template-areas: "review" "fields"; } } /* Grid area assignments */ body.agh-checkout-active #customer_details { grid-area: fields; } body.agh-checkout-active h3#order_review_heading { grid-area: review; margin-bottom: 0; } body.agh-checkout-active #order_review { grid-area: review; } /* ── Remove WC default float layout ─────────────────────────────────────── */ body.agh-checkout-active #customer_details::after, body.agh-checkout-active form.checkout::after, body.agh-checkout-active .col2-set::after { display: none; } body.agh-checkout-active #customer_details *, body.agh-checkout-active form.checkout > div { float: none !important; } /* WC col2-set width override */ body.agh-checkout-active .woocommerce .col2-set, body.agh-checkout-active .woocommerce-page .col2-set { width: 100%; float: none; } body.agh-checkout-active .woocommerce .col2-set .col-1, body.agh-checkout-active .woocommerce .col2-set .col-2 { float: none; width: 100%; } /* ── Card-style wrappers for billing sections ────────────────────────────── */ /* Matches v1.4 .agh-co-card appearance */ body.agh-checkout-active #customer_details > div, body.agh-checkout-active #customer_details .woocommerce-billing-fields, body.agh-checkout-active #customer_details .woocommerce-additional-fields { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); padding: 20px; margin-bottom: 16px; box-shadow: var(--agh-shadow-sm); } /* ── Section headings ────────────────────────────────────────────────────── */ body.agh-checkout-active h3#order_review_heading, body.agh-checkout-active .woocommerce-checkout h3, body.agh-checkout-active .woocommerce-billing-fields h3, body.agh-checkout-active .woocommerce-additional-fields h3 { font-size: 15px; font-weight: 700; color: var(--agh-primary); font-family: var(--agh-font); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--agh-gold); direction: rtl; } /* ── Input fields ────────────────────────────────────────────────────────── */ body.agh-checkout-active .woocommerce-checkout .input-text, body.agh-checkout-active .woocommerce-checkout select, body.agh-checkout-active .woocommerce-checkout textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--agh-border); border-radius: 8px; font-family: var(--agh-font); font-size: 14px; color: var(--agh-text); background: #fff; box-sizing: border-box; transition: border-color var(--agh-transition), box-shadow var(--agh-transition); outline: none; } body.agh-checkout-active .woocommerce-checkout .input-text:focus, body.agh-checkout-active .woocommerce-checkout select:focus, body.agh-checkout-active .woocommerce-checkout textarea:focus { border-color: var(--agh-primary); box-shadow: 0 0 0 3px rgba(10,62,67,.12); } /* ── Labels ──────────────────────────────────────────────────────────────── */ body.agh-checkout-active .woocommerce-checkout label { display: block; font-size: 13px; font-weight: 600; color: var(--agh-text); font-family: var(--agh-font); margin-bottom: 6px; direction: rtl; } /* ── Required star ───────────────────────────────────────────────────────── */ body.agh-checkout-active .woocommerce-checkout .required, body.agh-checkout-active .woocommerce-checkout abbr[title] { color: var(--agh-danger); font-size: 11px; text-decoration: none; border: none; cursor: default; } /* ── First name + last name side-by-side (v1.4 split row) ───────────────── */ /* billing_address_1 and billing_phone are form-row-wide → full width. */ body.agh-checkout-active .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.agh-checkout-active .woocommerce-billing-fields__field-wrapper > .form-row-wide, body.agh-checkout-active .woocommerce-billing-fields__field-wrapper > p.form-row-wide { grid-column: 1 / -1; } @media (max-width: 480px) { body.agh-checkout-active .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } } /* ── Form row spacing ────────────────────────────────────────────────────── */ body.agh-checkout-active .woocommerce-checkout .form-row { margin-bottom: 14px; padding: 0; direction: rtl; } /* ── Order review summary card ───────────────────────────────────────────── */ body.agh-checkout-active #order_review { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); box-shadow: var(--agh-shadow-md); overflow: hidden; font-family: var(--agh-font); } @media (min-width: 900px) { body.agh-checkout-active #order_review { position: sticky; top: 80px; } } /* ── Order review table ──────────────────────────────────────────────────── */ body.agh-checkout-active #order_review table.shop_table { font-family: var(--agh-font); font-size: 13px; border-collapse: collapse; width: 100%; margin: 0; } body.agh-checkout-active #order_review table.shop_table thead th { background: var(--agh-primary); color: #fff; font-size: 14px; font-weight: 700; padding: 14px 18px; text-align: right; } body.agh-checkout-active #order_review table.shop_table th, body.agh-checkout-active #order_review table.shop_table td { padding: 12px 18px; border-bottom: 1px solid var(--agh-border); color: var(--agh-text); text-align: right; direction: rtl; } body.agh-checkout-active #order_review table.shop_table .product-name { color: var(--agh-text); line-height: 1.4; } body.agh-checkout-active #order_review table.shop_table .product-total { font-weight: 700; color: var(--agh-primary); white-space: nowrap; } body.agh-checkout-active #order_review table.shop_table tfoot tr td, body.agh-checkout-active #order_review table.shop_table tfoot tr th { font-size: 13px; } body.agh-checkout-active #order_review table.shop_table tfoot tr.order-total td, body.agh-checkout-active #order_review table.shop_table tfoot tr.order-total th { font-size: 15px; font-weight: 800; color: var(--agh-primary); border-top: 1px solid var(--agh-border); } /* ── Payment methods section ─────────────────────────────────────────────── */ body.agh-checkout-active #payment { background: var(--agh-card-bg); border-radius: 0 0 12px 12px; border: none; font-family: var(--agh-font); } body.agh-checkout-active #payment ul.payment_methods { padding: 0; margin: 0; list-style: none; border-bottom: 1px solid var(--agh-border); } body.agh-checkout-active #payment ul.payment_methods li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--agh-border); cursor: pointer; transition: background var(--agh-transition); } body.agh-checkout-active #payment ul.payment_methods li:last-child { border-bottom: none; } body.agh-checkout-active #payment ul.payment_methods li:hover { background: rgba(10,62,67,.04); } body.agh-checkout-active #payment ul.payment_methods li label { font-size: 14px; color: var(--agh-text); font-weight: 600; cursor: pointer; margin: 0; } body.agh-checkout-active #payment div.payment_box { background: var(--agh-bg); font-family: var(--agh-font); font-size: 13px; padding: 12px 16px; margin: 0; border-top: 1px dashed var(--agh-border); } /* ── VPN notice context override ─────────────────────────────────────────── */ body.agh-checkout-active .agh-vpn-notice { margin: 10px 18px 12px; } /* ── Place Order button position within payment section ─────────────────── */ body.agh-checkout-active #payment #place_order { width: calc(100% - 36px); margin: 0 18px 16px; } /* ── WC validation / status notices on checkout ─────────────────────────── */ body.agh-checkout-active .woocommerce-error, body.agh-checkout-active .woocommerce-message, body.agh-checkout-active .woocommerce-info { font-family: var(--agh-font); font-size: 14px; border-radius: 10px; direction: rtl; padding: 14px 18px; margin-bottom: 18px; } body.agh-checkout-active .woocommerce-error { background: var(--agh-danger-light); color: var(--agh-danger); border: 1px solid #fca5a5; } body.agh-checkout-active .woocommerce-message { background: var(--agh-success-light); color: var(--agh-success); border: 1px solid #86efac; } /* ═══════════════════════════════════════════════════════════════════════════ BUG #1 FIX — WooCommerce BLOCK CHECKOUT SELECTORS ═══════════════════════════════════════════════════════════════════════════ All rules in the section above target Classic WC shortcode markup: form.checkout, #customer_details, #order_review, #payment ul.payment_methods, .woocommerce-billing-fields__field-wrapper, etc. WooCommerce Block-based checkout renders completely different markup: .wp-block-woocommerce-checkout — outer page block wrapper .wc-block-checkout — inner component wrapper .wc-block-checkout__form — the actual block form .wc-block-components-text-input — text inputs .wc-block-components-select — select dropdowns .wc-block-components-checkout-step — individual checkout steps These rules bring the same font, direction, colour, and spacing tokens to the Block checkout experience. They are scoped identically under body.agh-checkout-active so they activate only on the checkout page, controlled by the same PHP body_class filter and JS safety-net guard. NOTHING here touches WC Blocks' React state, cart store, or event bus. All layout overrides are purely presentational. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Block checkout: base font & direction ───────────────────────────────── */ body.agh-checkout-active .wp-block-woocommerce-checkout, body.agh-checkout-active .wc-block-checkout { direction: rtl; font-family: var(--agh-font); color: var(--agh-text); } /* ── Block checkout: outer container width ───────────────────────────────── */ body.agh-checkout-active .wc-block-checkout__form { max-width: 860px; margin-inline: auto; padding-inline: 16px; } /* ── Block checkout: step heading typography ─────────────────────────────── */ body.agh-checkout-active .wc-block-components-checkout-step__title { font-family: var(--agh-font); font-size: 15px; font-weight: 700; color: var(--agh-text); } /* ── Block checkout: text inputs ─────────────────────────────────────────── */ body.agh-checkout-active .wc-block-components-text-input input, body.agh-checkout-active .wc-block-components-text-input input:focus, body.agh-checkout-active .wc-block-components-country-input input, body.agh-checkout-active .wc-block-components-state-input input { font-family: var(--agh-font); border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--agh-text); background: #fff; transition: border-color .2s, box-shadow .2s; direction: rtl; } body.agh-checkout-active .wc-block-components-text-input input:focus { outline: none; border-color: var(--agh-primary); box-shadow: 0 0 0 3px rgba(10,62,67,.12); } /* ── Block checkout: select dropdowns ────────────────────────────────────── */ body.agh-checkout-active .wc-block-components-select select { font-family: var(--agh-font); border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--agh-text); direction: rtl; background: #fff; } body.agh-checkout-active .wc-block-components-select select:focus { outline: none; border-color: var(--agh-primary); box-shadow: 0 0 0 3px rgba(10,62,67,.12); } /* ── Block checkout: labels ───────────────────────────────────────────────── */ body.agh-checkout-active .wc-block-components-text-input label, body.agh-checkout-active .wc-block-components-select label, body.agh-checkout-active .wc-block-components-checkbox__label { font-family: var(--agh-font); font-size: 13px; color: var(--agh-muted); font-weight: 500; } /* ── Block checkout: payment method items ────────────────────────────────── */ body.agh-checkout-active .wc-block-components-radio-control__option { border: 1px solid #e9ecef; border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s, background .2s; font-family: var(--agh-font); } body.agh-checkout-active .wc-block-components-radio-control__option:hover { background: rgba(10,62,67,.04); } body.agh-checkout-active .wc-block-components-radio-control__option-checked { border-color: var(--agh-primary); background: rgba(10,62,67,.05); } /* ── Block checkout: place order button ──────────────────────────────────── */ body.agh-checkout-active .wc-block-components-checkout-place-order-button, body.agh-checkout-active .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-place-order-button { background: var(--agh-primary); color: #fff; border: none; border-radius: 12px; padding: 14px 24px; font-family: var(--agh-font); font-size: 15px; font-weight: 700; width: 100%; cursor: pointer; transition: background .2s; } body.agh-checkout-active .wc-block-components-checkout-place-order-button:hover { background: var(--agh-primary-dark, #083e43); } /* ── Block checkout: order summary ───────────────────────────────────────── */ body.agh-checkout-active .wp-block-woocommerce-checkout-order-summary-block { background: var(--agh-surface, #f8fafc); border: 1px solid #e9ecef; border-radius: 14px; padding: 20px; font-family: var(--agh-font); } /* ── Block checkout: error/info notices ──────────────────────────────────── */ body.agh-checkout-active .wc-block-components-notice-banner, body.agh-checkout-active .wc-block-store-notices__container .wc-block-components-notice-banner { font-family: var(--agh-font); font-size: 14px; border-radius: 10px; direction: rtl; } /* ═══════════════════════════════════════════════════════════════════════════ ORDER RECEIVED PAGE — صفحه موفقیت سفارش Scoped under body.agh-order-received-active. This class is added by Checkout_Template::add_body_classes() when agh_ux_is_order_received_page() returns true. The branded templates/order-received.php is served via template_include. ALL styles here are PRESENTATION ONLY — no data is read or modified here. ═══════════════════════════════════════════════════════════════════════════ */ body.agh-order-received-active { background: var(--agh-bg); font-family: var(--agh-font); direction: rtl; } .agh-order-received-page { background: var(--agh-bg); min-height: 60vh; direction: rtl; font-family: var(--agh-font); } .agh-order-received-wrap { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; } /* هدر موفقیت */ .agh-or-success-header { text-align: center; margin-bottom: 24px; } .agh-or-check-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--agh-success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 14px; font-weight: 700; } .agh-or-success-title { font-size: 20px; font-weight: 800; color: var(--agh-primary); margin: 0; } /* کارت نکات مهم */ .agh-or-notes-card { background: var(--agh-card-bg); border: 2px dashed var(--agh-gold); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .agh-or-notes-title { font-size: 15px; font-weight: 700; color: var(--agh-primary); margin-bottom: 12px; text-align: center; } .agh-or-notes-body { font-size: 14px; color: var(--agh-text); line-height: 1.8; } .agh-or-notes-body p { margin: 0 0 8px; } /* پخش‌کننده صوتی */ .agh-or-audio-wrap { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .agh-or-audio { width: 100%; border-radius: 8px; } .agh-or-phone-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; background: var(--agh-primary); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px; transition: background var(--agh-transition); } .agh-or-phone-btn:hover { background: var(--agh-primary-hover); } /* تأییدیه سفارش */ .agh-or-confirm-card { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); padding: 20px; margin-bottom: 16px; text-align: center; } .agh-or-confirm-card > p { font-size: 14px; color: var(--agh-text); margin-bottom: 16px; } .agh-or-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: right; } @media (max-width: 480px) { .agh-or-info-grid { grid-template-columns: 1fr; } } .agh-or-info-item { display: flex; flex-direction: column; gap: 3px; } .agh-or-info-label { font-size: 12px; color: var(--agh-text-muted); } .agh-or-info-value { font-size: 14px; font-weight: 700; color: var(--agh-text); } /* اقلام سفارش */ .agh-or-items-card { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); margin-bottom: 16px; overflow: hidden; } .agh-or-items-header { display: flex; justify-content: space-between; padding: 12px 18px; background: var(--agh-primary); color: #fff; font-size: 13px; font-weight: 700; } .agh-or-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--agh-border); font-size: 13px; color: var(--agh-text); } .agh-or-item em { color: var(--agh-text-muted); font-style: normal; } .agh-or-items-footer { padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; } .agh-or-total-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--agh-text); } .agh-or-discount-row { color: var(--agh-success); } .agh-or-grand-total { font-size: 15px; font-weight: 700; color: var(--agh-primary); padding-top: 8px; border-top: 1px solid var(--agh-border); } /* آدرس صورتحساب */ .agh-or-address-card { background: var(--agh-card-bg); border-radius: 12px; border: 1px solid var(--agh-border); padding: 18px; margin-bottom: 16px; } .agh-or-address-title { font-size: 14px; font-weight: 700; color: var(--agh-primary); margin-bottom: 10px; } .agh-or-address-card p { margin: 0; font-size: 13px; color: var(--agh-text); line-height: 1.8; } .agh-or-not-found { text-align: center; padding: 48px 16px; } /* ═══════════════════════════════════════════════════════════════════════════ PRODUCT WIDGET (Elementor) — طراحی مطابق تصویر مرجع ═══════════════════════════════════════════════════════════════════════════ */ /* ── Grid ── */ .agh-products-grid { display: grid; gap: 16px; } .agh-cols-2 { grid-template-columns: repeat(2, 1fr); } .agh-cols-3 { grid-template-columns: repeat(3, 1fr); } .agh-cols-4 { grid-template-columns: repeat(4, 1fr); } /* دسکتاپ: 4 ستون / موبایل: 2 ستون */ @media (max-width: 768px) { .agh-cols-3, .agh-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .agh-cols-2, .agh-cols-3, .agh-cols-4 { grid-template-columns: repeat(2, 1fr); } } /* ── Card ── */ .agh-product-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 250ms ease, transform 250ms ease; position: relative; font-family: var(--agh-font); direction: rtl; } .agh-product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-3px); } /* ── Badges ── */ .agh-sale-badge { position: absolute; top: 10px; left: 10px; /* درصد تخفیف: گوشه چپ بالا */ background: #e53e3e; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; z-index: 3; letter-spacing: .3px; } .agh-new-badge { position: absolute; top: 10px; right: 10px; /* محصول جدید: گوشه راست بالا */ background: #38a169; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; z-index: 3; } /* ── Image ── */ .agh-product-image-link { display: block; overflow: hidden; background: #f7f7f7; } .agh-product-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 300ms ease; } .agh-product-card:hover .agh-product-image { transform: scale(1.05); } /* ── Info ── */ .agh-product-info { padding: 12px 12px 6px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .agh-product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: #2d2d2d; text-decoration: none; line-height: 1.5; } .agh-product-title:hover { color: #3182ce; } /* قیمت‌ها */ .agh-product-price { display: flex; flex-direction: column; gap: 2px; } .agh-price-original { font-size: 12px; color: #999; text-decoration: line-through; font-weight: 400; } .agh-price-sale { font-size: 14px; font-weight: 700; color: #27ae60; } .agh-price-regular { font-size: 14px; font-weight: 700; color: #27ae60; } /* ── Footer: دکمه + کنترل تعداد ── */ .agh-product-footer { padding: 8px 12px 12px; } .agh-product-cart-row { display: flex; align-items: center; gap: 8px; } /* دکمه افزودن به سبد */ .agh-add-to-cart-btn { flex: 1; padding: 9px 10px; background: #27ae60; color: #fff; border: none; border-radius: 8px; font-family: var(--agh-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 200ms ease, opacity 200ms ease; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .agh-add-to-cart-btn:hover:not(:disabled) { background: #219150; } .agh-add-to-cart-btn .agh-btn-loading { display: none; } .agh-add-to-cart-btn.agh-btn--loading .agh-btn-text { display: none; } .agh-add-to-cart-btn.agh-btn--loading .agh-btn-loading { display: flex; align-items: center; gap: 5px; } .agh-add-to-cart-btn.agh-btn--loading { opacity: .8; pointer-events: none; } .agh-add-to-cart-btn .agh-spinner { width: 14px; height: 14px; border-color: rgba(255,255,255,.3); border-top-color: #fff; } /* کنترل تعداد کنار دکمه */ .agh-widget-qty { display: flex; align-items: center; border: 1.5px solid #e0e0e0; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .agh-widget-qty-btn { width: 28px; height: 34px; border: none; background: #f5f5f5; color: #333; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 150ms ease; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .agh-widget-qty-btn:hover { background: #e0e0e0; } /* Sold-individually: hide +/- buttons, show qty as read-only */ .agh-widget-qty--locked { border-color: #e0e0e0; opacity: 0.7; cursor: default; } .agh-widget-qty--locked .agh-widget-qty-val { padding-inline: 10px; } .agh-widget-qty-val { min-width: 24px; text-align: center; font-size: 13px; font-weight: 700; color: #333; padding-inline: 4px; user-select: none; } .agh-out-of-stock { display: block; text-align: center; font-size: 13px; color: #999; padding: 9px; background: #f5f5f5; border-radius: 8px; font-weight: 500; } .agh-no-products { text-align: center; color: var(--agh-text-muted); padding: 32px; } /* ═══════════════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════════════════════ */ .agh-toast { position: fixed; bottom: 24px; left: 50%; /* RTL layout: visually center */ transform: translateX(-50%) translateY(30px); background: var(--agh-text); color: #fff; padding: 12px 24px; border-radius: 10px; font-family: var(--agh-font); font-size: 14px; font-weight: 500; z-index: 99999; opacity: 0; transition: opacity var(--agh-transition), transform var(--agh-transition); box-shadow: var(--agh-shadow-lg); max-width: min(90vw, 400px); text-align: center; } .agh-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .agh-toast--success { background: var(--agh-success); } .agh-toast--error { background: var(--agh-danger); } .agh-toast--info { background: #0369a1; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .agh-cart-drawer { width: 100vw; } .agh-container { padding-inline: 14px; padding-block: 20px; } .agh-field-row--split { grid-template-columns: 1fr; } .agh-cart-row { flex-wrap: wrap; } .agh-cart-row-image { width: 80px; height: 80px; } .agh-cart-row-subtotal { flex-direction: row; gap: 6px; align-items: center; width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ FOCUS / ACCESSIBILITY ═══════════════════════════════════════════════════════════════════════════ */ :is( .agh-btn-primary, .agh-btn-secondary, .agh-add-to-cart-btn, .agh-qty-btn, .agh-remove-item, .agh-drawer-close, .agh-co-input, .agh-co-submit-btn, .agh-co-qty-btn ):focus-visible { outline: 2px solid var(--agh-primary); outline-offset: 2px; } /* Remove default WC styles that conflict */ .agh-cart-page .woocommerce-notices-wrapper { margin-bottom: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ CART PAGE — TWO-COLUMN LAYOUT (v1.5.4 additions) Classes used by templates/cart.php that were missing from the stylesheet. All selectors scoped under .agh-cart-page to avoid theme conflicts. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page heading ─────────────────────────────────────────────────────────── */ .agh-cart-heading { font-size: 22px; font-weight: 800; color: var(--agh-primary); margin: 0 0 20px; padding: 0; direction: rtl; } /* ── Two-column layout ────────────────────────────────────────────────────── */ .agh-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } @media (max-width: 900px) { .agh-cart-layout { grid-template-columns: 1fr; } .agh-cart-summary-col { order: -1; } } .agh-cart-items-col { min-width: 0; } .agh-cart-summary-col { min-width: 0; } @media (min-width: 901px) { .agh-cart-summary-col .agh-cart-summary-card { position: sticky; top: 80px; } } /* ── Empty cart state ─────────────────────────────────────────────────────── */ .agh-empty-cart-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 64px 20px; text-align: center; } .agh-empty-cart-page h1 { font-size: 20px; font-weight: 700; color: var(--agh-text-muted); margin: 0; } .agh-empty-cart-page .agh-btn-primary { width: auto; padding: 12px 32px; } /* ── Motivational top bar ─────────────────────────────────────────────────── */ .agh-cart-top-bar { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; } .agh-top-bar-warning { display: flex; align-items: center; gap: 8px; background: var(--agh-warning-light); color: var(--agh-warning); border: 1px solid #fde68a; border-radius: 10px; padding: 12px 16px; } .agh-top-bar-success { background: var(--agh-success-light); color: var(--agh-success); border: 1px solid #86efac; border-radius: 10px; padding: 12px 16px; text-align: center; } .agh-top-bar-info { background: #fff; border: 1px solid var(--agh-border); border-radius: 10px; padding: 12px 16px; } .agh-top-bar-text { font-size: 13px; color: var(--agh-text); margin-bottom: 8px; } /* progress bar already defined globally (.agh-progress-bar, .agh-progress-fill) */ /* ── Cart row: layout refinements for cart.php template structure ─────────── */ /* cart.php uses .agh-cart-row-details (flex child) and .agh-cart-row-image-link */ .agh-cart-row-image-link { flex-shrink: 0; display: block; } .agh-cart-row-details { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .agh-cart-row-unit-price { font-size: 13px; color: var(--agh-text-muted); } .agh-cart-row-unit-price ins { /* WC puts sale price in */ text-decoration: none; color: var(--agh-success); font-weight: 700; } .agh-cart-row-unit-price del { color: #aaa; font-size: 12px; } .agh-cart-row-subtotal-label { font-size: 12px; color: var(--agh-text-muted); margin-bottom: 2px; } .agh-cart-row-subtotal-value { font-size: 15px; font-weight: 800; color: var(--agh-primary); } /* ── Summary card: heading and rows ──────────────────────────────────────── */ .agh-summary-heading { font-size: 15px; font-weight: 700; color: var(--agh-primary); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--agh-gold); } .agh-summary-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } /* .agh-summary-row, .agh-summary-divider already defined (drawer shares them) */ /* Add cart-page-specific overrides here if needed: */ .agh-cart-summary-card .agh-summary-row { font-size: 14px; } .agh-cart-summary-card .agh-summary-row strong { font-size: 16px; font-weight: 800; color: var(--agh-primary); } .agh-summary-divider { height: 1px; background: var(--agh-border); margin: 4px 0; } /* ── Row-specific variants ─────────────────────────────────────────────────── */ .agh-cashback-row { color: var(--agh-cashback); } .agh-shipping-row { font-size: 13px; color: var(--agh-text-muted); } .agh-total-row { font-size: 16px; font-weight: 800; color: var(--agh-primary); } /* ── Cashback note ────────────────────────────────────────────────────────── */ .agh-cashback-note { font-size: 12px; color: var(--agh-text-muted); margin: -4px 0 4px; line-height: 1.5; } /* ── Min order note ───────────────────────────────────────────────────────── */ .agh-min-order-note { font-size: 12px; color: var(--agh-danger); text-align: center; margin: 8px 0 0; padding: 8px 12px; background: var(--agh-danger-light); border-radius: 8px; } /* ── Free shipping tag (in shipping row) ─────────────────────────────────── */ .agh-free-shipping-tag { color: var(--agh-success); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ AGH Custom Checkout — v1.7.0 Styles for [agh_custom_checkout] shortcode output. Scoped to .agh-checkout-root and body.agh-checkout-active. Zero dependency on theme or WC Blocks CSS. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── § 1 DESIGN TOKENS (checkout-specific overrides) ───────────────────────────────────────────────────────────────────────── */ .agh-checkout-root { --co-green: #27ae60; --co-green-dark: #219150; --co-green-glow: rgba(39,174,96,.25); --co-primary: #0a3e43; --co-border: #dde6ee; --co-radius: 12px; --co-shadow: 0 2px 12px rgba(0,0,0,.07); --co-bg: #f4f6f8; --co-card-bg: #ffffff; --co-text: #1a2332; --co-muted: #64748b; --co-error: #e53e3e; --co-font: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif; direction: rtl; font-family: var(--co-font); color: var(--co-text); } /* ───────────────────────────────────────────────────────────────────────── § 2 LOADING INDICATOR ───────────────────────────────────────────────────────────────────────── */ .agh-co-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; font-size: 15px; color: var(--co-muted); direction: rtl; } .agh-spinner--dark { border-color: rgba(0,0,0,.15); border-top-color: var(--co-green); } /* ───────────────────────────────────────────────────────────────────────── § 3 TWO-COLUMN GRID LAYOUT ───────────────────────────────────────────────────────────────────────── */ .agh-co-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "order billing"; gap: 24px; align-items: start; direction: rtl; } .agh-co-col--order { grid-area: order; } .agh-co-col--billing { grid-area: billing; } /* ───────────────────────────────────────────────────────────────────────── § 4 SHARED CARD BASE ───────────────────────────────────────────────────────────────────────── */ .agh-co-order-card, .agh-co-billing-card { background: var(--co-card-bg); border: 1px solid var(--co-border); border-radius: var(--co-radius); box-shadow: var(--co-shadow); overflow: hidden; direction: rtl; } /* ───────────────────────────────────────────────────────────────────────── § 5 ORDER SUMMARY CARD (left column) ───────────────────────────────────────────────────────────────────────── */ /* Free shipping banner */ .agh-co-ship-banner { background: #fff8e7; border-bottom: 1px solid #f0e6c0; padding: 10px 18px; font-size: 12px; font-weight: 600; color: #92650a; text-align: center; direction: rtl; } /* Column headers */ .agh-co-order-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 10px; border-bottom: 1px solid #f0f4f8; font-size: 12px; font-weight: 700; color: var(--co-muted); text-transform: uppercase; letter-spacing: 0.5px; direction: rtl; } /* Product list */ .agh-co-items-list { list-style: none; padding: 0; margin: 0; } .agh-co-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 18px; border-bottom: 1px solid #f5f7fa; direction: rtl; gap: 12px; } .agh-co-item:last-child { border-bottom: none; } .agh-co-item-name { flex: 1; font-size: 13px; color: var(--co-text); line-height: 1.4; min-width: 0; } .agh-co-item-price { font-size: 13px; font-weight: 700; color: var(--co-green); white-space: nowrap; flex-shrink: 0; } /* Totals section */ .agh-co-totals { padding: 12px 18px; border-top: 1px solid #f0f4f8; display: flex; flex-direction: column; gap: 8px; } .agh-co-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--co-muted); direction: rtl; } .agh-co-total-row span:last-child { font-weight: 600; color: var(--co-text); } .agh-co-free { color: var(--co-green) !important; font-weight: 700 !important; } .agh-co-divider { height: 1px; background: #edf0f4; margin: 4px 0; } .agh-co-grand-total { font-size: 15px !important; font-weight: 700; } .agh-co-grand-total span:last-child { font-size: 16px !important; font-weight: 800 !important; color: var(--co-green) !important; } /* ───────────────────────────────────────────────────────────────────────── § 6 PAYMENT METHODS ───────────────────────────────────────────────────────────────────────── */ .agh-co-payment-section { border-top: 1px solid #f0f4f8; padding: 14px 18px 4px; direction: rtl; } .agh-co-section-title { font-size: 13px; font-weight: 700; color: var(--co-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .agh-co-pay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .agh-co-pay-item { border-bottom: 1px solid #f5f7fa; padding: 10px 0; transition: background 150ms; } .agh-co-pay-item:last-child { border-bottom: none; } .agh-co-pay-label { display: flex; align-items: center; gap: 10px; cursor: pointer; direction: rtl; flex-direction: row-reverse; justify-content: flex-end; } .agh-co-pay-radio { width: 18px; height: 18px; accent-color: var(--co-green); cursor: pointer; flex-shrink: 0; } .agh-co-pay-title { font-size: 14px; font-weight: 600; color: var(--co-text); } .agh-co-pay-desc { margin: 6px 28px 4px; padding: 8px 12px; background: #f8fafc; border-radius: 8px; font-size: 12px; color: var(--co-muted); line-height: 1.5; direction: rtl; } /* ───────────────────────────────────────────────────────────────────────── § 6b SHIPPING METHOD SELECTOR Mirrors payment method selector styles for visual consistency. ───────────────────────────────────────────────────────────────────────── */ .agh-co-shipping-section { border-top: 1px solid #f0f4f8; padding: 14px 18px 4px; direction: rtl; } .agh-co-package-name { font-size: 12px; color: var(--co-muted); margin-bottom: 6px; font-weight: 600; } .agh-co-ship-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .agh-co-ship-item { border-bottom: 1px solid #f5f7fa; padding: 10px 0; transition: background 150ms; } .agh-co-ship-item:last-child { border-bottom: none; } .agh-co-ship-label { display: flex; align-items: center; gap: 10px; cursor: pointer; direction: rtl; flex-direction: row-reverse; justify-content: flex-end; } .agh-co-ship-radio { width: 18px; height: 18px; accent-color: var(--co-green); cursor: pointer; flex-shrink: 0; } .agh-co-ship-name { font-size: 14px; font-weight: 600; color: var(--co-text); flex: 1; } .agh-co-ship-price { font-size: 13px; color: var(--co-muted); margin-right: auto; margin-left: 0; direction: rtl; } .agh-co-ship-item--active .agh-co-ship-name { color: var(--co-green); } .agh-co-shipping-pending { font-size: 12px; color: var(--co-muted); padding: 4px 0 8px; } /* ───────────────────────────────────────────────────────────────────────── § 7 VPN NOTICE + ERROR BOX + SUBMIT BUTTON ───────────────────────────────────────────────────────────────────────── */ .agh-co-vpn { font-size: 12px; color: var(--co-muted); text-align: center; padding: 10px 18px 6px; margin: 0; direction: rtl; } .agh-co-form-error { margin: 0 18px 10px; padding: 10px 14px; background: #fff5f5; border: 1px solid #fed7d7; border-radius: 8px; font-size: 13px; color: var(--co-error); direction: rtl; line-height: 1.5; } /* FIX START — Issue #6: "Place Order" button has no styling * ROOT CAUSE: .agh-co-submit-btn relies entirely on --co-green and other CSS * custom properties defined in .agh-checkout-root. If a theme resets or * overrides