/*
Theme Name: myupsale
Theme URI: https://myupsale.com/
Author: Mohamed
Author URI: https://myupsale.com/
Description: A custom theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, responsive-layout, custom-menu, featured-images, translation-ready
Text Domain: myupsale
*/
@font-face {
font-family: "Almarai";
font-style: normal;
font-weight: normal;
src: url(./fonts/Almarai-Regular.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Almarai";
font-style: normal;
font-weight: bold;
src: url(./fonts/Almarai-Bold.ttf) format("truetype");
font-display: swap;
}
:root {
--font-main: 'Almarai', sans-serif;
--color-primary: #0d0d0a;
--bg-primary: #ffffff;
--bg-secondary: #ffffff;
--header-bg: #000000;
--header-text-color: #ffffff;
--store-text-primary: #111827;
--store-text-secondary: #4b5563;
--product-bg: #eeeded;
--color-primary-dark: #000000;
--color-primary-light: #333330;
--color-primary-reverse: #d9d9d6;
--product-image-height: 17rem;
--product-border-color: #000000;
--product-enhanced-btn-bg: #3c3c3b;
--product-enhanced-btn-color: #ffffff;
--products-per-row: 4;
--footer-bg: #000000;
--footer-text-color: #ffffff;
--bottom-footer-bg: #000000;
--countdown-bg: #f3f4f6;
--countdown-color: #111827;
--countdown-border-color: #f3f4f6;
--bottom-nav-bg: #ffffff;
--bottom-nav-text-color: #111827;
--wa-btn-bg: #4dc247;
--wa-btn-text-color: #ffffff;
}
body, button, ::placeholder, select {
font-family: Almarai;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1280px) {
.container {
max-width:1100px
}
}
:root {
--infinte-color: #c9c9c9;
--main-text-color: #231f1e;
--main-text-color-dark: #2b2d34;
--color-primary: #5cd5c4;
--color-primary: #414042;
--color-primary-d: #272628;
--color-primary-l: #676668;
--color-primary-reverse: #ff6767;
--color-text: #7c8082;
--bg-gray: rgba(198,199,206,0.10196);
--color-grey: #f5f7f9;
--color-light-grey: #eeeeee;
--font-sm: 0.8685714286rem;
--font-main: "DINNextLTArabic";
--mm-ocd-width: calc(100% - 51px)
}
body {
font-size: 12px;
font-weight: 400;
color: #231f1e;
position: relative;
line-height: 1.2em;
border: 0;
margin: 0;
padding: 0
}
html {
width: 100%;
height: 100%;
position: relative;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
font-weight: 600;
margin-bottom: 0px
}
a {
text-decoration: none;
transition: color .2s
}
img {
max-width: 100%
}
a:focus {
outline: none;
text-decoration: none
}
ul,li {
margin: 0;
padding: 0;
list-style: none
}
h1 {
font-size: 1.875rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1.25rem;
}
.f-color {
color: #ff6767
}
h5.subtitle {
font-size: 16px;
font-weight: 400
}
html {
scroll-behavior: smooth;
overflow-x: hidden
}
::-webkit-scrollbar {
width: 5px
}
::-webkit-scrollbar-track {
background: #f1f1f1
}
::-webkit-scrollbar-thumb {
background: #414042;
background: var(--color-primary);
border-radius: 5px
}
.cursor-pointer * {
pointer-events: none
}
.flip-x {
transform: scaleX(-1)
}
/* input[type=file] {
display: none
} */
body [type=text]:focus,body [type=email]:focus,body [type=url]:focus,body [type=password]:focus,body [type=number]:focus,body [type=date]:focus,body [type=datetime-local]:focus,body [type=month]:focus,body [type=search]:focus,body [type=tel]:focus,body [type=time]:focus,body [type=week]:focus,body [multiple]:focus,body textarea:focus,body select:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0))
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
[type=submit] {
-webkit-appearance: listitem
}
input[type=number] {
-moz-appearance: textfield
}
.unicode {
unicode-bidi: plaintext
}
.spinner-loader {
border-right-color: #414042 !important;
border-right-color: var(--color-primary) !important
}
.spinner-loader.reverse {
border-right-color: #9f7171 !important
}
.spinner-loader.reverse {
background-color: #f98181
}
.hide-scroll {
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll
}
.hide-scroll::-webkit-scrollbar {
display: none
}
.no-scrollbar::-webkit-scrollbar {
display: none
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none
}
input[type=radio].sr-only div.absolute {
transition: all .3s
}
input[type=radio].sr-only:checked~div.absolute {
border-color: var(--color-main)
}
input[type=text]:disabled {
color: #838383
}
.form-label {
margin-bottom: 0.625rem;
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: var(--store-text-primary)
}
@media (min-width: 640px) {
.form-label {
margin-top:1px
}
}
@media (min-width: 768px) {
.form-label {
margin-bottom:0px
}
}
.form-input {
height: 2.5rem;
width: 100%;
border-radius: 0.375rem;
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
font-size: 0.875rem;
line-height: 1.25rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms
}
.form-input:focus {
border-color: #414042;
border-color: var(--color-primary);
--tw-ring-color: transparent
}
.form-input:focus:is(.dark *) {
border-color: #414042;
border-color: var(--color-primary)
}
.form-input {
background-color: var(--bg-secondary) !important
}
.form-input {
color: var(--store-text-primary);
-moz-appearance: none;
appearance: none;
-webkit-appearance: none
}
textarea.form-input {
height: 6rem
}
.has-error {
--tw-border-opacity: 1;
border-color: rgba(248, 113, 113, var(--tw-border-opacity))
}
.has-error:focus {
--tw-border-opacity: 1;
border-color: rgba(239, 68, 68, var(--tw-border-opacity))
}
.has-success {
--tw-border-opacity: 1;
border-color: rgba(34, 197, 94, var(--tw-border-opacity))
}
.has-success:focus {
--tw-border-opacity: 1;
border-color: rgba(22, 163, 74, var(--tw-border-opacity))
}
.btn {
display: inline-flex;
flex: 1 1 0%;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: 0.375rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 0.625rem;
padding-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms
}
.btn:hover {
opacity: 0.8
}
.btn .loader {
width: 0;
opacity: 0;
height: 16px;
transform: scale(0);
transition: .3s
}
.main-nav-container {
background-color: var(--header-bg);
color: var(--header-text-color);
display: table;
width: 100%;
min-height: 80px;
}
.main-nav-container .inner {
display: table-cell;
vertical-align: middle;
}
.navbar-brand {
display: flex;
align-items: center
}
.navbar-brand img {
max-height: 120px;
max-width: 300px
}
/* =================================================================== */
/* Styles for NEW Simple & Modern Off-Canvas Menu (Corrected)
/* =================================================================== */
/*
* Final Header Layout Correction
* ----------------------------------------
*/
.header-grid {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.header-column-left {
display: flex;
justify-content: end;
margin-left: 20px;
}
.header-column-left,
.header-column-right {
flex: 1 1 0%;
}
.header-column-center {
flex-shrink: 0; /* Prevents the logo from shrinking */
}
.header-column-right {
display: flex;
justify-content: flex-end;
padding-right: 20px;
}
/* For RTL languages like Arabic, 'flex-end' is the left.
We want the icon on the far right, which is the 'start'. */
html[dir="rtl"] .header-column-right {
justify-content: flex-start;
}
/* STYLES FOR THE HAMBURGER ICON */
.menu-toggle {
display: flex !important; /* Force flex to override conflicts */
flex-direction: column;
justify-content: space-around;
width: 35px;
height: 30px; /* This height is crucial for the bars to space out */
padding: 0;
box-sizing: border-box;
background: transparent;
border: none;
cursor: pointer;
}
.menu-toggle:focus {
outline: none;
}
.menu-toggle .bar {
display: block;
width: 100%;
height: 3px;
background-color: #ffffff; /* Color of the bars */
}
/* STYLES FOR THE SLIDE-OUT PANEL */
/* 1. The semi-transparent background overlay */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}
.menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* 2. The menu panel that slides in */
.off-canvas-menu {
position: fixed;
top: 0;
right: 0; /* Positioned on the right for RTL slide-in */
width: 280px;
height: 100%;
background-color: #0d0d0a;
z-index: 999;
padding: 20px;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.off-canvas-menu.is-active {
transform: translateX(0);
}
/* 3. The close button inside the menu */
.menu-close-btn {
position: absolute;
top: 50px;
left: 20px;
background: none;
border: none;
color: #888;
font-size: 36px;
font-weight: bold;
line-height: 1;
cursor: pointer;
transition: color 0.2s;
}
.menu-close-btn:hover {
color: #fff;
}
/* 4. The container for the menu links */
.off-canvas-menu-inner {
padding-top: 70px;
}
.off-canvas-menu-inner a {
color: #ffffff;
display: block;
padding: 15px 5px;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #333330;
text-decoration: none;
transition: background-color 0.2s;
}
.off-canvas-menu-inner a:hover {
background-color: #333330;
}
/* 5. Prevent body scroll when menu is open */
body.menu-is-open {
overflow: hidden;
}
.replica-container {
max-width: 1100px;
margin: 0px auto 55px;
direction: rtl;
background: #fff;
padding: 20px 0px;
}
/* =================================================================== */
/* Homepage Stories Section
/* =================================================================== */
.stories-section {
padding: 0px 20px;
}
/* =================================================================== */
/* Homepage Main Media Slider (Corrected Shadow)
/* =================================================================== */
.main-slider-section {
direction: rtl;
}
.main-slider-content {
padding: 0px 10px;
}
.main-swiper {
width: 100%;
padding: 20px 10px;
padding-bottom: 50px;
}
/* The slide itself is now just a padded container */
.main-swiper .swiper-slide {
background: transparent; /* Remove any background */
aspect-ratio: 33 / 19;
padding: 12px; /* This creates space for the shadow to appear */
box-sizing: border-box;
}
/* The new inner wrapper gets the shadow and content styling */
.main-swiper .slide-content {
width: 100%;
height: 100%;
border-radius: 17px;
box-shadow: 0px 0px 8.7px 3px rgba(0, 0, 0, 0.4);
overflow: hidden; /* Clip the media, but not the shadow */
position: relative;
background-color: #000;
}
.main-swiper .swiper-slide img,
.main-swiper .swiper-slide video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* border-radius is no longer needed here, it's on the parent */
}
/* Video specific styles */
.video-slide-container {
position: relative;
width: 100%;
height: 100%;
}
.play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #e50914;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: transform 0.2s;
}
.play-button-overlay:hover {
transform: translate(-50%, -50%) scale(1.1);
}
/* This ::after is the white play triangle */
.play-button-overlay::after {
content: '';
position: absolute; /* Position it within the red circle */
top: 50%;
left: 50%;
/* Center the triangle precisely */
transform: translate(-45%, -50%); /* Adjust to account for the triangle's shape */
display: block;
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent white;
}
/* Pagination Dots Styling */
.main-swiper .swiper-pagination {
position: relative; /* Change positioning to flow normally with the page */
bottom: auto; /* Reset the default bottom value from Swiper */
margin: 30px 0px 20px; /* Add some space between the slides and the dots */
}
.main-swiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: #CCCCCC;
opacity: 1;
transition: background-color 0.3s;
}
.main-swiper .swiper-pagination-bullet-active {
background-color: #000000;
}
/* =================================================================== */
/* Promotional Products Section (Fully Scoped - V3) */
/* =================================================================== */
.promo-products-section {
padding: 0px 20px;
background-color: #fff;
}
.promo-products-section .promo-filters-and-search {
margin-bottom: 20px;
filter: drop-shadow(0px 4px 3.8px rgba(0, 0, 0, 0.06));
}
.promo-products-section .promo-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 15px;
}
.promo-products-section .filter-btn {
padding: 8px 18px;
font-weight: 700;
font-size: 10px;
line-height: 120%;
color: #000;
background: #F8F8F8;
border: 1px solid #D7D7D7;
border-radius: 30px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04);
}
.promo-products-section .filter-btn:hover,
.promo-products-section .filter-btn.active {
background: #E1E1E1;
border-color: #A1A1A1;
}
.promo-products-section .promo-search-container {
display: flex;
gap: 10px;
justify-content: center;
max-width: 450px;
margin: 0 auto;
}
.promo-products-section .promo-search-bar {
position: relative;
flex-grow: 1;
}
.promo-products-section #promo-search-input {
width: 100%;
height: 36px;
border: 1px solid #EAEAEA;
border-radius: 8px;
padding: 0 40px 0 15px;
font-size: 16px;
background: #FAFAFA;
box-sizing: border-box;
}
.promo-products-section #promo-search-input::placeholder {
color: rgba(0, 0, 0, 0.27);
font-weight: 700;
}
.promo-products-section .promo-search-bar .search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
}
.promo-products-section .promo-filter-btn {
width: 38px;
height: 36px;
background: #F8F8F8;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.promo-products-section .promo-filter-btn img {
width: 16px;
height: 16px;
}
.promo-products-section .promo-product-card {
background: rgba(248, 248, 248, 0.7);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: 12px;
padding: 10px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
min-width: 0;
}
.promo-products-section .promo-product-list .promo-product-card:last-child {
margin-bottom: 0;
}
.promo-products-section .promo-card-content {
display: flex;
flex-direction: row-reverse;
gap: 10px;
flex-grow: 1;
}
.promo-products-section .promo-card-info {
flex: 4;
display: flex;
flex-direction: column;
min-width: 0;
}
.promo-products-section .promo-product-title {
font-size: 14px;
font-weight: 700;
color: #000;
margin-block-start: 0px;
margin-bottom: 5px;
}
.promo-products-section .promo-product-title a {
color: inherit;
text-decoration: none;
}
.promo-products-section .promo-product-title a:hover {
text-decoration: underline;
}
.promo-products-section .promo-product-rating {
display: flex;
align-items: center;
gap: 5px;
}
.promo-products-section .promo-product-rating .rating-value {
font-size: 12px;
font-weight: 700;
}
.promo-products-section .promo-product-rating .stars .star-rating {
font-size: 12px;
color: #FFCC00;
}
.promo-products-section .promo-product-pricing {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 8px;
margin-bottom: 4px;
font-size: 10px;
}
.promo-products-section .promo-product-pricing .current-price {
font-weight: 800;
color: #000;
}
.promo-products-section .promo-product-pricing .current-price .woocommerce-Price-amount {
font-size: 10px;
}
.promo-products-section .promo-product-pricing .old-price {
color: #A1A1A1;
text-decoration: line-through;
}
.promo-products-section .promo-product-pricing .old-price .woocommerce-Price-amount {
font-size: 10px;
}
.promo-products-section .promo-product-pricing .savings-amount {
color: #34C759;
font-weight: 400;
display: flex;
align-items: center;
gap: 3px;
}
.promo-products-section .promo-product-pricing .savings-amount img {
width: 16px;
height: auto;
}
.promo-products-section .promo-offer-contents {
font-size: 10px;
color: #8C8C8C;
line-height: 1.5;
margin-bottom: auto; /* Pushes social proof to bottom */
}
.promo-products-section .promo-offer-contents ul {
list-style-type: disc;
padding-right: 15px;
margin: 0;
}
.promo-offer-contents li {
list-style: disc;
}
.promo-products-section .promo-social-proof {
display: flex;
gap: 5px;
margin-top: 10px;
}
.promo-products-section .promo-social-proof > div {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 9px;
font-weight: 400;
padding: 1px 6px;
border-radius: 6px;
border: 1px dashed;
}
.promo-products-section .promo-social-proof .proof-box-red {
background: rgba(255, 59, 48, 0.08);
border-color: #FF3B30;
color: #FF3B30;
}
.promo-products-section .promo-social-proof .proof-box-green {
background: rgba(52, 199, 89, 0.08);
border-color: #34C759;
color: #34C759;
}
.promo-products-section .promo-social-proof img {
width: 9px;
height: 9px;
}
.promo-products-section .promo-card-gallery {
flex: 4;
position: relative;
/* background: #FFFFFF; */
/* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); */
/* border-radius: 11px; */
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 5px 0px;
}
.promo-products-section .promo-sale-badge {
position: absolute;
top: 8px;
left: 8px;
background: #000;
color: #fff;
padding: 4px 12px;
border-radius: 22px;
font-size: 11.4px;
font-weight: 400;
z-index: 2;
}
.promo-products-section .promo-product-swiper {
width: 100%;
height: 100%;
}
.promo-products-section .promo-product-swiper .swiper-slide img {
max-height: 120px;
padding: 5px;
}
.promo-products-section .promo-product-swiper .swiper-pagination {
position: absolute;
bottom: 0px !important;
left: 0;
right: 0;
width: 100%;
}
.promo-products-section .promo-product-swiper .swiper-pagination-bullet {
width: 5px;
height: 5px;
background: #D9D9D9;
opacity: 1;
}
.promo-products-section .promo-product-swiper .swiper-pagination-bullet-active {
background: #000;
}
.promo-products-section .promo-card-footer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 10px 15px;
margin-top: 15px;
}
.promo-products-section .promo-card-footer .footer-badge {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
color: #8C8C8C;
}
.promo-card-footer-logo {
background: black;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 15px;
height: 15px;
padding: 1px;
}
.promo-products-section .footer-badge img {
height: auto;
width: auto;
}
.promo-products-section .promo-show-more-btn {
display: block;
width: fit-content;
margin: 25px auto 0;
padding: 10px 80px;
background: #000;
color: #fff;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
transition: opacity 0.2s ease;
}
.promo-products-section .promo-show-more-btn:hover {
opacity: 0.8;
}
/* Desktop Layout (2 cards per row) */
@media (min-width: 768px) {
.promo-products-section .promo-product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; /* This creates space between the cards */
}
/* When using grid 'gap', we can remove the old margin
to prevent double spacing. */
.promo-products-section .promo-product-card {
margin-bottom: 0;
}
}
.promo-products-section .promo-product-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: flex-start;
}
.promo-product-rating .fa-star {
font-size: 13px;
color: #ecb22e;
margin-right: 2px;
}
/* --- Show More Button Initial State --- */
.promo-product-list .promo-product-card:nth-child(n+4) {
display: none;
}
.newThemeHeaderIn h1 {
text-align:center;
margin-top: 30px;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 16px 0;
grid-gap: 22px;
}
.newThemeHeaderIn h1:after,.newThemeHeaderIn h1:before {
content: " ";
display: block;
border-bottom: 2px solid #ccc;
background-color:#f8f8f8;
}
/* --- START: Add this entire block for new filters and styles --- */
.promo-products-section .promo-filters-and-search {
position: relative;
z-index: 10;
}
.promo-filter-wrapper {
position: relative;
flex-shrink: 0;
}
.promo-sort-dropdown {
display: none;
position: absolute;
top: calc(100% + 5px);
right: 0;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 100;
width: 220px;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.promo-sort-dropdown.is-open {
display: block;
}
.promo-sort-dropdown .dropdown-header {
padding: 12px 15px;
font-weight: bold;
color: #000;
background-color: #f8f8f8;
font-size: 14px;
}
.promo-sort-dropdown .sort-option {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s ease;
border-top: 1px solid #f5f5f5;
}
.promo-sort-dropdown .sort-option:hover {
background-color: #f5f7f9;
}
.promo-sort-dropdown .sort-option.active {
background-color: #e9f5ff;
color: #007aff;
font-weight: bold;
}
.promo-products-section .promo-product-card.is-recommended {
border: 2px solid #FFD700;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
.promo-card-gallery {
overflow: hidden;
}
.recommendation-ribbon {
position: absolute;
top: 15px;
left: -45px;
width: 140px;
padding: 2px 0;
background-color: #ffc107;
color: #000000;
text-align: center;
font-size: 10px;
font-weight: 700;
transform: rotate(315deg);
z-index: 5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* --- END: Add this entire block --- */
/* =================================================================== */
/* STYLES FOR CUSTOM PRODUCT VIDEO TEMPLATE */
/* =================================================================== */
.product-layout-wrapper {
display: flex !important;
flex-direction: column !important;
padding: 25px;
}
.product-gallery-column { order: 1 !important; position: relative; }
.product-info-column { order: 2 !important; }
/* Desktop Layout */
@media (min-width: 992px) {
.product-layout-wrapper {
flex-direction: row !important;
gap: 40px !important;
padding: 20px 0px;
}
.product-info-column { flex: 1 1 55% !important; order: 1 !important; }
.product-gallery-column { flex: 1 1 45% !important; order: 2 !important; position: sticky; }
}
/* Gallery, Badge & Video Button */
.woocommerce-product-gallery .woocommerce-product-gallery__image { position: relative; }
.product-gallery-column .woocommerce-product-gallery__wrapper { border-radius: 12px; overflow: hidden; border: 1px solid #e8e8e8; padding: 0px 30px;}
.replica-sale-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
background-color: #000;
color: #fff;
border-radius: 20px;
font-size: 11.5px;
font-weight: 100;
padding: 3px 10px;
}
}
.woocommerce-product-gallery span.onsale { display: none !important; }
/* Product Info Styling */
.product-title-section h1 {
font-size: 14px;
font-weight: 100;
line-height: 1.2;
}
.expandable-description p {
margin: 5px 0px;
}
p.custom-excerpt {
color: #919191;
font-size: 12px;
line-height: 1.5; }
.description-excerpt, .description-full {
color: #666;
line-height: 1.6;
text-align: right;
font-size: 12px;
}
.read-more-trigger, .read-less-trigger {
color: #73a1f2;
}
.product-pricing-section {
display: flex;
flex-direction: row-reverse;
justify-content: right;
gap: 5px;
border-radius: 12px;
margin: 20px 0px 0px;
font-size: 16px;
font-weight: 800;
}
.product-pricing-section .current-price {
color: #000000;
}
.product-pricing-section .old-price {
color: #ff4d4d; /* Red color */
text-decoration: line-through;
}
.product-pricing-section .savings-amount {
font-size: 15px;
font-weight: 500;
color: #27ae60; /* Green color */
}
.product-pricing-section img {
margin-top: -10px;
}
/*
* FINAL LAYOUT & CENTERED PLAY BUTTON
* --------------------------------------------------
*/
/* 1. Fix the desktop column alignment */
@media (min-width: 992px) {
.product-layout-wrapper {
display: flex !important;
gap: 40px !important;
/* This is the key fix: Aligns both columns to the top */
align-items: flex-start;
}
}
/* 2. Position the play button correctly over the image */
/* Make the gallery column the positioning container */
.product-gallery-column {
position: relative;
width: 100%;
}
/* Position the link absolutely within the column */
.video-popup-link {
position: absolute;
/* The definitive way to center an absolute element */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10; /* Ensures it's on top and clickable */
}
/* The visual style of the button itself remains unchanged */
.video-play-button {
width: 70px;
height: 70px;
background-color: rgba(255, 0, 0, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.video-play-button:hover {
transform: scale(1.1);
}
.video-play-button::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid white;
margin-left: 6px;
}
.fancybox__container {
top: 50px!important;
}
.fancybox__content {
aspect-ratio: auto!important;
width: auto!important;
height: auto!important;
margin: 50px!important;
}
.layout2 .read-more-link {
color: #007aff;
}
/* Social Proof Section - Flexbox Layout */
.social-proof-section {
display: flex;
flex-wrap: wrap; /* Allows boxes to wrap to the next line */
justify-content: center; /* Center the boxes horizontally */
gap: 4px;
margin: 5px 0px;
}
.proof-box {
flex: 0 1 auto; /* Allows boxes to grow but not shrink below content size */
border: 1px dashed #d9d9d9;
color: #555;
border-radius: 5px;
padding: 0px 5px; /* Added more horizontal padding */
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
gap: 0px;
font-size: 10px;
font-weight: 500;
text-align: center;
white-space: nowrap; /* Prevents text from wrapping inside the box */
line-height: 5px;
}
.proof-box img {
margin-left: 4px;
}
/* --- The rest of your CSS for colors, etc., remains the same --- */
.proof-box i {
font-size: 10px;
color: #ffcc00;
margin-left: 2px;
}
.proof-box--review p {
font-weight: 700;
margin-left: 5px;
}
/* Color Modifiers */
.proof-box--red {
border-color: #FF3B30;
color: #FF3B30;
background: #ffefee;
}
.proof-box--green {
border-color: #34C759;
color: #34C759;
background: #effaf1;
}
.proof-box--blue {
border-color: #007aff;
color: #007aff;
background: #f9f9f9;
}
.proof-box--gray {
border-color: #B7B7B7;
color: #000000;
background: #f9f9f9;
}
.proof-box--yellow {
border-color: #FFE400;
color: #B6A307;
background: #fffbe1;
}
.viewers-number {
font-weight: 100;
color: #909090;
}
/* Star Rating Specifics */
.proof-box .stars {
color: #f39c12;
font-size: 16px;
}
.proof-box .stars .far { /* Style for empty stars */
color: #e0e0e0;
}
.proof-box .review-count {
color: #888;
}
/* High Demand Box */
.high-demand-box {
width: 100%; /* Make this box span full width */
background-color: #fffbe6;
border-color: #ffe58f;
color: #d46b08;
}
.high-demand-box i {
color: #ff7a45;
}
/* Direct Checkout Page Container */
.direct-checkout-container {
max-width: 480px;
margin: 40px auto;
padding: 20px;
font-family: inherit; /* Use theme's font */
direction: rtl;
}
.offer-details {
text-align: center;
margin-bottom: 40px;
}
.product-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.product-image-container img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
/* Form Styling */
.dilvery-details {
background-color: #ffffff;
margin: 15px;
}
.form-title {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #333;
margin-bottom: 15px;
}
.form-group {
margin-bottom: 7px;
position: relative;
}
.form-control {
width: 100%;
height: 35px;
padding: 5px 10px;
border: 1px solid #e0e0e0;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.2s;
}
.form-control:focus {
border-color: #000;
outline: none;
}
/* Phone Number Field */
.phone-group {
display: flex;
}
.phone-group .country-code {
display: flex;
align-items: center;
padding: 0 15px;
border: 1px solid #e0e0e0;
font-size: 12px;
border-radius: 5px 0px 0px 5px;
font-weight: bold;
}
.phone-group .phone-number {
border-radius: 0px 5px 5px 0px;
text-align: right;
}
/* Submit Button */
.submit-button {
width: 100%;
height: 33px;
background-color: #000;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.submit-button:hover {
background-color: #333;
}
/*
* Coupon Field Styling
* --------------------------------------------------
*/
.coupon-group {
display: flex;
align-items: center;
}
.coupon-field {
/* Make the input field take up all available space */
flex-grow: 1;
/* Remove the left-side border and round corners on the right only */
border-left: none;
border-radius: 0 5px 5px 0;
text-align: right;
}
.coupon-apply-btn {
height: 35px; /* Match the height of the input field */
border: none;
background-color: #000000;
color: #ffffff;
padding: 0 35px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
/* Round the corners only on the left side */
border-radius: 5px 0 0 5px;
}
/*
* Title with lines on both sides
* --------------------------------------------------
*/
.payment-form-title {
/* 1. Turn the title into a flex container */
display: flex;
align-items: center;
text-align: center;
/* 2. Adjust color and spacing */
color: #8e8e93; /* A soft gray for the text */
margin: 0px 0px 10px; /* Adds space above and below the title */
font-size: 12px;
font-weight: bold;
}
/* 3. Create the lines using ::before and ::after pseudo-elements */
.payment-form-title::before,
.payment-form-title::after {
content: ''; /* Required for pseudo-elements to show up */
flex-grow: 1; /* This makes the lines expand to fill available space */
background-color: #e0e0e0; /* The color of the lines */
height: 1px; /* The thickness of the lines */
}
/* 4. Add a small gap between the text and the lines */
.payment-form-title::before {
margin-left: 15px; /* Space on the right side in RTL */
}
.payment-form-title::after {
margin-right: 15px; /* Space on the left side in RTL */
}
/*
* Payment Summary Banner Styling
* --------------------------------------------------
*/
.payment-summary-banner {
/* Layout for centering logos */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* Spacing */
gap: 0px;
padding: 10px 20px;
margin-bottom: 20px;
/* Border and Background */
border: 2px dashed #a4e9e0; /* Dashed aqua border */
background-color: #f0fcfc; /* Very light aqua background tint */
border-radius: 5px; /* Rounded corners */
}
/* Ensure all logos inside have a consistent height */
.payment-summary-banner img {
object-fit: contain;
}
.payment_method_cod label span{
display: block !important;
}
/*
* Final Payment Option Styling (with centered fee badge)
* --------------------------------------------------
*/
/* --- The Grid Container --- */
.payment-options-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 10px; /* More space at the bottom for the new badge position */
}
/* --- Base style for ALL boxes --- */
.payment-option label,
.payment-option-placeholder {
/* This is the key change: a positioning context for the badge */
position: relative;
display: flex;
justify-content: center; /* Center the main logo */
align-items: center!important;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 0px 5px;
min-height: 55px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out;
}
/* --- Active, clickable option --- */
.payment-option label {
cursor: pointer;
}
.payment-option input[type="radio"] {
display: none;
}
.payment-option input[type="radio"]:checked + label {
border-color: #007aff;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}
.payment-icon {
height: auto; /* Maintain aspect ratio */
}
.tabby-icon {
width: 50px;
}
.tamara-icon {
width: 50px;
}
.mada-icon {
width: 45px;
}
.mastercard-icon {
width: 30px;
}
.visa-icon {
width: 35px;
}
.paypal-icon {
width: 20px;
}
.applepay-icon {
width: 25px;
}
/* --- Disabled placeholders --- */
.payment-option-placeholder {
position: relative;
cursor: not-allowed;
}
/* Create the semi-transparent white overlay using ::before */
.payment-option-placeholder::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px; /* Match the parent's border-radius */
z-index: 1;
}
/* --- Content INSIDE the boxes --- */
.payment-option label img,
.payment-option-placeholder img {
object-fit: contain;
}
.payment-option label .payment-title {
font-weight: 500;
font-size: 12px;
color: #979797;
text-align: center;
margin-bottom: 8px;
}
/* --- The Repositioned Fee Badge --- */
.payment-option .payment-fee,
.payment-option-placeholder .payment-fee {
position: absolute;
bottom: 5px;
left: 50%;
transform: translate(-50%, 50%);
background-color: #f1f1f1;
color: #8c8c8c;
border-radius: 7px;
padding: 5px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
/* --- START: New CSS for Full-Width Payment Option --- */
.payment-main-option {
/* This command makes this grid item span all 3 columns */
grid-column: 1 / -1;
margin-left: 10px;
}
/* Style the logos inside the main option for better alignment */
.payment-main-option label {
display: flex;
align-items: center;
justify-content: center;
gap: 25px; /* Adjusts the space between the card logos */
width: 100%;
}
.payment-main-option label img {
object-fit: contain;
}
/* --- END: New CSS --- */
/* --- START: Shipping Options Grid Styles --- */
.shipping-section {
margin-bottom: 20px;
}
.shipping-options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.shipping-option label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 15px 5px;
min-height: 90px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.shipping-option input[type="radio"] {
display: none;
}
.shipping-option input[type="radio"]:checked + label {
border-color: #007aff;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}
.shipping-logo {
max-height: 40px;
margin-bottom: 10px;
object-fit: contain;
}
.shipping-title {
font-size: 20px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 15px;
text-align: center;
color: darkgreen;
}
.shipping-price {
font-size: 14px;
font-weight: 700;
color: #333;
}
/* --- END: Shipping Options Grid Styles --- */
/*
* Offer Details & Custom Reviews Styling
* --------------------------------------------------
*/
#offer-details-section {
padding: 10px 0px 0px;
}
.section-title {
text-align: center;
display: inline-block;
border-top: 1px solid #E6E6E6;
padding-top: 15px;
font-size: 24px;
font-weight: 800;
margin-bottom: 25px;
color: #333;
}
/* --- Style Tabs as Pill-Shaped Buttons --- */
#offer-details-section .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
#offer-details-section .woocommerce-tabs ul.tabs::before {
display: none; /* Hide default bottom border */
}
#offer-details-section .woocommerce-tabs ul.tabs li {
background: none;
border: 1px dashed #D7D7D7;
background-color: #F8F8F8;
border-radius: 20px;
font-size: 10px;
padding: 4px 0px;
}
#offer-details-section .woocommerce-tabs ul.tabs li a {
padding: 8px 12px;
color: #555;
font-weight: 600;
}
#offer-details-section .woocommerce-tabs ul.tabs li.active {
background-color: #000;
border-color: #000;
}
#offer-details-section .woocommerce-tabs ul.tabs li.active a {
color: #fff;
}
#offer-details-section .panel {
margin-top: 20px;
padding-top: 20px;
box-shadow: none;
border: none;
border-top: 1px solid lightgray;
font-size: 12px;
line-height: 1.5;
}
/* --- Style the Review List --- */
#reviews #comments {
margin-top: 30px;
}
#reviews #reply-title {
display: none; /* Hide the "Add a review" title if you don't want it */
}
ol.commentlist {
list-style: none;
padding: 0;
margin: 0;
}
/* Individual Review Item */
.commentlist li {
padding: 20px 0;
border-bottom: 1px solid #f0f0f0;
}
.commentlist li .comment_container {
display: grid;
grid-template-columns: 50px 1fr auto;
grid-template-rows: auto auto;
gap: 0 15px;
grid-template-areas:
"avatar username date"
"avatar rating verified"
"comment comment comment";
}
.commentlist li img.avatar {
grid-area: avatar;
border-radius: 50%;
width: 50px;
height: 50px;
}
.commentlist li .meta {
grid-area: username;
font-weight: 700;
color: #333;
margin: 0;
align-self: end;
}
.commentlist li .star-rating {
grid-area: rating;
color: #ffc107; /* Yellow stars */
}
/* "Verified Purchase" Badge */
.commentlist li .verified {
grid-area: verified;
justify-self: end;
font-size: 14px;
font-weight: 600;
color: #007aff;
}
.commentlist li .verified::before {
font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
content: "\f058";
font-weight: 900;
margin-left: 5px;
}
/* Date */
.commentlist li time {
grid-area: date;
font-size: 14px;
color: #888;
justify-self: end;
align-self: end;
}
/* The actual review text */
.commentlist li .description {
grid-area: comment;
margin-top: 15px;
color: #555;
line-height: 1.6;
}
.woocommerce-Tabs-panel h2 {
display: none;
}
/* --- Main Footer Container --- */
.footer-payment-bar, .footer-copyright {
padding: 20px 0px;
}
.hijazi-footer {
border-top: 2px dashed white;
background-color: #000000;
color: #ffffff;
}
.top-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 40px;
gap: 0px;
}
.footer-logo .main-logo {
max-width: 100px;
}
.footer-column {
flex: 1;
min-width: 220px;
text-align: right; /* Default text alignment for columns */
}
.footer-title {
font-size: 12px;
font-weight: bold;
margin-bottom: 20px;
color: #ffffff;
}
.footer-description {
line-height: 1.6em;
}
/* --- Logo Styling --- */
.footer-logo-desktop {
display: none; /* Hidden on mobile by default */
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-logo {
max-width: 150px;
height: auto;
}
.secondary-logo {
max-width: 80px;
}
.main-logo-mobile {
display: block; /* Visible on mobile */
max-width: 120px!important;
margin: 0 auto 20px auto; /* Centered */
}
/* --- About Us Section --- */
.about-us p {
color: #cccccc;
font-size: 14px;
line-height: 1.6;
}
.tax-number {
margin-top: 15px;
font-size: 13px;
color: #a0a0a0;
}
.tax-logo {
display: block;
max-width: 50px !important;
margin: 20px auto 20px auto;
}
/* --- Quick Links Section --- */
.quick-links ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.5em;
}
.quick-links ul li a {
color: #cccccc;
text-decoration: none;
font-size: 15px;
transition: color 0.3s;
}
.quick-links ul li a:hover {
color: #ffffff;
}
/* --- Social & Contact Section --- */
.social-contact .social-icons {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.social-contact .social-icons a {
display: flex;
align-items: center;
gap: 0px;
text-decoration: none;
color: #cccccc;
transition: color 0.3s;
}
.social-contact .social-icons a:hover {
color: #ffffff;
}
.social-contact .social-icons img {
width: 30px;
height: 30px;
}
/* --- Payment & Copyright Bar --- */
.footer-payment-bar {
}
.footer-payment-images {
background: white;
border-radius: 10px;
display: flex;
gap: 7px;
justify-content: center;
padding: 5px;
border: 2px dashed black;
}
.footer-payment-bar img {
max-width: 100%;
height: 35px;
object-fit: contain;
}
.footer-copyright {
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
.footer-copyright p {
margin: 0;
font-size: 13px;
color: #a0a0a0;
}
.social-icons span {
font-size: 11px;
direction: ltr;
}
/* --- Desktop Responsiveness (Media Query) --- */
@media (min-width: 769px) {
.hijazi-footer {
text-align: right; /* Text align for desktop */
padding-right: 60px;
gap: 50px;
}
.top-footer {
gap: 30px;
}
.main-logo {
margin-bottom: 20px;
}
.footer-column {
text-align: right;
}
.tax-logo {
margin:10px;
}
.social-contact .social-icons a {
flex-direction: row-reverse;
}
.footer-logo-desktop {
display: flex; /* Show desktop logo block */
}
.social-contact .social-icons {
align-items: flex-start;
}
}
/* --- Mobile Responsiveness (Media Query) --- */
@media (max-width: 768px) {
.hijazi-footer {
flex-direction: column;
align-items: center; /* Center columns on mobile */
text-align: center;
padding: 0px 40px;
}
.footer-column {
min-width: 100%;
text-align: center; /* Center all text on mobile */
}
.quick-links ul, .social-contact .social-icons {
align-items: center;
flex-direction: row;
justify-content: center;
}
.social-contact {
margin-top:20px;
}
}
/* --- START: Replace existing .total-summary-box rules with this block --- */
/* The main container - now a flexbox */
.total-summary-box {
display: flex;
justify-content: space-between; /* Pushes items to the edges and center */
align-items: center; /* Vertically aligns all items */
margin: 15px 0 0;
line-height: 1;
}
/* Style for "الإجمالي" (The first span) */
.total-summary-box > span:first-child {
font-size: 14px;
font-weight: bold;
color: #333;
}
/* Style for the main dynamic price */
.total-summary-box .dynamic-total-price {
font-size: 16px;
font-weight: bold;
color: #000;
line-height: 1; /* Helps with alignment */
}
/* Style for the old, strikethrough price */
.total-summary-box .dynamic-regular-price {
font-size: 12px;
font-weight: 100;
color: #999;
text-decoration: line-through;
margin: 0; /* Resets the old margin */
}
/* --- END OF REPLACEMENT --- */
/* --- START: New CSS for Coupon Trigger --- */
/* Styling for the "Have a coupon?" trigger link */
#coupon-trigger {
font-size: 10px;
font-weight: 500;
color: #ff3b30; /* Red color */
text-decoration: underline;
cursor: pointer;
}
/* The new, stable way to hide and show the coupon field */
.coupon-group {
/* Hide the element without using display:none */
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
width: 100%;
/* Smooth transition for the reveal */
transition: all 0.4s ease-in-out;
}
.coupon-group.visible {
/* The state when it's revealed */
max-height: 100px; /* A value larger than the content's height */
opacity: 1;
margin-top: 10px; /* Add margin only when visible */
}
/* --- END OF REPLACEMENT --- */
/* --- END: New CSS --- */
/* Hide the actual checkbox */
.upsell-label .upsell-checkbox {
display: none;
}
/* Style the container of the upsell item */
.upsell-option {
border-radius: 12px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
height: 100%; /* Ensure all boxes have the same height */
display: flex;
flex-direction: column;
}
.upsell-label {
display: block;
cursor: pointer;
}
/* Style when the checkbox is checked */
.upsell-checkbox:checked+.upsell-option .upsell-image-wrapper {
border: 2px solid black;
background-color: #939393;
}
.upsell-section-container {
text-align: center;
}
.upsell-title {
font-size: 18px;
color: #888;
margin-bottom: 20px;
}
.upsell-options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* 1. This rule makes the gray container WIDE */
.upsell-image-wrapper {
position: relative;
background-color: #D5D2D2;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* This forces the container to have a wide 2:1 aspect ratio */
aspect-ratio: 2 / 1;
max-height: 100px;
border-radius: 10px;
}
/* 2. This rule makes the image FIT INSIDE without cropping */
.upsell-image-wrapper img {
/* These two lines ensure the image shrinks to fit, preserving its shape */
max-width: 100%;
max-height: 100%;
/* These are needed to maintain the image's natural aspect ratio */
width: auto;
height: auto;
}
.upsell-sale-badge {
position: absolute;
top: 0;
left: -2px;
background-color: #000;
color: #fff;
padding: 4px 20px;
font-size: 10px;
font-weight: bold;
border-radius: 12px 0 12px 0;
line-height: 1;
}
.upsell-details {
padding: 15px 0px 0px;
color: #333;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.upsell-product-title {
font-size: 10px;
font-weight: 500;
margin: 0 0 8px;
line-height: 1.3;
}
.upsell-product-price {
/* 1. Use Flexbox to control the order and alignment */
display: flex;
flex-direction: row;
/* side-by-side */
align-items: center;
/* Center them horizontally */
line-height: 1.4;
/* Adjust spacing between them */
justify-content: center;
}
/* 2. Style and position the new sale price */
.upsell-product-price .new-price {
font-size: 11px;
font-weight: bold;
color: #000;
order: 1;
/* This moves it to the FIRST position */
}
/* 3. This is the fix to REMOVE THE UNDERLINE */
.upsell-product-price ins {
text-decoration: none;
/* Removes the default underline */
background: none;
/* Removes default background on some themes */
font-size: 10px;
margin-left: 3px;
}
/* 4. Style and position the old regular price */
.upsell-product-price .old-price,
.upsell-product-price del {
font-size: 10px;
color: #f00;
text-decoration: line-through;
order: 2;
/* This moves it to the SECOND position */
font-weight: 100;
color: #FF362B;
}
/* This is a leftover rule that is no longer needed */
.upsell-product-price .price {
display: none;
}
/* --- Upsell Product Rating Styles --- */
.upsell-rating {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin-top: 5px;
direction: ltr;
/* Ensures star order is correct regardless of page direction */
}
.upsell-rating .stars {
color: #ffc107;
/* Gold color for stars */
font-size: 9px;
}
.upsell-rating .review-count {
font-size: 10px;
color: #888;
font-weight: 500;
}
.upsell-rating .rating-value {
font-size: 10px;
font-weight: bold;
color: #333;
}
li#tab-title-cpt_warranty {
background-color: #fffad1 !important;
border: 2px dashed #FFE400 !important;
}
li#tab-title-cpt_warranty.active {
background-color: #e5cd05 !important;
color: white !important;
border: none !important;
}
li#tab-title-cpt_warranty.active a {
color: white !important;
}
/* --- Upsell Checkmark Overlay Styles --- */
/* The image container needs to be a reference for the overlay */
.upsell-image-wrapper {
position: relative;
}
/* The overlay itself - hidden by default */
.upsell-check-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
/* Match the wrapper's border-radius */
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
z-index: 5;
}
/* This is the magic: Show the overlay when the checkbox is checked */
.upsell-checkbox:checked+.upsell-option .upsell-check-overlay {
opacity: 1;
visibility: visible;
}
/* The small orange badge on the corner of the checkmark */
.upsell-check-overlay .overlay-badge {
position: absolute;
top: 0;
right: 0;
background-color: #f05d23;
/* Orange color */
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
border: 2px solid white;
}
/* --- Upsell PLUS Icon Styles --- */
.upsell-check-overlay .plus-icon {
width: 40px;
/* Adjusted size slightly */
height: 40px;
border-radius: 50%;
display: block;
stroke-width: 4;
/* Bolder plus sign */
stroke: #ffffff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #007aff;
animation: fill-blue .4s ease-in-out .4s forwards;
}
.upsell-check-overlay .plus-icon__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #007aff;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.upsell-check-overlay .plus-icon__line {
transform-origin: 50% 50%;
stroke-dasharray: 20;
stroke-dashoffset: 20;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
/* --- Keyframe animations (some are reused) --- */
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes fill-blue {
100% {
box-shadow: inset 0px 0px 0px 40px #007aff;
}
}
/* --- Invoice Details Styles --- */
.invoice-details-container {
margin: 15px 0;
border: 1px dashed #ccc;
border-radius: 8px;
overflow: hidden;
}
.invoice-details-toggle {
background-color: #f7f7f7;
padding: 4px 15px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: bold;
color: #333;
gap: 5px;
}
.invoice-details-toggle .arrow-down {
transition: transform 0.3s ease;
}
/* Rotates the arrow when the details are visible */
.invoice-details-toggle.active .arrow-down {
transform: rotate(180deg);
}
.invoice-details-content {
padding: 15px;
background-color: #fff;
border-top: 1px dashed #ccc;
}
.invoice-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 12px;
color: #555;
font-family: inherit;
}
.invoice-row.total-row {
font-weight: bold;
color: #000;
border-top: 1px solid #eee;
margin-top: 5px;
padding-top: 10px;
}
/* --- Confirmation Section Styles --- */
.confirmation-label {
display: flex;
align-items: center;
font-size: 10px;
cursor: pointer;
margin-bottom: 0px;
}
.confirmation-label strong {
/* Adjusts spacing based on text direction */
margin-right: 10px;
margin-left: 0;
}
.confirmation-label input[type="checkbox"] {
width: 12px;
height: 12px;
transform: scale(1.2);
}
.confirmation-details {
font-size: 9px;
color: #666;
line-height: 1.6;
margin: 0px 21px 0px 0px;
}
.confirmation-details .dynamic-value {
font-weight: bold;
color: #333;
}
.confirmation-section strong {
font-weight: 700;
color: #333;
}
/* --- =Special Offer CSS --- */
.special-offers-subtitle {
text-align: center;
font-size: 10px;
color: #555;
margin-top: -15px;
}
.special-offer-bundle {
background: #fff;
position: relative;
padding-bottom: 20px;
}
.special-offer-main {
display: flex;
align-items: stretch;
padding: 10px;
cursor: pointer;
border: 1px solid #e0e4e7;
border-radius: 12px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12);
margin: 10px;
}
.special-offer-main .offer-image {
width: 100px;
height: 70px;
padding: 10px;
flex-shrink: 0;
background: #f7f7f7;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.special-offer-main .offer-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.special-offer-main .offer-info {
flex-grow: 1;
padding: 0 10px;
text-align: right;
display: flex;
flex-wrap: nowrap;
line-height: 1;
justify-content: space-between;
flex-direction: column;
}
.special-offer-main .offer-title {
font-size: 14px;
font-weight: 100;
line-height: 1;
}
.special-offer-main .offer-subtitle {
font-size: 10px;
color: #7f8c8d;
font-weight: 100;
}
.special-offer-main .offer-rating {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: #777;
}
.special-offer-main .offer-rating .rating-value {
color: #000;
font-weight: bold;
}
.special-offer-main .offer-rating .stars {
color: #ffc107;
font-size: 10px;
}
.special-offer-main .offer-price {
display: flex;
flex-direction: column;
gap: 5px;
}
.special-offer-main .price-current .amount {
font-size: 12px;
font-weight: bold;
color: #000;
}
.special-offer-main .price-current del .amount {
font-size: 12px;
color: #95a5a6;
font-weight: normal;
}
.price-current ins {
text-decoration: none;
}
.special-offer-main .price-savings {
color: #27ae60;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 5px;
}
.special-offer-main .price-savings img {
width: 16px;
height: 16px;
}
.special-offer-main .offer-checkbox {
display: flex;
align-items: center;
}
.upsell-checkbox {
display: none;
}
/* Base style for the visual checkbox */
.custom-checkbox-visual {
width: 15px;
height: 15px;
border: 1px solid #9c9c9c;
transition: all 0.2s ease-in-out;
margin-left: 10px;
flex-shrink: 0;
align-self: center;
}
/* Styles for WHEN IT'S CHECKED */
.special-offer-bundle>input.upsell-checkbox:checked~.special-offer-main .custom-checkbox-visual {
background-color: #2ecc71;
/* Green background */
border-color: #2ecc71;
position: relative;
/* Needed for the checkmark */
}
/* The checkmark icon (SVG) */
.special-offer-bundle>input.upsell-checkbox:checked~.special-offer-main .custom-checkbox-visual::after {
content: url('data:image/svg+xml;utf8,');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
/* Size of the SVG icon */
height: 20px;
}
/* This ".unlocked" class is added by JavaScript sequentially */
.lock-overlay.unlocked {
background-color: #2ecc71;
/* Green for unlocked */
transform: scale(1.1) rotate(10deg);
/* Add a subtle bounce effect */
background-image: url('data:image/svg+xml;utf8,');
}
/* --- Animated Connecting Line --- */
.connecting-line-svg {
position: absolute;
top: 200px;
left: -10px;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
#animated-path {
stroke: #2ecc71; /* Green color for the line */
stroke-width: 1;
stroke-linecap: round; /* Creates rounded ends on the line */
stroke-dasharray: 500;
stroke-dashoffset: 500;
}
.special-offer-bundle>input.upsell-checkbox:checked~.connecting-line-svg #animated-path {
stroke-dashoffset: 0;
}
/* --- END OF REPLACEMENT BLOCK --- */
/* --- START: New CSS for Detailed Invoice Rows --- */
/* Style for the new coupon and gift rows to make them stand out */
#invoice-coupon-row span,
.gift-row span {
color: #27ae60; /* A pleasant green color */
font-weight: 500;
}
/* Make the text for coupon/gift names italic */
#invoice-coupon-row span:first-child,
.gift-row span:first-child {
font-style: italic;
}
#invoice-coupon-amount {
direction: ltr; /* Ensures the minus sign is on the left */
text-align: right;
}
/* --- END: New CSS --- */
/* --- Add this to style-layout2.css for better readability --- */
.gift-row span {
color: #27ae60;
font-style: italic;
}
#invoice-coupon-row span {
color: #27ae60;
font-weight: 500;
}
#invoice-coupon-amount {
direction: ltr;
text-align: right;
}
/* --- START: CSS Fix for Scroll Jumps --- */
/* Prepare the invoice content for a smooth transition */
.invoice-details-content {
padding: 0 15px; /* Adjust padding for the animation */
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out;
}
/* The 'visible' state for the invoice content */
.invoice-details-content.visible {
padding: 15px;
max-height: 500px; /* A value larger than the content will ever be */
opacity: 1;
}
/* Prepare the coupon and shipping rows inside the invoice */
.invoice-row#invoice-coupon-row,
.invoice-row#invoice-shipping-row {
max-height: 0;
opacity: 0;
padding: 0;
overflow: hidden;
transition: all 0.3s ease-out;
}
/* The 'visible' state for the internal rows */
.invoice-row#invoice-coupon-row.visible,
.invoice-row#invoice-shipping-row.visible {
max-height: 100px;
opacity: 1;
padding: 8px 0; /* Restore original padding */
}
/* --- END: CSS Fix --- */
/* --- START: New Popup Design Styles --- */
#offer-popup-overlay {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10000;
padding: 20px;
box-sizing: border-box; /* Add this line */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#offer-popup-overlay.is-active {
opacity: 1;
visibility: visible;
}
#offer-popup-modal {
position: relative;
background: #fff;
padding: 15px;
border-radius: 16px;
text-align: center;
max-width: 450px;
width: 100%;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transform: scale(0.95);
transition: transform 0.3s ease-out;
font-size: 12px;
line-height: 1.3;
}
#popup-savings-amount {
color: #38C813;
font-weight: bold;
}
#offer-popup-overlay.is-active #offer-popup-modal {
transform: scale(1);
}
#popup-main-offer-text {
font-size: 12px;
color: #555;
margin: 0 0 15px;
}
#popup-main-offer-text b {
color: #000;
}
#popup-gifts-value {
color: #38C813;
font-weight: bold;
}
.freely {
font-weight: bold;
}
#popup-main-image-container {
margin: 15px 0;
}
#popup-main-image-container img {
max-width: 200px;
height: auto;
border-radius: 10px;
background-color: #f7f7f7;
border: 1px solid #eee;
}
#popup-rating-info {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 25px;
direction: ltr; /* Ensure star order is correct */
}
#popup-review-count, #popup-rating-value {
font-size: 12px;
font-weight: 600;
color: #333;
}
#popup-stars {
color: #ffc107;
}
#popup-gifts-text {
font-size: 12px;
margin: 0 0 10px;
}
#popup-buttons {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
#popup-buttons button {
border: none;
border-radius: 5px;
padding: 5px 30px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
width: fit-content;
}
#popup-claim-offer {
background-color: #000000;
color: white;
}
#popup-claim-offer:hover {
opacity: 0.85;
}
#popup-dismiss {
background-color: transparent;
color: #888;
font-weight: 500;
}
#popup-dismiss:hover {
background-color: #f1f1f1;
}
/* Main Offer Image Container */
#popup-main-image-container {
margin: 15px 0;
display: flex;
justify-content: center;
}
#popup-main-image-container img {
max-width: 150px;
height: auto;
object-fit: contain;
border-radius: 10px;
background-color: #f7f7f7;
border: 1px solid #eee;
}
/* --- START: New Popup Header Styles --- */
.popup-header p {
line-height: 1.5;
}
.popup-greeting {
margin-bottom: 5px;
font-weight: 500;
}
.popup-savings {
font-weight: 500;
}
.popup-savings .savings-amount {
font-weight: 700;
color: #27ae60; /* Green color for savings */
}
.popup-main-offer {
margin-top: 5px;
}
.popup-main-offer strong,
.popup-main-offer del {
font-weight: 700;
color: #000;
}
.popup-main-offer del {
color: #999;
}
/* --- END: New Popup Header Styles --- */
/* --- START: Main Offer Box Styles --- */
.main-offer-container {
display: flex;
flex-direction: row-reverse; /* Puts image on the right */
align-items: center;
gap: 10px;
border: 1px solid #f0f0f0;
Background: white;
border-radius: 5px;
padding: 10px;
position: relative;
z-index: 10;
}
.offer-details-column {
flex: 1; /* Takes up remaining space */
text-align: right;
}
.offer-main-title {
font-size: 12px;
font-weight: 700;
color: #000;
line-height: 1.3;
}
.offer-main-subtitle {
font-weight: 500;
color: #aeaeae; /* Lighter grey from image */
line-height: 1.4;
}
.offer-main-rating {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 2px;
margin-bottom: 15px;
direction: ltr; /* Keeps star order correct */
}
.review-count-main {
font-weight: bold;
color: #8C8C8C;
}
.rating-value-main {
font-weight: bold;
}
.stars-main {
color: #ffc107;
display: flex;
}
.offer-main-price {
display: flex;
align-items: baseline;
gap: 5px;
}
.current-price-main {
font-weight: 700;
color: #000;
}
.current-price-main .woocommerce-Price-currencySymbol {
font-weight: 500;
}
.old-price-main {
font-weight: 500;
color: #b0b0b0;
}
/* --- START: Main Offer Image Styles --- */
.offer-image-column {
position: relative; /* Required for positioning the badge */
flex-basis: 105px; /* Give it a base width */
flex-shrink: 0;
/* --- The 3 requirements from your request --- */
aspect-ratio: 10 / 8; /* 1. Set the exact aspect ratio */
display: flex; /* 2. Enable flexbox for centering */
align-items: center; /* 3. Center the image vertically */
justify-content: center; /* 4. Center the image horizontally */
background-color: #F1F1F1;
border-radius: 5px;
/* Add some internal padding */
overflow: hidden; /* Hides the part of the badge that goes outside the rounded corners */
padding: 10px 15px 5px;
}
.offer-image-column img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the image fits without being stretched or cropped */
}
.offer-main-image-badge {
position: absolute;
top: 0;
left: 0;
background-color: #000;
color: #fff;
padding: 1px 13px;
padding: 2px 15px;
font-size: 8px;
font-weight: bold;
border-radius: 0 0 15px 0px; /* Rounds the bottom corners to create the hanging pill shape */
z-index: 2; /* Ensures the badge is on top of the image */
}
/* --- END: Main Offer Image Styles --- */
/* --- START: Popup X Close Button Styles --- */
.popup-close-x {
position: absolute;
top: 15px;
left: 15px;
background: none;
border: none;
font-size: 28px;
font-weight: 300;
color: #888;
cursor: pointer;
line-height: 1;
padding: 0;
}
.popup-close-x:hover {
color: #000;
}
/* --- END: Popup X Close Button Styles --- */
.offer-party-icon {
width: 25px;
display: flex;
margin: 0px auto 10px;
}
.gifts-number {
font-weight: bold;
}
.gifts-total-value {
color: #38C813;
font-weight: bold;
}
/* --- Custom Star Image Styles --- */
.rating-star-img {
width: 13px;
margin-top: -5px;
}
/* --- START: Popup Gift Item Styles --- */
#popup-gifts-image-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
margin-top: 15px;
}
.popup-gift-image-item {
display: flex;
flex-direction: column;
text-align: right;
min-width: 0;
}
.gift-image-area-popup {
position: relative;
background-color: #D9D9D9; /* Light grey background */
border-radius: 5px;
overflow: hidden;
aspect-ratio: 9 / 7.5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.gift-image-area-popup img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 25px 5px 10px;
}
.gift-badge-popup {
position: absolute;
top: 0;
left: 0;
background-color: #000;
color: #fff;
padding: 3px 20px;
font-size: 9px;
font-weight: bold;
border-radius: 0 0 15px 0px;
z-index: 2;
}
.lock-overlay-popup, .lock-overlay {
position: absolute;
top: 15px;
right: 5px;
width: 20px;
height: 20px;
background-color: #575757;
border-radius: 50%;
z-index: 2;
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
background-image: url("data:image/svg+xml,%3csvg width='8' height='9' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.93207 3.87323L1.78874 2.61092C1.77056 2.44912 1.77056 2.28585 1.78874 2.12405L1.79917 2.0329C1.85734 1.52197 2.1056 1.04998 2.49646 0.707209C2.88733 0.364435 3.39338 0.174927 3.91782 0.174927C4.44227 0.174927 4.94832 0.364435 5.33918 0.707209C5.73005 1.04998 5.9783 1.52197 6.03647 2.0329L6.04691 2.12405C6.06505 2.28619 6.06505 2.44848 6.04691 2.61092L5.90358 3.87367L6.21518 3.89768C6.45382 3.91629 6.67921 4.01277 6.85533 4.17172C7.03145 4.33066 7.14814 4.54289 7.18674 4.77449C7.35273 5.76859 7.35273 6.78254 7.18674 7.77664C7.14814 8.00824 7.03145 8.22047 6.85533 8.37941C6.67921 8.53836 6.45382 8.63484 6.21518 8.65345L5.53663 8.7068C4.45894 8.79128 3.37671 8.79128 2.29901 8.7068L1.62046 8.65345C1.38183 8.63484 1.15644 8.53836 0.980316 8.37941C0.804195 8.22047 0.68751 8.00824 0.648905 7.77664C0.482917 6.78254 0.482917 5.76859 0.648905 4.77449C0.68751 4.54289 0.804195 4.33066 0.980316 4.17172C1.15644 4.01277 1.38183 3.91629 1.62046 3.89768L1.93207 3.87323ZM3.74819 0.851074C3.93827 0.829173 4.13089 0.844341 4.31497 0.895703C4.49905 0.947066 4.67095 1.03361 4.82077 1.15035C4.9706 1.2671 5.09539 1.41174 5.18796 1.57594C5.28054 1.74015 5.33907 1.92068 5.36019 2.10715L5.37063 2.1983C5.38333 2.31124 5.38333 2.42447 5.37063 2.538L5.22503 3.82298C4.35445 3.76822 3.48119 3.76822 2.61062 3.82298L2.46548 2.538C2.45283 2.42511 2.45283 2.3112 2.46548 2.1983L2.47545 2.10715C2.51163 1.78763 2.65714 1.48953 2.88826 1.26143C3.11937 1.03334 3.42248 0.888695 3.74819 0.851074ZM5.48266 4.50994C4.44109 4.42851 3.39456 4.42851 2.35299 4.50994L1.67489 4.56329C1.58779 4.56994 1.50549 4.60507 1.44117 4.66303C1.37686 4.721 1.33426 4.79846 1.3202 4.88298C1.16619 5.80553 1.16619 6.74649 1.3202 7.66904C1.33416 7.75365 1.37673 7.8312 1.44105 7.88926C1.50537 7.94731 1.58772 7.9825 1.67489 7.98917L2.35344 8.04253C3.39485 8.12389 4.4408 8.12389 5.48266 8.04253L6.16121 7.98917C6.2483 7.9824 6.33054 7.94717 6.39478 7.88913C6.45901 7.83108 6.5015 7.75358 6.51545 7.66904C6.66946 6.74649 6.66946 5.80553 6.51545 4.88298C6.5015 4.79844 6.45901 4.72094 6.39478 4.66289C6.33054 4.60485 6.2483 4.56962 6.16121 4.56285L5.48266 4.50994Z' fill='white'/%3e%3c/svg%3e");
}
.gift-title-popup {
font-weight: 700;
color: #000;
margin: 0;
}
.gift-subtitle-popup {
color: #666;
margin: 2px 0 5px 0;
}
.gift-price-popup {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0;
}
.gift-price-popup span {
font-weight: 700;
}
.gift-price-popup del {
text-decoration-color: #A1A1A1 !important;
}
.gift-price-popup del span {
font-weight: 100;
color: #A1A1A1;
}
/* --- END: Popup Gift Item Styles --- */
/* --- START: New Upsell Section Styles --- */
/* The green button state when the offer is claimed */
#upsell-claim-offer-btn.btn-green {
background-color: #27ae60; /* Green */
color: white;
}
/* Ensure the claim button, which is a label, looks like a button */
#upsell-claim-offer-btn {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* --- END: New Upsell Section Styles --- */
/* --- START: Final Upsell Gift Item Styles --- */
/* This makes sure the gift container on the main page is a proper grid */
.special-offer-gifts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0 20px 0px 0px;
margin-top: 10px;
margin-bottom: 10px;
}
/* This styles each individual gift item within that grid */
.gift-item-upsell {
display: flex;
flex-direction: column;
text-align: right;
min-width: 0; /* Prevents long text from breaking the grid */
}
.gift-image-area-upsell {
position: relative;
background-color: #D9D9D9;
border-radius: 5px;
overflow: hidden;
aspect-ratio: 9 / 7.5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.gift-image-area-upsell img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 20px 5px 5px;
}
.gift-badge-upsell {
position: absolute;
top: 0;
left: 0;
background-color: #000;
color: #fff;
padding: 3px 15px;
font-size: 9px;
font-weight: bold;
border-radius: 0 0 10px 0px;
z-index: 2;
}
/* Reusing the existing lock overlay style */
.gift-item-upsell .lock-overlay {
position: absolute;
top: 15px;
right: 5px;
width: 20px;
height: 20px;
background-color: rgba(40, 40, 40, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: 2;
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
transition: all 0.4s ease-in-out;
background-image: url("data:image/svg+xml,%3csvg width='8' height='9' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.93207 3.87323L1.78874 2.61092C1.77056 2.44912 1.77056 2.28585 1.78874 2.12405L1.79917 2.0329C1.85734 1.52197 2.1056 1.04998 2.49646 0.707209C2.88733 0.364435 3.39338 0.174927 3.91782 0.174927C4.44227 0.174927 4.94832 0.364435 5.33918 0.707209C5.73005 1.04998 5.9783 1.52197 6.03647 2.0329L6.04691 2.12405C6.06505 2.28619 6.06505 2.44848 6.04691 2.61092L5.90358 3.87367L6.21518 3.89768C6.45382 3.91629 6.67921 4.01277 6.85533 4.17172C7.03145 4.33066 7.14814 4.54289 7.18674 4.77449C7.35273 5.76859 7.35273 6.78254 7.18674 7.77664C7.14814 8.00824 7.03145 8.22047 6.85533 8.37941C6.67921 8.53836 6.45382 8.63484 6.21518 8.65345L5.53663 8.7068C4.45894 8.79128 3.37671 8.79128 2.29901 8.7068L1.62046 8.65345C1.38183 8.63484 1.15644 8.53836 0.980316 8.37941C0.804195 8.22047 0.68751 8.00824 0.648905 7.77664C0.482917 6.78254 0.482917 5.76859 0.648905 4.77449C0.68751 4.54289 0.804195 4.33066 0.980316 4.17172C1.15644 4.01277 1.38183 3.91629 1.62046 3.89768L1.93207 3.87323ZM3.74819 0.851074C3.93827 0.829173 4.13089 0.844341 4.31497 0.895703C4.49905 0.947066 4.67095 1.03361 4.82077 1.15035C4.9706 1.2671 5.09539 1.41174 5.18796 1.57594C5.28054 1.74015 5.33907 1.92068 5.36019 2.10715L5.37063 2.1983C5.38333 2.31124 5.38333 2.42447 5.37063 2.538L5.22503 3.82298C4.35445 3.76822 3.48119 3.76822 2.61062 3.82298L2.46548 2.538C2.45283 2.42511 2.45283 2.3112 2.46548 2.1983L2.47545 2.10715C2.51163 1.78763 2.65714 1.48953 2.88826 1.26143C3.11937 1.03334 3.42248 0.888695 3.74819 0.851074ZM5.48266 4.50994C4.44109 4.42851 3.39456 4.42851 2.35299 4.50994L1.67489 4.56329C1.58779 4.56994 1.50549 4.60507 1.44117 4.66303C1.37686 4.721 1.33426 4.79846 1.3202 4.88298C1.16619 5.80553 1.16619 6.74649 1.3202 7.66904C1.33416 7.75365 1.37673 7.8312 1.44105 7.88926C1.50537 7.94731 1.58772 7.9825 1.67489 7.98917L2.35344 8.04253C3.39485 8.12389 4.4408 8.12389 5.48266 8.04253L6.16121 7.98917C6.2483 7.9824 6.33054 7.94717 6.39478 7.88913C6.45901 7.83108 6.5015 7.75358 6.51545 7.66904C6.66946 6.74649 6.66946 5.80553 6.51545 4.88298C6.5015 4.79844 6.45901 4.72094 6.39478 4.66289C6.33054 4.60485 6.2483 4.56962 6.16121 4.56285L5.48266 4.50994Z' fill='white'/%3e%3c/svg%3e");}
.gift-item-upsell .lock-overlay.unlocked {
background-color: #2ecc71;
transform: scale(1.1) rotate(10deg);
background-image: url('data:image/svg+xml;utf8,');
}
.gift-title-upsell {
font-weight: 700;
color: #000;
margin: 0;
}
.gift-subtitle-upsell {
color: #666;
margin: 2px 0 5px 0;
}
.gift-price-upsell {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
}
.gift-price-upsell span {
font-weight: 700;
color: #000;
}
.gift-price-upsell del {
text-decoration-color: #A1A1A1!important;
}
.gift-price-upsell del span {
font-weight: 500;
color: #A1A1A1;
}
/* --- END: Upsell Gift Item Styles --- */
/* --- START: Final Upsell Section Styles (Fix) --- */
/* This makes the upsell section look like the popup modal */
#upsell-section-modal {
text-align: center;
font-size: 12px;
line-height: 1.3;
position: relative;
}
/* This targets the "Claim Offer" button to add the green state */
#upsell-claim-offer-btn.btn-green {
background-color: #27ae60; /* Green */
color: white;
}
/* This ensures the claim button (which is a label) looks and acts like a button */
#upsell-claim-offer-btn {
display: inline-block;
border: none;
border-radius: 5px;
padding: 5px 30px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
width: fit-content;
background-color: #000;
color: #fff;
}
#upsell-claim-offer-btn:hover {
opacity: 0.85;
}
/* --- END: Final Upsell Section Styles --- */
/* --- START: Subcategory Filter Styles --- */
.promo-products-section .filter-btn.has-children .sub-arrow {
display: inline-block;
transition: transform 0.2s ease-in-out;
font-size: 12px;
margin-right: 5px; /* RTL space */
}
.promo-products-section .filter-btn.has-children.sub-open .sub-arrow {
transform: rotate(180deg);
}
.promo-products-section .sub-category-btn {
border-style: dashed;
border-color: #A1A1A1;
background-color: #fdfdfd; /* Slightly different background */
}
.promo-products-section .sub-category-btn.active {
background: #E1E1E1;
border-color: #A1A1A1;
border-style: solid; /* Make active subcategory solid */
}
/* --- END: Subcategory Filter Styles --- */
/* ----- FOR LARGE DESKTOPS --- */
@media (min-width: 1200px) {
.container {
max-width: 100%;
}
.header-column-left {
justify-content: flex-start;
}
.home .replica-container {
max-width: 2500px;
}
.igs-component-container {
max-width: 700px!important;
margin: auto;
}
.promo-products-section .promo-product-list {
grid-template-columns: repeat(3, 1fr);
}
.hijazi-footer {
padding: 0px 60px;
}
.main-slider-content {
padding: 0px;
}
/* The slide itself is now just a padded container */
.main-swiper .swiper-slide {
aspect-ratio: 33 / 10;
padding: 0px; /* This creates space for the shadow to appear */
}
/* The new inner wrapper gets the shadow and content styling */
.main-swiper .slide-content {
border-radius: 0px;
box-shadow: 0px;
}
.promo-products-section {
margin: auto;
padding: 0px 7%;
max-width: 1400px;
}
}
/* ----- FOR CUTTING IMAGES --- */
.promo-products-section .promo-product-swiper .swiper-slide img {
padding: 0px;
object-fit: cover;
aspect-ratio: 5 / 3.5;
background: #FFFFFF; */
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: 11px;
}
.promo-products-section .promo-card-gallery {
padding: 0px;
min-height: 140px;
}