/* This css file is for the home page index.html. */



 @font-face 	{
  			font-family: 'Denver Serial';
			src: url('/fonts/denver-serial-medium.ttf') format('truetype');  
	 		font-weight: 400;
	 /*This sets the entire page font to Denver Serial Medium.  It gets it from the downloaded file that I placed in the root folder/fonts. */
}

@font-face {
	 		font-family: 'Denver Serial';
	 		src: url('/fonts/denver-serial-bold.ttf') format('truetype');
		 	font-weight: 700;
			} 

body 	{
   		font-family: "Denver Serial";
		font-weight: 400;
		}


body p {
  text-align: justify;  /* This justifies the alignment of the text within the <p>. */
  font-size: 1.1rem; /* You can increase or decrease this value as needed */
  line-height: 1.6;  /* Optional: improves readability */
}

.text-underline {  /* Adding this as a class to underline specific text. */
  text-decoration: underline;
}

.emphasis {      /*. Adding this class to make a specific heading bold and underlined. */
  font-weight: 800;
  font-size: 1.2rem !important;
  text-decoration: underline; 
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* --------------------------------------------------------------------------------------------------------- */
/* The following code is for the horizontal scroll images of the featured product on the home page. 

	The images have been cropped automatically for the top half of the image with the center top setting.

	If later one particular product crops badly, you can override just that image individually, for example:
	.product-item:nth-child(3) img { object-position: center 20%;  }
	This will affect all the cards.

	If you want to control the images of the individual cards then it can be done as follows:

	.product-item:nth-child(3) img { object-position: center 20%; }  OR
	.product-item:nth-child(5) img { object-position: center center; }
							

*/
.product-scroll-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
}

/* Each product card in the horizontal scroll */
.product-item {
  flex: 0 0 320px;          /* Every card is exactly 320px wide */
 /* display: flex; */
}

.product-item {
 /* flex: 0 0 500px; /* Set card width */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; /* Makes it feel clickable */
}

/* The link fills the whole card */
.product-item a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

/* Image area is always the same size */
.product-image {
  width: 100%;
  height: 320px;            /* Every image area same height  */
  object-fit: cover;        /* Fills the area */
  object-position: center top;
  display: block;
}

/* Product text area */
.product-item p {
  font-size: 16px;
  margin: 0;
  padding: 15px;
  color: #333;
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c5ce7; /* Nice purple */
  font-size: 36px; /* Size of the icon */
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.scroll-button i {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 3D shadow */
}

.scroll-button.left {
  left: 10px;
}

.scroll-button.right {
  right: 10px;
}

.scroll-button:hover i {
  color: #a29bfe;
  transform: scale(1.2);
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}

.product-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 10px;
}

.product-scroll-container::-webkit-scrollbar {
  display: none;
}

.product-item img {
  width: 100%;
  height: 320px;
  display: block;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 0;
}
						   
.product-item:hover {
  transform: scale(1.05); /* Slightly expand */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Deeper shadow on hover */
}

.product-link {
  text-decoration: none; /* No underline */
  color: inherit; /* Keep text color the same */
  display: inline-block;
}



/* This is where the css code ends for the horizontal scroll images of the featured products on the home page. */
/* --------------------------------------------------------------------------------------------------------- */


/* The following code is to highlight the current page in the dropdown menu of the navbar.  For example, for the Abayahs page, even the word Abayah will be highlighted when the dropdown menu is opened to show the current page. */

.nav-item.active > .nav-link {
  color: #fff !important;
  background-color: #6c5ce7!important; /* Green or any colour you want */
  border-radius: 5px;
}
/* We already changed the code for the navbar in the html file to make the current parent category (womenswear) to be highlighted in the actual navbar code.  We manually change this for every page. */


/* The following code is to make sure that the current page, e.g. Abayahs, is also highlighted in the dropdown menu. */

.dropdown-item.active, .dropdown-item:active {
  color: #fff !important;
  background-color: #6c5ce7 !important; /* Corporate colour lilac. */
}


/* The following code will slightly smoothen the highlight transition so it looks even more professional (with a small CSS tweak)? 🎨✨
It would make the "active" effect less sudden and more graceful! */

/* Transition effect for links */
.nav-link, .dropdown-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Style only for the active link in navbar or dropdown */
.nav-item.active .nav-link, 
.dropdown-item.active {
  background-color: #6c5ce7; /* Your chosen purple color */
  color: white !important;    /* Text color when active */
  border-radius: 5px;         /* Slight rounding for a modern look */
}





/* Optional: slightly enlarge the active menu item */
/* I am deactivating this code as it did not work, and replacing it with the one below.  Once the new code has been confirmed its working, I shall delete this code and comment.

.nav-item.active .nav-link, 
.dropdown-item.active {
  transform: scale(1.02);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
} */

/* Smooth dropdown transition */
.navbar .dropdown-menu {
  display: none;  /* Ensure the dropdown is initially hidden */
  opacity: 0;     /* Initially, make the dropdown transparent */
  transition: opacity 0.3s ease;  /* Apply the fade-in effect */
}

.navbar .dropdown.show .dropdown-menu {
  display: block;  /* Display the dropdown when active */
  opacity: 1;      /* Make it fully visible */
}

/* Slightly enlarge the active menu item */
.nav-item.active .nav-link, 
.nav-item .dropdown-toggle.active,  /* Add this for the dropdown toggle */
.dropdown-item.active {
  transform: scale(1.02);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}


/* Optional: Ensure no grey color for inactive links.  
We are adding this code because when the Home Page is inactive (i.e. when we are on a different page other than Home Page), the word "Home" in the navbar was in Grey instead of Black, like all the other inactive links. */

.nav-item .nav-link:not(.active) {
    color: #000000 !important;  /* Inactive links should be black */
}


/* This is the code for styling the featured image on the home page (jumbotron style). */
/* Bootsrap is preventing this code from being implementing.  That's why we write !important; it overrides Bootstrap and allows us to make the changes that we need. */


/* After the revision of the code, to align the height of the text in the left hand of the jumbotron with the image of the right hand side of the jumbotron, I was told to remove the codes for .bg-light, .col-md-6, and .bg-light. 

"You can now remove the .col-md-6.bg-light and .bg-light style blocks if you're not using .bg-light anywhere else." */

/*
.featured-row .col-md-6.bg-light {
  background-color: lightblue !important;
  padding: 20px 30px !important;
  margin: 0 !important;                [Ensure no outer margin ]
  position: relative;                  [Needed only if moving it manually] 
  top: 0;                             [Adjust if necessary] 
  display: flex !important;            [Aligns inner content] 
  flex-direction: column;             [Keeps vertical flow]
  justify-content: center !important;  [Vertically centers content if height is available]
}
*/

  .featured-row {
  display: flex;
  align-items: stretch; /*Makes both columns equal height */
  /* This code has been removed as it was fixing the height.  It has been replaced with min-height: height: 600px; any fixed height can be used. */
  margin: 0;
  padding: 0;
  /*min-height: 100vh;   Make it fill the screen height. 100vh = height of viewport, which is what we are trying to achieve full screen. */
}




.featured-row .col-md-6 {
  display: flex;
  flex-direction: column;
  flex: 1;  /*Equal growth. */
}


/*
.featured-row .bg-light {
  background-color: #6F5C79;  [Change to any color or image]
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
} 
*/
.featured-row img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.featured-row .custom-jumbotron {
  background-color: #D7C2DD;
  padding: 20px 30px;
  flex: 1;  /* Added later. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Removed later at the same time when the above was added. height: 100%; */
  /* Note: Replace height: 100% with flex: 1 here — it forces it to fill its parent’s height based on the image’s natural height. */
}

.custom-hr {
  border: none;
  border-top: 1px dotted #666;
  height: 2px;
  margin: 10px 0;          /* adjust spacing as needed */
}

/* This code is to change the colour of the button in the jumbotron. */

.btn-custom {
  background-color: #6F5C79 !important;  /* Your custom background color */
  color: white !important;               /* Button text color */
  border: none !important;               /* Remove the border */
}

.btn-custom:hover {
  background-color: #5a4d61 !important;  /* Darker shade for hover effect */
  color: #FFF !important;
}

.btn-custom1 {
  background-color: #5E238A !important;  /* Your custom background color */
  color: white !important;               /* Button text color */
  border: none !important;               /* Remove the border */
}

.btn-custom1:hover {
  background-color: #8F5DBF !important;  /* Darker shade for hover effect */
  color: #FFF !important;
}

/* the following code is for the body section to begin after the navbar.  The problem I was having was that the carousel was being hidden by the navbar. This ensures that the body section begins after the navbar. It's being placed at the bottom to ensure that it has the highest priority. 

Since there is no carousel on this product page, we can remove this line of code. */

/*
body {
  padding-top: 120px; /* the height your navbar is DON'T FORGET TO ADD THE CLOSING COMMENT HERE !!!
  background: #f0f0f0;
} */


/* === Q&S Islamic Store — Unified Checkout Page Styles === */

/* Main checkout layout */
body.checkout-page .checkout-container > .row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Column proportions */
body.checkout-page #col-details {
  flex: 0 0 44%;
  max-width: 44%;
}

body.checkout-page #col-summary {
  flex: 0 0 56%;
  max-width: 56%;
}

/* Card containers */
body.checkout-page .checkout-container .card {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

/* Table styling */
body.checkout-page #orderTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

body.checkout-page #orderTable th,
body.checkout-page #orderTable td {
  padding: 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Column widths */
body.checkout-page #orderTable th:nth-child(1),
body.checkout-page #orderTable td:nth-child(1) {
  width: 40%;
}

body.checkout-page #orderTable th:nth-child(2),
body.checkout-page #orderTable td:nth-child(2) {
  width: 18%;
}

body.checkout-page #orderTable th:nth-child(3),
body.checkout-page #orderTable td:nth-child(3) {
  width: 10%;
  text-align: center;
}

body.checkout-page #orderTable th:nth-child(4),
body.checkout-page #orderTable td:nth-child(4),
body.checkout-page #orderTable th:nth-child(5),
body.checkout-page #orderTable td:nth-child(5) {
  width: 12%;
  text-align: right;
}

/* Totals */
body.checkout-page #orderTable tfoot td {
  border-top: 2px solid #ccc;
  font-weight: bold;
  padding-top: 8px;
}

body.checkout-page #orderTable tfoot tr:last-child td {
  border-top: 3px double #000;
}

/* Thumbnails */
body.checkout-page #orderTable img.thumb {
  width: 60px;
  height: auto;
  border-radius: 5px;
  margin-right: 8px;
}

/* Responsive fallback */
@media (max-width: 991px) {
  body.checkout-page .checkout-container > .row {
    flex-wrap: wrap;
  }
  body.checkout-page #col-details,
  body.checkout-page #col-summary {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- Restore padding for Customer Details card only --- */
body.checkout-page #col-details .card-body {
  padding: 20px 24px !important;  /* restore comfortable inner spacing */
}

/* --- Q&S Islamic Store Checkout: final scroll-free alignment --- */
body.checkout-page #col-summary .card-body {
  padding: 0 16px 12px 16px !important;  /* keep room for borders */
  overflow-x: hidden !important;
  box-sizing: border-box;
}

body.checkout-page #orderTable {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

body.checkout-page #orderTable th,
body.checkout-page #orderTable td {
  white-space: normal !important;     /* allow wrapping */
  word-break: break-word !important;  /* wrap long SKUs */
  padding: 10px 12px !important;
  vertical-align: middle;
}


/* --- Kill the horizontal scroll coming from Bootstrap's .table-responsive --- */
body.checkout-page .table-responsive {
  overflow-x: visible !important;   /* or: hidden, if you prefer */
}

/* If you used Option A (renamed wrapper), this just keeps things tidy */
body.checkout-page .order-table-wrap {
  overflow: visible;
}

/* Make the table fit the card and wrap text instead of forcing width */
body.checkout-page #orderTable {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;     /* columns respect available width */
  border-collapse: collapse;
}

/* Allow wrapping so no overflow is needed */
body.checkout-page #orderTable th,
body.checkout-page #orderTable td {
  white-space: normal !important;     /* <-- key change */
  word-break: break-word !important;  /* wrap long SKUs gracefully */
  vertical-align: middle;
  padding: 10px 12px;
}

/* Keep number columns aligned right / qty centered */
body.checkout-page #orderTable th:nth-child(3),
body.checkout-page #orderTable td:nth-child(3) { text-align: center; }
body.checkout-page #orderTable th:nth-child(4),
body.checkout-page #orderTable td:nth-child(4),
body.checkout-page #orderTable th:nth-child(5),
body.checkout-page #orderTable td:nth-child(5) { text-align: right; }

/* Optional: soften header background to your accent */
body.checkout-page #orderTable thead th {
  background:#dddde5;
}

/* Totals styling (double underline on grand total) */
body.checkout-page #orderTable tfoot td { border-top:2px solid #ccc; font-weight:600; }
body.checkout-page #orderTable tfoot tr:last-child td { border-top:3px double #000; font-weight:700; }

/* === Q&S Checkout: remove phantom horizontal scroll in the order card === */
body.checkout-page #col-summary .card-body{
  /* trim the inner box so 100% table never overhangs by a pixel */
  padding: 0 0 6px 0 !important;
  overflow-x: hidden !important;
}

body.checkout-page .order-table-wrap{
  display: block;
  overflow-x: hidden !important;   /* belt-and-braces */
}

body.checkout-page #orderTable{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;  /* prevents width creep */
  margin-bottom: 0 !important;
}

body.checkout-page #orderTable th,
body.checkout-page #orderTable td{
  white-space: normal !important;  /* allow wrapping instead of overflow */
  word-break: break-word !important;
}

body.checkout-page #col-summary .card-body{ padding:0 0 20px 0 !important; }

/* === Q&S Islamic Store Checkout — FINAL scroll-free order summary === */
body.checkout-page #col-summary .card-body {
  padding: 12px 10px 16px 10px !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Use fixed table layout so borders never push total width */
body.checkout-page #orderTable {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;  /* <- key fix */
  margin: 0 !important;
}

/* Ensure all cells wrap gracefully and stay within limits */
body.checkout-page #orderTable th,
body.checkout-page #orderTable td {
  white-space: normal !important;
  word-break: break-word !important;
  vertical-align: middle;
  padding: 8px 10px !important;
  box-sizing: border-box;
}

/* Fix Safari/WebKit rendering overflow by hiding any extra pixel */
body.checkout-page .order-table-wrap {
  overflow-x: clip !important;   /* hides scrollbar safely */
  width: 100% !important;
  max-width: 100% !important;
}

/* === Q&S Islamic Store Checkout — Final column width refinement === */
body.checkout-page #orderTable th:nth-child(5),
body.checkout-page #orderTable td:nth-child(5) {
  width: 13% !important;   /* small bump fixes word break in “Subtotal” */
  text-align: right;
}

body.checkout-page #orderTable th:nth-child(4),
body.checkout-page #orderTable td:nth-child(4) {
  width: 11% !important;
}

/* === Q&S Islamic Store Checkout — Professional Total Row Finish === */
body.checkout-page #orderTable tfoot tr:last-child td {
  border-top: 2px solid #000;       /* first single line */
  border-bottom: 3px double #000;   /* subtle double underline beneath total row */
  font-weight: 700;
}

/* Payment button on checkout.html is disabled until the checkbox is ticked to accept the terms and conditions. */
#stripeCheckoutBtn:disabled {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Force disabled Stripe button styling */
#stripeCheckoutBtn:disabled,
button#stripeCheckoutBtn:disabled {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #fff !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* === Smooth Page Fade Transitions for Q&S Islamic Store between checkout.html and cancel.html. === */
body.fade-page {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
body.fade-page.visible {
  opacity: 1;
}

/* --------------------- CATEGORY PAGE SETTINGS OF THE PRODUCT CARDS ------------------------ */

/* Wrapper controls the image area inside the card */
.product-card-image-wrapper {
  height: 520px;
  display: flex;
  align-items: center;      /* vertical centring */
  justify-content: center;  /* horizontal centring */
  overflow: hidden;
  /* padding: 0px; */
}

/* Keeps the entire image inside the card and does not crop the top and bottom. */
.product-card-image-wrapper a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smaller image area for landscape category images */
.product-card-image-wrapper-landscape {
  height: 340px;
}

/* In the category page, this makes every product image area the same size */
.product-card-image {
  width: auto;
  height: auto;          /* Slightly taller image area - amend to desired size */
  object-fit: contain;    /* Keeps portrait image in proportion */
  background-color: #fff;
  padding: 10px;				/* Remove extra empty space */
  max-width: 100%;
  max-height: 100%; 
  display: block;
  margin: 0 auto;
 /* align-items: center;		--> Centres landscape images vertically */
  /* justify-content: center;  --> Centres images horizontally */
}

.card {
  height: 100%;
}

/* Let the landscape card use its natural height */
/* .card-landscape {
  height: auto;
} */

/* This code is for making all the cards of the products on the category page the same height and keep the button aligned at the bottom. */
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Reduce the extra empty space under the text on landscape cards */
.card-body-landscape {
 /* padding-top: 1rem;  
  padding-bottom: 0.5rem; */
  flex-grow: 0;
}

/* Smaller description text inside category cards */
.card-body p {
  font-size: 0.95rem;
}

.card-body .btn {
  margin-top: auto;
}

.card-title {
  min-height: 70px;   /* Keeps all titles aligned */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* ---------------------END OF CATEGORY PAGE SETTINGS OF THE PRODUCT CARDS --------------------- */

/* This is for the dropdown list of countries on the checkout page.  It makes the continents bold. */

/* Make country group headings stand out in the dropdown */
#country optgroup {
  font-weight: 700;
  color: #222;
  font-style: normal;
}

/* ----------- Heading on the category pages of Free Shipping, Premium Quality, Secure Checkout ---------- */

  /* Circular icon background */
  .feature-icon {
    width: 52px;
    height: 52px;
    background: #f3f0eb;
    border: 1px solid #5E238A;
    margin-right: 4px;
    flex-shrink: 0;
  }

  /* Icon styling */
  .feature-icon i {
    font-size: 24px;
    color: #5E238A;
    line-height: 1;
  }

  /* Heading styling */
  .feature-heading {
    font-size: 1.1rem;
    margin: 0;
    color: #000000;
    white-space: nowrap;
  }

/* --------------- The auto scroll function for the products on the home page ---------------- */

/* Continuous auto-scroll must not fight scroll snapping */
#productContainer {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}


/* --------------- Styling the a href links on the page ---------------- */

/* Content links */
.content-link {
  color: #5E238A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-link:hover,
.content-link:focus {
  color: #8F5DBF;
}
/* --------------- End of Styling the a href links on the page ---------------- */

/* --------------- Styling for the search results page -----------------*/

#search-results .card {
  height: 100%;
  overflow: hidden;
}

#search-results .product-card-image-wrapper {
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#search-results .product-card-image {
  width: auto;
  max-width:100%;
  height: auto;
  max-height:100%;
  object-fit: contain;
}

/* Search results image fix */
#search-results .product-card-image-wrapper {
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#search-results .product-card-image-wrapper img.product-card-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* This is adding a gap at the bottom of each row of products on the category page, e.g. abayahs.html. */
.custom-row-gap-1 {
    margin-bottom: 40px;
}

/* =========================================================
   FLOATING WHATSAPP BUTTON
   - Fixed to the bottom-right of the browser window
   - Remains visible while the visitor scrolls
   ========================================================= */

.whatsapp-float {
	position: fixed;
	right: 25px;
	bottom: 25px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #25D366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	z-index: 1000;
}

/* Floating WhatsApp button hover effect */
.whatsapp-float:hover {
	color: #ffffff;
	text-decoration: none;
	transform: scale(1.08);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35);
}

/* This is to test the whether changing the colour of "Select a Colour" option from the dropdown menu changes it's visibility. */
#colour {
  color: #000 !important;
}