/* ======================================
   Global / Root Variables (if not already set)
   ====================================== */
:root {
  --default-color:     #1e90ff;  /* dark text */
  --background-footer: #EEF2FF;  /* pale-lavender background */
  --heading-color:     #fff;  /* headings (like “AR-ADS”) */
  --heading-font:      Tajawal;
}

:root {
  --default-font: "Tajawal",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Tajawal",  sans-serif;
  --nav-font: "Tajawal",  sans-serif;
}

/* ======================================
   Base reset (if needed)
   ====================================== */
body {
  margin: 0;
  padding: 0;
  font-family: var(--default-font);
  background-color: #FFFFFF;
  color: #1E1E1E;
}

h1,p {
    color: #000000;
    font-size: 16px;
}

header {
    background-color: #1e90ff;
    padding:           20px;
    text-align:        center;
}

.logo {
    max-height: 100px;
}

.container {
    max-width: 800px;
    margin:    0 auto;
    text-align: center;
}

.loader {
  position: fixed;        /* instead of absolute */
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* the rest of your styles… */
}

@media (max-width: 576px) {
  .viewer-container {
    width: 100%;
  }
}


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

.viewer-container {
  position: relative;
  width: 80%;
  height: 500px;
  margin: 0 auto;  
  /* Add some bottom margin so content below (AR button\footer) doesn’t overlap */
  margin-bottom: 70px;
}
.hidden {
    display: none;
}

/* Hide the default AR button on <model-viewer> */
model-viewer::part(default-ar-button) {
    display: none;
}

/* =============================================================================
   “عيش التجربة” Button
   ============================================================================= */
/* 1) wrap both rows and pull them up above the footer */
.controls-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;             /* space between the two rows */
  margin-bottom: 5rem;   /* ensure the button sits clear of the footer */
}


.viewer-container {
  /* remove or override the old 70px: */
  margin-bottom: 8rem;  /* or whatever spacing you need */
}
/* 2) first row: params only */
.controls-row {
  display: flex;
  flex-wrap: wrap;      /* wraps nicely on small screens */
  align-items: center;
  gap: 1.5rem;
}

/* dimension toggle styling */
.dim-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

/* colour-pill container */
#color-buttons-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  direction: rtl;
}

/* 3) second row: centers only the AR button */
.button-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 4) the blue AR button */
.custom-ar-button {
  display: flex;
  margin-top: 12px;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  background-color: var(--default-color);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

.custom-ar-button:hover {
  background-color: var(--default-color);
}

.custom-ar-button .bi {
  color: #e6ee08;
}

/* =============================================================================
   MODEL VIEWER STYLES
   ============================================================================= */

model-viewer {
  display: block;
  width: 80%;
  height: auto;
  aspect-ratio: 1/1; /* Modern aspect-ratio property */
  background-color: #c3e0fd;
  border-radius: 8px;
  overflow: hidden;
}

.dot {
    display: none;
}

.dim {
    position:           absolute;
    transform:          translate3d(-50%, -50%, 0);
    background:         rgba(255, 255, 255, 0.8);
    font-weight:        bold;
    padding:            0.5em 1em;
    border-radius:      4px;
    pointer-events:     none;
    font-size:          14px;
    color:              #000;
    box-shadow:         0 2px 4px rgba(0, 0, 0, 0.2);
}

.dimensionLineContainer {
    pointer-events: none;
    display:        block;
}

.dimensionLine {
    stroke:            #16a5e6;
    stroke-width:      2;
    stroke-dasharray:  2;
}

.hide {
    display: none;
}

#toggle-dimensions {
    accent-color: #16a5e6; /* Nice blue color for checkbox */
}

/* Dropdown nice style */
.styled-variant {
    padding:           8px 12px;
    border-radius:     8px;
    border:            1px solid #ccc;
    font-size:         14px;
    background:        white;
    color:             #333;
    outline:           none;
    min-width:         140px;
    cursor:            pointer;
    appearance:        none; /* removes default arrow in some browsers */
    background-image:  url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position:left 10px center;
    background-size:   10px 6px;
    padding-right:     30px; /* space for the custom arrow */
    transition:        border-color 0.3s ease;
}

.styled-variant:hover,
.styled-variant:focus {
    border-color: #16a5e6;
}



/* =============================================================================
   FOOTER STYLES (exactly as in your reference)
   ============================================================================= */

.footer {
  background: #010e2f;
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;     /* hide everything below the footer’s bottom edge */

}

.footer h1,
.footer p {
  color: #fff;
  font-size: 16px;
}


.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 120%; height: 120%;
  background: radial-gradient(circle at center,
    rgba(30,60,216,0.3),
    transparent 70%),
  radial-gradient(circle at bottom right,
    rgba(0,191,255,0.3),
    transparent 70%);
  pointer-events: none;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-panel {
  flex: 1 1 300px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 1.5rem;
  color: #fff;
}

.footer-panel h2 {
  color: #1e90ff;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.footer-panel p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.social-icons i {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #1e90ff;
  transition: color .3s;
}

.social-icons i:hover {
  color: #00bfff;
}

@media (max-width: 768px) {
  .footer-container {
    gap: 1rem; /* reduce space between panels */
  }
  .footer-panel {
    padding: 1rem !important;           /* tighten internal padding */
    margin-bottom: 1rem;                /* add small gap below each */
    border-radius: 12px;                /* optionally smaller radius */
  }
  .footer-panel h2 {
    font-size: 1.25rem;                 /* slightly smaller heading */
    margin-bottom: 0.5rem;
  }
  .footer-panel p,
  .footer-panel .social-icons i {
    font-size: 0.9rem;                  /* more compact text/icons */
  }
}

}