/* styles.css */

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f5f0e6;
  color: #3a2e25;
  margin: 0;
  padding: 0;
  text-align: center;
  direction: rtl;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

h1 {
  color: #3a2e25;
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: bold;
}

.coffee-mug {
    width: 350px;
    height: 300px;
    background-color: #b98c6f;
    border-radius: 50% 50% 100% 100%;
    margin: 20px auto;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0.3;
}

.coffee-mug::before,
.coffee-mug::after {
  content: '';
  width: 30px;
  height: 50px;
  background-color: rgba(185, 140, 111, 0.6);
  border-radius: 50%;
  position: absolute;
  top: -70px;
  left: calc(50% - 15px);
  animation: smoke 3s infinite linear;
  mix-blend-mode: screen;
}

.coffee-mug::after {
  content: '';
  width: 40px;
  height: 60px;
  background-color: rgba(185, 140, 111, 0.7);
  border-radius: 50%;
  top: -90px;
  left: calc(50% - 20px);
}

.handle {
  width: 30px;
  height: 100px;
  background-color: #6c4e38;
  border-radius: 0 0 10px 10px;
  position: absolute;
  bottom: -100px;
  left: calc(50% - 15px);
}

@keyframes smoke {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
}

.logo {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-radius: 50%;
  background: #1a2c45;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.info {
  margin: 30px 0;
  font-size: 1.1em;
  color: #3a2e25;
  font-weight: 500;
}

.download-btn {
  display: inline-block;
  margin: 15px;
  padding: 12px 24px;
  background: #d4af37;
  color: #3a2e25;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #c09d2c;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin: 30px 0;
}

.download-item {
  padding: 15px;
  background: #f9f5f0;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.download-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.download-item h3 {
  margin: 0;
  font-size: 1.2em;
  color: #3a2e25;
  font-weight: bold;
}

.download-item a {
  color: #1a2c45;
  text-decoration: none;
  font-weight: bold;
  display: block;
  margin: 8px 0;
  transition: color 0.3s;
}

.download-item a:hover {
  color: #d4af37;
}

.footer {
  margin-top: 30px;
  font-size: 0.9em;
  color: #666;
}

.footer a {
  color: #1a2c45;
  text-decoration: none;
  font-weight: bold;
}

.footer a:hover {
  color: #d4af37;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f5f0e6; /* Base background color (Layer 1 - Lowest) */
  color: #3a2e25;
  margin: 0;
  padding: 0;
  text-align: center;
  direction: rtl;
  position: relative; /* Needed for absolute positioning context if body becomes the container boundary */
}

/* --- Layer 3: Glassy Container Style --- */
.container {
  /* We will make this the glassy layer that sits above the mug */
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  
  /* Glassy effect implementation (using background + subtle border/shadow) */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white for 'glassy' */
  backdrop-filter: blur(5px); /* Modern browser blur effect */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  position: relative; /* Essential for z-indexing against the mug */
  z-index: 3; /* Ensure content wrapper is above the mug (z-index: 2) */
}

/* The rest of the styling for smoke, logo, links remains largely the same, 
   but all content elements (h1, p, logo, download-grid) are inside .container, 
   so they inherit z-index: 3 and will sit on top of the mug. */

/* ... [Keep existing styling for h1, .logo, .download-btn, etc., as before] ... */

h1 {
  color: #3a2e25;
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: bold;
}
/* ... rest of the styles ... */

.coffee-mug::before,
.coffee-mug::after {
  content: '';
  width: 30px;
  height: 50px;
  background-color: rgba(185, 140, 111, 0.6);
  border-radius: 50%;
  position: absolute;
  top: -70px;
  left: calc(50% - 15px);
  animation: smoke 3s infinite linear;
  /* Removed mix-blend-mode to fit the 'normal brown cup' description better */
}

/* styles.css */

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f5f0e6; /* Layer 1: Lowest Background */
  color: #3a2e25;
  margin: 0;
  padding: 0;
  text-align: center;
  direction: rtl;
  position: relative;
}

/* --- Layer 2: White Container Background --- */
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #fff; /* Provides the white layer */
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  
  position: relative; /* Establishes stacking context */
  z-index: 1; /* Base stacking level for the container */
}

/* --- Layer 4: Glassy Container --- */
.glassy-container {
  /* This wrapper must be positioned absolutely/relatively to control its depth relative to the mug */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px; /* Ensure padding aligns with the container below */
  box-sizing: border-box; /* Include padding in width/height calculations */
  z-index: 3; /* Sits above the mug (z-index: 2) */

  /* Apply Glassy Style */
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent base */
  backdrop-filter: blur(8px); /* Stronger blur for a distinct glassy look */
  border-radius: 15px;
}

/* --- Layer 5: Text Contents --- */
/* All content inside .container (h1, p, logo, download-grid) now sits *inside* the .container, 
   but we must ensure they render on top of the absolute positioned .glassy-container. */

h1, .info, .download-grid, .footer {
    /* Text elements need a higher Z-index than the absolute .glassy-container */
    position: relative; 
    z-index: 4; 
}


/* --- Adjustments to fit the new structure --- */

/* Adjust .container margin/padding if necessary, as it now acts as the visible frame */
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  /* Removed background: #fff; here, as it's now handled by the glassy-container, 
     but we keep the box-shadow */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
  position: relative; /* Crucial: Allows absolute children (.glassy-container, .coffee-mug) to position relative to it */
}

/* Since the mug is positioned absolutely relative to .container, and .glassy-container
   is also positioned absolutely relative to .container, we must adjust the mug's centering 
   to account for the glassy container's presence/positioning if needed. 
   However, based on your HTML, the mug is centered *within* the glassy container 
   which fills the container bounds. The centering logic for the mug should still work. 
*/

/* Remove smoke mix-blend-mode as discussed previously */
.coffee-mug::before,
.coffee-mug::after {
  /* ... (rest of smoke styles) ... */
  mix-blend-mode: normal; /* Simplified */
}

/* Ensure elements *inside* the glassy effect look normal */
.logo {
    background: #1a2c45; /* Ensure logo background is solid */
    position: relative;
    z-index: 5; /* Make sure logo is clearly visible over blur */
}

body {
  /* ... existing styles ... */
  font-family: 'Segoe UI', sans-serif;
  background: #f5f0e6;
  color: #3a2e25;
  margin: 0;
  padding: 0;
  text-align: center;
  direction: rtl;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* ... other styles (h1, .coffee-mug, @keyframes smoke) ... */

.logo {
  /* ... existing styles ... */
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-radius: 50%;
  background: #1a2c45;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.info {
  margin: 30px 0;
  font-size: 1.1em;
  color: #3a2e25;
  font-weight: 500;
}

/* ... .download-btn styles ... */

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin: 30px 0;
  /* --- ADDED/MODIFIED STYLES FOR BACKGROUND BOX --- */
  padding: 20px; /* Add padding inside the new box */
  background-color: #fff8ef; /* A very light, warm background color for contrast */
  border-radius: 10px;
  border: 1px solid #eee;
  /* ----------------------------------------------- */
}


.download-text-links {
  margin: 0;
  padding: 10px;
  background-color: #fff8ef;
  border-radius: 10px;
  border: 1px solid #eee;
}

.download-item {
  padding: 15px;
  background: #f9f5f0;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#videoModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#videoModal.show {
  display: flex;
}

#closeModal {
  position: absolute;
  top: 10px;
  right: 15px;
  background: #d4af37;
  color: #3a2e25;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
}

#videoPlayer {
  width: 100%;
  height: 500px;
  border: none;
}