/* WISHORA — THEME SETTINGS */

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

.theme-settings {
  max-width: 680px;
  margin-top: 20px;
}

.theme-settings h2 {
  margin-bottom: 8px;
}

.theme-settings label {
  display: block;
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.theme-settings select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #ead8ee;
  border-radius: 12px;
  background: #fff9fd;
  color: #30213f;
  font: inherit;
  cursor: pointer;
}

.theme-settings select:focus-visible {
  outline: 3px solid #b99aef;
  outline-offset: 3px;
}

/* DARK THEME — SHARED COLORS */

html[data-theme="dark"] {
  --primary: #ec4899;
  --primary-dark: #f9a8d4;
  --text: #f5edf9;
  --muted: #c1b3ce;
  --border: #403149;

  --w2-dark: #f5edf9;
  --w2-muted: #c1b3ce;
}

html[data-theme="dark"] body {
  color: #f5edf9;
  background:
    radial-gradient(
      ellipse at top right,
      #32203f 0,
      transparent 48%
    ),
    #191321;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: #f5edf9;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] #status,
html[data-theme="dark"] dt,
html[data-theme="dark"] small,
html[data-theme="dark"] main > h1 + p {
  color: #c1b3ce;
}

/* ACCOUNT PAGES */

html[data-theme="dark"] article,
html[data-theme="dark"] .panel {
  background: #261d30;
  border-color: #403149;
  box-shadow: 0 8px 24px #00000018;
}

html[data-theme="dark"] article:hover {
  border-color: #91608c;
}

html[data-theme="dark"] .account-back {
  background: #261d30;
  border-color: #403149;
  color: #f1c8e6;
}

html[data-theme="dark"] h1::before {
  background: #3a2340;
  border-color: #654063;
  color: #f9a8d4;
}

html[data-theme="dark"] .notice {
  background: #362239;
  border-color: #60405b;
  border-left-color: #ec4899;
  color: #ebcde5;
}

html[data-theme="dark"] #profile::before {
  background: linear-gradient(
    135deg,
    #482440,
    #38254f
  );
  border-color: #654063;
}

html[data-theme="dark"] dt,
html[data-theme="dark"] dd {
  border-bottom-color: #403149;
}

html[data-theme="dark"] #refresh,
html[data-theme="dark"] #more,
html[data-theme="dark"] .actions button,
html[data-theme="dark"] #details > button {
  background: #3a2741;
  border-color: #654063;
  color: #f9c9e5;
}

html[data-theme="dark"] #refresh:hover,
html[data-theme="dark"] #more:hover,
html[data-theme="dark"] .actions button:hover,
html[data-theme="dark"] #details > button:hover {
  background: #503252;
}

html[data-theme="dark"] details {
  background: #211929;
  border-color: #403149;
}

html[data-theme="dark"] summary {
  color: #f9a8d4;
}

html[data-theme="dark"] .table-scroll {
  border-color: #403149;
}

html[data-theme="dark"] th {
  background: #33243d;
  color: #ebcde5;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-bottom-color: #403149;
}

html[data-theme="dark"] tbody tr:hover {
  background: #32243c;
}

html[data-theme="dark"] .theme-settings select {
  background: #211929;
  border-color: #654063;
  color: #f5edf9;
}

/* HOMEPAGE */

html[data-theme="dark"] .navbar {
  background: #261d30;
  box-shadow: 0 4px 25px #00000018;
}

html[data-theme="dark"] .nav-label {
  color: #e5b9d4;
}

html[data-theme="dark"] .hero {
  background: linear-gradient(
    135deg,
    #352035,
    #2c2142,
    #382b27
  );
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .categories > p {
  color: #d0bfd8;
}

html[data-theme="dark"] .tagline {
  background: #3a2741;
  border-color: #654063;
  color: #f9a8d4;
}

html[data-theme="dark"] .categories {
  background: #191321;
}

html[data-theme="dark"] .category-card {
  background: #2c2135;
  border-color: #493451;
}

html[data-theme="dark"] .category-card h3 {
  color: #f5edf9;
}

html[data-theme="dark"] .category-card p {
  color: #d0bfd8;
}

html[data-theme="dark"] footer {
  background: #211929;
  color: #c1b3ce;
}

/* BOTTOM NAVIGATION */

html[data-theme="dark"] .w2-nav,
html[data-theme="dark"] .account-bottom-nav {
  background: #261d3c;
  border-top-color: #493451;
  box-shadow: 0 -5px 25px #00000020;
}

html[data-theme="dark"] .w2-nav a,
html[data-theme="dark"] .account-bottom-nav a {
  color: #c1b3ce;
}

html[data-theme="dark"]
  .w2-nav a[aria-current="page"],
html[data-theme="dark"]:has(#items)
  .account-bottom-nav a[href="my-links.html"],
html[data-theme="dark"]:has(#profile)
  .account-bottom-nav a[href="my-profile.html"] {
  color: #f9a8d4;
}
/* DARK THEME — HOMEPAGE REMAINING SECTIONS */

html[data-theme="dark"] .wishora-fun-zone,
html[data-theme="dark"] .bond-home-section {
  background: transparent;
}

/* Love Checker */

html[data-theme="dark"] .fun-zone-love {
  background: linear-gradient(
    135deg,
    #3a2036,
    #2b2038
  );
  border: 1px solid #68435e;
}

/* Fun Quiz */

html[data-theme="dark"] .fun-zone-quiz {
  background: linear-gradient(
    135deg,
    #312440,
    #252039
  );
  border: 1px solid #594675;
}

html[data-theme="dark"] .wishora-fun-zone h2,
html[data-theme="dark"] .fun-zone-card h3 {
  color: #f8effb;
}

html[data-theme="dark"] .fun-zone-subtitle,
html[data-theme="dark"]
  .wishora-fun-zone .fun-zone-card p {
  color: #dac9e3;
}

html[data-theme="dark"] .fun-zone-card {
  box-shadow: 0 10px 28px #00000020;
}

html[data-theme="dark"] .fun-zone-button {
  color: #ffffff;
}

/* Bond File */

html[data-theme="dark"] .bond-home-card {
  background: linear-gradient(
    135deg,
    #392237,
    #2d223c
  );
  border-color: #68435e;
  box-shadow: 0 10px 28px #00000020;
}

html[data-theme="dark"] .bond-home-section h2 {
  color: #f9a8d4;
}

html[data-theme="dark"] .bond-home-card h3 {
  color: #ffe1f0;
}

html[data-theme="dark"] .bond-home-section > p,
html[data-theme="dark"] .bond-home-card p {
  color: #dac9e3;
}

/* How Wishora Works */

html[data-theme="dark"] .wishora-how {
  background: linear-gradient(
    135deg,
    #211929,
    #291e35
  );
}

html[data-theme="dark"] .wishora-how-heading h2,
html[data-theme="dark"] .wishora-how-card h3 {
  color: #f8effb;
}

html[data-theme="dark"] .wishora-how-heading p,
html[data-theme="dark"] .wishora-how-card p {
  color: #dac9e3;
}

html[data-theme="dark"] .wishora-how-card {
  background: #302339;
  border-color: #51405f;
  box-shadow: 0 10px 28px #00000018;
}

html[data-theme="dark"] .wishora-how-label {
  background: #47243e;
  color: #ffc1e1;
}

html[data-theme="dark"] .wishora-how-number {
  color: #d8b4fe;
}
/* DARK — CATEGORY FORMS AND BIRTHDAY TEMPLATES */

html[data-theme="dark"] .wish-section {
  background: linear-gradient(135deg, #211929, #2c2038);
}

html[data-theme="dark"] .wish-section .wish-box {
  background: #261d30;
  color: #f5edf9;
  box-shadow: 0 12px 40px #00000030;
}

html[data-theme="dark"] .wish-box h2,
html[data-theme="dark"] .wish-box label {
  color: #f5edf9;
}

html[data-theme="dark"] .wish-box > p,
html[data-theme="dark"] .wish-box small {
  color: #d0bfd8;
}

html[data-theme="dark"] .wish-box input,
html[data-theme="dark"] .wish-box textarea,
html[data-theme="dark"] .wish-box select {
  background: #191321;
  border-color: #685071;
  color: #f5edf9;
  color-scheme: dark;
}

html[data-theme="dark"] .wish-box input::placeholder,
html[data-theme="dark"] .wish-box textarea::placeholder {
  color: #bcaac8;
  opacity: 1;
}

html[data-theme="dark"] .wish-box input:focus,
html[data-theme="dark"] .wish-box textarea:focus,
html[data-theme="dark"] .wish-box select:focus {
  border-color: #f472b6;
  outline: 2px solid #f472b6;
  outline-offset: 2px;
}

html[data-theme="dark"] .wish-box .back-btn {
  color: #f9a8d4;
}

html[data-theme="dark"] .birthday-template-card {
  background: linear-gradient(155deg, #35253e, #2b2035);
  border-color: #77506e;
  color: #f5edf9;
  box-shadow: 0 10px 30px #00000020;
}

html[data-theme="dark"] .birthday-template-card strong {
  color: #f5edf9;
}

html[data-theme="dark"] .birthday-template-card small {
  color: #d0bfd8;
}

html[data-theme="dark"] .birthday-template-card:hover {
  border-color: #f472b6;
  box-shadow: 0 12px 30px #00000035;
}

html[data-theme="dark"] .premium-music-upload {
  background: #332139;
  border-color: #77506e;
}

html[data-theme="dark"] .premium-music-upload label {
  color: #f9a8d4;
}

html[data-theme="dark"] .premium-music-upload p {
  color: #d0bfd8;
}

html[data-theme="dark"] .wish-box input::file-selector-button {
  background: #493050;
  color: #fff0f8;
  border: 1px solid #886480;
  border-radius: 8px;
  padding: 8px 12px;
  margin-right: 10px;
  cursor: pointer;
}

/* Dark mode — all surprise previews */
html[data-theme="dark"] :is(
  .preview-section,
  .premium-birthday-experience
) {
  background: linear-gradient(135deg, #211929, #2c2038);
  color: #f5edf9;
}

html[data-theme="dark"] :is(
  .birthday-reveal,
  .love-reveal,
  .anniversary-reveal,
  .friendship-reveal,
  .sorry-reveal,
  .congrats-reveal,
  .share-area,
  .premium-birthday-scene,
  .premium-birthday-letter,
  .premium-memory-card,
  .premium-birthday-finale
) {
  background: #2b2035;
  color: #f5edf9;
  border-color: #604868;
  box-shadow: 0 12px 35px #00000030;
}

html[data-theme="dark"] :is(
  .preview-section,
  .premium-birthday-experience
) :is(h1, h2, h3) {
  color: #ffb5d8;
}

html[data-theme="dark"] :is(
  .preview-section,
  .premium-birthday-experience
) p {
  color: #e0d2e8;
}

html[data-theme="dark"] .preview-section .back-btn,
html[data-theme="dark"] .premium-birthday-envelope span {
  color: #ffb5d8;
}

html[data-theme="dark"] .preview-section input {
  background: #191321;
  color: #f5edf9;
  border-color: #735a80;
  color-scheme: dark;
}

html[data-theme="dark"] #friendshipTitle {
  color: #a9d9ff;
}

html[data-theme="dark"] #congratsTitle {
  color: #ffe099;
}

html[data-theme="dark"] .premium-memory-photo {
  background: linear-gradient(135deg, #49304d, #342947);
}
/* Simple Birthday photo upload — dark mode */
html[data-theme="dark"] #birthdayPhoto {
  background: #1c1525;
  color: #eadfee;
  border-color: #986783;
  color-scheme: dark;
}

html[data-theme="dark"] #birthdayPhoto::file-selector-button {
  background: #e83e87;
  color: #ffffff;
  border: none;
}
/* Birthday selection background */
html[data-theme="dark"] #birthdayTemplateSelection {
  background: linear-gradient(135deg, #211929, #2c2038);
}

/* Three cards in one row */
#birthdayTemplateSelection .birthday-template-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 650px) {
  #birthdayTemplateSelection .birthday-template-options {
    gap: 8px;
    margin-top: 24px;
  }

  #birthdayTemplateSelection .birthday-template-card {
    min-width: 0;
    min-height: 170px;
    padding: 16px 6px;
    gap: 10px;
    border-radius: 14px;
  }

  #birthdayTemplateSelection .birthday-template-card span {
    font-size: 32px;
  }

  #birthdayTemplateSelection .birthday-template-card strong {
    font-size: 14px;
    line-height: 1.4;
  }

  #birthdayTemplateSelection .birthday-template-card small {
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}
.w2-nav a span img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 8px;
}

.w2-nav img.nav-create-dark {
  display: none;
}

html[data-theme="dark"] .w2-nav img.nav-create-light {
  display: none;
}

html[data-theme="dark"] .w2-nav img.nav-create-dark {
  display: block;
}
:is(.w2-nav, .account-bottom-nav) a > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

:is(.w2-nav, .account-bottom-nav) a > span img {
  grid-area: 1 / 1;
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

:is(.w2-nav, .account-bottom-nav) img.wishora-nav-dark {
  display: none;
}

html[data-theme="dark"]
:is(.w2-nav, .account-bottom-nav) img.wishora-nav-light {
  display: none;
}

html[data-theme="dark"]
:is(.w2-nav, .account-bottom-nav) img.wishora-nav-dark {
  display: block;
}
/* বাংলা লেখার জন্য navigation spacing */
html[lang="bn"] :is(.w2-nav, .account-bottom-nav) a {
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

html[lang="bn"] .wish-box :is(h2, label),
html[lang="bn"] .category-card h3 {
  overflow-wrap: anywhere;
}
/* Birthday: balanced Simple and Premium cards */

#birthdayTemplateSelection .wish-box {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 28px 20px;
  box-sizing: border-box;
}

#birthdayTemplateSelection .birthday-template-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 28px auto 0;
}

#birthdayTemplateSelection .birthday-template-card {
  width: 100%;
  min-width: 0;
  min-height: 210px;
  padding: 26px 16px;
  gap: 14px;
  border-radius: 22px;
  box-sizing: border-box;
}

#birthdayTemplateSelection .birthday-template-card span {
  font-size: 46px;
  line-height: 1.2;
}

#birthdayTemplateSelection .birthday-template-card strong {
  font-size: 19px;
  line-height: 1.4;
}

#birthdayTemplateSelection .birthday-template-card small {
  max-width: 190px;
  font-size: 13px;
  line-height: 1.7;
  text-wrap: balance;
}

#birthdayTemplateSelection .birthday-template-card[data-template="premium"] {
  border-color: #c084fc;
  box-shadow: 0 8px 28px #a855f71a;
}

@media (max-width: 480px) {
  #birthdayTemplateSelection .wish-box {
    padding: 24px 16px;
  }

  #birthdayTemplateSelection .birthday-template-options {
    gap: 12px;
  }

  #birthdayTemplateSelection .birthday-template-card {
    min-height: 190px;
    padding: 22px 10px;
    border-radius: 18px;
  }

  #birthdayTemplateSelection .birthday-template-card span {
    font-size: 38px;
  }

  #birthdayTemplateSelection .birthday-template-card strong {
    font-size: 17px;
  }

  #birthdayTemplateSelection .birthday-template-card small {
    font-size: 12px;
  }
}