.mpc-container-v3 {
  display: grid;
  grid-template-columns: 550px 0.75fr;
  gap: 2rem;
  max-width: none;
  font-family: "Inter", sans-serif;
  padding: 0 3rem;
}

.mpc-configurator {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  width: 450px;
}

.mpc-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#moon-phase-form {
  padding: 1.5rem;
}

/* --- Step Navigation --- */
.mpc-steps {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: #2a2f43e6;
}

.mpc-step {
  padding: 1rem 0.5rem;
  margin-bottom: -1px;
  /* Overlap border */
  border-bottom: 2px solid transparent;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  flex: 1;
  margin: 0.5rem;
  border-radius: 10px;
  /* Add border-radius for smoother hover */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  /* Smooth transition */
}

.mpc-step:not(.active):hover {
  background-color: #fff;
  /* White background on hover */
  color: #2a2f43e6;
  /* Dark text on hover */
}

.mpc-step.active {
  color: #2a2f43e6;
  border-bottom-color: #fff;
  background: #fff;
  margin: 0.5rem;
  border-radius: 10px;
}

/* --- Form Steps --- */
.mpc-form-step {
  display: none;
}

.mpc-form-step.active {
  display: block;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
}

.form-group input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: 100% !important;
}

.mpc-datetime-group {
  display: flex;
  gap: 0.5rem;
}

.mpc-next-btn {
  width: 100%;
  background-color: #2a2f43e6;
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mpc-next-btn:hover {
  background-color: #374151;
}

.mpc-form-note {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  margin-top: 1rem;
}

/* --- Action/Price Buttons --- */
.mpc-actions {
  margin-top: auto;
  /* Pushes to the bottom */
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.mpc-price {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.mpc-cart-btn {
  width: 100%;
  background-color: #fff;
  color: #2a2f43e6;
  border: 1px solid #2a2f43e6;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.mpc-cart-btn:hover {
  background-color: #f3f4f6;
}

/* --- 3D Preview Canvas --- */
.mpc-canvas-perspective {
  perspective: 2000px;
}

.mpc-canvas {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  transition: transform 0.5s ease;
  position: relative;
  width: 350px;
  aspect-ratio: 3 / 4;
  background-color: black;
  overflow: hidden;
}

.mpc-canvas:hover {
  transform: rotateX(0) rotateY(0) rotateZ(0);
}

/* --- Carousel Dots --- */
.mpc-carousel-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.mpc-carousel-dots span {
  width: 8px;
  height: 8px;
  background-color: #d1d5db;
  border-radius: 50%;
}

.mpc-carousel-dots span.active {
  background-color: #374151;
}

/* --- Inner Canvas Styles (Unchanged but important) --- */
.mpc-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mpc-bg {
  object-fit: cover;
  z-index: 1;
}

.mpc-glow-container {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mpc-glow-container img {
  width: 100%;
  height: auto;
}

.mpc-content-frame {
  z-index: 10;
  padding: 3%;
  box-sizing: border-box;
}

.mpc-border {
  border: 2px solid #f3f3f3;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mpc-moon-area {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  left: 1.75rem;
}

/* ... (existing code) */

.mpc-moon-image {
  z-index: 12;
  object-fit: contain;
  width: 85%;
  opacity: 1;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  /* Add transform to the transition */
}

/* ... (existing code) */
.mpc-text-title {
  color: #f3f3f3;
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 0;
  padding-top: 0;
}

.mpc-text-details {
  position: absolute;
  bottom: 1%;
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  color: #f3f3f3;
  text-align: center;
  font-size: 0.425em;
  font-weight: 300;
  line-height: 1.6;
  text-transform: uppercase;
}

.mpc-text-details span {
  display: block;
}

#mpc-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpc-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Basic styling for the new select dropdown for FONT STYLING */

.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: white;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%236b7280%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.25em;
  cursor: pointer;
  height: 100% !important;
}

/* Font classes for the preview title */
.mpc-text-title.font-inter {
  font-family: "Inter", sans-serif;
}

.mpc-text-title.font-playfair {
  font-family: "Playfair Display", serif;
}

.mpc-text-title.font-dancing {
  font-family: "Dancing Script", cursive;
  font-size: 1.6rem;
  /* Adjust size for better look */
}

/* --- Styles for New Customization Options --- */

/* Container for a row of options */
.mpc-option-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}

/* Individual clickable option box */
.mpc-option-box {
  flex: 1;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin: 0;
  }
}

.mpc-option-box:hover {
  border-color: #d1d5db;
}

/* Style for the selected option */
.mpc-option-box.active {
  border-color: #2a2f43e6;
}

/* The small preview image/color inside the box */
.mpc-option-box .mpc-option-preview {
  width: 50px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background-size: contain;
  background-position: center;
}

.mpc-option-box img.mpc-option-preview {
  width: 50px;
  height: auto;
  object-fit: contain;
}

.background-styles .mpc-option-box .mpc-option-preview {
  margin-bottom: 0.325rem;
}

.mpc-option-box span {
  font-size: 10px;
  font-weight: 500;
  color: #374151;
}

.background-styles .mpc-option-box span {
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  height: auto;
  width: auto;
}

/* CSS filter to create the golden moon effect */
.mpc-moon-image.golden-moon,
img.golden-preview {
  filter: sepia(0.6) saturate(1.4) hue-rotate(-15deg) contrast(1.1);
}

/* --- Styles for Finalize Tab --- */

/* Adjust product option box for icons */
.mpc-option-box .product-icon {
  /* Make emoji/icon bigger */
  line-height: 1;
}

/* Specific styling for the size selection boxes */
.mpc-option-box.size-box {
  justify-content: center;
  /* Center the content vertically */
  padding: 0.75rem 0.5rem;
  height: auto;
  /* Let content determine height */
  min-height: 100px;
}

.size-box .size-letter {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.size-box .size-price {
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  margin: 0.5rem 0;
}

.size-box .size-dims {
  font-size: 0.8rem;
  color: #6b7280;
}

/* --- Improved Cart Page Layout --- */
.mpc-cart-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 2rem auto;
  font-family: "Inter", sans-serif;
  align-items: flex-start;
}

.mpc-cart-summary h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.mpc-cart-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.mpc-cart-preview-wrapper .mpc-canvas {
  width: 120px !important;
}

.mpc-cart-preview-wrapper .mpc-canvas.cart-mode {
  transform: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mpc-cart-details h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.mpc-cart-details p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.mpc-cart-price-large {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.75rem 0;
}

.mpc-cart-item-actions {
  margin-bottom: 1rem;
}

.mpc-cart-remove-btn {
  background: none;
  border: none;
  color: #6b7280;
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.mpc-cart-remove-btn:hover {
  color: #111827;
}

.mpc-cart-accordion summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  /* Hide default arrow */
  position: relative;
  padding-left: 1.25rem;
}

.mpc-cart-accordion summary::-webkit-details-marker {
  display: none;
  /* Hide default arrow for Chrome/Safari */
}

.mpc-cart-accordion summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.mpc-cart-accordion details[open] > summary::before {
  transform: rotate(90deg);
}

.mpc-cart-personalised-texts {
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
  margin-top: 1rem;
  border: 1px solid #e5e7eb;
}

.mpc-cart-personalised-texts p {
  margin-bottom: 0.5rem;
}

.mpc-cart-personalised-texts p:last-child {
  margin-bottom: 0;
}

.mpc-cart-checkout-box {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  background-color: #f9fafb;
}

.mpc-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.mpc-cart-total span:last-child {
  font-size: 0.8rem;
  color: #6b7280;
}

.mpc-checkout-btn {
  width: 100%;
  background-color: #2a2f43e6;
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mpc-checkout-btn svg {
  width: 12px;
  fill: #fff;
}

/* Full Screen Loader */
#mpc-full-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpc-content-frame {
  z-index: 10;
  /* Make sure content is on top of glow */
  padding: 3%;
  box-sizing: border-box;
}

/* --- Location Autocomplete Suggestions --- */
.form-group {
  position: relative;
  /* Needed for positioning the suggestions */
}

#mpc-location-suggestions {
  display: none;
  /* Hidden by default */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.mpc-suggestion-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.mpc-suggestion-item:hover {
  background-color: #f3f4f6;
}

/* --- Styles for Additional Customization Section --- */

/* --- Styles for Additional Customization Section --- */

.mpc-accordion details {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 1.5rem;
}

.mpc-accordion summary {
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  /* Hide default arrow */
  position: relative;
  padding: 0.5rem;
  font-size: 14px;
}

.mpc-accordion summary::-webkit-details-marker {
  display: none;
}

.mpc-accordion summary::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  font-size: 0.7rem;
  transition: transform 0.3s;
  transform: rotate(0deg);
  top: 0.65rem;
}

.mpc-accordion details[open] > summary::after {
  transform: rotate(180deg);
}

.mpc-accordion .mpc-accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-out;
  /* Smooth transition */
}

.mpc-accordion-content {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

.mpc-accordion details[open] .mpc-accordion-content {
  padding-bottom: 1rem;
  /* Add padding when open */
}

.form-group-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.optional-tag {
  font-weight: 400;
  font-size: 0.8rem;
  color: #6b7280;
  margin-left: 0.5rem;
}

.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  resize: vertical;
}

/* Toggle Switch Styles */
.mpc-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.mpc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mpc-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.mpc-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .mpc-slider {
  background-color: #2a2f43e6;
}

input:checked + .mpc-slider:before {
  transform: translateX(22px);
}

/* Styles for Preview Canvas Text */
.mpc-border.no-border {
  border: none;
}

.mpc-details-wrapper {
  position: absolute;
  bottom: 1%;
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  color: #f3f3f3;
  text-align: center;
}

.mpc-text-details {
  font-size: 0.425em;
  font-weight: 300;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: normal;
  /* Allows line breaks from textarea */
}

.mpc-text-footnote {
  font-size: 0.4em;
  font-style: italic;
  margin-top: 5px;
  opacity: 0.8;
  display: block;
}

.mpc-accordion {
  margin-bottom: 1.325rem;
}

.mpc-accordion details .mpc-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.mpc-accordion details[open] .mpc-accordion-content {
  max-height: 600px;
  /* A large enough value to accommodate the content */
}

/* Add these styles to the end of your existing style.css file */

/* --- Design Chooser Modal --- */
.mpc-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpc-modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  text-align: center;
}

.mpc-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
}

.mpc-modal-content h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.mpc-design-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mpc-design-option {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.mpc-design-option:hover {
  border-color: #d1d5db;
}

.mpc-design-option.active {
  border-color: #2a2f43e6;
  background-color: #f9fafb;
}

.mpc-design-option .icon {
  font-size: 2rem;
  line-height: 1;
}

.mpc-design-option span {
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
}

#mpc-design-description {
  color: #6b7280;
  min-height: 40px;
  /* Prevent layout shift */
}

.mpc-secondary-btn {
  width: 100%;
  background-color: #fff;
  color: #2a2f43e6;
  border: 1px solid #d1d5db;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mpc-secondary-btn:hover {
  background-color: #f3f4f6;
}

/* --- Moment Tab Moon Selectors --- */
.mpc-moon-selectors {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: 8px;
}

.mpc-moon-selector {
  width: 60px;
  height: 60px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.2s;
}

.mpc-moon-selector.active {
  border-color: #2a2f43e6;
}

.mpc-moon-selector span {
  font-size: 0.75rem;
  font-weight: 500;
}

.mpc-moon-selector .status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e5e7eb;
  /* Incomplete */
  margin-top: 4px;
}

.mpc-moon-selector .status.complete {
  background-color: #10b981;
  /* Green for complete */
}

/* --- Multi-Moon Preview Styles --- */
.mpc-moons-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mpc-single-moon-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
}

.mpc-single-moon-preview .mpc-moon-image {
  height: auto;
  object-fit: contain;
  opacity: 0;
  /* JS will fade in */
  transition: opacity 0.5s ease;
}

.mpc-single-moon-preview .mpc-text-details {
  color: #f3f3f3;
  font-size: 0.35em;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  margin-top: 0.5rem;
  position: relative;
  white-space: normal;
}

/* Layout adjustments */
[data-design="you-me"] .mpc-single-moon-preview .mpc-moon-image {
  width: 80%;
}

[data-design="journey"] {
  flex-direction: column;
}

[data-design="journey"] .mpc-single-moon-preview .mpc-moon-image {
  width: 60%;
}

[data-design="quartet"] {
  flex-wrap: wrap;
}

[data-design="quartet"] .mpc-single-moon-preview {
  width: 45%;
}

[data-design="quartet"] .mpc-single-moon-preview .mpc-moon-image {
  width: 90%;
}

/* Ensure title is above the moons */
.mpc-content-frame .mpc-border {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mpc-text-title {
  padding-top: 5%;
}

.fill-midnightBlue {
  fill: #2a2f43;
  height: 50px;
  width: 50px;
}

/* --- NEW STYLES FOR RESTRUCTURED CLASSIC LAYOUT --- */

/* 1. Use Flexbox on the border container for vertical alignment */
.mpc-border {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes children to top and bottom */
}

/* 2. Style the container for the moon image */
.mpc-moons-container[data-design="classic"] {
  position: relative; /* It's no longer absolute */
  height: auto; /* Give it a percentage of the height */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(10%); /* Nudge it up slightly */
}

/* 3. Style the container for the main title */
.mpc-text-title-container {
  height: 5%; /* Give it a percentage of the height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. Style the container for the details text */
.mpc-text-details-container {
  height: 5%; /* Give it a percentage of the height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 5. Adjust the title text itself */
.mpc-text-title {
  padding: 0; /* Remove old padding */
  position: static; /* Ensure it respects the flex container */
}

/* 6. Adjust the details text itself */
[data-design="classic"] .mpc-text-details {
  position: static;
  margin-top: 0;
  white-space: normal;
  width: 100%;
}

/* NEW FONT STYLES FOR DETAILS TEXT */

.mpc-text-title.font-tangerine {
  font-family: "Lugrasimo", cursive;
}
.mpc-text-title.font-macondo {
  font-family: "Macondo", cursive;
}
.mpc-text-title.font-italianno {
  font-family: "Merienda", cursive;
}
.mpc-text-title.font-newsreader {
  font-family: "Newsreader", serif;
}

/* --- Styles for "You & Me" Design --- */
.mpc-canvas.design-you-me {
  width: 470px;
  aspect-ratio: 4 / 3;
}

/* Use flexbox to reorder elements for the you-me design */
.mpc-canvas.design-you-me .mpc-border {
  display: flex;
  flex-direction: column;
}

/* Set the visual order for each element */
.mpc-canvas.design-you-me .mpc-text-title-container {
  order: 1; /* Title comes first */
  height: auto;
  padding-top: 5%;
}

.mpc-canvas.design-you-me .mpc-moons-container {
  order: 2; /* Moons come second */
  transform: translateY(28%);
  height: auto;
  flex-grow: 1;
}

.mpc-canvas.design-you-me .mpc-text-details-container {
  order: 3; /* Details container comes last */
  height: auto;
}

/* Layout for the two moons side-by-side
.mpc-moons-container[data-design="you-me"] .mpc-single-moon-preview {
  width: 45%;
} */

.mpc-moons-container[data-design="you-me"]
  .mpc-single-moon-preview
  .mpc-moon-image {
  width: 84.44%;
}

.mpc-moons-container[data-design="you-me"]
  .mpc-single-moon-preview
  .mpc-text-details {
  font-size: 0.45em;
}
.mpc-moons-container[data-design="you-me"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-subtitle {
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mpc-moons-container[data-design="you-me"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-location,
.mpc-moons-container[data-design="you-me"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-date {
  font-size: 0.725em;
}
/* --- Font Styles for Moon Subtitles --- */
.moon-subtitle.font-tangerine {
  font-family: "Lugrasimo", cursive;
}
.moon-subtitle.font-macondo {
  font-family: "Macondo", cursive;
}
.moon-subtitle.font-italianno {
  font-family: "Merienda", cursive;
}
.moon-subtitle.font-newsreader {
  font-family: "Newsreader", serif;
}

/* --- Styles for "The Journey" Design --- */

/* Set canvas to landscape */
.mpc-canvas.design-journey {
  width: 500px;
  aspect-ratio: 4 / 3;
}

/* Use flexbox to reorder elements */
.mpc-canvas.design-journey .mpc-border {
  display: flex;
  flex-direction: column;
}

/* Set the visual order for each element */
.mpc-canvas.design-journey .mpc-text-title-container {
  order: 1; /* Title comes first */
  height: auto;
  padding-top: 5%;
}
.mpc-canvas.design-quartet .mpc-text-title-container {
  height: 10%;
}
.mpc-canvas.design-journey .mpc-moons-container {
  order: 2; /* Moons come second */
  transform: translateY(50%); /* Reset any transforms from other designs */
  height: auto;
  flex-grow: 1;
}

.mpc-canvas.design-journey .mpc-text-details-container {
  order: 3; /* Details container comes last */
  height: auto;
}

/* Arrange the three moons horizontally */
.mpc-moons-container[data-design="journey"] {
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

/* Size each of the three moon previews */
.mpc-moons-container[data-design="journey"] .mpc-single-moon-preview {
  width: 32%;
}

/* Size the moon image itself */
.mpc-moons-container[data-design="journey"]
  .mpc-single-moon-preview
  .mpc-moon-image {
  width: 88.88%;
}

/* Adjust text sizes to fit */
.mpc-moons-container[data-design="journey"]
  .mpc-single-moon-preview
  .mpc-text-details {
  font-size: 0.38em;
  margin-top: 0.75rem;
}

.moon-subtitle {
  margin-bottom: 1rem;
}
.mpc-moons-container[data-design="journey"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-subtitle {
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mpc-moons-container[data-design="journey"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-location,
.mpc-moons-container[data-design="journey"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-date {
  font-size: 0.725em;
}

.mpc-moons-container[data-design="quartet"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-subtitle {
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mpc-moons-container[data-design="quartet"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-location,
.mpc-moons-container[data-design="quartet"]
  .mpc-single-moon-preview
  .mpc-text-details
  .moon-date {
  font-size: 0.725em;
}

.mpc-moons-container[data-design="quartet"] {
  transform: translateY(10%);
  height: 90%;
}

/* --- Golden Theme Styles --- */

.mpc-canvas.golden-theme .mpc-text-title,
.mpc-canvas.golden-theme .mpc-text-details {
  /* Fallback for older browsers */
  color: #e6c56d;

  /* Static Shine Effect */
  background: radial-gradient(
    ellipse at center,
    #fffde4 0%,
    #e6c56d 60%,
    #b7903c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.mpc-canvas.golden-theme .mpc-border {
  border-color: #e6c56d; /* Matching golden border */
  transition: border-color 0.4s ease-in-out;
}

/* --- New Dynamic Moon Glow Effect --- */
.mpc-single-moon-preview {
  position: relative; /* This is crucial for positioning the glow */
}

.mpc-moon-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11; /* Below the moon image (z-index: 12) */
  background-color: #fff; /* Default glow color */
  filter: blur(12px);
  opacity: 0.8;

  /* The magic: use the moon image as a mask */
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;

  transition: background-color 0.4s ease-in-out;
}

/* When the golden theme is active, change the glow color */
.golden-theme .mpc-moon-glow {
  background-color: #e6c56d;
}

/* --- Product Slider Styles --- */

/* Add spacing between slider items */
#mpc-product-selector .slick-slide {
  margin: 0 5px;
}

/* Style for the slider navigation arrows */
.slick-prev,
.slick-next {
  width: 30px;
  height: 30px;
  background-color: #f3f4f6;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
  background-color: #e5e7eb;
}

.slick-prev:before,
.slick-next:before {
  font-family: inherit; /* Use theme font for arrows */
  font-size: 24px;
  color: #374151;
  opacity: 1;
  line-height: 1;
}

.slick-prev:before {
  content: "‹";
}

.slick-next:before {
  content: "›";
}

/* Position the arrows */
.slick-prev {
  left: -35px;
}

.slick-next {
  right: -35px;
}

/* Hide arrows when they are not needed */
.slick-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* --- Preview Slider Styles --- */
.mpc-preview-slider {
  margin-bottom: 1rem;
  width: 100%;
  max-width: 470px; /* Or your preferred max-width */
}

.mpc-preview-slider .slick-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mpc-preview-slider .static-preview-image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Style for the preview slider navigation arrows */
.mpc-preview-slider .slick-prev,
.mpc-preview-slider .slick-next {
  width: 40px;
  height: 40px;
  z-index: 50;
}

.mpc-preview-slider .slick-prev {
  left: -100px;
}
.mpc-preview-slider .slick-next {
  right: -100px;
}

/* --- Thumbnail Navigation Styles --- */
.mpc-preview-nav {
  width: 100%;
  max-width: 470px;
}

.mpc-preview-nav .slick-slide {
  margin: 0 5px;
  cursor: pointer;
}

.mpc-nav-item {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s;
  background-color: #f0f0f0; /* Added a background for placeholder */
  aspect-ratio: 3 / 4;
}

.mpc-preview-nav .slick-current .mpc-nav-item {
  border-color: #2a2f43e6;
}

.mpc-nav-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Ensures the image covers the area */
}

/* Styles for the canvas thumbnail placeholder */
/* This is no longer a container for a clone, but the img tag itself */
.mpc-canvas-thumb {
  width: 100%;
  height: 100%;
}

/* --- New Size Selector Styles --- */

.mpc-option-box.size-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 100px; /* Adjust as needed */
  min-height: 100px; /* Adjust as needed */
  padding: 0.75rem 0.5rem;
}

.size-box-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.size-letter-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  margin-bottom: 0.5rem;
  transition: background-color 0.2s;
}

.mpc-option-box.size-box.active .size-letter-wrapper {
  background-color: #e5e7eb; /* A slightly darker shade for the active state */
}

.size-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.size-price {
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 0.5rem;
}

.size-dims {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Adjustments for the active state to match the image */
.mpc-option-box.size-box.active {
  border-color: #3b82f6; /* Blue border color */
  background-color: #eff6ff; /* Light blue background */
}

.mpc-option-box.size-box.active .size-letter-wrapper {
  background-color: #fff; /* White background for the circle when active */
}

/* --- NEW ARABIC FONT STYLES --- */
.mpc-text-title.font-markazi {
  font-family: "Cairo", sans-serif; /* ADDED */
}
.mpc-text-title.font-cairo {
  font-family: "Cairo", sans-serif;
}
.mpc-text-title.font-fustat {
  font-family: "Fustat", sans-serif;
}
.mpc-text-title.font-el-messiri {
  font-family: "El Messiri", sans-serif; /* ADDED */
}
.mpc-preview-area-loading {
  display: none;
}
.mpc-product-item-wrapper {
  text-align: center;
}
span.mpc-product-name {
  font-size: 0.625rem;
}

/* --- Styles for Product Name Outside Box (Corrected) --- */

/* 1. Style the new wrapper for each product item */
.mpc-product-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex-basis: 80px; /* Controls the width and spacing of items */
  flex-grow: 0;
}

/* 2. Style the inner box that only holds the icon */
.mpc-option-box.finalise {
  flex: none; /* Reset flex property */
  width: 70px; /* Set a fixed width */
  height: 70px; /* Set a fixed height */
  justify-content: center; /* Center icon vertically */
  border: 2px solid #e5e7eb; /* Default border color */
  transition: border-color 0.2s;
}

/* 3. Style the product name text below the box */
.mpc-product-name {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  margin-top: 8px; /* Space between box and text */
  text-align: center;
}

/* 4. This is the FIX: Apply the active border color to the box inside the active wrapper */
.mpc-product-item-wrapper.active .mpc-option-box {
  border-color: #2a2f43e6 !important; /* Use !important to ensure this rule wins */
}

/* 5. Remove the generic .active rule for option boxes to avoid conflicts */
.mpc-option-box.active {
  border-color: #e5e7eb; /* Reset to default */
}
/* --- NEW: Modern Styles for Classic WooCommerce Cart --- */

/* General Cart Layout */

.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.coupon {
  display: block !important;
}

.woocommerce-cart .woocommerce {
  font-family: "Inter", sans-serif;
  color: #111827;
  display: flex;
  width: 100%;
  max-width: 100% !important;
  justify-content: space-between;
}

/* Cart Table Styling */
table.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Table Header */
table.shop_table.cart thead {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

table.shop_table.cart th {
  text-align: left;
  padding: 1rem 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* Table Body Rows */
table.shop_table.cart tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

table.shop_table.cart tbody tr:last-child {
  border-bottom: none;
}

table.shop_table.cart td {
  padding: 0.425rem;
  vertical-align: middle;
}

/* Product Thumbnail */
td.product-thumbnail img {
  width: 100px !important; /* Overrides default WooCommerce styles */
  height: auto !important;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Product Name and Meta Data */
td.product-name a {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  text-decoration: none;
}

td.product-name a:hover {
  color: #3b82f6;
}

.wc-item-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.wc-item-meta li {
  margin-bottom: 0.25rem;
}

/* Quantity Input */
.quantity .input-text {
  width: 60px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.5rem;
}

/* Remove Product Button */
a.remove {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 20px;
  color: #9ca3af !important;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}

a.remove:hover {
  background-color: #ef4444;
  color: #fff !important;
  border-color: #ef4444;
}

/* Cart Actions (Coupon & Update Button) */
.actions {
  padding: 1.5rem;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.coupon {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.coupon .input-text {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.75rem;
}

.coupon .button,
.actions .button {
  background-color: #2a2f43 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  border: none !important;
  transition: background-color 0.2s;
}

.coupon .button:hover,
.actions .button:hover {
  background-color: #374151 !important;
}

/* Cart Totals Section */
.cart-collaterals {
  width: 50% !important;
  padding-left: 20px !important;
  padding-right: 0 !important;
}

.cart_totals {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  background-color: #f9fafb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.cart_totals h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.cart_totals table {
  width: 100%;
}

.col.large-7.pb-0 {
  padding-right: 20px !important;
  padding-left: 0 !important;
}

.continue-shopping.pull-left.text-left,
button.button.primary.mt-0.pull-left.small {
  margin-top: 1rem !important;
}

/* Checkout Button */
.wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #2a2f43 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none;
  transition: background-color 0.2s;
}

.wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #374151 !important;
}
.woocommerce td.product-name .wc-item-meta p,
.woocommerce td.product-name .wc-item-meta:last-child,
.woocommerce td.product-name dl.variation p,
.woocommerce td.product-name dl.variation:last-child {
  margin: 0 -1px 2px 0 !important;
}
.is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin: 0 !important;
  margin-bottom: 1.5rem !important;
}
form.woocommerce-cart-form {
  width: 100%;
}
.is-layout-constrained > .alignwide {
  max-width: 100% !important;
  width: 100% !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  margin-bottom: 1rem !important;
}
.wc-proceed-to-checkout a.checkout-button {
  width: auto !important;
}

/* --- NEW: Modern Styles for Classic WooCommerce Checkout --- */

/* General Checkout Layout */

.woocommerce-form-coupon-toggle {
  padding: 2rem 0;
}

.woocommerce-checkout .woocommerce {
  font-family: "Inter", sans-serif;
  color: #111827;
  width: 100%;
  max-width: 100% !important;
}

#order_review {
  padding: 1rem !important;
}

/* Create a two-column layout for the checkout page */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  width: 100% !important;
}

.woocommerce .col2-set {
  display: flex;
  justify-content: space-between;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: 100%;
  float: none;
  margin: 0;
}

/* Styling for Form Fields and Sections */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
}

.woocommerce form .form-row {
  padding: 0;
}

.woocommerce form .form-row label {
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 0.75rem 1rem !important;
  box-sizing: border-box;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Order Review / Your Order section */
#order_review {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #f9fafb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
  width: 35% !important;
  height: max-content;
}

table.shop_table.woocommerce-checkout-review-order-table {
  border-collapse: collapse;
  font-size: 0.95rem;
  width: 100% !important;
}

table.shop_table.woocommerce-checkout-review-order-table thead,
table.shop_table.woocommerce-checkout-review-order-table tfoot {
  background-color: transparent;
}

table.shop_table.woocommerce-checkout-review-order-table th,
table.shop_table.woocommerce-checkout-review-order-table td {
  border: none;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e7eb;
}

table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
table.shop_table.woocommerce-checkout-review-order-table
  tfoot
  tr:last-child
  td {
  border-bottom: none;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Payment Section */
#payment {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
  border: 1px solid #e5e7eb;
}

#payment .payment_methods li {
  list-style: none;
  margin: 0;
}

#payment .payment_box {
  padding: 0.75rem !important;
  font-size: 0.825rem !important;
}

/* Place Order Button */
#place_order {
  width: 100%;
  background-color: #2a2f43 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none;
  transition: background-color 0.2s;
  border: none !important;
}

#place_order:hover {
  background-color: #374151 !important;
}
.order_review_heading {
  display: none;
}
.woocommerce-privacy-policy-text {
  font-size: 0.825em;
  margin-top: 1rem;
}
h3#order_review_heading {
  display: none;
}
form.checkout.woocommerce-checkout {
  display: flex;
  width: 100%;
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 !important;
}
.payment_box.payment_method_cod {
  margin-bottom: 0 !important;
  margin-top: 0.5rem !important;

  p {
    margin-top: 0 !important;
  }
}
#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
  padding: 0 !important;
}
/* --- LANGUAGE-SPECIFIC LETTER SPACING FIX --- */

/* Default (English) letter spacing */
.mpc-canvas:not([data-locale^="ar"]) .mpc-text-details,
.mpc-canvas:not([data-locale^="ar"])
  .mpc-single-moon-preview
  .mpc-text-details {
  letter-spacing: 0.08em;
}

/* Reduced letter spacing for Arabic to prevent overlap */
.mpc-canvas[data-locale^="ar"] .mpc-text-details,
.mpc-canvas[data-locale^="ar"] .mpc-single-moon-preview .mpc-text-details {
  letter-spacing: 0.02em;
}

/* Normal (auto) letter spacing for larger Arabic titles/subtitles where the issue is worst */
.mpc-canvas[data-locale^="ar"] .mpc-text-title,
.mpc-canvas[data-locale^="ar"] .moon-subtitle {
  letter-spacing: normal;
}

/* --- FINAL ARABIC FONT RENDERING FIX --- */
/*
 * This block applies several advanced CSS properties to force the browser
 * and html2canvas to render Arabic script with higher fidelity.
*/
.mpc-canvas[data-locale^="ar"] .mpc-text-title,
.mpc-canvas[data-locale^="ar"] .moon-subtitle,
.mpc-canvas[data-locale^="ar"] .mpc-text-details {
  /* Prioritize rendering accuracy over speed */
  text-rendering: geometricPrecision;

  /* Explicitly enable common OpenType features for Arabic */
  -moz-font-feature-settings: "liga" on, "calt" on;
  -webkit-font-feature-settings: "liga" on, "calt" on;
  font-feature-settings: "liga" on, "calt" on;

  /* Use the font's standard kerning */
  font-kerning: normal;

  /* Improve font smoothing for legibility */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600 !important;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
  .mpc-container-v3 {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .mpc-configurator {
    width: 100%;
    order: 2; /* Form below preview on mobile */
  }

  .mpc-preview {
    order: 1; /* Preview on top on mobile */
  }

  .mpc-preview-slider .slick-prev {
    left: -10px;
  }
  .mpc-preview-slider .slick-next {
    right: -10px;
  }

  .woocommerce-cart .woocommerce,
  form.checkout.woocommerce-checkout {
    flex-direction: column;
  }

  .woocommerce .cart-collaterals,
  .woocommerce-checkout #order_review {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 2rem;
  }
}

/* --- Product Selector Layout Fix --- */
.mpc-product-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding: 0.5rem 0;
}
.mpc-product-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 1.2rem 0.5rem 0.7rem 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.2s, border 0.2s;
  border: 2px solid transparent;
  min-width: 90px;
  min-height: 120px;
}
.mpc-product-item-wrapper.active {
  border: 2px solid #2c3e50;
  box-shadow: 0 4px 16px rgba(44,62,80,0.08);
}
.mpc-option-box.finalise {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 0.7rem;
  font-size: 2rem;
}
.mpc-product-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  margin-top: 0.2rem;
  word-break: break-word;
}
@media (max-width: 900px) {
  .mpc-product-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  .mpc-product-item-wrapper {
    min-width: 80px;
    min-height: 100px;
    padding: 0.7rem 0.2rem 0.5rem 0.2rem;
  }
}
@media (max-width: 600px) {
  .mpc-product-selector {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .mpc-product-item-wrapper {
    min-width: 100%;
    min-height: 80px;
    padding: 0.5rem 0.1rem 0.3rem 0.1rem;
  }
}
/* --- End Product Selector Layout Fix --- */

/* --- Cart Dropdown Product Image Fix --- */
.woocommerce-mini-cart__product img,
.widget_shopping_cart .cart_list li img,
.mini_cart_item img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  margin-right: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  background: #fff;
  display: inline-block;
}
.woocommerce-mini-cart__product,
.widget_shopping_cart .cart_list li,
.mini_cart_item {
 display: block;
}
/* --- End Cart Dropdown Product Image Fix --- */
.mpc-canvas[data-locale^="ar"] .mpc-text-details .moon-location,
.mpc-canvas[data-locale^="ar"] .mpc-text-details .moon-date {
  display: block;
  width: 100%;
}