/* Dark theme for bambinowedding.com — Instagram-style: true black, white text, photos edge-to-edge
   with hairline gaps, soft grey rounded buttons, underline tabs. Always on — the owner chose dark only
   (2026-10-10); linked at the END of Site.master <head> so it beats the old page styles.
   The shop's gold is kept for "Signature" and prices so it still feels like Bambino. */
:root { color-scheme: dark;
  --bg:#000; --surface:#121212; --btn:#262626; --line:#262626; --text:#f5f5f5; --muted:#a8a8a8; --gold:#e3c27a;
  /* deep velvet emerald + champagne gold (owner picked option B 2026-10-11; the bright emerald was "ไม่หรู") */
  --em:#1d4a3a; --em-d:#0b1f17; --em-l:#c9b27a; }

html, body, .container, .panel, .panel-default, .panel-body, .panel-default > .panel-heading,
form, table, tr, td { background-color: var(--bg) !important; color: var(--text); }
.panel { border: 0 !important; box-shadow: none !important; }
.panel-default > .panel-footer { background: var(--bg) !important; color: #737373; border-top: 1px solid var(--line) !important; }
a { color: var(--text); }
hr { border-color: var(--line); }
#navbar { background-image: none !important; background-color: #000 !important; border-bottom: 1px solid var(--line) !important; }

/* things the old pages hard-coded as white / grey / black text */
[style*="background-color:white"], [style*="background-color: white"], [style*="background:white"],
[style*="background-color:whitesmoke"], [style*="background-color:#fff"] { background-color: var(--bg) !important; }
font[color="#696a68"], font[color="black"], [style*="color:black"], [style*="color: black"] { color: #e0e0e0 !important; }
font[color="#5c7e4d"], [style*="color:darkolivegreen"] { color: var(--text) !important; }
[style*="color:gray"], [style*="color: gray"], [style*="color:#777"] { color: var(--muted) !important; }
font[color="red"], [style*="color:red"] { color: var(--gold) !important; }

/* category icons = Instagram-highlight images (Image/icon/hl/*.webp, gold-ring "-on" for the current one) */
img[id^="imgMainUploadPhoto_"] { border: 0 !important; background: transparent !important; vertical-align: top; }
#imgMainUploadPhoto_prev, #imgMainUploadPhoto_next { filter: invert(1) brightness(1.4); margin-top: 26px; }

/* ---------- Home ---------- */
html body .bloc1Banner, .bloc2Banner, .bloc3Banner { color: var(--text) !important; }
html body .MenuBar { background-color: var(--btn) !important; border-radius: 10px; }
html body .MenuBar:hover { background-color: #363636 !important; }
html body .HilightHeader, html body .HilightDetail, html body .HilightImg { background-color: var(--surface) !important; }
html body .HilightHeader { color: var(--text) !important; }
html body .HilightDetail, html body .mySlidesHilight { color: var(--muted) !important; }
html body .prevBanner, .nextBanner { background-color: rgba(0,0,0,.35) !important; color: #fff !important; }
.shopinfo { color: #dcdcdc !important; }
.shopinfo h1, .shopinfo h2 { color: var(--text) !important; }
.shopinfo h2 { border-bottom-color: var(--line) !important; }
.shopinfo a { color: var(--em-l) !important; }

/* ---------- Gallery (UploadImage) — Instagram grid ---------- */
html body .ImagePreviewUploadStyle { border: 1px solid #000 !important; box-sizing: border-box; }
html body #showdotUploadPhoto { border-bottom: 1px solid var(--line); gap: 0 !important; }
html body #showdotUploadPhoto .UploadFolderLabel { background: transparent !important; color: var(--muted) !important;
  border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; }
html body #showdotUploadPhoto .UploadFolderLabel.is-on { background: transparent !important; color: #fff !important;
  border-bottom-color: #fff !important; font-weight: bold; }
html body .UploadFolderLabel .tlsig, html body #showdotUploadPhoto .UploadFolderLabel.is-on .tlsig { color: var(--gold) !important; }
/* tab arrows: big, clear white chevrons in a grey circle (owner: arrows were too small / hard to see) */
html body .tabnav { width: 34px !important; height: 34px !important; background: #2b2b2b !important; color: #fff !important;
  border: 1px solid #4a4a4a !important; border-radius: 50% !important; font-size: 28px !important; font-weight: bold;
  line-height: 28px !important; padding: 0 0 3px !important; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
html body .tabnav:hover { background: #3a3a3a !important; }
html body .thaichips .chip { background: var(--btn) !important; color: var(--text) !important; border: 0 !important; border-radius: 8px !important; }
html body .thaichips .chip.on { background: #f5f5f5 !important; color: #000 !important; }
[id$="lblUploadPhotoDetail"] b[style*="8b1a1a"] { color: var(--gold) !important; }

/* ---------- Promotion ---------- */
.PromotionDetailItem-Bar { background-color: var(--bg) !important; }

/* ---------- forms (Login etc.) ---------- */
input, select, textarea { background: var(--surface); color: var(--text); border: 1px solid #363636; }
[id$="lblUploadPhotoAdditional"] a, [id$="lblUploadPhotoAdditional"] a:visited { color: var(--em-l) !important; }
html body .MenuBar td { background-color: var(--btn) !important; border-bottom: 6px solid #000; }
html body .MenuBar:hover td { background-color: #363636 !important; }
html body a:link, html body a:visited { color: var(--text); }
html body .AboutUsMainBar { background-color: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--line); }

/* ---------- Promotion page: Instagram-style cards (owner: "ดูยากมาก", detail even harder) ---------- */
html body .PromotionMain { border-collapse: separate !important; border-spacing: 0 8px; width: 100%; }
html body .PromotionMain u { text-decoration: none; }
html body .PromotionMain td[style*="font-size:25px"] { color: #fff !important; font-size: 24px !important; height: 56px !important; }
/* section labels (เฉพาะชุดเจ้าสาวและเจ้าบ่าว / ถ่ายพรี / ชุดไทยออกงาน) */
html body .PromotionMain tr[style*="height:7px"] td { color: var(--muted) !important; font-size: 14px; padding: 18px 2px 0; letter-spacing: .2px; }
/* package bars = rounded dark cards */
html body .Promotion-SubMain-Bar td { background-color: #1c1c1c !important; cursor: pointer; }
html body .Promotion-SubMain { color: #fff !important; font-size: 17px !important; height: auto !important; padding: 14px 8px 14px 16px !important;
  border-radius: 12px 0 0 12px; line-height: 1.45; }
html body .Promotion-SubMain-Show { color: var(--gold) !important; font-size: 16px !important; border-radius: 0 12px 12px 0; }
html body .Promotion-SubMain-Bar:hover td { background-color: #262626 !important; }
/* opened detail */
html body .PromotionDetailItem-Bar { padding: 0 !important; }
html body .PromotionDetailItem-div { width: 100%; box-sizing: border-box; background: #111 !important; border-radius: 12px; padding: 0 0 14px;
  color: #e6e6e6 !important; font-size: 16px !important; overflow: hidden; }
html body .PromotionDetailItem-div > img { border-radius: 12px 12px 0 0; }
html body .PromotionDetailItem-div table, html body .PromotionDetailItem-div tr, html body .PromotionDetailItem-div td { background: transparent !important; }
html body .PromotionDetailItem-Text { padding: 14px 16px 4px !important; margin: 0; line-height: 1.5; }
html body .PromotionDetailItem-Text font[size="5"] { font-size: 19px; }
html body .PromotionDetailItem-Text font[color="#5c7e4d"] { color: var(--gold) !important; }
html body .PromotionDetailItem-Text font[color="#696a68"] { color: #cfcfcf !important; font-size: 15px; }
html body .PromotionDetailItem-div table { margin: 0 10px; }
html body .PromotionDetailItem-Main { width: 34px; font-size: 18px !important; height: auto !important; padding: 7px 4px 7px 6px !important; }
html body .PromotionDetailItem { color: #e6e6e6 !important; height: auto !important; padding: 7px 8px 7px 0 !important; line-height: 1.55; font-size: 15.5px; }
/* "ดูผลงาน…" links = Instagram-style grey buttons */
html body .PromotionDetailItem-Ex { background: transparent !important; height: auto !important; padding: 6px 8px 0 0 !important; }
html body .PromotionDetailItem-Ex a, html body .PromotionDetailItem-Ex a:link, html body .PromotionDetailItem-Ex a:visited {
  display: block; background: #262626; color: #fff !important; border-radius: 8px; padding: 10px 12px; font-size: 15px; font-weight: bold; }

/* ---------- floating contact button: gold pill "ทักแชท" + dark panel (owner: old one unclear / didn't match) ---------- */
html body .div-chat-fix { background-image: none !important; width: auto !important; height: 50px !important; right: 14px !important; bottom: 16px !important;
  display: flex; align-items: center; gap: 8px; padding: 0 20px 0 16px; border-radius: 25px; cursor: pointer; z-index: 50 !important;
  background: linear-gradient(135deg, #f3d892 0%, #d4a74a 100%) !important; color: #141414;
  box-shadow: 0 4px 16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset; }
html body .div-chat-fix:hover { background-image: none !important; filter: brightness(1.06); }
.div-chat-fix .chat-ico { width: 24px; height: 24px; flex: 0 0 24px; background: no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23141414'%3E%3Cpath d='M12 3C6.5 3 2 6.9 2 11.6c0 2.5 1.3 4.8 3.4 6.3L4.6 21.4c-.1.4.3.7.7.5l4-2c.9.2 1.8.3 2.7.3 5.5 0 10-3.9 10-8.6S17.5 3 12 3zm-4.5 9.9a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6zm4.5 0a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6zm4.5 0a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6z'/%3E%3C/svg%3E"); }
.div-chat-fix .chat-txt { font: bold 17px/1 Tahoma, 'Leelawadee UI', sans-serif; white-space: nowrap; }
html body .div-chat-fix.open { background: #2b2b2b !important; color: #fff; }
html body .div-chat-fix.open .chat-txt { font-size: 0; }
html body .div-chat-fix.open .chat-txt::after { content: "ปิด"; font-size: 17px; }
html body .div-chat-fix.open .chat-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
html body .div-chat-detail { right: 14px !important; bottom: 76px !important; width: 230px !important; height: auto !important; z-index: 49 !important;
  flex-direction: column; gap: 4px; padding: 8px; background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.7); }
html body .div-chat-detail a, html body .div-chat-detail a:link, html body .div-chat-detail a:visited {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; color: #fff !important; }
html body .div-chat-detail a:hover { background: #262626; }
html body .div-chat-detail img { width: 40px; height: 40px; border-radius: 50%; }
html body .div-chat-detail span { display: flex; flex-direction: column; font: bold 16px/1.25 Tahoma, 'Leelawadee UI', sans-serif; }
html body .div-chat-detail small { font-weight: normal; font-size: 12.5px; color: var(--muted); }

/* ================= green-gold premium accents (overrides above) ================= */
/* active tab: emerald underline; chips: emerald pill with thin gold trim */
html body #showdotUploadPhoto .UploadFolderLabel.is-on { border-bottom: 3px solid var(--em-l) !important; }
html body .thaichips .chip.on { background: linear-gradient(135deg, #1d4a3a, var(--em-d)) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(227,194,122,.65); }
html body .tabnav { border-color: var(--em) !important; background: #0f241b !important; }
html body .tabnav:hover { background: var(--em) !important; }
/* Promotion */
html body .Promotion-SubMain-Bar td { border-left: 0; }
html body .Promotion-SubMain { box-shadow: inset 3px 0 0 var(--em); }
html body .Promotion-SubMain-Show { color: var(--em-l) !important; }
html body .PromotionDetailItem-div { border: 1px solid #1f3a2f; }
html body .PromotionDetailItem-Ex a, html body .PromotionDetailItem-Ex a:link, html body .PromotionDetailItem-Ex a:visited {
  background: linear-gradient(135deg, #1d4a3a, var(--em-d)) !important; box-shadow: inset 0 0 0 1px rgba(227,194,122,.65); }
/* Home shortcut rows */
html body .MenuBar td:first-child { box-shadow: inset 3px 0 0 var(--em); }
/* contact button: deep emerald with gold trim + champagne text */
html body .div-chat-fix { background: linear-gradient(135deg, #1d4a3a 0%, #0b1f17 100%) !important; color: #ead39a;
  box-shadow: 0 4px 16px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(227,194,122,.7); }
.div-chat-fix .chat-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ead39a'%3E%3Cpath d='M12 3C6.5 3 2 6.9 2 11.6c0 2.5 1.3 4.8 3.4 6.3L4.6 21.4c-.1.4.3.7.7.5l4-2c.9.2 1.8.3 2.7.3 5.5 0 10-3.9 10-8.6S17.5 3 12 3zm-4.5 9.9a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6zm4.5 0a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6zm4.5 0a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6z'/%3E%3C/svg%3E"); }
html body .div-chat-detail { border-color: #1f3a2f; }
html body .div-chat-detail a:hover { background: #0f241b; }

/* ---------- Home banner on wide screens: framed + centred like the content (owner: "เต็มจอแล้วแปลกๆ") ---------- */
html body .slideshow-container { position: relative; }
@media (min-width: 900px) {
  html body .slideshow-container { max-width: min(1260px, calc(100% - 20px)); margin: 18px auto 0; }
  html body .slideshow-container .bnr { border-radius: 16px; background-color: #111; }
}
html body .prevBanner, html body .nextBanner { width: 44px; height: 44px; padding: 0 !important; margin-top: -22px !important; top: 200px !important;
  border-radius: 50%; background-color: rgba(0,0,0,.45) !important; color: #fff !important; font-size: 20px !important;
  border: 1px solid rgba(255,255,255,.35) !important; line-height: 42px; text-align: center; backdrop-filter: blur(2px); }
html body .prevBanner { left: 16px !important; } html body .nextBanner { right: 16px !important; }
html body .prevBanner:hover, html body .nextBanner:hover { background-color: var(--em) !important; border-color: var(--em-l) !important; }
html body .dotsBanner { width: 8px; height: 8px; margin: 10px 4px 0; background-color: #4a4a4a; }
html body .dotsBanner.active { background-color: var(--em-l); width: 22px; border-radius: 4px; }
html body .prevHilight, html body .nextHilight { color: var(--em-l) !important; background: transparent; border: 0; }
/* wide screens: header content lines up with the framed banner/content column (logo left edge = banner left edge) */
@media (min-width: 900px) {
  html body #navbar { padding-left: max(10px, calc((100% - 1260px) / 2)) !important; padding-right: max(10px, calc((100% - 1260px) / 2)) !important; }
  html body #navbar .MainMenu-Logo { padding-left: 0 !important; }
  html body #navbar #LogoMenu { margin-right: 18px; }
  html body #MainMenuBarDIV { right: max(10px, calc((100% - 1260px) / 2)) !important; }
}

/* ---------- Promotion page on wide screens: centred column, chevrons, open state ---------- */
html body .PromotionMain { max-width: 860px; margin: 0 auto; }
html body .Promotion-SubMain-Show { font-size: 0 !important; width: 44px; text-align: center; }
html body .Promotion-SubMain-Show::after { content: "\203A"; font-size: 30px; line-height: 1; color: var(--em-l); display: inline-block; transition: transform .2s; }
html body .Promotion-SubMain-Bar.is-open .Promotion-SubMain-Show::after { transform: rotate(90deg); }
html body .Promotion-SubMain-Bar.is-open td { background-color: #0f241b !important; }
html body .PromotionDetailItem-div > img { max-height: 320px; object-fit: cover; }
/* footer: centred, no visitor IP on screen */
html body .panel-footer { text-align: center; }
html body [id$="MacAddress"] { display: none !important; }
/* About us page: same centred column */
html body .AboutUsMainBar { border-radius: 10px; }
html body .panel-body > table { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---------- top menu: which section am I in? ---------- */
html body #navbar .MainMenu { color: #9e9e9e !important; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: color .15s; }
html body #navbar a:hover .MainMenu { color: #fff !important; }
html body #navbar .MainMenu.nav-on { color: #fff !important; font-weight: bold; border-bottom-color: var(--em-l); }
html body #navbar #HomeMenu.nav-on { border-bottom: 2px solid var(--em-l); padding-bottom: 4px; }
html body #navbar .MainMenu { padding-left: 0 !important; margin-left: 16px; }
html body .site-counter { color: var(--muted); font-size: 13px; } html body .site-counter b { color: #dcdcdc; font-weight: 600; }

/* ---------- staff/admin upload controls: clear, on-theme (owner: dark/unclear after login) ---------- */
html body input[type=file][id$="FileUploadPhoto"] { display:inline-block; max-width:calc(100% - 130px); margin:10px 6px 10px 10px; padding:8px;
  color:#dcdcdc; background:#121212; border:1px dashed #4a4a4a; border-radius:10px; font-size:13px; vertical-align:middle; }
html body input[type=file]::file-selector-button { margin-right:10px; padding:8px 14px; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,#1d4a3a,#0b1f17); color:#ead39a; border:1px solid rgba(227,194,122,.7); font-weight:bold; }
html body input[type=submit][id$="btnUploadPhoto"] { padding:10px 18px; border-radius:8px; border:0; cursor:pointer; vertical-align:middle;
  background:linear-gradient(135deg,#f0d48c,#c99a3e); color:#141414; font-weight:bold; font-size:14px; }
html body input[type=submit][id$="btnUploadPhoto"]:disabled { opacity:.7; cursor:wait; }
html body [id$="lblUploadPhoto"] { display:block; margin:0 10px 6px; font-weight:bold; }


/* Samsung Internet (and some Android browsers) force-darken pages - photos included - unless the site
   declares its own dark theme through a prefers-color-scheme query. The site is already dark, so declare it. */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
@media (prefers-color-scheme: light) { :root { color-scheme: dark; } }