/* Owner visual/UX overrides. Keep localized copy separate from the banner artwork. */

/* Use the clean OWNER Astana/Baiterek artwork with NO legacy slogan baked into it. */
div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) {
  position: relative;
  background-color: #08634e;
  background-image: url("/brand/uslyga-home-hero-clean-owner.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > img[src="/brand/uslyga-home-hero-approved.png"] {
  opacity: 0 !important;
}

/* Localized slogan layer: the artwork stays untouched, RU/KK copy changes independently. */
div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div {
  left: 4% !important;
  top: 6% !important;
  z-index: 2;
  width: 48% !important;
  text-align: center !important;
  color: #fff !important;
  filter: none !important;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 {
  margin: 0 !important;
  font-family: "Marck Script", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0, 55, 41, .58);
  -webkit-text-stroke: .18px rgba(255,255,255,.92);
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 span {
  display: block;
  text-transform: lowercase !important;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 span:nth-child(1)::first-letter,
div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 span:nth-child(2)::first-letter {
  text-transform: uppercase !important;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 span:nth-child(2) {
  margin-top: 1px;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 span:nth-child(3) {
  margin-top: 0;
  font-size: 1.05em;
  text-transform: lowercase !important;
}

/* The oversized temporary Y-arrow is removed. Use the existing curved SVG arrow from the component. */
div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div svg {
  display: block !important;
  margin-top: -2px !important;
  height: 38px !important;
  width: 58px !important;
}

div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div::after {
  content: none !important;
  display: none !important;
}

/* Screen subtitles must be readable, not pale grey. */
main > h1 + p {
  color: rgba(31, 41, 39, .88) !important;
  font-weight: 500 !important;
}

/* Coffee-card decorations must read as coffee beans, not capsules. */
button.relative:has(> svg.lucide-coffee) > span.absolute {
  width: 19px !important;
  height: 12px !important;
  border-radius: 54% 46% 52% 48% !important;
  background: rgba(116, 62, 20, .23) !important;
}
button.relative:has(> svg.lucide-coffee) > span.absolute::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 1px;
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: rgba(103, 52, 18, .30);
  transform: rotate(18deg);
}

/* Invitation profile: make important cards visually separate from the white page. */
main:has(a[href="/client/addresses"]) > div:last-child > div:has(> div:first-child a[href="/client/addresses"]) > :nth-child(3) > div,
main:has(a[href="/client/addresses"]) > div:last-child > div:has(> div:first-child a[href="/client/addresses"]) > :nth-child(4) {
  border-color: rgba(11, 138, 104, .42) !important;
  box-shadow: 0 1px 2px rgba(7, 98, 75, .06) !important;
}

main:has(a[href="/client/addresses"]) > div:last-child > div:has(> div:first-child a[href="/client/addresses"]) > :nth-child(6) {
  border-color: #0b8a68 !important;
  box-shadow: 0 0 0 1px rgba(11, 138, 104, .10), 0 2px 8px rgba(7, 98, 75, .08) !important;
}

main:has(a[href="/client/addresses"]) > div:last-child > div:has(> div:first-child a[href="/client/addresses"]) > :nth-child(6) button {
  border-color: #0b8a68 !important;
}


/* Invitation profile: My Places action matches the orange Save to My Places button. */
main:has(a[href="/client/addresses"]) > div:last-child > div:has(> div:first-child a[href="/client/addresses"]) > div:first-child a[href="/client/addresses"] {
  border: 1px solid rgb(249 115 22) !important;
  background: rgb(249 115 22) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(249, 115, 22, .18) !important;
}

/* Client dashboard: give every work card a clear frame instead of blending into the page. */
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) section:first-of-type {
  border-color: rgba(11, 138, 104, .35) !important;
}

main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/requests"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/offers"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/chat"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/favorites"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/work-nearby"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/reviews"],
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/news"] {
  border-color: rgba(11, 138, 104, .30) !important;
  box-shadow: 0 1px 3px rgba(7, 98, 75, .08) !important;
}

/* Keep the coffee profile tile special and easy to spot. */
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) a[href="/client/social"] {
  border-color: #ffcc00 !important;
  box-shadow: 0 0 0 1px rgba(255, 204, 0, .30), 0 2px 7px rgba(120, 90, 0, .08) !important;
}

/* Client dashboard: installation is a special utility action, visually separate from green USLYGA actions. */
main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) section:has(> button > svg.lucide-download) {
  border: 1px solid #d6aa00 !important;
  background: linear-gradient(135deg, #fff8cf 0%, #fff1a0 100%) !important;
  box-shadow: 0 2px 8px rgba(130, 96, 0, .10) !important;
}

main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) button:has(> svg.lucide-download) {
  border: 1px solid #d6aa00 !important;
  background: #ffcc00 !important;
  color: #2b2412 !important;
  box-shadow: 0 2px 7px rgba(126, 92, 0, .18) !important;
}

main:has(a[href="/client/requests"]):has(a[href="/client/offers"]) button:has(> svg.lucide-download) span {
  color: #2b2412 !important;
}

/* Home AI assistant: a dedicated purple language + sparkle icon + AI badge makes it instantly recognizable as AI. */
a[href="/request/assist"],
a[href*="returnTo=%2Frequest%2Fassist"],
a[href*="returnTo=/request/assist"] {
  position: relative;
  border: 1px solid #6d28d9 !important;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(91, 33, 182, .22) !important;
}

a[href="/request/assist"] svg,
a[href*="returnTo=%2Frequest%2Fassist"] svg,
a[href*="returnTo=/request/assist"] svg {
  color: #fff !important;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.35));
}

a[href="/request/assist"]::after,
a[href*="returnTo=%2Frequest%2Fassist"]::after,
a[href*="returnTo=/request/assist"]::after {
  content: "AI";
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #fff;
}

@media (min-width: 640px) {
  div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div {
    left: 5% !important;
    top: 7% !important;
    width: 46% !important;
  }
  div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div h1 {
    font-size: 31px !important;
  }
  div:has(> img[src="/brand/uslyga-home-hero-approved.png"]) > div svg {
    height: 62px !important;
    width: 92px !important;
  }
}

/* Provider owner toolbar: make Edit the primary action, then stretch the four daily actions across one compact row. */
.provider-owner-toolbar > div.grid.grid-cols-5:first-of-type {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.provider-owner-toolbar > div.grid.grid-cols-5:first-of-type > button:first-child {
  grid-column: 1 / -1;
  min-height: 34px !important;
  margin-bottom: 2px;
  flex-direction: row !important;
  gap: 6px !important;
  border-color: #087b5d !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0b8a68 0%, #087356 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 7px rgba(7, 98, 75, .20) !important;
  font-size: 10px !important;
}

.provider-owner-toolbar > div.grid.grid-cols-5:first-of-type > button:first-child > span:first-child {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.provider-owner-toolbar > div.grid.grid-cols-5:first-of-type > button:nth-child(n+2) {
  min-height: 32px !important;
  flex-direction: row !important;
  gap: 3px !important;
  padding: 3px 4px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
}

.provider-owner-toolbar > div.grid.grid-cols-5:first-of-type > button:nth-child(n+2) > span:first-child {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

/* Provider dashboard: match the install action to the approved purple install/AI palette. */
.provider-feature-actions > button:nth-child(2) {
  border-color: #6d28d9 !important;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(91, 33, 182, .22) !important;
}

.provider-feature-actions > button:nth-child(2) > span:first-child {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

.provider-feature-actions > button:nth-child(2) > span:nth-child(2) {
  color: #fff !important;
}

.provider-feature-actions > button:nth-child(2) > span:nth-child(3) {
  color: rgba(255,255,255,.82) !important;
}