/* Custom Icons CSS */

/* Writing icon - more colorful and elaborate */
.icon-writing {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="48" height="48"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%234e54c8"/><stop offset="100%" stop-color="%238f94fb"/></linearGradient></defs><path fill="url(%23a)" d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"/><path fill="%23ffd700" d="M150 400l-20 80 80-20z"/><path fill="%23f5f5f5" d="M300 140l70 70-210 210-70-70z"/></svg>');
  width: 48px;
  height: 48px;
  display: inline-block;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Camera icon - more colorful and elaborate */
.icon-camera {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="48" height="48"><defs><linearGradient id="b" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%2300c6ff"/><stop offset="100%" stop-color="%230072ff"/></linearGradient></defs><path fill="%23333" d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48z"/><circle cx="256" cy="288" r="120" fill="url(%23b)"/><circle cx="256" cy="288" r="88" fill="%23111"/><circle cx="256" cy="288" r="56" fill="%23444"/><circle cx="256" cy="288" r="36" fill="%23222"/><circle cx="240" cy="272" r="8" fill="%23fff"/><path fill="%23ff9800" d="M50 160h30v16H50z"/></svg>');
  width: 48px;
  height: 48px;
  display: inline-block;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* UK flag icon - more detailed and visually appealing */
.icon-flag-gb {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" width="48" height="36"><defs><clipPath id="a"><path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/></clipPath></defs><g clip-path="url(%23a)" transform="translate(80) scale(.94)"><g stroke-width="1pt"><path fill="%23012169" d="M-256 0H768v512H-256z"/><path fill="%23fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/><path fill="%23fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/><path fill="%23c8102e" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/></g></g></svg>');
  width: 48px;
  height: 36px;
  display: inline-block;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Styling for challenge icons in cards */
.challenge-icon .icon-writing,
.challenge-icon .icon-camera {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  display: block;
}

.challenge-icon .icon-flag-gb {
  width: 70px;
  height: 52.5px;
  margin: 8.75px auto;
  display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .challenge-icon .icon-writing,
  .challenge-icon .icon-camera {
    width: 50px;
    height: 50px;
  }
  
  .challenge-icon .icon-flag-gb {
    width: 50px;
    height: 37.5px;
    margin: 6.25px auto;
  }
}

/* Styling for title icons */
h1 .icon-writing,
h1 .icon-camera {
  margin-right: 15px;
  vertical-align: middle;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-position: center;
}

h1 .icon-flag-gb {
  margin-right: 15px;
  vertical-align: middle;
  width: 48px;
  height: 36px;
  background-size: contain;
  background-position: center;
}

/* Sequence indicator styling */
.sequence-indicator {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  color: white;
  border-radius: 50%;
  margin-right: 10px;
  font-weight: bold;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 2px solid white;
}

/* Challenge icon container positioning */
.challenge-icon {
  position: relative;
  margin-bottom: 15px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

@media (max-width: 768px) {
  .challenge-icon {
    min-height: 60px;
    margin-bottom: 10px;
  }
}

/* Add background-size and position to all icons */
.icon-writing,
.icon-camera,
.icon-flag-gb {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}