.quantity-discount-order-form { max-width: 600px; margin: 0px auto; padding: 10px; } .original-price-display { margin-bottom: 20px; padding: 10px; text-align: center; } .price-label { font-weight: bold; margin-right: 10px; } .price-amount { font-size: 1.2em; } .quantity-options { margin-bottom: 20px; } .quantity-option { margin-bottom: 10px; font-size: 16px; align-items: center; justify-content: space-between; width: 100%; } .quantity-option input[type="radio"] { display: none; } .quantity-option label { display: block; padding: 10px 15px; border: 2px solid; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .quantity-option input[type="radio"]:checked + label { font-weight: bold; } .discount-badge { display: inline-block; background-color: #FF9800; color: #000000; padding: 2px 8px; border-radius: 3px; margin-left: 10px; font-size: 0.9em; float: left; padding: 0 5px; font-size: 11px; } .cod-order-form { margin-top: 20px; } .form-row { margin-bottom: 15px; } .form-row label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 18px; } .form-row input[type="text"], .form-row input[type="tel"], .form-row input[type="email"], .form-row textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .required { color: red; } .order-summary { margin: 20px 0; padding: 15px; border-radius: 5px; } .order-summary h4 { margin-top: 0; margin-bottom: 10px; } .submit-order { width: 100%; padding: 12px; color: white; border: none; border-radius: 34px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s ease; } .submit-order:hover { opacity: 0.9; } .error-message { color: red; font-size: 0.9em; margin-top: 5px; } .global-error { background-color: #ffebee; padding: 10px; border-radius: 4px; margin-bottom: 15px; } .order-success-message { background-color: #e8f5e9; padding: 20px; border-radius: 5px; margin-top: 20px; } .submit-order.loading { position: relative; pointer-events: none; opacity: 0.7; } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } .quantity-discount-order-form { border-style: dashed; border-color: #d3d3d3; } span.price-amount-number { font-size: 6rem; font-family: Lato; font-weight: bold; text-decoration: none; line-height: 150%; letter-spacing: 0px; text-shadow: 0px 0px 0px #000000; } span.price-amount-number { color: #333; } .order-success-message { text-align: center; } .error-message { color: red; font-size: 0.9em; margin-top: 5px; } .after-price-text { font-size: 14px; text-align: center; margin: 10px; } .before-price-text { font-size: 16px; font-weight: bold; text-align: center; } .after-button-text { font-size: 14px; color: #f30000; text-align: center; margin: 10px; } .list-unstyled{list-style:none;} [dir] .list-unstyled{margin:0;padding:0;} [dir] .app-heading{margin:0 0 34px;text-align:center;} .app-heading .heading-primary{font-size:26px;line-height:36px;} @media (max-width:768px){ [dir] .app-heading{margin:0 0 17px;} .app-heading .heading-primary{font-size:22px;line-height:32px;} } .currency-value{align-items:center;display:inline-flex;} .currency-value .currency,.currency-value .value{font-size:inherit;} @media (min-width:768px){ [dir] .orders-section{padding:60px 0;} } @media (max-width:768px){ [dir] .orders-section{padding:30px 0;} } .fr-view{word-wrap:break-word;} [dir=rtl] .orders-section .app-heading{text-align:right;} .orders-section .order-message{max-width:700px;} [dir] .orders-section .order-message{margin:0 auto 30px;} .orders-section .order-message .message-header{width:90px;} [dir] .orders-section .order-message .message-header{margin:0 auto 20px;} [dir] .orders-section .order-message .message-body .app-heading{margin:0;text-align:center;} [dir] .orders-section .order-message .message-body .fr-view{margin:10px 0 0;text-align: center;} [dir] .orders-section .order-message .message-body .actions{margin:20px 0 0;text-align:center;} .orders-section .single-order{max-width:700px;} [dir] .orders-section .single-order{background-color:#fafafa;border:1px solid #f0f0f0;border-radius:3px;margin:auto;padding:15px;} .orders-section .single-order .single-order-header{align-items:baseline;display:flex;justify-content:space-between;} [dir] .orders-section .single-order .single-order-header{margin:0 0 15px;} .orders-section .single-order .single-order-header .order-item{flex:1 auto;width:33.3333333333%;} [dir] .orders-section .single-order .single-order-header .order-item{background-color:#fff;border:1px solid #f0f0f0;border-radius:3px;padding:12px;text-align:center;} .orders-section .single-order .single-order-header .order-item h2{color:#a7a7a7;font-size:14px;font-weight:500;} [dir] .orders-section .single-order .single-order-header .order-item h2{margin:0 0 5px;} .orders-section .single-order .single-order-header .order-item p{font-size:13px;font-weight:600;} [dir] .orders-section .single-order .single-order-header .order-item p{margin:0;} [dir=rtl] .orders-section .single-order .single-order-header .order-item:not(:last-child){margin:0 0 0 10px;} @media (max-width:425px){ [dir] .orders-section .single-order .single-order-header .order-item:not(:last-child){margin:0 0 10px;} .orders-section .single-order .single-order-header .order-item{width:100%;} .orders-section .single-order .single-order-header{flex-direction:column;} } .orders-section .single-order .single-order-body{overflow-x:auto;} [dir] .orders-section .single-order .single-order-body{background-color:#fff;border:1px solid #f0f0f0;border-radius:3px;} [dir] .orders-section .single-order .single-order-body .table td,[dir] .orders-section .single-order .single-order-body .table th{padding:15px;} [dir] .orders-section .single-order .single-order-body .table thead tr{border-bottom:1px solid #f0f0f0;} .orders-section .single-order .single-order-body .table thead th{color:#a7a7a7;font-weight:500;} .orders-section .single-order .single-order-body .table .table-ref a{display:block;font-weight:600;max-width:280px;} .orders-section .single-order .single-order-body .table .product-qty{display:block;font-size:13px;font-weight:500;height:25px;line-height:23px;width:40px;} [dir] .orders-section .single-order .single-order-body .table .product-qty{background-color:#fff;border:1px solid #f0f0f0;border-radius:3px;margin:auto;padding:0 3px;} .orders-section .single-order .single-order-body .table:not(.table-total) tbody tr{height:50px;} [dir] .orders-section .single-order .single-order-body .table:not(.table-total) tbody tr{background-color:#fefefe;border-bottom:1px solid #f0f0f0;} [dir] .orders-section .single-order .single-order-body .table:not(.table-total) tbody td{padding:10px 15px;} [dir] .orders-section .single-order .single-order-body .table.table-total tr td{padding:0 20px 10px;} .orders-section .single-order .single-order-body .table.table-total tr td:nth-child(3){color:#a7a7a7;font-weight:500;} [dir] .orders-section .single-order .single-order-body .table.table-total tr:first-child td{padding:15px 20px 10px;} .orders-section .single-order .single-order-body .table.table-total tr:last-child td{color:#1a1a1a;} [dir] .orders-section .single-order .single-order-body .table.table-total tr:last-child td{padding:0 20px 15px;} .orders-section .single-order .single-order-body .table.table-total tr:last-child td .currency-value{color:var(--primary-color);font-weight:600;} @media (max-width:425px){ .orders-section .single-order .single-order-body .table{width:600px;} .orders-section .single-order .single-order-body .table .mb-td{display:none;} } .orders-section .single-order .single-order-body::-webkit-scrollbar{height:6px;width:6px;} [dir] .orders-section .single-order .single-order-body::-webkit-scrollbar-thumb{background-color:var(--primary-color);} [dir] .orders-section .single-order .single-order-body::-webkit-scrollbar-track{background-color:#fafafa;} .orders-section .paid{color:#00c853;} [dir] .orders-section .text-center{text-align:center;} .orders-section .table-variants li{color:#a7a7a7;display:flex;font-weight:400;} .orders-section .currency-value{font-weight:500;} .button{align-items:center;color:#fff;display:inline-flex;font-weight:500;justify-content:center;line-height:inherit;outline:none;transition:all .25s;} [dir] .button{border:1px solid transparent;border-radius:3px;cursor:pointer;padding:8px 24px 9px;} [dir] .primary-button{background-color:var(--primary-color);border-color:var(--primary-color);} .primary-button{color:var(--primary-color);} [dir] .primary-button{background-color:transparent;} [dir=rtl] .order-item h2{font-weight:600;} [dir=rtl] .order-item p{direction:ltr;} .single-order-body { padding: 6px; } .quantity-card { width: calc(50% - 10px); float: right; position: relative; margin: 5px; background: #eee; border: 1px solid #eee; } .quantity-card h4 { color: #333; margin: 5px 0; font-size: 15px; text-align: center; } .quantity-card:has(input[type="radio"]:checked) { background-color: #f0f8ff; border: 2px solid #007bff; } .quantity-card span.discount-badge { position: absolute; top: 5px; left: 0px; } .quantity-card input[type="radio"] { display: none; } .quantity-card label { display: block; cursor: pointer; background: #eee; border: 1px solid #eee; transition: background-color 0.3s ease, border 0.3s ease; } .quantity-cards { float: left; width: 100%; } .table-label { display: inline-block; border-radius: 4px; font-weight: 600; font-size: 16px; } .table-label.pending { color: #f8b436; } .table-label.processing { color: #2196f3; } .table-label.on-hold { color: #f44336; } .table-label.completed { color: #4caf50; } .table-label.cancelled { color: #f44336; } .table-label.refunded { color: #9e9e9e; } .table-label.failed { color: #f44336; } .table-label.draft { color: #9e9e9e; } @keyframes floatButton { 0% { transform: translateY(0) rotate(0deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } 25% { transform: translateY(-4px) rotate(2deg); } 50% { transform: translateY(0) rotate(0deg); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 75% { transform: translateY(-2px) rotate(-2deg); } 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } } @keyframes glowButton { 0% { box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color); } 50% { box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); } 100% { box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color); } } .order-button-container { bottom: 20px; } .order-button { display: inline-block; padding: 15px 30px; background: linear-gradient(45deg, var(--primary-color), var(--primary-color)); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; animation: floatButton 3s ease-in-out infinite, glowButton 2s ease-in-out infinite; border: 2px solid rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; } .order-button:hover { background: linear-gradient(45deg, var(--primary-color), var(--primary-color)); color: #fff; transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 20px rgba(0,123,255,0.3); animation-play-state: paused; } .order-button:active { transform: scale(0.95); box-shadow: 0 5px 10px rgba(0,123,255,0.2); } .order-button-container.show { animation: rotateIn 0.5s ease-out; } @keyframes rotateIn { from { transform: rotate(-180deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } } @media (max-width: 768px) { .order-button-container { left: 20px; right: 20px; bottom: 30px; text-align: center; } .order-button { width: 90%; max-width: 300px; padding: 12px 25px; } } @media (min-width: 769px) { .order-button-container.scrolled .order-button { box-shadow: 0 15px 30px var(--primary-color);; } } .order-button-container { z-index: 9999; position: fixed; bottom: 0; width: 100%; padding: 10px; text-align: center; left: 0; right: 0; } .order-button-container a.order-button { background: var(--primary-color);; padding: 10px; display: inline-block; border-radius: 20px; min-width: 300px; color: #fff; }