/*============================================================== # Riven Quick Order Theme Variables ==============================================================*/ :root{ /* Accent */ --riven-quick-form-accent:#D9FF33; --riven-quick-form-accent-hover:#C8F000; /* Background */ --riven-quick-form-bg:#140A20; --riven-quick-form-bg-secondary:#1B0D2B; --riven-quick-form-card:#241338; --riven-quick-form-input:#2B1A3F; /* Border */ --riven-quick-form-border:#4C2D73; --riven-quick-form-border-light:#3A2852; /* Typography */ --riven-quick-form-heading:#FFFFFF; --riven-quick-form-text:#D8D1E7; --riven-quick-form-text-muted:#A8A5B8; /* Status */ --riven-quick-form-success:#67E480; --riven-quick-form-error:#FF5A5A; /* Overlay */ --riven-quick-form-overlay:rgba(8,4,15,.78); /* Gradient */ --riven-quick-form-button-gradient:linear-gradient( 180deg, var(--riven-quick-form-input) 0%, var(--riven-quick-form-bg-secondary) 100% ); --riven-quick-form-button-gradient-hover:linear-gradient( 180deg, var(--riven-quick-form-card) 0%, var(--riven-quick-form-bg-secondary) 100% ); /* Radius */ --riven-quick-form-radius-sm:12px; --riven-quick-form-radius:16px; --riven-quick-form-radius-lg:22px; --riven-quick-form-radius-xl:28px; /* Shadow */ --riven-quick-form-shadow: 0 25px 80px rgba(0,0,0,.45); } /*============================================================== # Quick Order Button ==============================================================*/ .riven-quick-order-btn{ display:flex; align-items:center; justify-content:center; width:100%; height:58px; margin-top:16px; border:1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius); background:var(--riven-quick-form-button-gradient); color:var(--riven-quick-form-heading); font-size:18px; font-weight:700; letter-spacing:.3px; cursor:pointer; transition:all .25s ease; } .riven-quick-order-btn:hover{ border-color:var(--riven-quick-form-accent); color:var(--riven-quick-form-accent); background:var(--riven-quick-form-button-gradient-hover); } /*============================================================== # Quick Order Popup ==============================================================*/ .riven-order-popup{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:30px; } .riven-order-popup.active{ display:flex; } /*============================================================== Overlay ==============================================================*/ .riven-order-overlay{ position:absolute; inset:0; background:var(--riven-quick-form-overlay); backdrop-filter:blur(8px); } /*============================================================== Modal ==============================================================*/ .riven-order-modal{ position:relative; z-index:2; width:100%; max-width:720px; max-height:90vh; overflow-y:auto; background:linear-gradient( 180deg, var(--riven-quick-form-bg-secondary) 0%, var(--riven-quick-form-bg) 100% ); border:1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius-lg); padding:40px; box-shadow: 0 25px 80px rgba(0,0,0,.45); } /*============================================================== Close ==============================================================*/ .riven-order-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border:none; border-radius:50%; background:var(--riven-quick-form-input); color:var(--riven-quick-form-heading); cursor:pointer; font-size:20px; } /*============================================================== Header ==============================================================*/ .riven-order-header{ margin-bottom:20px; } .riven-order-header h2{ margin:0 0 8px; font-size:32px; font-weight:700; color:var(--riven-quick-form-heading); } .riven-order-header p{ margin:0; color:var(--riven-quick-form-text-muted); font-size:15px; } /*============================================================== Form ==============================================================*/ .riven-order-form{ display:flex; flex-direction:column; gap:20px; } .riven-order-row{ display:grid; grid-template-columns:1fr; gap:20px; } /*============================================================== Field ==============================================================*/ .riven-order-field{ display:flex; flex-direction:column; } .riven-order-field label{ margin-bottom:8px; font-size:15px; font-weight:600; color:var(--riven-quick-form-heading); } .riven-quick-order .riven-order-field input[type=text], .riven-quick-order .riven-order-field input[type=number], .riven-quick-order .riven-order-field input[type=tel], .riven-quick-order .riven-order-field textarea{ width:100%; padding:14px 18px; background:var(--riven-quick-form-input); border:1px solid var(--riven-quick-form-border); border-radius:14px; color:var(--riven-quick-form-heading); font-size:16px; outline:none; transition:.25s; height: 56px; } .riven-quick-order .riven-order-field textarea{ resize:vertical; min-height:90px; } .riven-quick-order .riven-order-field input:focus, .riven-quick-order .riven-order-field textarea:focus{ border-color:var(--riven-quick-form-accent); } .riven-quick-order-payment-info { width: 50%; } .emds-cart-panel .riven-quick-order-payment-info { width: 100%; } @media (max-width: 991px) { .riven-quick-order-payment-info { width: 100% !important; } } /*============================================================== Divider ==============================================================*/ .riven-order-form hr{ border:none; height:1px; background:var(--riven-quick-form-border); margin:10px 0; } /*============================================================== Payment ==============================================================*/ .riven-order-form h3{ margin:0; font-size:20px; color:var(--riven-quick-form-heading); } .riven-payment-option, .riven-payment-method{ display:flex; gap:30px; margin-top:5px; } .riven-payment-option label, .riven-payment-method label{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--riven-quick-form-heading); cursor:pointer; } .riven-payment-option input, .riven-payment-method input{ accent-color: var(--riven-quick-form-accent); } /*============================================================== Summary ==============================================================*/ .riven-payment-summary{ margin-top:5px; padding:20px; background:var(--riven-quick-form-card); border:1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius); display:flex; flex-direction:column; gap:14px; } .riven-payment-summary div{ display:flex; align-items:center; justify-content:space-between; } .riven-payment-summary span{ color:var(--riven-quick-form-text-muted); } .riven-payment-summary strong{ font-size:18px; color:var(--riven-quick-form-accent); } /*============================================================== Submit ==============================================================*/ .riven-order-submit{ width:100%; height:58px; border:none; border-radius:var(--riven-quick-form-radius); background:var(--riven-quick-form-accent); color:#111; font-size:18px; font-weight:700; cursor:pointer; margin-top:10px; transition:.25s; } .riven-order-submit:hover{ filter:brightness(.96); } /*============================================================== Scrollbar ==============================================================*/ .riven-order-modal::-webkit-scrollbar{ width:8px; } .riven-order-modal::-webkit-scrollbar-thumb{ background:var(--riven-quick-form-border); border-radius:10px; } /*============================================================== Responsive ==============================================================*/ @media(max-width:767px){ .riven-order-popup{ padding:15px; } .riven-order-modal{ padding:24px; border-radius:18px; } .riven-order-header h2{ font-size:24px; } .riven-payment-option{ flex-direction:column; gap:15px; } } /*============================================================== # Payment Notice ==============================================================*/ .riven-payment-notice{ display:flex; align-items:flex-start; gap:14px; margin:20px 0 24px; padding:18px 20px; background: var(--riven-quick-form-card); border:1px solid var(--riven-quick-form-border); border-left:4px solid var(--riven-quick-form-accent); border-radius:var(--riven-quick-form-radius); } .riven-payment-notice i{ flex-shrink:0; font-size:22px; line-height:1; color:var(--riven-quick-form-accent); margin-top:2px; } .riven-payment-notice p{ margin:0; font-size:14px; line-height:1.7; color:var(--riven-quick-form-text); } .riven-payment-notice strong{ color:var(--riven-quick-form-accent); font-weight:700; } /*============================================================== # Discount Notice ==============================================================*/ .riven-discount-notice{ padding:18px 20px; background: var(--riven-quick-form-card); border:1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius); margin-top: 16px; margin-bottom: 16px; } .riven-discount-notice{ font-size:14px; line-height:1.7; color:var(--riven-quick-form-text); } .riven-discount-notice strong{ color:var(--riven-quick-form-accent); font-weight:700; } /*====================================== = Thank You Page ======================================*/ .riven-order-success{ position:relative; padding:40px; border-radius:var(--riven-quick-form-radius-xl); background: linear-gradient(180deg, var(--riven-quick-form-bg-secondary) 0%, var(--riven-quick-form-bg) 100%); border: 1px solid var(--riven-quick-form-border); text-align:center; overflow:hidden; margin: 40px; } .riven-order-success-icon{ width:90px; height:90px; margin:0 auto; border-radius:50%; background:var(--riven-quick-form-accent); display:flex; align-items:center; justify-content:center; font-size:38px; color:#1b112d; position:relative; z-index:2; } .riven-order-success h1{ font-size:44px; font-weight:700; color:var(--riven-quick-form-heading); margin-bottom:14px; position:relative; z-index:2; } .riven-order-success p{ color:#b9b6c8; font-size:18px; position:relative; z-index:2; } .riven-order-meta{ display:flex; justify-content:center; gap:40px; margin-top:40px; position:relative; z-index:2; } .riven-order-meta-item{ padding:18px 28px; border-radius:14px; background:var(--riven-quick-form-card); border: 1px solid var(--riven-quick-form-border); min-width:220px; } .riven-order-meta-item span{ display:block; font-size:13px; color:#999; margin-bottom:6px; } .riven-order-meta-item strong{ font-size:20px; color:var(--riven-quick-form-heading); } .riven-status-badge{ color:var(--riven-quick-form-accent) !important; } /* Mobile */ @media (max-width:768px){ .riven-order-success h1 { font-size: 32px; } .riven-order-meta { display: inline-grid; justify-content: center; gap: 20px; margin-top: 40px; position: relative; z-index: 2; } } /*====================================== = Remaining COD Card ======================================*/ .riven-cod-hero{ max-width:760px; margin:40px auto; padding:35px 45px; text-align:center; background: linear-gradient(180deg, var(--riven-quick-form-bg-secondary) 0%, var(--riven-quick-form-bg) 100%); border: 1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius-lg); box-shadow: 0 18px 45px rgba(0,0,0,.28); position:relative; overflow:hidden; } /* Neon Top Line */ .riven-cod-hero::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:180px; height:4px; border-radius:999px; background:var(--riven-quick-form-accent); } /* Glow */ .riven-cod-hero::after{ content:""; position:absolute; width:260px; height:260px; top:-140px; left:50%; transform:translateX(-50%); border-radius:50%; background:rgba(217,255,51,.06); filter:blur(70px); } /* Label */ .riven-cod-hero span{ position:relative; z-index:2; display:block; font-size:14px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--riven-quick-form-text-muted); margin-bottom:18px; } /* Amount */ .riven-cod-hero h2{ position:relative; z-index:2; margin:0; font-size:64px; font-weight:800; line-height:1; color:var(--riven-quick-form-accent); } /* WooCommerce Price */ .riven-cod-hero .woocommerce-Price-amount{ display:inline-flex; font-size: 21px; align-items:flex-start; gap:4px; color:var(--riven-quick-form-accent); } .riven-cod-hero .woocommerce-Price-currencySymbol{ font-size: 11px; position:relative; top:.15em; } /* Description */ .riven-cod-hero p{ position:relative; z-index:2; max-width:520px; margin:22px auto 0; font-size:15px; line-height:1.8; color:#B8B4C7; } /* Mobile */ @media (max-width:768px){ .riven-cod-hero{ margin:25px 15px; padding:28px 20px; } .riven-cod-hero h2{ font-size:42px; } .riven-cod-hero span{ font-size:12px; letter-spacing:2px; } .riven-cod-hero p{ font-size:14px; line-height:1.7; } } /*====================================== = Product + Payment Grid ======================================*/ .riven-order-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-bottom:35px; margin-right: 20px; margin-left: 20px; } .riven-order-card{ background: linear-gradient(180deg, var(--riven-quick-form-bg-secondary) 0%, var(--riven-quick-form-bg) 100%); border: 1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius-lg); padding:30px; box-shadow:0 15px 40px rgba(0,0,0,.22); } .riven-order-card h3{ margin:0 0 25px; font-size:24px; font-weight:700; color:var(--riven-quick-form-heading); } /* Product */ .riven-product-box{ display:flex; gap:22px; align-items:center; } .riven-product-image{ width:120px; height:120px; flex-shrink:0; border-radius:var(--riven-quick-form-radius); overflow:hidden; background:#2B1A46; } .riven-product-image img{ width:100%; height:100%; object-fit:cover; display:block; } .riven-product-info{ flex:1; } .riven-product-info h4{ margin:0 0 18px; font-size:22px; color:var(--riven-quick-form-heading); } .riven-product-info ul{ margin:0; padding:0; list-style:none; } .riven-product-info li{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); } .riven-product-info span{ color:var(--riven-quick-form-text-muted); } .riven-product-info strong{ color:var(--riven-quick-form-heading); } /* Payment */ .riven-summary-list>div{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); } .riven-summary-list span{ color:var(--riven-quick-form-text-muted); } .riven-summary-list span.amount, .riven-summary-list span.woocommerce-Price-currencySymbol{ color:#b7ff00; } .riven-summary-list strong{ color:var(--riven-quick-form-heading); font-size:18px; } .riven-summary-list .riven-success{ color:var(--riven-quick-form-success); } .riven-total{ margin-top:20px; padding:18px !important; border-radius:var(--riven-quick-form-radius); background: var(--riven-quick-form-card); border: 1px solid var(--riven-quick-form-border) !important; } .riven-total span{ color:var(--riven-quick-form-heading); font-size:18px; font-weight:600; } .riven-total strong{ color:var(--riven-quick-form-accent); font-size:28px; font-weight:700; } /* Mobile */ @media (max-width:768px){ .riven-order-grid{ grid-template-columns:1fr; } .riven-product-box{ flex-direction:column; text-align:center; } .riven-product-info{ width: 100%; } } /*====================================== = What's Next ======================================*/ .riven-next-steps{ background:#241438; border: 1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius-lg); padding:35px; margin-bottom:35px; margin-right: 20px; margin-left: 20px; } .riven-next-steps h3{ margin:0 0 30px; font-size:28px; color:var(--riven-quick-form-heading); } .riven-step{ display:flex; gap:20px; align-items:flex-start; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.08); } .riven-step:last-child{ border:none; padding-bottom:0; } .riven-step-number{ width:52px; height:52px; flex-shrink:0; border-radius:50%; background:var(--riven-quick-form-accent); color:#181021; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; } .riven-step-content h4{ margin:0 0 8px; font-size:20px; color:var(--riven-quick-form-heading); } .riven-step-content p{ margin:0; color:#B8B4C7; line-height:1.8; } /*====================================== = Support Card ======================================*/ .riven-support-card{ background:#241438; border: 1px solid var(--riven-quick-form-border); border-radius:var(--riven-quick-form-radius-lg); padding:40px; text-align:center; margin:40px 0; margin-left: 20px; margin-right: 20px; } .riven-support-card h3{ margin:0 0 12px; font-size:30px; font-weight:700; color:var(--riven-quick-form-heading); } .riven-support-card p{ max-width:600px; margin:0 auto 35px; color:#B8B4C7; line-height:1.8; } .riven-support-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .riven-support-buttons a{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 24px; border-radius:14px; font-size:16px; font-weight:600; text-decoration:none; transition:.3s; } .riven-btn-primary{ background:var(--riven-quick-form-accent); color:#181021; } .riven-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 15px 35px rgba(217,255,51,.20); } .riven-btn-secondary{ background:#2B1A46; color:var(--riven-quick-form-heading); border:1px solid rgba(217,255,51,.15); } .riven-btn-secondary:hover{ border-color:var(--riven-quick-form-accent); color:var(--riven-quick-form-accent); transform:translateY(-3px); } @media (max-width:768px){ .riven-support-buttons{ grid-template-columns:1fr; } } /*------------------------------------ | WhatsApp Order Button ------------------------------------*/ .riven-whatsapp-order { display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; margin-top: 16px; border: 1px solid var(--riven-quick-form-border); border-radius: 16px; background: linear-gradient(180deg, var(--riven-quick-form-input) 0%, var(--riven-quick-form-bg-secondary) 100%); color: var(--riven-quick-form-heading); font-size: 18px; font-weight: 700; letter-spacing: .3px; cursor: pointer; transition: all .25s ease; gap: 6px; } .riven-whatsapp-order:hover { transform: translateY(-2px); border-color: #dfff2d; background: linear-gradient( 180deg, #32204c 0%, #29183f 100% ); box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 18px rgba(217,255,0,.18); color: var(--riven-quick-form-heading); } .riven-whatsapp-order:active { transform: scale(.98); } .riven-whatsapp-order i { font-size: 24px; color: #dfff2d; transition: transform .25s ease; } .riven-whatsapp-order:hover i { transform: scale(1.12); } .riven-whatsapp-order span { line-height: 1; letter-spacing: .3px; } /* Mobile */ @media (max-width:768px){ .riven-whatsapp-order{ height:58px; font-size:17px; border-radius:var(--riven-quick-form-radius); } .riven-whatsapp-order i{ font-size:22px; } } .riven-quick-order .riven-order-modal { max-width: 100%; max-height: 100%; margin-bottom: 60px; } .riven-quick-order .riven-order-wrapper { display: flex; gap: 12px; } .riven-quick-order-customer-info { width: 50%; } .riven-quick-order .riven-order-header { text-align: center; text-transform: uppercase; font-size: 32px; } .riven-order-divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0; color:var(--color-muted); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:1px; } .riven-order-divider::before, .riven-order-divider::after{ content:''; flex:1; height:2px; background:linear-gradient( 90deg, transparent, var(--riven-quick-form-accent), transparent ); opacity:.5; } .riven-order-payment{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; padding:24px; border: 1px solid var(--riven-quick-form-border); border-radius:20px; background:var(--riven-quick-form-card); margin-bottom: 20px; } .riven-payment-method{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; } .riven-payment-method label{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:18px; font-weight:600; color:var(--color-text); } .riven-payment-method input{ accent-color:var(--riven-quick-form-accent); } .riven-payment-info{ text-align:right; } .riven-payment-info p{ margin:0 0 6px; font-size:14px; color:var(--color-muted); text-transform:uppercase; letter-spacing:.08em; } .riven-payment-number{ display:block; font-size:28px; font-weight:800; color:var(--riven-quick-form-accent); line-height:1; user-select:all; } @media (max-width:768px){ .riven-order-payment{ grid-template-columns:1fr; gap:20px; } .riven-payment-info{ text-align:left; } } .riven-order-row { margin-bottom: 16px; } @media (max-width:991px){ .riven-order-wrapper{ flex-direction:column; gap:24px; } .riven-order-left, .riven-order-right{ width:100%; flex:0 0 100%; max-width:100%; } } /* |-------------------------------------------------------------------------- | Reveal Animation |-------------------------------------------------------------------------- */ .riven-reveal{ opacity:0; transform:translateY(40px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; } .riven-reveal.is-visible{ opacity:1; transform:translateY(0); } .riven-delay-1{ transition-delay:.15s; } .riven-delay-2{ transition-delay:.2s; } .riven-delay-3{ transition-delay:.45s; } .riven-delivery-locations{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:10px; } .riven-delivery-location{ position:relative; display:flex; align-items:center; padding:16px 18px; border:2px solid var(--riven-quick-form-border-light); border-radius:12px; cursor:pointer; transition:all .25s ease; background:#241432; } .riven-delivery-location:hover{ border-color:var(--riven-quick-form-accent); } .riven-delivery-location input{ display:none; } .riven-delivery-location span{ display:flex; justify-content:space-between; align-items:center; width:100%; } .riven-delivery-location strong{ font-size:15px; font-weight:600; color:var(--riven-quick-form-heading); } .riven-delivery-location small{ font-size:15px; font-weight:700; color:var(--riven-quick-form-accent); } /* Selected */ .riven-delivery-location:has(input:checked){ border-color:var(--riven-quick-form-accent); background:rgba(220,255,58,.08); box-shadow:0 0 0 2px rgba(220,255,58,.18); } /* Mini Cart */ .emds-cart-panel .riven-order-form { display: block !important; } .emds-cart-panel .riven-quick-order .riven-order-wrapper { display: block !important; } .emds-cart-panel .riven-quick-order-customer-info { width: 100%; } .emds-cart-panel .riven-order-modal { box-sizing:border-box; width:100%; max-width:100%; } .emds-cart-panel .riven-order-modal { padding: 20px; } .emds-cart-panel .riven-payment-option label, .emds-cart-panel .riven-payment-method label { display: flex; align-items: center; gap: 0px; font-weight: 600; color: var(--riven-quick-form-heading); cursor: pointer; font-size: 16px; } .emds-cart-panel .riven-payment-option label{ position: relative; display: flex; align-items: center; padding: 16px 18px; border: 2px solid var(--riven-quick-form-border-light); border-radius: 12px; cursor: pointer; transition: all .25s ease; background: #241432; } .emds-cart-panel .riven-payment-option label:has(input:checked) { border-color: var(--riven-quick-form-accent); background: rgba(220,255,58,.08); box-shadow: 0 0 0 2px rgba(220,255,58,.18); } .emds-cart-panel .riven-payment-option label { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--riven-quick-form-heading); } .emds-cart-panel .riven-payment-option input { display: none; } .emds-cart-panel .riven-payment-option,.emds-cart-panel .riven-payment-method { display: flex; gap: 16px; margin-top: 5px; } .emds-cart-panel .riven-delivery-location span { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; } .emds-cart-panel .riven-order-payment { gap: 20px; } .emds-cart-panel .riven-payment-number { font-size: 24px; }