@charset "UTF-8";
/*
 * DamDom.pl — Modern Frontend Override v4
 * Brand Identity: Plus Jakarta Sans | #f86820 | Dark theme
 * Fix: Higher specificity (#top-layer prefix) to beat aggregator CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ===== BRAND TOKENS ===== */
:root {
  --dd-orange: #f86820;
  --dd-orange-dark: #d44f0e;
  --dd-orange-light: #fda06a;
  --dd-gray-500: #888888;
  --dd-gray-400: #aaaaaa;
  --dd-bg: #0f0f1a;
  --dd-radius-md: 10px;
  --dd-radius-lg: 14px;
  --dd-radius-xl: 20px;
  --dd-shadow-orange: 0 4px 20px rgba(248,104,32,0.25);
  --dd-transition: 0.21s cubic-bezier(0.4, 0, 0.2, 1);
  --dd-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== RESET & BASE ===== */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--dd-font) !important;
  background: var(--dd-bg) !important;
  color: #e8e8ef !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== CITY SKYLINE BACKGROUND ===== */
body::before {
  content: ''; position: fixed; inset: 0;
  background:
    linear-gradient(to top, rgba(15,15,26,0.55) 0%, rgba(15,15,26,0.34) 40%, rgba(15,15,26,0.55) 100%),
    url('/damdom-bg.webp') center center / cover no-repeat;
  z-index: -1; pointer-events: none;
}
/* JPEG fallback for browsers without WebP */
@supports not (background: url('/test.webp')) {
  body::before {
    background:
      linear-gradient(to top, rgba(15,15,26,0.55) 0%, rgba(15,15,26,0.34) 40%, rgba(15,15,26,0.55) 100%),
      url('/damdom-bg.jpg') center center / cover no-repeat !important;
  }
}
/* Mobile: smaller image */
@media (max-width: 768px) {
  body::before {
    background:
      linear-gradient(to top, rgba(15,15,26,0.6) 0%, rgba(15,15,26,0.4) 40%, rgba(15,15,26,0.6) 100%),
      url('/damdom-bg-mobile.webp') center center / cover no-repeat !important;
  }
}

/* ===== TOP LAYER — FULL VIEWPORT CENTER (vertical + horizontal) ===== */
#top-layer {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  height: 100% !important;
  padding: 21px !important;
  background: transparent !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 20000 !important;
  overflow-y: auto !important;
}

/* Override: #top-layer > div — aggregator sets width:940px height:380px + display:none */
#top-layer > div,
#top-layer > div[style] {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* ===== HIDE OLD ICONS ===== */
#top-layer .people-icon,
#top-layer .lock-icon,
#top-layer .at-orange-icon,
#top-layer .close-icon {
  display: none !important;
}

/* ===== GLASS CARD PANELS ===== */
#top-layer #login-layer,
#top-layer #register-layer,
#top-layer #pass-reset-layer,
#top-layer #logout-layer,
#top-layer #success-layer,
#top-layer #user-account-activation-layer,
#top-layer #user-account-delete-layer {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(34px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--dd-radius-xl) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,0.4) !important;
  padding: 34px 34px 28px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  position: static !important;
  float: none !important;
  display: block;
  color: #e8e8ef !important;
  height: auto !important;
  overflow: visible !important;
}

#top-layer #register-layer,
#top-layer #pass-reset-layer,
#top-layer #logout-layer,
#top-layer #success-layer,
#top-layer #user-account-activation-layer,
#top-layer #user-account-delete-layer,
#top-layer #newsletter-signup-layer {
  display: none;
}

/* ===== LOGO via ::before — official brandbook SVG file ===== */
#top-layer #login-layer::before,
#top-layer #register-layer::before,
#top-layer #pass-reset-layer::before {
  content: '' !important;
  display: block !important;
  width: 200px !important;
  height: 55px !important;
  margin: 8px auto 21px !important;
  background-image: url("/damdom-logo-color.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ===== PANEL TITLES — override aggregator's position:absolute ===== */
#top-layer .title,
#top-layer #login-layer .title,
#top-layer #register-layer .title,
#top-layer #pass-reset-layer .title {
  display: none !important;
}

/* ===== FORMS — override aggregator's position:absolute top:132px left:60px ===== */
#top-layer form,
#top-layer #login-layer form,
#top-layer #register-layer form,
#top-layer #pass-reset-layer form,
#top-layer #newsletter-signup-layer form {
  width: 100% !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
}

/* ===== FORM INPUTS — dark bg, override aggregator #f3f3f3 ===== */
#top-layer form input.login,
#top-layer form input.pass,
#top-layer form input.text,
#top-layer form input[type="text"],
#top-layer form input[type="email"],
#top-layer form input[type="password"] {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  margin: 0 0 8px !important;
  font-family: var(--dd-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--dd-radius-md) !important;
  outline: none !important;
  transition: var(--dd-transition) !important;
  box-sizing: border-box !important;
  float: none !important;
  height: auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}
#top-layer form input.login:focus,
#top-layer form input.pass:focus,
#top-layer form input.text:focus {
  border-color: var(--dd-orange) !important;
  background: rgba(248,104,32,0.08) !important;
  box-shadow: 0 0 0 3px rgba(248,104,32,0.15) !important;
}
input::placeholder {
  color: var(--dd-gray-500) !important;
  opacity: 1 !important;
}

/* ===== SUBMIT BUTTONS ===== */
#top-layer form input.submit,
#top-layer form input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 13px !important;
  margin: 13px 0 8px !important;
  font-family: var(--dd-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--dd-orange) !important;
  border: none !important;
  border-radius: var(--dd-radius-md) !important;
  cursor: pointer !important;
  text-transform: capitalize !important;
  transition: var(--dd-transition) !important;
  float: none !important;
  height: auto !important;
  box-shadow: var(--dd-shadow-orange) !important;
  -webkit-appearance: none !important;
  line-height: 1.4 !important;
}
#top-layer form input.submit:hover {
  background: var(--dd-orange-dark) !important;
  transform: translateY(-1px) !important;
}

/* ===== LINKS in panels ===== */
#top-layer #login-layer a,
#top-layer #register-layer a,
#top-layer #pass-reset-layer a {
  color: var(--dd-orange-light) !important;
  text-decoration: none !important;
  font-family: var(--dd-font) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  float: none !important;
  display: inline-block !important;
}
#top-layer #login-layer a:hover,
#top-layer #register-layer a:hover,
#top-layer #pass-reset-layer a:hover {
  color: var(--dd-orange) !important;
  text-decoration: underline !important;
}

/* ===== BOTTOM LINKS ROW: register left, forgot password right ===== */
#top-layer #login-layer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Order: ::before logo = 1, form = 5, links = 21 */
#top-layer #login-layer::before { order: 1 !important; width: 100% !important; }
#top-layer #login-layer form { order: 5 !important; display: block !important; width: 100% !important; }

/* Both links share order 21 → appear after form; width 50% + row via flex-wrap */
#top-layer #login-layer .logreg-icon { order: 21 !important; }
#top-layer #login-layer #login-lostpass { order: 21 !important; }

/* Hide "Nie masz jeszcze konta?" completely */
#login-account-title,
#top-layer #login-account-title {
  display: none !important;
}

/* ===== REGISTER link — right side ===== */
#top-layer .logreg-icon,
#top-layer #login-layer .logreg-icon {
  position: static !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: block !important;
  width: 50% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  color: var(--dd-orange) !important;
  font-weight: 600 !important;
  text-indent: 0 !important;
  text-align: right !important;
  line-height: 1.5 !important;
  float: none !important;
  top: auto !important; right: auto !important;
}

/* ===== LOST PASSWORD — left side ===== */
#login-lostpass,
#top-layer #login-lostpass {
  display: block !important;
  text-align: left !important;
  margin: 8px 0 0 !important;
  width: 50% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  color: var(--dd-orange) !important;
  font-weight: 600 !important;
  position: static !important;
  float: none !important;
  left: auto !important; top: auto !important;
}

/* Force links to sit in a row via flex-wrap */
#top-layer #login-layer::after {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  order: 34 !important;
}

/* ===== INFO BOX ===== */
#top-layer .info-box {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  color: #fff !important;
  font-family: var(--dd-font) !important;
  font-size: 13px !important;
  text-align: center !important;
  display: none;
  clear: both !important;
}

/* ===== NEWSLETTER LAYER ===== */
#top-layer #newsletter-signup-layer {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--dd-radius-lg) !important;
  padding: 13px 24px !important;
  max-width: 400px !important;
  margin: 13px auto 0 !important;
  width: 100% !important;
  position: static !important;
  float: none !important;
  height: auto !important;
}
#top-layer #newsletter-signup-layer .title {
  display: block !important;
  font-family: var(--dd-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--dd-gray-400) !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  background: none !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  text-transform: none !important;
}

/* ===== TERMS OF USE ===== */
#top-layer #reg-terms-of-use-container {
  margin-bottom: 13px !important;
}
#top-layer #reg-terms-of-use-container label {
  font-family: var(--dd-font) !important;
  color: #fff !important;
  font-size: 12px !important;
  white-space: normal !important;
}
#top-layer #reg-terms-of-use-container label a {
  color: var(--dd-orange) !important;
}
#top-layer #reg-terms-of-use-container input[type="checkbox"] {
  accent-color: var(--dd-orange) !important;
  width: auto !important;
  height: auto !important;
}

/* ===== COOKIES BAR ===== */
#accept-cookies-policy-layer {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: rgba(15,15,26,0.95) !important;
  backdrop-filter: blur(13px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 13px 24px !important;
  z-index: 30000 !important;
  font-family: var(--dd-font) !important;
  font-size: 12px !important;
  color: var(--dd-gray-400) !important;
  text-align: center !important;
}

#fb-root { display: none !important; }

/* ===== LOGGED-IN OVERRIDES ===== */
#status_bar {
  background: rgba(15,15,26,0.92) !important;
  backdrop-filter: blur(13px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 8px 24px !important;
  font-family: var(--dd-font) !important;
  color: var(--dd-gray-400) !important;
  font-size: 12px !important;
}
#status_bar strong { color: #fff !important; font-weight: 600 !important; }
#status_bar a#logout { color: var(--dd-orange) !important; font-weight: 500 !important; }

#top {
  background: rgba(15,15,26,0.85) !important;
  backdrop-filter: blur(13px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 13px 24px !important;
}

.content, #content, .main-content {
  max-width: 1200px; margin: 0 auto; padding: 24px;
  font-family: var(--dd-font);
}

/* ===== TABLES ===== */
table { width: 100% !important; border-collapse: collapse !important; }
th {
  background: rgba(248,104,32,0.08) !important;
  color: #e8e8ef !important;
  font-family: var(--dd-font) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  text-align: left !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}
td {
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #e8e8ef !important;
  font-family: var(--dd-font) !important;
  font-size: 13px !important;
}
tr:hover td { background: rgba(255,255,255,0.03) !important; }

/* ===== GENERIC FORM ELEMENTS ===== */
select {
  background: rgba(255,255,255,0.06) !important;
  color: #e8e8ef !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--dd-radius-md) !important;
  padding: 8px 14px !important;
  font-family: var(--dd-font) !important;
}
textarea {
  background: rgba(255,255,255,0.06) !important;
  color: #e8e8ef !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--dd-radius-md) !important;
  padding: 13px !important;
  font-family: var(--dd-font) !important;
  resize: vertical;
}
label {
  color: #e8e8ef !important;
  font-family: var(--dd-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

a { color: var(--dd-orange-light); }
a:hover { color: var(--dd-orange); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  #top-layer { padding: 16px !important; }
  #top-layer #login-layer,
  #top-layer #register-layer,
  #top-layer #pass-reset-layer {
    padding: 24px !important;
    max-width: 100% !important;
  }
  #top-layer #newsletter-signup-layer {
    padding: 13px 16px !important;
    max-width: 100% !important;
  }
  #top-layer #login-layer::before,
  #top-layer #register-layer::before,
  #top-layer #pass-reset-layer::before {
    width: 140px !important;
    height: 44px !important;
    margin-bottom: 13px !important;
  }
}

@media (max-width: 480px) {
  #top-layer { padding: 8px !important; }
  #top-layer #login-layer,
  #top-layer #register-layer,
  #top-layer #pass-reset-layer {
    padding: 20px 16px !important;
    border-radius: var(--dd-radius-lg) !important;
  }
  #top-layer #login-layer::before,
  #top-layer #register-layer::before,
  #top-layer #pass-reset-layer::before {
    width: 120px !important;
    height: 38px !important;
  }
  /* iOS zoom prevention */
  #top-layer form input.login,
  #top-layer form input.pass {
    font-size: 16px !important;
  }
}

/* ===== PWA SAFE AREA ===== */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dd-bg); }
::-webkit-scrollbar-thumb { background: rgba(248,104,32,0.25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(248,104,32,0.4); }

::selection { background: rgba(248,104,32,0.3); color: #fff; }

@media print {
  body::before { display: none !important; }
  #accept-cookies-policy-layer { display: none !important; }
}