/* Universal box sizing */ 
*, *::before, *::after { box-sizing: border-box; }

/* General styles */
#bg-video {
  position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh;
  width: 100vw; height: 100vh; object-fit: cover; object-position: center center;
  z-index: -1; filter: brightness(0.25) contrast(1.1); pointer-events: none;
  transition: opacity 0.4s;
}
body {
  font-family: 'Exo 2', Arial, sans-serif;
  background: #14181d; /* merged bg from both */
  color: #e6f5ff;      /* light blue text */
  margin: 0; padding: 0; text-align: center;
}
a {
  color: #00bcd4; text-decoration: none; text-shadow: 0 0 8px #00bcd4;
}
a:hover {
  text-shadow: 0 0 12px #00bcd4, 0 0 25px #00e5ff; color: #00e5ff;
}
h2 {
  font-size: 22px; font-family: 'Exo 2', Arial, sans-serif; color: #00bcd4;
  text-shadow: 0 0 8px #00bcd4; letter-spacing: 0.5px; font-weight: 600; line-height: 1.1;
}
p { font-size: 18px; }

/* Containers */
.container {
  width: 90%; max-width: 900px; margin: 0 auto;
  background-color: rgba(255,255,255,0.05); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,255,255,0.15);
  transition: box-shadow 0.3s; padding: 30px 24px; margin: 20px auto;
}
.container:hover {
  background: rgba(22,22,22,0.22);
  border-radius: 16px; border: 1.5px solid rgba(0,188,212,0.21);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.34), 0 0 26px #00e5ff55, 0 0 12px #00bcd488, inset 0 1.5px 8px rgba(0,188,212,0.13);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s, box-shadow 0.3s;
}
/* Recommended section in container */
.container .recommended-container {
  max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; box-sizing: border-box;
}
.logo-container {
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  width: 100%;
}
.logo-container img {
  display: block;
  margin: 0 auto 30px auto;
  max-width: 450px;
  height: auto;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,255,255,0.15);
  transition: box-shadow 0.3s;
}

/* Subscription Container */
.subscription-container {
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center;
  width: 100%; max-width: 600px; margin: 36px auto; padding: 36px 20px 32px 20px;
  background: rgba(34,34,34,0.95); border: 1.5px solid rgba(0,188,212,0.19); border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,188,212,0.26), inset 0 2px 4px rgba(255,255,255,0.05);
}
.subscription-container h2 {
  margin-bottom: 10px; width: 100%; font-size: 1.125rem; color: #00e5ff;
  text-shadow: 0 0 10px #009ebc77; letter-spacing: 1px; font-weight: 700;
}
.subscription-container p {
  margin-bottom: 18px; color: #bdf9ff; font-size: 1.14rem;
  width: 100%; max-width: 450px; margin-left: auto; margin-right: auto;
}
.subscription-container form {
  display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; max-width: 350px; margin: 0 auto;
}
.subscription-container label[for="email"] { font-size: 0.9rem; color: #00e5ff; margin-bottom: 0; letter-spacing: 0.03em; font-weight: 500; }
.subscription-container input[type="email"] {
  padding: 13px 12px; font-size: 1.04rem; width: 100%; max-width: 340px;
  background-color: #2a2a2a; color: #fff; border: 1.3px solid #00bcd4; border-radius: 8px;
  margin: 0; box-sizing: border-box; text-align: center; outline: none; transition: box-shadow 0.26s, border-color 0.26s;
}
.subscription-container input[type="email"]:focus {
  box-shadow: 0 0 13px #00bcd4; border-color: #00e5ff;
}
.subscription-container button[type="submit"], .subscription-container .View-Size-Chart {
  margin-top: 6px; min-width: 160px; align-self: center; display: block; font-size: 1.00rem;
  width: 100%; border-radius: 10px; box-sizing: border-box;
}
.subscription-container .feedback, .subscription-container .feedback.success, .subscription-container .feedback.error {
  margin-top: 14px; margin-bottom: -10px; width: 100%;
}

/* Feedback Styles */
.feedback { margin-top: 10px; font-weight: bold; }
.feedback.success { color: #4caf50; text-shadow: 0 0 8px #4caf50; }
.feedback.error { color: #f44336; text-shadow: 0 0 8px #f44336; }

/* Button Styles */
button, input[type="submit"] {
  font-family: 'Exo 2', Arial, sans-serif;
  background: linear-gradient(145deg, #00c7de, #009ebc); color: black; border: 1px solid #00bcd4;
  padding: 10px 18px; cursor: pointer; font-size: 12px; border-radius: 12px;
  position: relative; z-index: 1; transition: all 0.2s; overflow: hidden;
  transform: perspective(500px) rotateX(5deg) rotateY(-3deg);
  box-shadow: 0 8px 0 #006b80, 0 10px 20px rgba(0,0,0,0.5), inset 0 -6px 10px rgba(0,0,0,0.2), inset 0 4px 6px rgba(255,255,255,0.3);
}
button:hover {
  background: linear-gradient(145deg, #00e5ff, #00bcd4);
  box-shadow: 0 0 20px #00e5ff, 0 0 30px #00bcd4, inset 0 2px 4px rgba(255,255,255,0.4);
}
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0,188,212,0.4), inset 0 4px 6px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(255,255,255,0.1);
}

/* Filters */
.filter-row { margin: 10px 0; }
select, input[type="text"] {
  padding: 10px; font-size: 16px; width: 100%; max-width: 300px;
  margin-top: 5px; margin-bottom: 15px;
  background-color: #2a2a2a; color: #fff; border: 1px solid #444; outline: none; border-radius: 6px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
select:focus, input[type="text"]:focus { box-shadow: 0 0 12px #00bcd4; border-color: #00bcd4; }

/* Table styles */
.clothing-table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 30px;
  background: #192027ef; border-radius: 18px; box-shadow: 0 6px 38px #00e8d160, 0 0 0 2.5px #00d8c9cc;
  color: #ddd;
}
.clothing-table th {
  background: linear-gradient(90deg,#00f2ff55,#002e36 65%);
  color: #00ffe5; font-size: 1.07em; padding: 13px 10px 10px 10px; font-weight: 700;
  border-bottom: 2px solid #00d8c9cc;
  text-shadow: 0 1px 8px #00f7eeda, 0 0 2px #fff7;
}
.clothing-table td {
  padding: 12px 8px; text-align: center; border-bottom: 1px solid #00e8d155;
  vertical-align: middle; color: #ddd; transition: background-color 0.3s;
}
.clothing-table tr:last-child td { border-bottom: none; }
.clothing-table tbody tr:hover {
  background: #0ae1ff22; box-shadow: 0 2px 16px #00d8c969; transition: background .15s, box-shadow .18s;
}
.clothing-table img { background: transparent; }

/* Clothing images */
.clothing-image {
  width: 145px; max-width: 96vw; height: auto; border-radius: 10px; border: 2px solid #00f6ff;
  box-shadow: 0 0 16px #00e9d4d9, 0 1px 3px #fff3; margin: 0 auto; display: block; background: #13191d;
  transition: box-shadow .19s;
}
.clothing-image:hover {
  box-shadow: 0 0 38px #00ffe6; border-color: #1dffe7;
  transform: scale(1.05);
}

/* Ratings */
.rating-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 9px 0;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  box-shadow: 0 0 8px #00e5ff44;
  width: fit-content;
  min-width: 110px;
  max-width: 210px;
}
.rating-container .star {
  font-size: 21px;
  margin: 0 2px;
  color: #444;
  cursor: pointer;
  transition: color 0.19s, text-shadow 0.19s, transform 0.19s;
  user-select: none;
  display: inline-block;
  vertical-align: middle;
}
.rating-container .star.selected {
  color: #00ffe7;
  text-shadow: 0 2px 18px #00e2ff, 0 0 6px #00ffe7;
}
.rating-container .star:hover,
.rating-container .star.hovered {
  color: #00ffe7;
  text-shadow: 0 2px 18px #00e2ff;
  transform: scale(1.19);
}

/* Disclaimer */
.disclaimer-container {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(0,188,212,0.3); border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,188,212,0.6), inset 0 0 15px rgba(0,188,212,0.4);
  padding: 20px 20px; margin: 50px auto; max-width: 900px; color: #fff; backdrop-filter: blur(6px); transition: box-shadow 0.4s;
  text-align: center;
}
.disclaimer-container:hover {
  box-shadow: 0 0 30px #00e5ff, 0 0 40px #00bcd4, inset 0 0 20px #00bcd4;
}
.disclaimer-container h2 {
  color: #00bcd4; font-size: 28px; margin-bottom: 15px; text-shadow: 0 0 10px #00bcd4;
}
.disclaimer-text {
  font-size: 15px; line-height: 1.7; color: #ccc; text-shadow: 0 0 4px rgba(0,188,212,0.4); max-width: 800px; margin: 0 auto;
}

/* Recommended Grid */
.recommended-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; }
.recommended-item {
  background: rgba(255,255,255,0.05); backdrop-filter: blur(6px);
  border: 1px solid rgba(0,188,212,0.3); box-shadow: 0 0 12px rgba(0,188,212,0.5);
  padding: 12px; border-radius: 8px; text-align: center; color: white; transition: box-shadow 0.3s;
}
.recommended-item:hover { box-shadow: 0 0 20px #00bcd4; }
.recommended-item img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 10px #00bcd4; }

/* Loading Screen */
#loadingScreen {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.85); z-index: 9999; color: white; font-size: 20px; text-align: center; padding-top: 200px;
}

/* Marketplace Logos Section */
.marketplace-logos { margin-top: 10px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; align-items: center; }
.marketplace-logo { height: 40px !important; width: auto !important; max-width: 80px !important; object-fit: contain; opacity: 0.85; transition: transform 0.2s, opacity 0.2s; display: block; }
.marketplace-logo:hover { transform: scale(1.1); opacity: 1; box-shadow: 0 0 20px #00bcd4; }

/* Feedback form container */
.feedback-container {
  background: #222; color: #fff; padding: 12px 15px; margin-bottom: 15px;
  border-radius: 10px; max-width: 600px; margin-left: auto; margin-right: auto;
  box-shadow: 0 4px 12px rgba(0,188,212,0.6), inset 0 2px 6px rgba(0,188,212,0.25);
}
/* Feedback textarea */
#feedback-input {
  width: 100%; min-height: 100px; box-sizing: border-box; padding: 12px 15px; font-size: 16px;
  border-radius: 12px; border: 1px solid #00bcd4; background-color: #1c1c1c; color: #00e5ff;
  box-shadow: inset 0 0 8px #00bcd4; resize: vertical; transition: box-shadow 0.3s, border-color 0.3s;
}
#feedback-input:focus {
  outline: none; border-color: #00e5ff; padding: 12px 22px;
  box-shadow: 0 0 15px #00e5ff, inset 0 0 12px #00e5ff;
}
#saved-feedback { margin-top: 10px; background-color: #111; padding: 12px 15px; border-radius: 10px; max-width: 600px; margin-left: auto; margin-right: auto; max-height: 250px; overflow-y: auto; color: #00e5ff; box-shadow: 0 0 10px #00bcd4, inset 0 0 12px #00e5ff; font-family: 'Exo 2', Arial, sans-serif; }
#saved-feedback p { margin-bottom: 10px; border-bottom: 1px solid #005b66; padding-bottom: 8px; }

/* Size Guide Panel */
#sizeGuidePanel {
  display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 900px; z-index: 99999;
  justify-content: center; align-items: flex-end; background: none !important; pointer-events: none;
}
#sizeGuidePanel.active { display: flex; pointer-events: all; }
#sizeGuidePanel .panel-inner {
  background: #181e23; border-radius: 20px 20px 0 0; border: 2px solid #00d8c9;
  box-shadow: 0 4px 32px #00d8c9a5; width: 100%; min-height: 480px;
  display: flex; flex-direction: column; align-items: center; position: relative; pointer-events: auto;
}
#sizeGuidePanel .close-panel-btn {
  background: #00d8c9; border: none; border-radius: 50%; color: #181e23; font-weight: 700;
  padding: 4px 13px; font-size: 1.5em; margin: 0 auto 8px auto; display: block; cursor: pointer; box-shadow: 0 2px 6px #1114; transition: background 0.13s; position: static; opacity: 0.85;
}
#sizeGuidePanel .close-panel-btn:hover { background: #06ffc8; color: #111; opacity: 1; }

/* Utility Classes */
.View-Size-Chart {
  font-family: 'Exo 2', Arial, sans-serif;
  background: linear-gradient(145deg, #00c7de 40%, #009ebc 100%);
  color: #000; border: 2.5px solid #00bcd4;
  padding: 12px 25px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  border-radius: 15px 40px 15px 40px; position: relative; z-index: 1;
  margin: 10px 12px 10px 0; box-shadow: 0 2px 6px #00bcd466, 0 1px 3px rgba(0,0,0,0.22), inset 0 1px 3px #00e5ff22, 0 1px 1px #fff2;
  text-shadow: 0 2px 8px #009ebc88; transition: background 0.19s, color 0.18s, transform 0.17s cubic-bezier(.4,2,.3,1), box-shadow 0.22s;
  outline: none; overflow: visible;
}
.View-Size-Chart::before {
  content: ""; display: block; position: absolute; left: 6%; top: 9%; width: 86%; height: 36%;
  background: linear-gradient(180deg, #fff8 0%, transparent 90%);
  opacity: 0.34; border-radius: 20px 30px 16px 24px; pointer-events: none; z-index: 2;
}
.View-Size-Chart:hover,
.View-Size-Chart:focus {
  background: linear-gradient(145deg, #00e5ff 10%, #00bcd4 100%); color: #00bcd4;
  box-shadow: 0 3px 0 #008ba3, 0 6px 16px #00e5ff88, 0 2px 16px #00e5ff33, inset 0 1px 8px #fff8, inset 0 -6px 16px #00bcd4a8;
  transform: scale(1.045) translateY(-3px); text-shadow: 0 0 14px #00e5ff, 0 0 20px #00bcd4;
}
.View-Size-Chart:active {
  transform: scale(0.97) translateY(3px);
  box-shadow: 0 1px 0 #006b80, 0 2px 8px #00bcd488, 0 1px 5px #00e5ff22, inset 0 2px 12px #009ebc22, inset 0 -6px 16px #009ebc44;
}

@media (max-width: 900px) {
  .container, #sizeGuidePanel, #sizeGuidePanel .panel-inner {
    max-width: 99vw !important; width: 99vw !important; min-width: 0 !important;
  }
}
@media (max-width: 700px) {
  .View-Size-Chart {
    font-size: 17px; padding: 11px 16px; margin: 6px 0; min-width: 130px;
  }
  .rating-container {
    max-width: 98vw;
    width: auto;
    padding: 8px 0;
    margin: 9.5px auto;
    gap: 1px;
    box-shadow: 0 0 11px #00e5ff55;
  }
  .rating-container .star {
    font-size: 30px;
    margin: 0 2.7px;
  }
  .logo-container img {
    max-width: 310px !important;
    margin: 0 auto 18px auto !important;
  }
}
@media (max-width: 600px) {
  .container { width: 99vw; padding: 0; }
  .clothing-table th, .clothing-table td { padding: 6px 2px; font-size: 14px; }
  .clothing-image { width: 90vw; max-width: 250px; }
  #sizeGuidePanel .panel-inner { min-height: 340px; }
  #sizeGuidePanel .close-panel-btn { font-size: 1.2em; padding: 3px 11px; }
}
.intro-text {
  font-size: 20px;
  font-weight: 500;
  color: #e6f5ff;
}

/* ----------------------------------
   ✅ Mobile Responsiveness (768px)
---------------------------------- */
@media (max-width: 768px) {
  #bg-video {
    object-fit: cover !important; width: 100vw !important; height: 100vh !important; left: 0; top: 0;
    object-position: center center !important; background: #10181c; background-color: #10181c;
    transform: scale(1.00); transition: transform 0.4s;
  }
  .intro-text {
    font-size: 17.5px !important;
    line-height: 1.6;
}
  .container, .about-me-container, .subscription-container, .logo-container, .recommended-container {
    background: rgba(22,22,22,0.38); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,188,212,0.16), 0 1px 7px rgba(0,0,0,0.13), inset 0 2px 8px rgba(255,255,255,0.14);
    padding: 10px; margin: 10px auto; max-width: 100%; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    transition: background 0.4s, box-shadow 0.3s;
  }
  .marketplace-logo { height: 30px !important; max-width: 30px !important; box-shadow: 0 0 10px #00bcd4; }
  h2 { font-size: 1.2rem; text-align: center; }
  .subscription-container { max-width: 100% !important; width: 100% !important; padding: 10px !important; margin: 10px auto !important; border-radius: 12px !important; }
  .subscription-container form { max-width: 100% !important; width: 100% !important; padding: 0 !important; }
  .subscription-container button[type="submit"], .subscription-container .View-Size-Chart {
    font-size: 0.88rem; min-width: 0; width: 100%; padding: 10px 0; margin-bottom: 0; border-radius: 10px;
  }
  .subscription-container input[type="email"], .subscription-container button[type="submit"] {
    width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
    display: block; box-sizing: border-box; border-radius: 10px !important; font-size: 0.88rem important;
  }
  .clothing-image { width: 100%; max-width: 290px; height: auto; margin: 0 auto 10px; display: block; }
  .clothing-table { backdrop-filter: none !important; background: rgba(22,22,22,0.97); border-radius: 12px; box-shadow: 0 0 12px #00bcd4; }
  .clothing-table thead { display: none; }
  .clothing-table tr { display: block; margin-bottom: 16px; background-color: #21292a; border-radius: 8px; padding: 6px; box-shadow: 0 2px 8px #00bcd4; }
  .clothing-table td { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; border: none; border-bottom: 1px solid #444; text-align: center; }
  .clothing-table td:last-child { border-bottom: none; }
  .clothing-table td::before { content: attr(data-label); font-weight: bold; margin-bottom: 6px; color: #ccc; display: block; text-align: center; }
  .recommended-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .logo-container img { max-width: 350px; }
}


/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; background: #222; }
::-webkit-scrollbar-thumb { background: linear-gradient(145deg, #00c7de 0%, #009ebc 100%); border-radius: 8px; box-shadow: 0 0 8px #00bcd4; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(145deg, #00e5ff 0%, #00bcd4 100%); }
html { scroll-behavior: smooth; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,188,212,0.15); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Support for non-backdrop-filter browsers */
@supports not (backdrop-filter: blur(2px)) {
  .clothing-table, .rating-container, .recommended-item, .disclaimer-container {
    background: rgba(34,34,34,0.92) !important;
  }
}