/* Spawn Point - grafisk profil för Idrott.se / MinaAktiviteter */

html,
body,
.cwBody {
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 255, 198, 0.16), transparent 32%),
    radial-gradient(circle at 92% 10%, rgba(0, 217, 255, 0.1), transparent 30%),
    #050908 !important;
  color: #17211f !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.cwArea {
  max-width: 1040px !important;
  margin: 28px auto !important;
  padding: 0 !important;
  border: 1px solid rgba(47, 255, 198, 0.28) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f7fbfa !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(47, 255, 198, 0.14) !important;
}

.cwVisibleForm,
.cwFormCenter,
.cwInputArea,
.cwColumnWide,
.cwColumnFull {
  background: #f7fbfa !important;
  color: #17211f !important;
}

.cwColumnNarrow,
.cwInfoArea,
.cwDataArea {
  background: #edf3f1 !important;
  color: #17211f !important;
  border-color: #d9e4e1 !important;
}

.cwControlAreaTop,
.cwControlAreaBottom {
  background: #07110f !important;
  border-color: rgba(47, 255, 198, 0.24) !important;
  color: #eafff9 !important;
}

.cwShopPageName,
h1,
h2,
h3,
.cwCheckoutItemTitle {
  color: #07110f !important;
  font-weight: 800 !important;
}

.cwControlAreaTop a,
.cwControlAreaBottom a,
.cwSupplierInfo {
  color: #bffff1 !important;
}

p,
li,
label,
td,
th,
.cwText,
.cwDescription,
.cwHelp,
.cwTerms,
.cwPlace,
.cwRegStatus,
.cwInstructors,
.cwVendor,
.cwCheckoutItemProperty {
  color: #263532 !important;
}

.cwColumnNarrow p,
.cwColumnNarrow li,
.cwInfoArea p,
.cwInfoArea li,
.cwDataArea p,
.cwDataArea li {
  color: #3b4b48 !important;
}

a {
  color: #007f6b !important;
  text-decoration-color: rgba(0, 184, 148, 0.45) !important;
}

a:hover {
  color: #005f52 !important;
}

.cwButton,
input[type="submit"],
button,
.cwShopNavNext,
.cwShopNavMain {
  border: 1px solid #0fcfa5 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #22f0bd 0%, #2fffc6 55%, #00c8dd 100%) !important;
  color: #031412 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(0, 184, 148, 0.22) !important;
}

.cwButton:hover,
input[type="submit"]:hover,
button:hover,
.cwShopNavNext:hover,
.cwShopNavMain:hover {
  background: linear-gradient(135deg, #8dffe4 0%, #2fffc6 55%, #00d9ff 100%) !important;
  color: #020b0a !important;
}

.cwShopNavLeft,
.cwShopNavRight,
.cwShopNavAbort,
input[name="close"] {
  background: #10201d !important;
  color: #dffff7 !important;
  border-color: rgba(47, 255, 198, 0.26) !important;
}

input,
select,
textarea {
  background: #ffffff !important;
  color: #17211f !important;
  border: 1px solid #c7d8d4 !important;
  border-radius: 5px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #00b894 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47, 255, 198, 0.16) !important;
}

.cwError,
.cwFormError,
.cwRequired,
.error {
  color: #b00020 !important;
}

.cwSuccess,
.cwNotice,
.cwMessage {
  border-color: rgba(0, 184, 148, 0.28) !important;
  background: #e9fff8 !important;
  color: #123f36 !important;
}

@media (max-width: 700px) {
  .cwArea {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .cwButton,
  input[type="submit"],
  button {
    max-width: 100% !important;
  }
}
/* FIX: toppknappar med SVG-ikoner */

.cwControlAreaTop {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  background: #07110f !important;
  border-bottom: 1px solid rgba(47, 255, 198, 0.26) !important;
}

.cwControlAreaTop .cwShopNavLeft,
.cwControlAreaTop .cwShopNavRight {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cwControlAreaTop .cwShopNavRight {
  margin-left: auto !important;
}

.cwControlAreaTop .cwIconMenu,
.cwControlAreaTop .cwIconGoBack,
.cwControlAreaTop .cwIconGoNext,
.cwControlAreaTop input[name="close"],
.cwControlAreaTop .cwShopNavAbort {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(47, 255, 198, 0.36) !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  filter: none !important;
}

.cwControlAreaTop .cwIconMenu:hover,
.cwControlAreaTop .cwIconGoBack:hover,
.cwControlAreaTop .cwIconGoNext:hover,
.cwControlAreaTop input[name="close"]:hover,
.cwControlAreaTop .cwShopNavAbort:hover {
  background-color: rgba(47, 255, 198, 0.16) !important;
  border-color: rgba(47, 255, 198, 0.7) !important;
}

/* Meny */
.cwControlAreaTop .cwIconMenu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") !important;
}

/* Tillbaka */
.cwControlAreaTop .cwIconGoBack {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}

/* Nästa */
.cwControlAreaTop .cwIconGoNext {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* Stäng */
.cwControlAreaTop input[name="close"],
.cwControlAreaTop .cwShopNavAbort {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}

/* Språkknapp/flagga */
.cwControlAreaTop .cwShopNavSwitchLang {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 6px !important;
  filter: none !important;
}

.cwControlAreaTop .cwModalWrapper:not(.cwIconMenu) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(47, 255, 198, 0.36) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  text-indent: 0 !important;
}

/* FIX: stängknappen som samma ikonstil som övriga toppknappar */

.cwControlAreaTop input[name="close"],
.cwControlAreaTop .cwShopNavAbort {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  border: 1px solid rgba(47, 255, 198, 0.36) !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.cwControlAreaTop input[name="close"]:hover,
.cwControlAreaTop .cwShopNavAbort:hover {
  background-color: rgba(47, 255, 198, 0.16) !important;
  border-color: rgba(47, 255, 198, 0.7) !important;
}

/* FIX: höger yta i toppbaren ska inte bli en falsk turkos knapp */

.cwControlAreaTop .cwShopNavRight {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Om högercontainern är tom ska den inte synas alls */
.cwControlAreaTop .cwShopNavRight:empty {
  display: none !important;
}

/* Riktiga stängknappar, om de finns i modal-/iframe-läget */
.cwControlAreaTop .cwShopNavRight input,
.cwControlAreaTop .cwShopNavRight button,
.cwControlAreaTop .cwShopNavRight a,
.cwControlAreaTop input[name="close"],
.cwControlAreaTop input[value="Stäng"],
.cwControlAreaTop .cwShopNavAbort,
.cwModalClose,
.cwModalCloseButton,
.cwDynamicModalClose,
.cwClose {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(47, 255, 198, 0.36) !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23eafff9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.cwControlAreaTop .cwShopNavRight input:hover,
.cwControlAreaTop .cwShopNavRight button:hover,
.cwControlAreaTop .cwShopNavRight a:hover,
.cwControlAreaTop input[name="close"]:hover,
.cwControlAreaTop input[value="Stäng"]:hover,
.cwControlAreaTop .cwShopNavAbort:hover,
.cwModalClose:hover,
.cwModalCloseButton:hover,
.cwDynamicModalClose:hover,
.cwClose:hover {
  background-color: rgba(47, 255, 198, 0.16) !important;
  border-color: rgba(47, 255, 198, 0.7) !important;
}