/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .block {
    display: block;
  }
  .hidden {
    display: none;
  }
  .grow {
    flex-grow: 1;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: #f8fafc;
  color: #0f172a;
}
.page-content {
  min-height: 70vh;
  padding: 20px;
}
.footer {
  position: relative;
  padding: 24px 16px 18px;
  background: linear-gradient( 105deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #f0fdf4;
  border-top: 1px solid rgba(167, 243, 208, 0.18);
  box-shadow: 0 -6px 22px rgba(6, 78, 59, 0.12);
}
.footer .footer-bar {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 8px 0 14px;
}
.footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.footer .footer-brand-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(167, 243, 208, 0.14);
  color: #bbf7d0;
}
.footer .footer-brand-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}
.footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.footer .footer-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #ecfdf5;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.22s ease, background 0.22s ease;
}
.footer .footer-links a svg {
  width: 15px;
  height: 15px;
  color: #a7f3d0;
  stroke-width: 1.9;
  transition: color 0.22s ease;
}
.footer .footer-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}
.footer .footer-links a:hover svg {
  color: #d1fae5;
}
.footer .footer-social {
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer .footer-social a {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(167, 243, 208, 0.16);
  border-radius: 9px;
  color: #ecfdf5;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(2, 44, 34, 0.18);
}
.footer .footer-social a svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}
.footer .footer-bottom {
  max-width: 1100px;
  margin: 6px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(167, 243, 208, 0.14);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #d1fae5;
}
@media (max-width: 700px) {
  .footer {
    padding: 22px 16px 17px;
  }
  .footer .footer-bar {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 18px;
    padding-bottom: 12px;
  }
  .footer .footer-brand {
    justify-content: center;
  }
  .footer .footer-links {
    gap: 3px;
  }
  .footer .footer-links a {
    padding: 7px 9px;
    font-size: 13px;
  }
  .footer .footer-social {
    justify-content: center;
  }
}
@media (max-width: 400px) {
  .footer {
    padding-left: 12px;
    padding-right: 12px;
  }
  .footer .footer-links {
    gap: 2px;
  }
  .footer .footer-links a {
    padding: 6px 7px;
    font-size: 12px;
  }
  .footer .footer-social a {
    width: 35px;
    height: 35px;
  }
}
.toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 99999;
  pointer-events: none;
}
.toast {
  width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  animation: toastIn .35s ease;
}
.toast-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.toast-icon i, .toast-icon svg {
  width: 22px;
  height: 22px;
}
.toast-content {
  flex: 1;
}
.toast-title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.toast-message {
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}
.toast-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: .2s;
}
.toast-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.toast-success {
  border-left: 5px solid #22c55e;
}
.toast-success .toast-icon {
  background: #dcfce7;
  color: #16a34a;
}
.toast-error {
  border-left: 5px solid #ef4444;
}
.toast-error .toast-icon {
  background: #fee2e2;
  color: #dc2626;
}
.toast-warning {
  border-left: 5px solid #f59e0b;
}
.toast-warning .toast-icon {
  background: #fef3c7;
  color: #d97706;
}
.toast-info {
  border-left: 5px solid #3b82f6;
}
.toast-info .toast-icon {
  background: #dbeafe;
  color: #2563eb;
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,.05);
}
.toast-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: progress 5s linear forwards;
}
.toast-success .toast-progress::after {
  background: #22c55e;
}
.toast-error .toast-progress::after {
  background: #ef4444;
}
.toast-warning .toast-progress::after {
  background: #f59e0b;
}
.toast-info .toast-progress::after {
  background: #3b82f6;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@media (max-width: 600px) {
  .toast-container {
    top: 16px;
    width: calc(100% - 24px);
  }
  .toast {
    width: 100%;
  }
}
.auth-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.3s ease, filter 0.3s ease, background 0.3s ease;
}
.auth-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.08) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: -1;
}
.auth-btn:hover::before {
  left: 140%;
}
.auth-btn span, .auth-btn svg {
  position: relative;
  z-index: 2;
}
.auth-btn svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  animation: iconGlow 2.4s ease-in-out infinite;
}
.login-btn {
  background: linear-gradient( 135deg, #12a83f, #05853e );
  box-shadow: 0 0 10px rgba(37, 235, 80, 0.35), 0 0 20px rgba(28, 197, 127, 0.18);
}
.login-btn:hover {
  transform: none;
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(37, 235, 143, 0.55), 0 0 35px rgba(37, 235, 70, 0.32);
}
.login-btn:active {
  transform: none;
  filter: brightness(0.98);
}
.login-btn svg {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(37, 235, 113, 0.8));
}
.logout-btn {
  background: linear-gradient( 135deg, #ef4444, #dc2626 );
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35), 0 0 20px rgba(239, 68, 68, 0.18);
}
.logout-btn:hover {
  transform: none;
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55), 0 0 35px rgba(239, 68, 68, 0.32);
}
.logout-btn:active {
  transform: none;
  filter: brightness(0.98);
}
.logout-btn svg {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
}
@keyframes iconGlow {
  0%, 100% {
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow( 0 0 8px rgba(255, 255, 255, 0.65) );
  }
  50% {
    filter: drop-shadow(0 0 5px #ffffff) drop-shadow( 0 0 12px rgba(255, 255, 255, 0.85) );
  }
}
.auth-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.35);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .auth-btn, .auth-btn::before {
    transition: none;
  }
  .auth-btn svg {
    animation: none;
  }
}
.cart-checkout-btn {
  --green-main: #18b86a;
  --green-dark: #0f8f50;
  --green-light: #45e58f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  min-width: 180px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--green-dark), var(--green-main) 45%, var(--green-light) );
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(24, 184, 106, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.cart-checkout-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.cart-checkout-btn:hover::before {
  left: 140%;
}
.cart-checkout-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(24, 184, 106, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.cart-checkout-btn:active {
  filter: brightness(0.98);
}
.clear-wishlist-btn {
  --red-main: #d94b5b;
  --red-dark: #a83245;
  --red-light: #ff7180;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  min-width: 180px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--red-dark), var(--red-main) 45%, var(--red-light) );
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(217, 75, 91, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.clear-wishlist-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.clear-wishlist-btn:hover::before {
  left: 140%;
}
.clear-wishlist-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(217, 75, 91, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.clear-wishlist-btn:active {
  filter: brightness(0.98);
}
.move-cart-btn {
  --red-main: #d94b5b;
  --red-dark: #a83245;
  --red-light: #ff7180;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  min-width: 110px;
  border: none;
  border-radius: 9px;
  background: linear-gradient( 135deg, var(--red-dark), var(--red-main) 45%, var(--red-light) );
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(217, 75, 91, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.move-cart-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.55s ease;
}
.move-cart-btn:hover::before {
  left: 140%;
}
.move-cart-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(217, 75, 91, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.move-cart-btn:active {
  filter: brightness(0.98);
}
.vendor-store-btn {
  --blue-main: #2563eb;
  --blue-dark: #163fa8;
  --blue-light: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  min-width: 190px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--blue-dark), var(--blue-main) 45%, var(--blue-light) );
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.vendor-store-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.vendor-store-btn:hover::before {
  left: 140%;
}
.vendor-store-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.vendor-store-btn:active {
  filter: brightness(0.98);
}
.whatsapp-share-btn {
  --wa-main: #16c47f;
  --wa-dark: #078a57;
  --wa-light: #4ff0a4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  min-width: 220px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--wa-dark), var(--wa-main) 45%, var(--wa-light) );
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(22, 196, 127, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.whatsapp-share-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.whatsapp-share-btn:hover::before {
  left: 140%;
}
.whatsapp-share-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(22, 196, 127, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.whatsapp-share-btn:active {
  filter: brightness(0.98);
}
.place-order-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 55px;
  margin-bottom: 30px;
}
.place-order-btn {
  --green-main: #18b86a;
  --green-dark: #0f8f50;
  --green-light: #45e58f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 240px;
  height: 56px;
  padding: 0 28px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--green-dark), var(--green-main) 45%, var(--green-light) );
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(24, 184, 106, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.place-order-btn svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.5;
}
.place-order-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.place-order-btn:hover::before {
  left: 140%;
}
@media (max-width: 480px) {
  .place-order-wrapper {
    margin-top: 40px;
    margin-bottom: 25px;
  }
  .place-order-btn {
    width: 90%;
    max-width: 240px;
  }
}
.customer-orders-page-order-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 60px;
}
.customer-orders-page-order-footer form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
}
.cancel-order-btn {
  --red-main: #dc3545;
  --red-dark: #a71d2a;
  --red-light: #ff6b7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  height: 54px;
  padding: 0 30px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 135deg, var(--red-dark), var(--red-main) 45%, var(--red-light) );
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(220, 53, 69, .28), inset 0 1px 2px rgba(255, 255, 255, .25);
  transition: filter .3s ease, box-shadow .3s ease;
}
.cancel-order-btn svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.cancel-order-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, .45), transparent );
  transform: skewX(-25deg);
  transition: left .6s ease;
}
.cancel-order-btn:hover::before {
  left: 140%;
}
.cancel-order-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(220, 53, 69, .35), inset 0 1px 2px rgba(255, 255, 255, .35);
}
.cancel-order-btn:active {
  filter: brightness(.98);
}
.cancel-order-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 600px) {
  .customer-orders-page-order-footer {
    margin-top: 45px;
  }
  .cancel-order-btn {
    width: 100%;
    min-width: 0;
    height: 54px;
    font-size: 15px;
  }
}
.notification-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 35px;
  margin-bottom: 35px;
}
#enable-push-notifications {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
#enable-push-notifications::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.35), transparent );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
#enable-push-notifications:hover::before {
  left: 140%;
}
#enable-push-notifications:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.32);
}
#enable-push-notifications:active {
  filter: brightness(0.98);
}
#enable-push-notifications:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 3px;
}
.vendor-dashboard-back-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}
.vendor-dashboard-back-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  padding: 11px 20px;
  border: 1px solid #b7dec8;
  border-radius: 10px;
  background: #f0faf4;
  color: #16794c;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-dashboard-back-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}
.vendor-dashboard-back-button:hover {
  background: #e4f7ec;
  border-color: #8fc9a9;
  color: #10683f;
  box-shadow: 0 4px 14px rgba(22, 121, 76, 0.12);
}
.vendor-dashboard-back-button:hover::before {
  left: 140%;
}
.vendor-dashboard-back-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke-width: 2;
}
.vendor-dashboard-back-button:hover .vendor-dashboard-back-icon {
  transform: translateX(-2px);
}
.vendor-dashboard-back-text {
  line-height: 1.2;
}
.vendor-dashboard-back-button:focus-visible {
  outline: 3px solid rgba(22, 121, 76, 0.22);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .vendor-dashboard-back-wrapper {
    margin: 20px 0;
  }
  .vendor-dashboard-back-button {
    width: 100%;
    max-width: 260px;
    min-width: 0;
  }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: linear-gradient( 100deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-bottom: 1px solid rgba(167, 243, 208, 0.18);
  box-shadow: 0 4px 18px rgba(6, 78, 59, 0.18);
  animation: headerDrop 0.6s ease;
}
.site-header {
  color: #f0fdf4;
}
.site-header a {
  color: #f0fdf4;
}
.site-header button {
  color: #f0fdf4;
}
.site-header input {
  color: #ffffff;
}
.header-container {
  width: 100%;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 2px 8px;
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}
.logo:hover {
  color: #ffffff;
  opacity: 1;
}
.logo .icon-lg {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  display: block;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.logo:hover .icon-lg {
  transform: scale(1.08);
  filter: drop-shadow( 0 0 5px rgba(255, 255, 255, 0.60) ) drop-shadow( 0 0 12px rgba(255, 255, 255, 0.30) );
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.brand-name {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: letter-spacing 0.3s ease, text-shadow 0.3s ease;
}
.logo:hover .brand-name {
  letter-spacing: 0.35px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}
.brand-slogan {
  color: #ffffff;
  font-size: 0.80rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15px;
  white-space: nowrap;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.logo:hover .brand-slogan {
  color: rgba(255, 255, 255, 0.95);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: #ffffff;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.deals-link {
  gap: 7px;
}
.deals-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 380px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.search-box:focus-within {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);
}
.search-box input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
}
.search-box input::placeholder {
  color: #ffffff;
  opacity: 0.95;
}
.site-header button {
  border: 0;
  transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.hamburger .bar {
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.35s ease, opacity 0.35s ease, background 0.25s ease;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(1, 52, 32, 0.98);
  opacity: 0;
  transform: translateY(-8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
}
.mobile-menu.show {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.mobile-menu a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  padding-left: 26px;
}
.mobile-deals {
  gap: 10px;
}
.mobile-deals .deals-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mobile-search {
  width: 100%;
  padding: 14px 16px 10px;
}
.mobile-search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 7px 6px 13px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mobile-search-box:focus-within {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.mobile-search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
}
.mobile-search-box input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.mobile-search-box button {
  border: none;
  border-radius: 999px;
  padding: 9px 15px;
  background: #ffffff;
  color: #014421;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mobile-search-box button:hover {
  background: #f0fdf4;
  color: #064e3b;
}
.mobile-search-box input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.mobile-nav-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  padding-left: 26px;
}
@keyframes headerDrop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .header-container {
    padding: 7px 20px;
  }
  .header-left {
    gap: 20px;
  }
  .nav-links, .search-box {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .logo {
    height: 54px;
    gap: 9px;
    padding: 2px 4px;
  }
  .logo .icon-lg {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }
  .brand-name {
    font-size: 1.1rem;
  }
  .brand-slogan {
    font-size: 0.72rem;
  }
}
@media (max-width: 600px) {
  .site-header {
    box-shadow: 0 3px 14px rgba(6, 78, 59, 0.16);
  }
  .header-container {
    padding: 7px 16px;
  }
  .header-left {
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .header-container {
    padding: 6px 14px;
  }
  .header-left {
    gap: 8px;
  }
  .logo {
    height: 50px;
    gap: 7px;
  }
  .logo .icon-lg {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
  .brand-name {
    font-size: 0.95rem;
  }
  .brand-slogan {
    font-size: 0.65rem;
  }
}
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f3f4f6;
  color: #111827;
}
.cart-overlay, .wishlist-overlay, .profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}
.cart-overlay.show, .wishlist-overlay.show, .profile-overlay.show {
  opacity: 1;
  visibility: visible;
}
.cart-drawer, .wishlist-drawer, .profile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 100;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
}
.cart-drawer.show, .wishlist-drawer.show, .profile-drawer.show {
  transform: translateX(0);
}
.cart-drawer {
  width: 380px;
}
.wishlist-drawer {
  width: 380px;
}
.profile-drawer {
  width: 360px;
}
.cart-body, .wishlist-body, .profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: #ffffff;
}
.cart-footer, .wishlist-footer, .profile-footer {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}
@media (max-width: 480px) {
  .cart-drawer, .wishlist-drawer, .profile-drawer {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .logo .icon-lg, .logo, .search-box, .mobile-menu, .mobile-menu a, .mobile-nav-links a, .hamburger .bar {
    animation: none !important;
    transition: none !important;
  }
}
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.icon-btn {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  padding: 0;
  margin: 0;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 55%, #dcfce7 100% );
  color: #064e3b;
  border: 2px solid #bbf7d0;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, filter 0.28s ease;
}
.icon-btn::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -75%;
  width: 40%;
  height: 300%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.75), transparent );
  transform: rotate(25deg);
  opacity: 0;
  transition: left 0.65s ease, opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
  clip-path: inset(0);
}
.icon-btn:hover {
  background: linear-gradient( 135deg, #064e3b 0%, #047857 48%, #065f46 100% );
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.27), 0 0 0 4px rgba(16, 185, 129, 0.10);
  filter: brightness(1.04);
}
.icon-btn:hover::before {
  left: 135%;
  opacity: 1;
}
.icon-btn svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.25;
  transition: color 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.icon-btn:hover svg {
  color: #ffffff;
  stroke: #ffffff;
  filter: drop-shadow( 0 0 5px rgba(255, 255, 255, 0.38) );
}
.icon-lg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: block;
  flex-shrink: 0;
}
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 20;
  min-width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient( 135deg, #dc2626 0%, #ef4444 55%, #b91c1c 100% );
  color: #ffffff !important;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(185, 28, 28, 0.28);
  pointer-events: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.icon-btn:hover .badge {
  color: #ffffff !important;
  border-color: #064e3b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.badge.hidden, .badge:empty {
  display: none;
}
.icon-btn:focus-visible {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18), 0 8px 22px rgba(6, 78, 59, 0.20);
}
.icon-btn:active {
  filter: brightness(0.97);
}
#cartBtn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}
#wishlistBtn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.15;
}
#notificationBtn {
  position: relative;
  overflow: visible;
}
#notificationBtn svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: block;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.2;
}
#notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 20;
  min-width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #ffffff !important;
  background: linear-gradient( 135deg, #dc2626 0%, #ef4444 55%, #b91c1c 100% );
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(185, 28, 28, 0.28);
  pointer-events: none;
}
#notificationBtn:hover #notification-count {
  color: #ffffff !important;
  border-color: #064e3b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
#profileBtn {
  color: #064e3b;
}
#profileBtn svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: block;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.2;
}
#profileBtn:hover {
  color: #ffffff;
}
#profileBtn:hover svg {
  color: #ffffff;
  stroke: #ffffff;
}
@media (max-width: 768px) {
  .header-right {
    gap: 10px;
  }
  .icon-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    flex: 0 0 46px;
  }
  .icon-btn svg, .icon-lg {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }
  .badge {
    top: -4px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    padding: 0 4px;
    font-size: 10px;
  }
  #notification-count {
    top: -4px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    font-size: 10px;
  }
  #notificationBtn svg {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }
}
@media (max-width: 480px) {
  .header-right {
    gap: 8px;
  }
  .icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    border-width: 1.5px;
  }
  .icon-btn svg, .icon-lg {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
  }
  .badge {
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
    border-width: 1.5px;
  }
  #notification-count {
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
    border-width: 1.5px;
  }
  #notificationBtn svg {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
  }
}
@media (max-width: 360px) {
  .header-right {
    gap: 6px;
  }
  .icon-btn {
    width: 39px;
    height: 39px;
    min-width: 39px;
    min-height: 39px;
    flex: 0 0 39px;
  }
  .icon-btn svg, .icon-lg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
  .badge {
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    font-size: 8px;
  }
  #notification-count {
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn, .icon-btn::before, .icon-btn svg, .badge {
    transition: none !important;
  }
}
.profile-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 55%, #dcfce7 100% );
  color: #064e3b;
  border: 2px solid #bbf7d0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.header-avatar::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -60%;
  width: 45%;
  height: 260%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.65), transparent );
  transform: rotate(25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.header-avatar:hover {
  background: linear-gradient( 145deg, #ffffff 0%, #dcfce7 50%, #bbf7d0 100% );
  border-color: #10b981;
  color: #047857;
  box-shadow: 0 9px 25px rgba(6, 78, 59, 0.22), 0 0 0 4px rgba(16, 185, 129, 0.10);
  filter: brightness(1.03);
}
.header-avatar:hover::before {
  left: 130%;
  opacity: 1;
}
.header-avatar svg, .header-avatar i {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: block;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.3;
  transition: color 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.header-avatar:hover svg, .header-avatar:hover i {
  color: #047857;
  stroke: #047857;
  filter: drop-shadow( 0 0 5px rgba(16, 185, 129, 0.30) );
}
.header-avatar:focus-visible {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.20), 0 8px 22px rgba(6, 78, 59, 0.20);
}
.profile-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 20px;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 60%, #dcfce7 100% );
  border-bottom: 1px solid #bbf7d0;
}
.profile-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient( 90deg, #064e3b 0%, #047857 45%, #10b981 72%, #064e3b 100% );
  border-radius: 999px;
}
.profile-close {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 52%, #dcfce7 100% );
  color: #064e3b;
  border: 2px solid #bbf7d0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, filter 0.28s ease;
}
.profile-close::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -75%;
  width: 40%;
  height: 300%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.78), transparent );
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: left 0.65s ease, opacity 0.25s ease;
}
.profile-close:hover {
  background: linear-gradient( 135deg, #064e3b 0%, #047857 50%, #065f46 100% );
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.25), 0 0 0 4px rgba(16, 185, 129, 0.10);
  filter: brightness(1.04);
}
.profile-close:hover::before {
  left: 135%;
  opacity: 1;
}
.profile-close svg, .profile-close i {
  position: relative;
  z-index: 2;
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  display: block;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.4;
  transition: color 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.profile-close:hover svg, .profile-close:hover i {
  color: #ffffff;
  stroke: #ffffff;
  filter: drop-shadow( 0 0 5px rgba(255, 255, 255, 0.40) );
}
.profile-close:focus-visible {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.20), 0 7px 20px rgba(6, 78, 59, 0.20);
}
.profile-close:active {
  filter: brightness(0.97);
}
.profile-avatar {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 55%, #dcfce7 100% );
  color: #064e3b;
  border: 2px solid #bbf7d0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.profile-avatar::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -65%;
  width: 45%;
  height: 260%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.65), transparent );
  transform: rotate(25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.profile-avatar:hover {
  background: linear-gradient( 145deg, #ffffff 0%, #dcfce7 50%, #bbf7d0 100% );
  border-color: #10b981;
  box-shadow: 0 9px 24px rgba(6, 78, 59, 0.20), 0 0 0 4px rgba(16, 185, 129, 0.08);
  filter: brightness(1.03);
}
.profile-avatar:hover::before {
  left: 130%;
  opacity: 1;
}
.profile-avatar svg, .profile-avatar i {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: block;
  color: #064e3b;
  stroke: #064e3b;
  stroke-width: 2.3;
  transition: color 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.profile-avatar:hover svg, .profile-avatar:hover i {
  color: #047857;
  stroke: #047857;
  filter: drop-shadow( 0 0 5px rgba(16, 185, 129, 0.25) );
}
.profile-info {
  min-width: 0;
}
.profile-info h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.profile-info p {
  margin: 4px 0 0;
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}
.profile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 18px 24px;
  background: #ffffff;
  gap: 18px;
}
.profile-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.profile-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  margin: 0;
  background: linear-gradient( 135deg, #ffffff 0%, #f7fff9 55%, #f0fdf4 100% );
  border: 1px solid #bbf7d0;
  border-radius: 13px;
  color: #111827 !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.07);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.profile-link::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -65%;
  width: 38%;
  height: 300%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.65), transparent );
  transform: rotate(25deg);
  opacity: 0;
  transition: left 0.65s ease, opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
.profile-link:hover {
  background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 50%, #dcfce7 100% );
  border-color: #10b981;
  color: #064e3b !important;
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.13), 0 0 0 3px rgba(16, 185, 129, 0.06);
  filter: brightness(1.02);
}
.profile-link:hover::before {
  left: 135%;
  opacity: 1;
}
.profile-link span {
  position: relative;
  z-index: 2;
  color: #111827 !important;
  font-weight: 600;
  transition: color 0.25s ease;
}
.profile-link:hover span {
  color: #064e3b !important;
}
.profile-link i, .profile-link svg {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: block;
  color: #047857;
  stroke: #047857;
  stroke-width: 2.2;
  transition: color 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.profile-link:hover i, .profile-link:hover svg {
  color: #064e3b;
  stroke: #064e3b;
  filter: drop-shadow( 0 0 5px rgba(16, 185, 129, 0.25) );
}
.profile-link:focus-visible {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16), 0 6px 16px rgba(6, 78, 59, 0.12);
}
.profile-link.logout-link {
  color: #991b1b !important;
  border-color: #fecaca;
  background: linear-gradient( 135deg, #ffffff 0%, #fff7f7 100% );
}
.profile-link.logout-link span {
  color: #991b1b !important;
}
.profile-link.logout-link i, .profile-link.logout-link svg {
  color: #dc2626;
  stroke: #dc2626;
}
.profile-link.logout-link:hover {
  color: #991b1b !important;
  border-color: #f87171;
  background: linear-gradient( 135deg, #ffffff 0%, #fef2f2 100% );
  box-shadow: 0 7px 18px rgba(153, 27, 27, 0.10);
  filter: brightness(1.01);
}
.profile-link.logout-link:hover span {
  color: #991b1b !important;
}
.profile-link.logout-link:hover i, .profile-link.logout-link:hover svg {
  color: #b91c1c;
  stroke: #b91c1c;
}
.profile-divider {
  width: 100%;
  height: 1px;
  margin: 2px 0;
  background: linear-gradient( 90deg, transparent, #bbf7d0, transparent );
}
.profile-footer {
  padding: 16px 18px;
  border-top: 1px solid #bbf7d0;
  background: linear-gradient( 180deg, #ffffff 0%, #f0fdf4 100% );
}
@media (max-width: 768px) {
  .header-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
  .header-avatar svg, .header-avatar i {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }
  .profile-header {
    gap: 12px;
    padding: 16px 15px 18px;
  }
  .profile-header::after {
    left: 15px;
    right: 15px;
  }
  .profile-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-width: 1.5px;
  }
  .profile-close svg, .profile-close i {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
  .profile-avatar {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
  .profile-avatar svg, .profile-avatar i {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }
  .profile-info h3 {
    font-size: 16px;
  }
  .profile-info p {
    font-size: 14px;
  }
  .profile-body {
    padding: 18px 14px 22px;
    gap: 16px;
  }
  .profile-links {
    gap: 12px;
  }
  .profile-link {
    min-height: 50px;
    padding: 13px 14px;
    font-size: 14px;
  }
  .profile-footer {
    padding: 14px;
  }
}
@media (max-width: 480px) {
  .profile-body {
    padding: 16px 12px 20px;
    gap: 14px;
  }
  .profile-links {
    gap: 11px;
  }
  .profile-link {
    min-height: 48px;
    padding: 12px 13px;
  }
  .profile-link i, .profile-link svg {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
  }
  .profile-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .profile-close svg, .profile-close i {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
    stroke-width: 2.5;
  }
}
@media (max-width: 360px) {
  .profile-header {
    gap: 10px;
    padding: 14px 12px 16px;
  }
  .profile-header::after {
    left: 12px;
    right: 12px;
  }
  .profile-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .profile-close svg, .profile-close i {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
  .profile-body {
    padding: 14px 10px 18px;
    gap: 13px;
  }
  .profile-links {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-avatar, .profile-avatar, .profile-close, .profile-link, .header-avatar::before, .profile-avatar::before, .profile-close::before, .profile-link::before, .header-avatar svg, .header-avatar i, .profile-avatar svg, .profile-avatar i, .profile-close svg, .profile-close i, .profile-link svg, .profile-link i, .profile-link span {
    transition: none !important;
  }
}
.settings-page {
  min-height: 100vh;
  padding: 42px 24px 70px;
  background: radial-gradient( circle at 0% 0%, rgba(34,197,94,.08), transparent 35% ), radial-gradient( circle at 100% 10%, rgba(15,138,75,.07), transparent 35% ), #f6faf8;
  color: #17231d;
}
.settings-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.settings-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.settings-header-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient( 135deg, #087f45, #22c55e );
  box-shadow: 0 12px 30px rgba(15,138,75,.18);
}
.settings-header-icon svg {
  width: 30px;
  height: 30px;
}
.settings-header-content h1 {
  margin: 0;
  font-size: clamp(2rem,4vw,2.8rem);
  font-weight: 900;
  letter-spacing: -.045em;
  color: #14251c;
}
.settings-header-content p {
  margin: 7px 0 0;
  color: #718078;
  font-size: .95rem;
  line-height: 1.6;
}
.settings-layout {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 26px;
  align-items: start;
}
.settings-sidebar {
  position: sticky;
  top: 24px;
}
.settings-navigation {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: rgba(255,255,255,.86);
  border: 1px solid #e4eee8;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(20,50,35,.06);
}
.settings-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  color: #53635a;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.settings-nav-item:hover {
  background: #f3faf6;
  border-color: #dceee3;
  color: #176b40;
}
.settings-nav-item.active {
  color: #0b713d;
  background: #eaf8f0;
  border-color: #c8ead6;
}
.settings-nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 15px;
  bottom: 15px;
  width: 4px;
  border-radius: 0 5px 5px 0;
  background: #0f8a4b;
}
.settings-nav-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: #f2f7f4;
  color: #5e7066;
  transition: background .22s ease, color .22s ease;
}
.settings-nav-icon svg {
  width: 20px;
  height: 20px;
}
.settings-nav-item.active .settings-nav-icon {
  background: #d4f1df;
  color: #0f8a4b;
}
.settings-nav-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-nav-text strong {
  font-size: .91rem;
  font-weight: 800;
  color: inherit;
}
.settings-nav-text small {
  color: #8a9991;
  font-size: .74rem;
  line-height: 1.35;
}
.settings-nav-arrow {
  width: 16px;
  height: 16px;
  color: #a0aaa4;
  transition: color .22s ease;
}
.settings-nav-item.active .settings-nav-arrow {
  color: #0f8a4b;
}
.settings-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.settings-section {
  scroll-margin-top: 25px;
  padding: 30px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e4eee8;
  border-radius: 26px;
  box-shadow: 0 15px 45px rgba(20,50,35,.055);
}
.settings-section-header {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #edf2ef;
}
.settings-section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.settings-section-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 16px;
  color: #0f8a4b;
  background: #eaf8f0;
}
.settings-section-icon svg {
  width: 24px;
  height: 24px;
}
.settings-section-heading h2 {
  margin: 0;
  color: #17251e;
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: -.025em;
}
.settings-section-heading p {
  margin: 5px 0 0;
  color: #7a8881;
  font-size: .86rem;
}
.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-field-full {
  grid-column: 1 / -1;
}
.settings-field label {
  color: #34443b;
  font-size: .83rem;
  font-weight: 750;
}
.settings-field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #dfe9e3;
  border-radius: 13px;
  outline: none;
  background: #fbfdfc;
  color: #17251e;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.settings-field input:hover {
  border-color: #cbdcd2;
}
.settings-field input:focus {
  background: #ffffff;
  border-color: #0f8a4b;
  box-shadow: 0 0 0 4px rgba(15,138,75,.09);
}
.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.settings-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 13px;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.settings-btn svg {
  width: 17px;
  height: 17px;
}
.settings-btn-primary {
  color: #ffffff;
  background: linear-gradient( 135deg, #087f45, #19a956 );
  box-shadow: 0 8px 20px rgba(15,138,75,.17);
}
.settings-btn-primary:hover {
  background: linear-gradient( 135deg, #076d3b, #15964b );
  box-shadow: 0 10px 24px rgba(15,138,75,.22);
}
.settings-btn-outline {
  color: #0f8a4b;
  background: #ffffff;
  border-color: #cfe5d8;
}
.settings-btn-outline:hover {
  background: #eaf8f0;
  border-color: #a9d8bc;
}
.settings-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid #e7eee9;
  border-radius: 18px;
  background: #fbfdfc;
  transition: background .2s ease, border-color .2s ease;
}
.settings-option:hover {
  background: #f7fbf8;
  border-color: #d6e8dc;
}
.settings-option-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  color: #0f8a4b;
  background: #eaf8f0;
}
.settings-option-icon svg {
  width: 20px;
  height: 20px;
}
.settings-option-content {
  min-width: 0;
  flex: 1;
}
.settings-option-content h3 {
  margin: 0 0 4px;
  color: #24332b;
  font-size: .91rem;
  font-weight: 800;
}
.settings-option-content p {
  margin: 0;
  color: #7d8a83;
  font-size: .79rem;
  line-height: 1.55;
}
.settings-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.settings-status svg {
  width: 14px;
  height: 14px;
}
.settings-status-success {
  color: #08733d;
  background: #e7f8ed;
}
.settings-switch {
  position: relative;
  width: 48px;
  height: 27px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d8e1dc;
  transition: background .2s ease;
}
.settings-switch-slider::before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.settings-switch input:checked + .settings-switch-slider {
  background: #16a34a;
}
.settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(21px);
}
.settings-theme-options {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}
.settings-theme-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 16px;
  text-align: left;
  border: 2px solid #e4ece7;
  border-radius: 18px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.settings-theme-option:hover {
  border-color: #b9ddc7;
  background: #f9fcfa;
}
.settings-theme-option.active {
  border-color: #0f8a4b;
  background: #f1faf4;
  box-shadow: 0 0 0 3px rgba(15,138,75,.07);
}
.settings-theme-option strong {
  color: #26362d;
  font-size: .86rem;
}
.settings-theme-option small {
  color: #849189;
  font-size: .75rem;
}
.settings-theme-preview {
  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #dce6e0;
}
.settings-theme-light {
  background: #f8faf9;
}
.settings-theme-light::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 35%;
  height: 80px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e4ebe7;
}
.settings-theme-light::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 55%;
  height: 10px;
  border-radius: 5px;
  background: #dceee3;
}
.settings-theme-system {
  background: linear-gradient( 135deg, #f5faf7 50%, #e7f2eb 50% );
}
.settings-theme-system::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 42%;
  height: 76px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #dce7e0;
}
.settings-theme-system::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 20px;
  width: 40%;
  height: 10px;
  border-radius: 5px;
  background: #badcc7;
}
.settings-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.settings-help-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #e4ece7;
  border-radius: 17px;
  color: #24352c;
  text-decoration: none;
  background: #fbfdfc;
  transition: background .2s ease, border-color .2s ease;
}
.settings-help-card:hover {
  background: #f1faf4;
  border-color: #c8e3d1;
}
.settings-help-card > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-help-card strong {
  font-size: .85rem;
  font-weight: 800;
}
.settings-help-card small {
  color: #829088;
  font-size: .74rem;
  line-height: 1.4;
}
.settings-help-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  color: #0f8a4b;
  background: #eaf8f0;
}
.settings-help-icon svg {
  width: 19px;
  height: 19px;
}
.settings-help-card > svg {
  width: 17px;
  height: 17px;
  color: #9aaa9f;
}
@media (max-width:1000px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    position: static;
  }
  .settings-navigation {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:700px) {
  .settings-page {
    padding: 28px 15px 50px;
  }
  .settings-header {
    align-items: flex-start;
  }
  .settings-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .settings-header-icon svg {
    width: 24px;
    height: 24px;
  }
  .settings-navigation {
    grid-template-columns: 1fr;
  }
  .settings-section {
    padding: 22px 18px;
    border-radius: 21px;
  }
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .settings-field-full {
    grid-column: auto;
  }
  .settings-form-actions {
    justify-content: stretch;
  }
  .settings-form-actions .settings-btn {
    width: 100%;
  }
  .settings-theme-options {
    grid-template-columns: 1fr;
  }
  .settings-help-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:480px) {
  .settings-header {
    gap: 13px;
  }
  .settings-header-content h1 {
    font-size: 1.8rem;
  }
  .settings-header-content p {
    font-size: .82rem;
  }
  .settings-option {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .settings-option-content {
    width: calc(100% - 60px);
  }
  .settings-option > .settings-btn, .settings-option > .settings-status {
    margin-left: 59px;
  }
}
.hero-slider {
  position: relative;
  width: 100%;
  height: clamp(320px, 60vh, 600px);
  overflow: hidden;
  border-radius: 16px;
  background: #0a3f27;
  touch-action: pan-y;
}
.hero-slider .slides {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.hero-slider .slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: var(--slide-image);
  background-size: 50% 100%;
  background-position: left center;
  background-repeat: repeat-x;
  background-color: #0a3f27;
  touch-action: pan-y;
}
.hero-slider .hero-content {
  position: relative;
  z-index: 2;
  width: min(90%, 680px);
  margin-left: clamp(20px, 6vw, 90px);
  padding: clamp(20px, 4vw, 38px);
  color: #ffffff;
  background: linear-gradient( 135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28) );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}
.hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
  width: min(90%, 720px);
  background: linear-gradient( 135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.38) );
}
.hero-slider .badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  margin-bottom: 15px;
  border-radius: 999px;
  background: linear-gradient( 135deg, #0fa968, #087f4e );
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.hero-slider h1 {
  margin: 0 0 15px;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin-bottom: 17px;
}
.hero-slider p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.hero-slider .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.hero-slider .shop-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 150px;
  min-height: 44px;
  margin: 22px auto 0;
  padding: 11px 24px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient( 135deg, #12b76a 0%, #0a9b5b 45%, #07844f 100% );
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
  touch-action: manipulation;
  isolation: isolate;
}
.hero-slider .shop-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent );
  transform: skewX(-22deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: -1;
}
.hero-slider .shop-btn:hover {
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: brightness(1.06);
}
.hero-slider .shop-btn:hover::before {
  left: 140%;
}
.hero-slider .shop-btn:active {
  filter: brightness(0.98);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.20), inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
@media (max-width: 600px) {
  .hero-slider .shop-btn {
    width: 100%;
    max-width: 220px;
    min-height: 45px;
    margin-left: auto;
    margin-right: auto;
    padding: 11px 22px;
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .hero-slider .shop-btn {
    max-width: 200px;
    min-height: 44px;
    font-size: 13px;
  }
}
@media (hover: none) {
  .hero-slider .shop-btn:hover {
    filter: none;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .hero-slider .shop-btn:hover::before {
    left: -80%;
  }
}
.hero-slider .nav {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(169, 184, 176, 0.25);
  border-radius: 50%;
  background: rgba(170, 175, 172, 0.18);
  color: #0a5a1b;
  font-size: 25px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
  touch-action: manipulation;
}
.hero-slider .nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.05);
}
.hero-slider .nav.prev {
  left: 22px;
}
.hero-slider .nav.next {
  right: 22px;
}
.hero-slider .dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-slider .dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
  touch-action: manipulation;
}
.hero-slider .dot.active {
  width: 34px;
  background: #ffffff;
}
@media (max-width: 900px) {
  .hero-slider .hero-content {
    width: 85%;
    margin-left: 30px;
  }
  .hero-slider .nav {
    width: 44px;
    height: 44px;
    font-size: 21px;
  }
  .hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
    width: 85%;
  }
  .hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
    font-size: clamp(31px, 5.5vw, 48px);
  }
  .hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
    font-size: 17px;
    line-height: 1.65;
  }
}
@media (max-width: 768px) {
  .hero-slider {
    height: 500px;
  }
  .hero-slider .slide {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
    width: calc(100% - 64px);
    margin-left: 32px;
    padding: 24px 20px;
  }
  .hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
    font-size: 32px;
    line-height: 1.1;
  }
  .hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
    font-size: 17px;
    line-height: 1.65;
  }
}
@media (max-width: 600px) {
  .hero-slider {
    height: 470px;
    border-radius: 14px;
  }
  .hero-slider .hero-content {
    width: calc(100% - 32px);
    margin-left: 16px;
    padding: 22px 18px;
    border-radius: 15px;
  }
  .hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
    width: calc(100% - 48px);
    margin-left: 24px;
    padding: 22px 17px;
    border-radius: 15px;
  }
  .hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
    font-size: 30px;
    line-height: 1.12;
    margin-bottom: 14px;
  }
  .hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
    font-size: 16px;
    line-height: 1.62;
  }
  .hero-slider .buttons {
    flex-direction: column;
    width: 100%;
  }
  .hero-slider .shop-btn {
    width: 100%;
  }
  .hero-slider .nav {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .hero-slider .nav.prev {
    left: 10px;
  }
  .hero-slider .nav.next {
    right: 10px;
  }
  .hero-slider .dots {
    bottom: 16px;
    padding: 6px 9px;
    gap: 6px;
  }
  .hero-slider .dot {
    width: 8px;
    height: 8px;
  }
  .hero-slider .dot.active {
    width: 28px;
  }
}
@media (max-width: 480px) {
  .hero-slider {
    height: 400px;
  }
  .hero-slider .hero-content {
    width: calc(100% - 64px);
    margin-left: 32px;
    padding: 18px 16px;
  }
  .hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
    width: calc(100% - 48px);
    margin-left: 24px;
    padding: 19px 15px;
  }
  .hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
    font-size: 28px;
    line-height: 1.12;
  }
  .hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
    font-size: 15.5px;
    line-height: 1.6;
  }
  .hero-slider h1 {
    font-size: 27px;
  }
  .hero-slider p {
    font-size: 14px;
    line-height: 1.6;
  }
  .hero-slider .badge {
    font-size: 11px;
    padding: 7px 12px;
  }
  .hero-slider .nav {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .hero-slider .nav.prev {
    left: 7px;
  }
  .hero-slider .nav.next {
    right: 7px;
  }
}
@media (max-width: 380px) {
  .hero-slider {
    height: 370px;
  }
  .hero-slider .hero-content {
    width: calc(100% - 44px);
    margin-left: 22px;
    padding: 16px 14px;
  }
  .hero-slider .slide:nth-child(2) .hero-content, .hero-slider .slide:nth-child(3) .hero-content {
    width: calc(100% - 40px);
    margin-left: 20px;
    padding: 17px 13px;
  }
  .hero-slider .slide:nth-child(2) .hero-content h1, .hero-slider .slide:nth-child(3) .hero-content h1 {
    font-size: 26px;
    line-height: 1.12;
  }
  .hero-slider .slide:nth-child(2) .hero-content p, .hero-slider .slide:nth-child(3) .hero-content p {
    font-size: 15px;
    line-height: 1.55;
  }
  .hero-slider h1 {
    font-size: 24px;
  }
  .hero-slider p {
    font-size: 13px;
    line-height: 1.5;
  }
  .hero-slider .nav {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}
@media (hover: none) {
  .hero-slider .shop-btn:hover {
    transform: none;
  }
  .hero-slider .nav:hover {
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slides {
    transition: none;
  }
  .hero-slider .shop-btn, .hero-slider .nav, .hero-slider .dot {
    transition: none;
  }
}
.netflix-category {
  padding: 60px 0 25px;
  background: radial-gradient( circle at top, rgba(4,120,87,.22), transparent 42% ), linear-gradient( 135deg, #021c16 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  overflow: hidden;
  text-align: center;
  position: relative;
}
.netflix-category::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( circle at 15% 40%, rgba(255,255,255,.07), transparent 30% ), radial-gradient( circle at 85% 30%, rgba(255,255,255,.06), transparent 35% ), radial-gradient( circle at 50% 100%, rgba(4,120,87,.20), transparent 45% );
  pointer-events: none;
}
.category-title {
  position: relative;
  display: inline-block;
  font-size: 34px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 35px;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.category-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 90px;
  height: 5px;
  border-radius: 20px;
  background: linear-gradient( 90deg, #ffffff, #d1fae5, #ffffff );
  box-shadow: 0 0 12px rgba(255,255,255,.45), 0 0 25px rgba(4,120,87,.45);
  animation: underlineGlow 3s infinite ease-in-out;
}
@keyframes underlineGlow {
  0%,100% {
    width: 70px;
    opacity: .7;
  }
  50% {
    width: 120px;
    opacity: 1;
  }
}
.netflix-wrapper {
  width: 100%;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.netflix-track {
  display: flex;
  align-items: center;
  gap: 35px;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.netflix-card {
  flex: 0 0 180px;
  opacity: .35;
  transform: scale(.75);
  transition: .5s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.netflix-card:hover {
  transform: none;
}
.netflix-card.prev, .netflix-card.next {
  opacity: .68;
  transform: scale(.9);
}
.netflix-card.active {
  opacity: 1;
  transform: scale(1.2);
  z-index: 5;
}
.netflix-card img {
  width: 135px;
  height: 135px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.80);
  background: #022c22;
  box-shadow: 0 20px 45px rgba(0,0,0,.50), 0 0 0 8px rgba(255,255,255,.06), 0 0 25px rgba(4,120,87,.15);
  transition: .5s ease;
}
.netflix-card.active img {
  width: 175px;
  height: 175px;
  border-color: #ffffff;
  box-shadow: 0 25px 60px rgba(0,0,0,.65), 0 0 25px rgba(255,255,255,.28), 0 0 50px rgba(4,120,87,.55), 0 0 0 8px rgba(255,255,255,.08);
}
.netflix-card p {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  color: #d1fae5;
  transition: .3s;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.netflix-card.active p {
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255,255,255,.30);
}
.netflix-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: .35s;
}
.dot:hover {
  background: rgba(255,255,255,.60);
}
.dot.active {
  width: 35px;
  border-radius: 30px;
  background: linear-gradient( 90deg, #ffffff, #d1fae5, #ffffff );
  box-shadow: 0 0 12px rgba(255,255,255,.45), 0 0 22px rgba(4,120,87,.45);
}
.empty-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  margin: 20px 0;
  text-align: center;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 100% );
  border: 1px dashed rgba(4,120,87,.30);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,44,34,.10);
  transition: .25s ease;
}
.empty-category i, .empty-category svg {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  color: #047857;
  padding: 16px;
  border-radius: 50%;
  background: rgba(4,120,87,.08);
  box-shadow: 0 8px 25px rgba(4,120,87,.10);
}
.empty-category h3 {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 800;
  color: #064e3b;
}
.empty-category p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #526b62;
  max-width: 320px;
}
.empty-category:hover {
  border-color: #047857;
  box-shadow: 0 15px 40px rgba(4,120,87,.15);
  transform: translateY(-2px);
}
@media (max-width:768px) {
  .netflix-category {
    padding: 40px 0 10px;
  }
  .category-title {
    font-size: 26px;
    letter-spacing: .7px;
  }
  .category-title::after {
    bottom: -10px;
    height: 4px;
  }
  .netflix-wrapper {
    height: 210px;
  }
  .netflix-track {
    gap: 18px;
  }
  .netflix-card {
    flex: 0 0 140px;
  }
  .netflix-card img {
    width: 100px;
    height: 100px;
  }
  .netflix-card.active img {
    width: 120px;
    height: 120px;
  }
  .netflix-card p {
    font-size: 15px;
  }
  .netflix-card.active p {
    font-size: 17px;
  }
  .netflix-dots {
    gap: 9px;
    margin-top: 15px;
  }
  .dot {
    width: 8px;
    height: 8px;
  }
  .dot.active {
    width: 28px;
  }
  .empty-category {
    padding: 30px 20px;
    margin: 15px 0;
  }
  .empty-category i, .empty-category svg {
    width: 56px;
    height: 56px;
    padding: 14px;
    margin-bottom: 15px;
  }
  .empty-category h3 {
    font-size: 20px;
  }
  .empty-category p {
    font-size: 14px;
  }
}
@media (max-width:480px) {
  .netflix-category {
    padding: 35px 0 8px;
  }
  .category-title {
    font-size: 23px;
  }
  .netflix-wrapper {
    height: 195px;
  }
  .netflix-track {
    gap: 12px;
  }
  .netflix-card {
    flex: 0 0 125px;
  }
  .netflix-card img {
    width: 90px;
    height: 90px;
  }
  .netflix-card.active img {
    width: 110px;
    height: 110px;
  }
  .netflix-card p {
    margin-top: 12px;
    font-size: 14px;
  }
  .netflix-card.active p {
    font-size: 16px;
  }
}
.studentsquare-registration-page- {
  --ss-primary: #16a34a;
  --ss-primary-dark: #15803d;
  --ss-secondary: #22c55e;
  --ss-accent: #10b981;
  --ss-dark: #0f172a;
  --ss-dark-soft: #1e293b;
  --ss-white: #ffffff;
  --ss-background: #f8fafc;
  --ss-border: #dbe4ee;
  --ss-input-accent: #16a34a;
  --ss-input-accent-light: rgba(22, 163, 74, 0.08);
  --ss-input-accent-glow: rgba(22, 163, 74, 0.14);
  --ss-danger: #dc2626;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.12), transparent 35% ), radial-gradient( circle at bottom right, rgba(16, 185, 129, 0.10), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #f8fafc 50%, #ecfdf5 100% );
  box-sizing: border-box;
}
.studentsquare-registration-page- *, .studentsquare-registration-page- *::before, .studentsquare-registration-page- *::after {
  box-sizing: border-box;
}
.studentsquare-registration-page-container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.studentsquare-registration-page-card {
  width: 100%;
  background: var(--ss-white);
  border: 1px solid rgba(219, 228, 238, 0.85);
  border-radius: 24px;
  padding: 48px 52px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.10), 0 8px 25px rgba(15, 23, 42, 0.05);
  animation: studentsquareRegistrationPageFadeUp 0.5s ease both;
}
@keyframes studentsquareRegistrationPageFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.studentsquare-registration-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 38px;
}
.studentsquare-registration-page-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient( 135deg, var(--ss-primary), var(--ss-accent) );
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
  animation: studentsquareRegistrationPageIconAnimation 0.7s ease both;
}
@keyframes studentsquareRegistrationPageIconAnimation {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.studentsquare-registration-page-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}
.studentsquare-registration-page-header h1 {
  margin: 0;
  color: var(--ss-dark);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.7px;
  text-align: center;
}
.studentsquare-registration-page-header p {
  margin: 12px auto 0;
  max-width: 500px;
  color: var(--ss-dark-soft);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.studentsquare-registration-page-form-wrapper {
  width: 100%;
}
.studentsquare-registration-page-form {
  width: 100%;
}
.studentsquare-registration-page-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.studentsquare-registration-page-full-width {
  grid-column: 1 / -1;
}
.studentsquare-registration-page-form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentsquare-registration-page-form-group label {
  display: block;
  margin-bottom: 9px;
  color: var(--ss-dark);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  text-align: left;
}
.studentsquare-registration-page-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.studentsquare-registration-page-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--ss-input-accent);
  pointer-events: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.studentsquare-registration-page-input-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-registration-page-form input[type="text"], .studentsquare-registration-page-form input[type="email"], .studentsquare-registration-page-form input[type="password"], .studentsquare-registration-page-form input[type="tel"], .studentsquare-registration-page-form input[type="number"], .studentsquare-registration-page-form textarea, .studentsquare-registration-page-form select {
  width: 100%;
  min-height: 58px;
  padding: 15px 18px 15px 50px;
  border: 1.5px solid var(--ss-border);
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  color: var(--ss-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.studentsquare-registration-page-form input::placeholder, .studentsquare-registration-page-form textarea::placeholder {
  color: #64748b;
  opacity: 1;
}
.studentsquare-registration-page-form input:hover, .studentsquare-registration-page-form textarea:hover, .studentsquare-registration-page-form select:hover {
  border-color: rgba(22, 163, 74, 0.45);
}
.studentsquare-registration-page-form input:focus, .studentsquare-registration-page-form textarea:focus, .studentsquare-registration-page-form select:focus {
  border-color: var(--ss-input-accent);
  background: #ffffff;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px var(--ss-input-accent-glow), 0 10px 25px rgba(22, 163, 74, 0.08);
  position: relative;
  z-index: 3;
}
.studentsquare-registration-page-input-wrapper:focus-within .studentsquare-registration-page-input-icon {
  color: var(--ss-primary);
  transform: translateY(-50%) scale(1.08);
}
.studentsquare-registration-page-form input[type="password"], .studentsquare-registration-page-form input[data-password-visible="true"] {
  padding-right: 58px;
}
.studentsquare-registration-page-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.studentsquare-registration-page-password-toggle:hover {
  background: var(--ss-input-accent-light);
  color: var(--ss-input-accent);
}
.studentsquare-registration-page-password-toggle:focus-visible {
  outline: 3px solid var(--ss-input-accent-glow);
  outline-offset: 2px;
}
.studentsquare-registration-page-password-toggle svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-registration-page-field-error {
  margin: 7px 0 0;
  color: var(--ss-danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.studentsquare-registration-page-error-box {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.05);
  text-align: center;
}
.studentsquare-registration-page-error-box p {
  margin: 0;
  color: var(--ss-danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.studentsquare-registration-page-terms {
  width: 100%;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid rgba(22, 163, 74, 0.14);
  border-radius: 14px;
  background: rgba(22, 163, 74, 0.045);
}
.studentsquare-registration-page-terms-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;
  color: var(--ss-dark);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
}
.studentsquare-registration-page-terms-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--ss-input-accent);
  cursor: pointer;
}
.studentsquare-registration-page-terms-label a {
  color: var(--ss-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-registration-page-terms-label a:hover {
  color: var(--ss-primary-dark);
  text-decoration: underline;
}
.studentsquare-registration-page-submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 15px 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 90deg, var(--ss-primary), var(--ss-accent) );
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.16);
  transform: none;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-registration-page-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.20), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-registration-page-submit:hover {
  transform: none;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
  filter: brightness(1.04);
}
.studentsquare-registration-page-submit:hover::before {
  left: 140%;
}
.studentsquare-registration-page-submit:active {
  transform: none;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}
.studentsquare-registration-page-submit svg {
  width: 19px;
  height: 19px;
  transition: transform 0.25s ease;
}
.studentsquare-registration-page-submit:hover svg {
  transform: translateX(3px);
}
.studentsquare-registration-page-submit:focus-visible {
  outline: 3px solid rgba(22, 163, 74, 0.20);
  outline-offset: 3px;
}
.studentsquare-registration-page-footer {
  margin-top: 28px;
  text-align: center;
}
.studentsquare-registration-page-footer p {
  margin: 0;
  color: var(--ss-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.studentsquare-registration-page-footer a {
  color: var(--ss-primary);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-registration-page-footer a:hover {
  color: var(--ss-primary-dark);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .studentsquare-registration-page- {
    min-height: auto;
    align-items: flex-start;
    padding: 35px 15px;
  }
  .studentsquare-registration-page-card {
    padding: 35px 25px;
    border-radius: 20px;
  }
  .studentsquare-registration-page-header {
    margin-bottom: 30px;
  }
  .studentsquare-registration-page-icon {
    width: 68px;
    height: 68px;
    border-radius: 19px;
  }
  .studentsquare-registration-page-header h1 {
    font-size: 28px;
  }
  .studentsquare-registration-page-header p {
    font-size: 15px;
  }
  .studentsquare-registration-page-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .studentsquare-registration-page-full-width {
    grid-column: auto;
  }
  .studentsquare-registration-page-form input[type="text"], .studentsquare-registration-page-form input[type="email"], .studentsquare-registration-page-form input[type="password"], .studentsquare-registration-page-form input[type="tel"], .studentsquare-registration-page-form input[type="number"], .studentsquare-registration-page-form textarea, .studentsquare-registration-page-form select {
    min-height: 55px;
    font-size: 16px;
  }
  .studentsquare-registration-page-terms-label {
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .studentsquare-registration-page- {
    padding: 20px 11px;
  }
  .studentsquare-registration-page-card {
    padding: 28px 18px;
    border-radius: 18px;
  }
  .studentsquare-registration-page-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
  }
  .studentsquare-registration-page-icon svg {
    width: 28px;
    height: 28px;
  }
  .studentsquare-registration-page-header h1 {
    font-size: 24px;
    letter-spacing: -0.4px;
  }
  .studentsquare-registration-page-header p {
    margin-top: 9px;
    font-size: 14px;
  }
  .studentsquare-registration-page-form-group label {
    font-size: 14px;
  }
  .studentsquare-registration-page-form input[type="text"], .studentsquare-registration-page-form input[type="email"], .studentsquare-registration-page-form input[type="password"], .studentsquare-registration-page-form input[type="tel"], .studentsquare-registration-page-form input[type="number"], .studentsquare-registration-page-form textarea, .studentsquare-registration-page-form select {
    min-height: 53px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
  }
  .studentsquare-registration-page-form input:focus, .studentsquare-registration-page-form textarea:focus, .studentsquare-registration-page-form select:focus {
    transform: scale(1.01);
  }
  .studentsquare-registration-page-input-icon {
    left: 14px;
  }
  .studentsquare-registration-page-input-icon svg {
    width: 18px;
    height: 18px;
  }
  .studentsquare-registration-page-password-toggle {
    right: 8px;
  }
  .studentsquare-registration-page-terms {
    padding: 13px;
  }
  .studentsquare-registration-page-terms-label {
    gap: 9px;
    font-size: 13px;
    line-height: 1.5;
  }
  .studentsquare-registration-page-submit {
    min-height: 55px;
    font-size: 15px;
  }
  .studentsquare-registration-page-footer p {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-registration-page-card, .studentsquare-registration-page-icon {
    animation: none;
  }
  .studentsquare-registration-page-form input, .studentsquare-registration-page-form textarea, .studentsquare-registration-page-form select, .studentsquare-registration-page-submit, .studentsquare-registration-page-password-toggle, .studentsquare-registration-page-submit svg {
    transition: none;
  }
}
.studentsquare-login-page- {
  --ss-primary: #16a34a;
  --ss-primary-dark: #15803d;
  --ss-secondary: #22c55e;
  --ss-accent: #10b981;
  --ss-dark: #0f172a;
  --ss-dark-soft: #1e293b;
  --ss-white: #ffffff;
  --ss-border: #dbe4ee;
  --ss-input-accent: #16a34a;
  --ss-input-accent-light: rgba(22, 163, 74, 0.08);
  --ss-input-accent-glow: rgba(22, 163, 74, 0.14);
  --ss-danger: #dc2626;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.12), transparent 35% ), radial-gradient( circle at bottom right, rgba(16, 185, 129, 0.10), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #f8fafc 50%, #ecfdf5 100% );
  box-sizing: border-box;
}
.studentsquare-login-page- *, .studentsquare-login-page- *::before, .studentsquare-login-page- *::after {
  box-sizing: border-box;
}
.studentsquare-login-page-container {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.studentsquare-login-page-card {
  width: 100%;
  background: var(--ss-white);
  border: 1px solid rgba(219, 228, 238, 0.85);
  border-radius: 24px;
  padding: 48px 52px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.10), 0 8px 25px rgba(15, 23, 42, 0.05);
  animation: studentsquareLoginPageFadeUp 0.5s ease both;
}
@keyframes studentsquareLoginPageFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.studentsquare-login-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 38px;
}
.studentsquare-login-page-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient( 135deg, var(--ss-primary), var(--ss-accent) );
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
  animation: studentsquareLoginPageIconAnimation 0.7s ease both;
}
@keyframes studentsquareLoginPageIconAnimation {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.studentsquare-login-page-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}
.studentsquare-login-page-header h1 {
  margin: 0;
  color: var(--ss-dark);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.7px;
  text-align: center;
}
.studentsquare-login-page-header p {
  margin: 12px auto 0;
  max-width: 460px;
  color: var(--ss-dark-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.studentsquare-login-page-form {
  width: 100%;
}
.studentsquare-login-page-form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}
.studentsquare-login-page-form-group label {
  display: block;
  margin-bottom: 9px;
  color: var(--ss-dark);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  text-align: left;
}
.studentsquare-login-page-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.studentsquare-login-page-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--ss-input-accent);
  pointer-events: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.studentsquare-login-page-input-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-login-page-form input[type="text"], .studentsquare-login-page-form input[type="email"], .studentsquare-login-page-form input[type="password"], .studentsquare-login-page-form input[type="tel"], .studentsquare-login-page-form input[type="number"] {
  width: 100%;
  min-height: 58px;
  padding: 15px 18px 15px 50px;
  border: 1.5px solid var(--ss-border);
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  color: var(--ss-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.studentsquare-login-page-form input::placeholder {
  color: #64748b;
  opacity: 1;
}
.studentsquare-login-page-form input:hover {
  border-color: rgba(22, 163, 74, 0.45);
}
.studentsquare-login-page-form input:focus {
  border-color: var(--ss-input-accent);
  background: #ffffff;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px var(--ss-input-accent-glow), 0 10px 25px rgba(22, 163, 74, 0.08);
  position: relative;
  z-index: 3;
}
.studentsquare-login-page-input-wrapper:focus-within .studentsquare-login-page-input-icon {
  color: var(--ss-primary);
  transform: translateY(-50%) scale(1.08);
}
.studentsquare-login-page-form input[type="password"], .studentsquare-login-page-form input[data-password-visible="true"] {
  padding-right: 58px;
}
.studentsquare-login-page-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.studentsquare-login-page-password-toggle:hover {
  background: var(--ss-input-accent-light);
  color: var(--ss-input-accent);
}
.studentsquare-login-page-password-toggle:focus-visible {
  outline: 3px solid var(--ss-input-accent-glow);
  outline-offset: 2px;
}
.studentsquare-login-page-password-toggle svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-login-page-field-error {
  margin: 7px 0 0;
  color: var(--ss-danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.studentsquare-login-page-error-box {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.05);
  text-align: center;
}
.studentsquare-login-page-error-box p {
  margin: 0;
  color: var(--ss-danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.studentsquare-login-page-forgot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -5px;
  margin-bottom: 25px;
  text-align: right;
}
.studentsquare-login-page-forgot a {
  color: var(--ss-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-login-page-forgot a:hover {
  color: var(--ss-primary-dark);
  text-decoration: underline;
}
.studentsquare-login-page-submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient( 90deg, var(--ss-primary), var(--ss-accent) );
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.16);
  transform: none;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-login-page-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.20), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-login-page-submit:hover {
  transform: none;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
  filter: brightness(1.04);
}
.studentsquare-login-page-submit:hover::before {
  left: 140%;
}
.studentsquare-login-page-submit:active {
  transform: none;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}
.studentsquare-login-page-submit svg {
  width: 19px;
  height: 19px;
  transition: transform 0.25s ease;
}
.studentsquare-login-page-submit:hover svg {
  transform: translateX(3px);
}
.studentsquare-login-page-submit:focus-visible {
  outline: 3px solid rgba(22, 163, 74, 0.20);
  outline-offset: 3px;
}
.studentsquare-login-page-footer {
  margin-top: 28px;
  text-align: center;
}
.studentsquare-login-page-footer p {
  margin: 0;
  color: var(--ss-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.studentsquare-login-page-footer a {
  color: var(--ss-primary);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-login-page-footer a:hover {
  color: var(--ss-primary-dark);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .studentsquare-login-page- {
    min-height: auto;
    align-items: flex-start;
    padding: 35px 15px;
  }
  .studentsquare-login-page-card {
    padding: 35px 25px;
    border-radius: 20px;
  }
  .studentsquare-login-page-header {
    margin-bottom: 30px;
  }
  .studentsquare-login-page-icon {
    width: 68px;
    height: 68px;
    border-radius: 19px;
  }
  .studentsquare-login-page-header h1 {
    font-size: 28px;
  }
  .studentsquare-login-page-header p {
    font-size: 15px;
  }
  .studentsquare-login-page-form input[type="text"], .studentsquare-login-page-form input[type="email"], .studentsquare-login-page-form input[type="password"], .studentsquare-login-page-form input[type="tel"], .studentsquare-login-page-form input[type="number"] {
    min-height: 55px;
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .studentsquare-login-page- {
    padding: 20px 11px;
  }
  .studentsquare-login-page-card {
    padding: 28px 18px;
    border-radius: 18px;
  }
  .studentsquare-login-page-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
  }
  .studentsquare-login-page-icon svg {
    width: 28px;
    height: 28px;
  }
  .studentsquare-login-page-header h1 {
    font-size: 24px;
    letter-spacing: -0.4px;
  }
  .studentsquare-login-page-header p {
    margin-top: 9px;
    font-size: 14px;
  }
  .studentsquare-login-page-form-group label {
    font-size: 14px;
  }
  .studentsquare-login-page-form input[type="text"], .studentsquare-login-page-form input[type="email"], .studentsquare-login-page-form input[type="password"], .studentsquare-login-page-form input[type="tel"], .studentsquare-login-page-form input[type="number"] {
    min-height: 53px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
  }
  .studentsquare-login-page-form input:focus {
    transform: scale(1.01);
  }
  .studentsquare-login-page-input-icon {
    left: 14px;
  }
  .studentsquare-login-page-input-icon svg {
    width: 18px;
    height: 18px;
  }
  .studentsquare-login-page-password-toggle {
    right: 8px;
  }
  .studentsquare-login-page-forgot {
    margin-bottom: 22px;
  }
  .studentsquare-login-page-forgot a {
    font-size: 13px;
  }
  .studentsquare-login-page-submit {
    min-height: 55px;
    font-size: 15px;
  }
  .studentsquare-login-page-footer p {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-login-page-card, .studentsquare-login-page-icon {
    animation: none;
  }
  .studentsquare-login-page-form input, .studentsquare-login-page-submit, .studentsquare-login-page-password-toggle, .studentsquare-login-page-submit svg {
    transition: none;
  }
}
.studentsquare-email-verification-page- {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.10), transparent 35% ), radial-gradient( circle at bottom right, rgba(16, 185, 129, 0.08), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100% );
  box-sizing: border-box;
}
.studentsquare-email-verification-page-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.studentsquare-email-verification-page-card {
  width: 100%;
  padding: 44px 40px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(20, 83, 45, 0.10), 0 8px 25px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  animation: studentsquare-email-verification-page-fade-in 0.55s ease forwards;
}
.studentsquare-email-verification-page-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid rgba(22, 163, 74, 0.15);
  color: #16a34a;
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.studentsquare-email-verification-page-icon:hover {
  transform: scale(1.04);
  box-shadow: 0 15px 32px rgba(22, 163, 74, 0.16);
}
.studentsquare-email-verification-page-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.8;
}
.studentsquare-email-verification-page-card h1 {
  margin: 0 0 18px;
  color: #14532d;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.studentsquare-email-verification-page-card > p {
  max-width: 430px;
  margin: 0 auto 14px;
  color: #1a2e22;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.studentsquare-email-verification-page-card > p strong {
  color: #0b5526;
  font-weight: 700;
}
.studentsquare-email-verification-page-note {
  width: 100%;
  margin: 26px 0;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid rgba(22, 163, 74, 0.16);
  color: #166534;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.studentsquare-email-verification-page-note svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: #0d7433;
  stroke-width: 2;
}
.studentsquare-email-verification-page-actions {
  width: 100%;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.studentsquare-email-verification-page-primary-btn {
  position: relative;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  border-radius: 11px;
  background: linear-gradient( 135deg, #16a34a, #15803d );
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.20);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-email-verification-page-primary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.24), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-email-verification-page-primary-btn:hover::before {
  left: 140%;
}
.studentsquare-email-verification-page-primary-btn:hover {
  transform: none;
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.25);
}
.studentsquare-email-verification-page-primary-btn:active {
  transform: none;
  filter: brightness(0.98);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}
.studentsquare-email-verification-page-secondary-btn {
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid #22c55e;
  border-radius: 11px;
  background: #ffffff;
  color: #15803d;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(22, 163, 74, 0.06);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.studentsquare-email-verification-page-secondary-btn:hover {
  transform: none;
  background: #f0fdf4;
  border-color: #16a34a;
  color: #166534;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.10);
}
.studentsquare-email-verification-page-secondary-btn:active {
  transform: none;
}
.studentsquare-email-verification-page-primary-btn:focus-visible, .studentsquare-email-verification-page-secondary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 10px 24px rgba(22, 163, 74, 0.15);
}
@keyframes studentsquare-email-verification-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-email-verification-page- {
    padding: 25px 15px;
  }
  .studentsquare-email-verification-page-card {
    padding: 35px 22px;
    border-radius: 18px;
  }
  .studentsquare-email-verification-page-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 21px;
  }
  .studentsquare-email-verification-page-icon svg {
    width: 33px;
    height: 33px;
  }
  .studentsquare-email-verification-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-email-verification-page-card > p {
    font-size: 14px;
    line-height: 1.65;
  }
  .studentsquare-email-verification-page-note {
    align-items: flex-start;
    text-align: left;
    padding: 14px;
  }
  .studentsquare-email-verification-page-actions {
    margin-top: 22px;
  }
  .studentsquare-email-verification-page-primary-btn, .studentsquare-email-verification-page-secondary-btn {
    min-height: 48px;
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .studentsquare-email-verification-page-card {
    padding: 30px 18px;
  }
  .studentsquare-email-verification-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-email-verification-page-note {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-email-verification-page-card {
    animation: none;
  }
  .studentsquare-email-verification-page-icon {
    transition: none;
  }
  .studentsquare-email-verification-page-primary-btn, .studentsquare-email-verification-page-secondary-btn {
    transition: none;
  }
  .studentsquare-email-verification-page-primary-btn::before {
    display: none;
  }
}
.studentsquare-resend-verification-page- {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.10), transparent 35% ), radial-gradient( circle at bottom right, rgba(16, 185, 129, 0.08), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100% );
}
.studentsquare-resend-verification-page-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.studentsquare-resend-verification-page-card {
  width: 100%;
  padding: 44px 40px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(20, 83, 45, 0.10), 0 8px 25px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  animation: studentsquare-resend-verification-page-fade-in 0.55s ease forwards;
}
.studentsquare-resend-verification-page-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid rgba(22, 163, 74, 0.15);
  color: #16a34a;
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.studentsquare-resend-verification-page-icon:hover {
  transform: scale(1.04);
  box-shadow: 0 15px 32px rgba(22, 163, 74, 0.16);
}
.studentsquare-resend-verification-page-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.8;
}
.studentsquare-resend-verification-page-card h1 {
  margin: 0 0 18px;
  color: #14532d;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.studentsquare-resend-verification-page-card > p {
  max-width: 430px;
  margin: 0 auto 28px;
  color: #365c46;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.studentsquare-resend-verification-page-form {
  width: 100%;
  margin: 0;
}
.studentsquare-resend-verification-page-form-group {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}
.studentsquare-resend-verification-page-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #14532d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.studentsquare-resend-verification-page-input-wrapper {
  position: relative;
  width: 100%;
}
.studentsquare-resend-verification-page-input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #16a34a;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.studentsquare-resend-verification-page-input-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-resend-verification-page-input-wrapper input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px 13px 47px;
  box-sizing: border-box;
  border: 1.5px solid #bbf7d0;
  border-radius: 11px;
  outline: none;
  background: #f7fdf8;
  color: #14532d;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.20s ease;
}
.studentsquare-resend-verification-page-input-wrapper input::placeholder {
  color: #6b8f78;
  opacity: 1;
}
.studentsquare-resend-verification-page-input-wrapper input:focus {
  border-color: #16a34a;
  background: #ffffff;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14), 0 10px 25px rgba(22, 163, 74, 0.08);
  position: relative;
  z-index: 3;
}
.studentsquare-resend-verification-page-input-wrapper input:-webkit-autofill, .studentsquare-resend-verification-page-input-wrapper input:-webkit-autofill:hover, .studentsquare-resend-verification-page-input-wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: #14532d;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.studentsquare-resend-verification-page-submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border: none;
  border-radius: 11px;
  background: linear-gradient( 135deg, #16a34a, #15803d );
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.20);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-resend-verification-page-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.24), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-resend-verification-page-submit:hover::before {
  left: 140%;
}
.studentsquare-resend-verification-page-submit:hover {
  transform: none;
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.25);
}
.studentsquare-resend-verification-page-submit:active {
  transform: none;
  filter: brightness(0.98);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}
.studentsquare-resend-verification-page-submit svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
.studentsquare-resend-verification-page-submit:hover svg {
  transform: translateX(3px);
}
.studentsquare-resend-verification-page-footer {
  margin-top: 25px;
  text-align: center;
}
.studentsquare-resend-verification-page-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #15803d;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-resend-verification-page-footer a:hover {
  color: #166534;
  text-decoration: underline;
}
.studentsquare-resend-verification-page-footer a svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}
.studentsquare-resend-verification-page-footer a:hover svg {
  transform: translateX(-2px);
}
.studentsquare-resend-verification-page-submit:focus-visible, .studentsquare-resend-verification-page-footer a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 10px 24px rgba(22, 163, 74, 0.15);
}
@keyframes studentsquare-resend-verification-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-resend-verification-page- {
    padding: 25px 15px;
  }
  .studentsquare-resend-verification-page-card {
    padding: 35px 22px;
    border-radius: 18px;
  }
  .studentsquare-resend-verification-page-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 21px;
  }
  .studentsquare-resend-verification-page-icon svg {
    width: 33px;
    height: 33px;
  }
  .studentsquare-resend-verification-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-resend-verification-page-card > p {
    font-size: 14px;
    line-height: 1.65;
  }
  .studentsquare-resend-verification-page-input-wrapper input {
    min-height: 50px;
    font-size: 14px;
  }
  .studentsquare-resend-verification-page-submit {
    min-height: 50px;
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .studentsquare-resend-verification-page-card {
    padding: 30px 18px;
  }
  .studentsquare-resend-verification-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-resend-verification-page-form-group label {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-resend-verification-page-card {
    animation: none;
  }
  .studentsquare-resend-verification-page-icon {
    transition: none;
  }
  .studentsquare-resend-verification-page-input-wrapper input {
    transition: none;
  }
  .studentsquare-resend-verification-page-submit {
    transition: none;
  }
  .studentsquare-resend-verification-page-submit::before {
    display: none;
  }
  .studentsquare-resend-verification-page-submit svg, .studentsquare-resend-verification-page-footer a svg {
    transition: none;
  }
}
.studentsquare-forgot-password-page- {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  box-sizing: border-box;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.10), transparent 35% ), radial-gradient( circle at bottom right, rgba(16, 185, 129, 0.08), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100% );
}
.studentsquare-forgot-password-page-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.studentsquare-forgot-password-page-card {
  width: 100%;
  padding: 44px 40px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(20, 83, 45, 0.10), 0 8px 25px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  animation: studentsquare-forgot-password-page-fade-in 0.55s ease forwards;
}
.studentsquare-forgot-password-page-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid rgba(22, 163, 74, 0.15);
  color: #16a34a;
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.studentsquare-forgot-password-page-icon:hover {
  transform: scale(1.04);
  box-shadow: 0 15px 32px rgba(22, 163, 74, 0.16);
}
.studentsquare-forgot-password-page-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.8;
}
.studentsquare-forgot-password-page-card h1 {
  margin: 0 0 18px;
  color: #0c331c;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.studentsquare-forgot-password-page-card > p {
  max-width: 430px;
  margin: 0 auto 28px;
  color: #1d3125;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.studentsquare-forgot-password-page-form {
  width: 100%;
  margin: 0;
}
.studentsquare-forgot-password-page-form-group {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}
.studentsquare-forgot-password-page-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0d361d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.studentsquare-forgot-password-page-input-wrapper {
  position: relative;
  width: 100%;
}
.studentsquare-forgot-password-page-input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.studentsquare-forgot-password-page-input-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.studentsquare-forgot-password-page-input-wrapper input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px 13px 47px;
  box-sizing: border-box;
  border: 1.5px solid #bbf7d0;
  border-radius: 11px;
  outline: none;
  background: #f7fdf8;
  color: #14532d;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.20s ease;
}
.studentsquare-forgot-password-page-input-wrapper input::placeholder {
  color: #6b8f78;
  opacity: 1;
}
.studentsquare-forgot-password-page-input-wrapper input:focus {
  border-color: #16a34a;
  background: #ffffff;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14), 0 10px 25px rgba(22, 163, 74, 0.08);
  position: relative;
  z-index: 3;
}
.studentsquare-forgot-password-page-input-wrapper input:-webkit-autofill, .studentsquare-forgot-password-page-input-wrapper input:-webkit-autofill:hover, .studentsquare-forgot-password-page-input-wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: #14532d;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.studentsquare-forgot-password-page-submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border: none;
  border-radius: 11px;
  background: linear-gradient( 135deg, #16a34a, #15803d );
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.20);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-forgot-password-page-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.24), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-forgot-password-page-submit:hover::before {
  left: 140%;
}
.studentsquare-forgot-password-page-submit:hover {
  transform: none;
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.25);
}
.studentsquare-forgot-password-page-submit:active {
  transform: none;
  filter: brightness(0.98);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}
.studentsquare-forgot-password-page-submit svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
.studentsquare-forgot-password-page-submit:hover svg {
  transform: translateX(3px);
}
.studentsquare-forgot-password-page-footer {
  margin-top: 25px;
  text-align: center;
}
.studentsquare-forgot-password-page-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #15803d;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.studentsquare-forgot-password-page-footer a:hover {
  color: #166534;
  text-decoration: underline;
}
.studentsquare-forgot-password-page-footer a svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}
.studentsquare-forgot-password-page-footer a:hover svg {
  transform: translateX(-2px);
}
.studentsquare-forgot-password-page-submit:focus-visible, .studentsquare-forgot-password-page-footer a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 10px 24px rgba(22, 163, 74, 0.15);
}
@keyframes studentsquare-forgot-password-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-forgot-password-page- {
    padding: 25px 15px;
  }
  .studentsquare-forgot-password-page-card {
    padding: 35px 22px;
    border-radius: 18px;
  }
  .studentsquare-forgot-password-page-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 21px;
  }
  .studentsquare-forgot-password-page-icon svg {
    width: 33px;
    height: 33px;
  }
  .studentsquare-forgot-password-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-forgot-password-page-card > p {
    font-size: 14px;
    line-height: 1.65;
  }
  .studentsquare-forgot-password-page-input-wrapper input {
    min-height: 50px;
    font-size: 14px;
  }
  .studentsquare-forgot-password-page-submit {
    min-height: 50px;
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .studentsquare-forgot-password-page-card {
    padding: 30px 18px;
  }
  .studentsquare-forgot-password-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-forgot-password-page-form-group label {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-forgot-password-page-card {
    animation: none;
  }
  .studentsquare-forgot-password-page-icon {
    transition: none;
  }
  .studentsquare-forgot-password-page-input-wrapper input {
    transition: none;
  }
  .studentsquare-forgot-password-page-submit {
    transition: none;
  }
  .studentsquare-forgot-password-page-submit::before {
    display: none;
  }
  .studentsquare-forgot-password-page-submit svg, .studentsquare-forgot-password-page-footer a svg {
    transition: none;
  }
}
.studentsquare-password-reset-page- {
  --ss-primary: #13883e;
  --ss-primary-dark: #116931;
  --ss-secondary: #16833e;
  --ss-accent: #0a704e;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.12), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #f7fff9 50%, #ecfdf5 100% );
}
.studentsquare-password-reset-page-container {
  width: 100%;
  max-width: 520px;
  display: flex;
  justify-content: center;
}
.studentsquare-password-reset-page-card {
  position: relative;
  width: 100%;
  padding: 40px 38px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(22, 101, 52, 0.10), 0 8px 24px rgba(22, 101, 52, 0.06);
  overflow: hidden;
  animation: studentsquare-password-reset-card-enter 0.45s ease-out both;
}
.studentsquare-password-reset-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient( 90deg, var(--ss-primary), var(--ss-secondary), var(--ss-accent) );
}
.studentsquare-password-reset-page-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid #bbf7d0;
  color: var(--ss-primary);
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.10);
}
.studentsquare-password-reset-page-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.8;
}
.studentsquare-password-reset-page-card h1 {
  margin: 0 0 12px;
  color: #0a2b17;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-align: center;
}
.studentsquare-password-reset-page-card > p {
  max-width: 430px;
  margin: 0 auto 14px;
  color: #121f17;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.studentsquare-password-reset-page-card > p:last-of-type {
  margin-bottom: 20px;
}
.studentsquare-password-reset-page-note {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 13px 15px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #0c361c;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}
.studentsquare-password-reset-page-note svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ss-primary);
  stroke-width: 2;
}
.studentsquare-password-reset-page-actions {
  width: 100%;
}
.studentsquare-password-reset-page-primary-btn {
  position: relative;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: linear-gradient( 135deg, var(--ss-primary), var(--ss-primary-dark) );
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-password-reset-page-primary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.22), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-password-reset-page-primary-btn:hover {
  transform: none;
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
}
.studentsquare-password-reset-page-primary-btn:hover::before {
  left: 140%;
}
.studentsquare-password-reset-page-primary-btn:active {
  transform: none;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}
.studentsquare-password-reset-page-primary-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
.studentsquare-password-reset-page-primary-btn:hover svg {
  transform: translateX(-3px);
}
.studentsquare-password-reset-page-primary-btn:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.30);
  outline-offset: 3px;
}
@keyframes studentsquare-password-reset-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-password-reset-page- {
    padding: 16px;
  }
  .studentsquare-password-reset-page-card {
    padding: 34px 24px;
    border-radius: 19px;
  }
  .studentsquare-password-reset-page-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 19px;
  }
  .studentsquare-password-reset-page-icon svg {
    width: 32px;
    height: 32px;
  }
  .studentsquare-password-reset-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-password-reset-page-card > p {
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .studentsquare-password-reset-page- {
    padding: 12px;
  }
  .studentsquare-password-reset-page-card {
    padding: 30px 20px;
  }
  .studentsquare-password-reset-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-password-reset-page-note {
    font-size: 12px;
    padding: 11px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-password-reset-page-card {
    animation: none;
  }
  .studentsquare-password-reset-page-primary-btn, .studentsquare-password-reset-page-primary-btn::before, .studentsquare-password-reset-page-primary-btn svg {
    transition: none;
  }
}
.studentsquare-reset-password-page- {
  --ss-primary: #11813a;
  --ss-primary-dark: #15803d;
  --ss-secondary: #116b32;
  --ss-accent: #0b7250;
  --ss-input-border: #bbf7d0;
  --ss-input-background: #f7fdf8;
  --ss-input-accent: #0e6b30;
  --ss-input-accent-glow: rgba(34, 197, 94, 0.16);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.12), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #f7fff9 50%, #ecfdf5 100% );
}
.studentsquare-reset-password-page-container {
  width: 100%;
  max-width: 520px;
}
.studentsquare-reset-password-page-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 38px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 22px;
  box-shadow: 0 25px 60px rgba(22, 101, 52, 0.10), 0 8px 24px rgba(22, 101, 52, 0.06);
  overflow: hidden;
  animation: studentsquare-reset-password-card-enter 0.45s ease-out both;
}
.studentsquare-reset-password-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient( 90deg, var(--ss-primary), var(--ss-secondary), var(--ss-accent) );
}
.studentsquare-reset-password-page-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid #bbf7d0;
  color: var(--ss-primary);
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.10);
}
.studentsquare-reset-password-page-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.8;
}
.studentsquare-reset-password-page-card h1 {
  margin: 0 0 10px;
  color: #14532d;
  font-size: 29px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-align: center;
}
.studentsquare-reset-password-page-card > p {
  margin: 0 auto 22px;
  color: #365c46;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}
.studentsquare-reset-password-page-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 11px;
  background: #f7f7f7;
  color: #7a0c12;
  font-size: 13px;
  line-height: 1.5;
}
.studentsquare-reset-password-page-message svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ss-primary);
}
.studentsquare-reset-password-page-form {
  width: 100%;
}
.studentsquare-reset-password-page-form-group {
  margin-bottom: 19px;
}
.studentsquare-reset-password-page-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #14532d;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}
.studentsquare-reset-password-page-input-wrapper {
  position: relative;
  width: 100%;
}
.studentsquare-reset-password-page-input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d7c5d;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.studentsquare-reset-password-page-input-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
.studentsquare-reset-password-page-input-wrapper input {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 13px 52px 13px 46px;
  border: 1px solid var(--ss-input-border);
  border-radius: 11px;
  background: var(--ss-input-background);
  color: #163d26;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.studentsquare-reset-password-page-input-wrapper input::placeholder {
  color: #7a9b85;
}
.studentsquare-reset-password-page-input-wrapper input:hover {
  border-color: #86efac;
}
.studentsquare-reset-password-page-input-wrapper input:focus {
  border-color: var(--ss-input-accent);
  background: #ffffff;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px var(--ss-input-accent-glow), 0 10px 25px rgba(22, 163, 74, 0.08);
  position: relative;
  z-index: 3;
}
.studentsquare-reset-password-page-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4d7c5d;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  z-index: 6;
  transition: background 0.2s ease, color 0.2s ease;
}
.studentsquare-reset-password-page-password-toggle:hover {
  background: #dcfce7;
  color: var(--ss-primary-dark);
  transform: translateY(-50%);
}
.studentsquare-reset-password-page-password-toggle:active {
  transform: translateY(-50%);
}
.studentsquare-reset-password-page-password-toggle:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.35);
  outline-offset: 2px;
}
.studentsquare-reset-password-page-password-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
  stroke-width: 1.9;
  opacity: 1;
  visibility: visible;
}
.studentsquare-reset-password-page-submit {
  position: relative;
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  padding: 13px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: linear-gradient( 135deg, var(--ss-primary), var(--ss-primary-dark) );
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-reset-password-page-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.22), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-reset-password-page-submit:hover {
  transform: none;
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
}
.studentsquare-reset-password-page-submit:hover::before {
  left: 140%;
}
.studentsquare-reset-password-page-submit:active {
  transform: none;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}
.studentsquare-reset-password-page-submit:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.30);
  outline-offset: 3px;
}
.studentsquare-reset-password-page-submit svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
.studentsquare-reset-password-page-submit:hover svg {
  transform: translateX(3px);
}
@keyframes studentsquare-reset-password-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-reset-password-page- {
    padding: 16px;
  }
  .studentsquare-reset-password-page-card {
    padding: 34px 24px;
    border-radius: 19px;
  }
  .studentsquare-reset-password-page-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
  }
  .studentsquare-reset-password-page-icon svg {
    width: 32px;
    height: 32px;
  }
  .studentsquare-reset-password-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-reset-password-page-card > p {
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .studentsquare-reset-password-page- {
    padding: 12px;
  }
  .studentsquare-reset-password-page-card {
    padding: 30px 20px;
  }
  .studentsquare-reset-password-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-reset-password-page-input-wrapper input {
    min-height: 48px;
    padding-left: 44px;
    padding-right: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-reset-password-page-card {
    animation: none;
  }
  .studentsquare-reset-password-page-input-wrapper input, .studentsquare-reset-password-page-submit, .studentsquare-reset-password-page-submit::before, .studentsquare-reset-password-page-submit svg, .studentsquare-reset-password-page-password-toggle {
    transition: none;
  }
}
.studentsquare-password-changed-page- {
  --ss-primary: #16a34a;
  --ss-primary-dark: #15803d;
  --ss-secondary: #22c55e;
  --ss-accent: #10b981;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient( circle at top left, rgba(34, 197, 94, 0.12), transparent 35% ), linear-gradient( 135deg, #f0fdf4 0%, #f7fff9 50%, #ecfdf5 100% );
}
.studentsquare-password-changed-page-container {
  width: 100%;
  max-width: 520px;
}
.studentsquare-password-changed-page-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 38px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(22, 101, 52, 0.10), 0 8px 24px rgba(22, 101, 52, 0.06);
  overflow: hidden;
  animation: studentsquare-password-changed-card-enter 0.45s ease-out both;
}
.studentsquare-password-changed-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient( 90deg, var(--ss-primary), var(--ss-secondary), var(--ss-accent) );
}
.studentsquare-password-changed-page-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #dcfce7, #d1fae5 );
  border: 1px solid #bbf7d0;
  color: var(--ss-primary);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
}
.studentsquare-password-changed-page-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.9;
}
.studentsquare-password-changed-page-card h1 {
  margin: 0 0 12px;
  color: #14532d;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-align: center;
}
.studentsquare-password-changed-page-card > p {
  max-width: 430px;
  margin: 0 auto 10px;
  color: #365c46;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.studentsquare-password-changed-page-card > p:last-of-type {
  margin-bottom: 21px;
}
.studentsquare-password-changed-page-success {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 25px;
  padding: 13px 15px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #166534;
  font-size: 13px;
  line-height: 1.5;
}
.studentsquare-password-changed-page-success svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--ss-primary);
  stroke-width: 2;
}
.studentsquare-password-changed-page-actions {
  width: 100%;
}
.studentsquare-password-changed-page-primary-btn {
  position: relative;
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: linear-gradient( 135deg, var(--ss-primary), var(--ss-primary-dark) );
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.studentsquare-password-changed-page-primary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.22), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.studentsquare-password-changed-page-primary-btn:hover {
  transform: none;
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.22);
}
.studentsquare-password-changed-page-primary-btn:hover::before {
  left: 140%;
}
.studentsquare-password-changed-page-primary-btn:active {
  transform: none;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}
.studentsquare-password-changed-page-primary-btn:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.30);
  outline-offset: 3px;
}
.studentsquare-password-changed-page-primary-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
.studentsquare-password-changed-page-primary-btn:hover svg {
  transform: translateX(3px);
}
@keyframes studentsquare-password-changed-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .studentsquare-password-changed-page- {
    padding: 16px;
  }
  .studentsquare-password-changed-page-card {
    padding: 34px 24px;
    border-radius: 19px;
  }
  .studentsquare-password-changed-page-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
  }
  .studentsquare-password-changed-page-icon svg {
    width: 35px;
    height: 35px;
  }
  .studentsquare-password-changed-page-card h1 {
    font-size: 26px;
  }
  .studentsquare-password-changed-page-card > p {
    font-size: 14px;
  }
  .studentsquare-password-changed-page-success {
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .studentsquare-password-changed-page- {
    padding: 12px;
  }
  .studentsquare-password-changed-page-card {
    padding: 30px 20px;
  }
  .studentsquare-password-changed-page-card h1 {
    font-size: 24px;
  }
  .studentsquare-password-changed-page-success {
    padding: 11px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-password-changed-page-card {
    animation: none;
  }
  .studentsquare-password-changed-page-primary-btn, .studentsquare-password-changed-page-primary-btn::before, .studentsquare-password-changed-page-primary-btn svg {
    transition: none;
  }
}
.user-profile-page {
  --profile-green-dark: #064e3b;
  --profile-green: #047857;
  --profile-green-mid: #065f46;
  --profile-border: #a7f3d0;
  --profile-border-light: #d1fae5;
  --profile-white: #ffffff;
  --profile-black: #111111;
  --profile-accent: linear-gradient(
        90deg,
        #064e3b 0%,
        #047857 45%,
        #065f46 72%,
        #064e3b 100%
    );
  width: min(1100px, 94%);
  margin: 45px auto 60px;
  color: var(--profile-black);
}
.user-profile-page h1, .user-profile-page h2, .user-profile-page h3, .user-profile-page p {
  color: var(--profile-black);
}
.user-profile-page h1, .user-profile-page h2 {
  text-align: center;
}
.user-profile-page p {
  line-height: 1.6;
}
.user-profile-page .user-profile-accent {
  background: var(--profile-accent);
}
.user-profile-page .profile-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 35px;
  padding: 35px 25px;
  border: 1px solid var(--profile-border);
  border-radius: 20px;
  background: var(--profile-white);
  box-shadow: 0 10px 30px rgba(6, 78, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.user-profile-page .profile-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--profile-accent);
}
.user-profile-page .profile-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--profile-accent);
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.22), inset 0 2px 2px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.user-profile-page .profile-avatar::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -100%;
  width: 55%;
  height: 150%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.6), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}
.user-profile-page .profile-header:hover .profile-avatar::after {
  left: 140%;
}
.user-profile-page .profile-header-info {
  width: 100%;
}
.user-profile-page .profile-header-info h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  color: var(--profile-green-dark);
}
.user-profile-page .profile-header-info p {
  margin: 0 0 16px;
  color: var(--profile-black);
  font-size: 15px;
  font-weight: 600;
}
.user-profile-page .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.user-profile-page .status.verified {
  background: #d1fae5;
  color: var(--profile-green-dark);
  border: 1px solid var(--profile-border);
}
.user-profile-page .status.unverified {
  background: #ecfdf5;
  color: var(--profile-green-mid);
  border: 1px solid var(--profile-border);
}
.user-profile-page .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.user-profile-page .stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 95px;
  padding: 20px;
  border: 1px solid var(--profile-border-light);
  border-radius: 16px;
  background: var(--profile-white);
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.user-profile-page .stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.55), transparent );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.user-profile-page .stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--profile-accent);
  border-radius: 16px 0 0 16px;
}
.user-profile-page .stat-card:hover {
  border-color: #6ee7b7;
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.user-profile-page .stat-card:hover::before {
  left: 145%;
}
.user-profile-page .stat-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--profile-accent);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(6, 78, 59, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.user-profile-page .stat-icon::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -100%;
  width: 60%;
  height: 180%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.6), transparent );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.user-profile-page .stat-card:hover .stat-icon::after {
  left: 150%;
}
.user-profile-page .stat-label {
  display: block;
  margin-bottom: 5px;
  color: var(--profile-black);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.user-profile-page .stat-value {
  display: block;
  color: var(--profile-green-dark);
  font-size: 21px;
  font-weight: 800;
}
.user-profile-page .profile-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  padding: 30px;
  border: 1px solid var(--profile-border-light);
  border-radius: 18px;
  background: var(--profile-white);
  box-shadow: 0 7px 22px rgba(6, 78, 59, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.user-profile-page .profile-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--profile-accent);
}
.user-profile-page .section-heading {
  margin-bottom: 28px;
  text-align: center;
}
.user-profile-page .section-heading h2 {
  margin: 0 0 8px;
  color: var(--profile-green-dark);
  font-size: 23px;
  font-weight: 800;
}
.user-profile-page .section-heading p {
  margin: 0 auto;
  max-width: 650px;
  color: var(--profile-black);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.user-profile-page .account-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.user-profile-page .detail-item {
  padding: 17px 18px;
  border: 1px solid var(--profile-border-light);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.user-profile-page .detail-item:hover {
  border-color: #6ee7b7;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.06);
}
.user-profile-page .detail-label {
  display: block;
  margin-bottom: 7px;
  color: var(--profile-black);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.user-profile-page .detail-value {
  display: block;
  color: var(--profile-green-dark);
  font-size: 15px;
  font-weight: 800;
  word-break: break-word;
}
.user-profile-page .profile-section form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.user-profile-page .form-group {
  display: flex;
  flex-direction: column;
}
.user-profile-page .form-group label {
  margin-bottom: 8px;
  color: var(--profile-black);
  font-size: 14px;
  font-weight: 800;
}
.user-profile-page .profile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1px solid var(--profile-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--profile-black);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.user-profile-page .profile-input::placeholder {
  color: var(--profile-black);
  opacity: 0.65;
}
.user-profile-page .profile-input:hover {
  border-color: #6ee7b7;
}
.user-profile-page .profile-input:focus {
  border-color: var(--profile-green);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.13);
}
.user-profile-page .form-error {
  margin-top: 7px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
}
.user-profile-page form > .form-error {
  grid-column: 1 / -1;
}
.user-profile-page .btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 9px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  isolation: isolate;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.user-profile-page .btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -130%;
  width: 70%;
  height: 140%;
  background: linear-gradient( 110deg, transparent 10%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.15) 65%, transparent 90% );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 1;
}
.user-profile-page .btn:hover::before {
  left: 150%;
}
.user-profile-page .btn:hover {
  filter: brightness(1.08);
}
.user-profile-page .btn:active {
  filter: brightness(0.98);
}
.user-profile-page .btn:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
.user-profile-page .btn-primary {
  background: var(--profile-accent);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.user-profile-page .btn-primary:hover {
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.user-profile-page .btn-secondary {
  background: var(--profile-accent);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.user-profile-page .btn-secondary:hover {
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.user-profile-page .profile-section form > .btn {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 170px;
}
.user-profile-page .security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 20px;
  border: 1px solid var(--profile-border-light);
  border-radius: 14px;
  background: #ffffff;
}
.user-profile-page .security-item h3 {
  margin: 0 0 7px;
  color: var(--profile-green-dark);
  font-size: 17px;
  font-weight: 800;
}
.user-profile-page .security-item p {
  margin: 0;
  color: var(--profile-black);
  font-size: 14px;
  font-weight: 600;
}
.user-profile-page .messages {
  margin-bottom: 25px;
}
.user-profile-page .message {
  padding: 14px 17px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.user-profile-page .message.success {
  background: #d1fae5;
  color: var(--profile-green-dark);
  border: 1px solid var(--profile-border);
}
.user-profile-page .profile-input:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.18);
  outline-offset: 2px;
}
@media (max-width: 900px) {
  .user-profile-page .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .user-profile-page .account-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .user-profile-page {
    width: 94%;
    margin: 30px auto 45px;
  }
  .user-profile-page .profile-header {
    padding: 30px 20px;
  }
  .user-profile-page .profile-stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .user-profile-page .profile-section {
    padding: 24px 20px;
  }
  .user-profile-page .account-details {
    grid-template-columns: 1fr;
  }
  .user-profile-page .profile-section form {
    grid-template-columns: 1fr;
  }
  .user-profile-page .security-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .user-profile-page .security-item .btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .user-profile-page {
    width: 92%;
    margin: 25px auto 40px;
  }
  .user-profile-page .profile-header {
    padding: 25px 17px;
  }
  .user-profile-page .profile-avatar {
    width: 68px;
    height: 68px;
    font-size: 25px;
  }
  .user-profile-page .profile-header-info h1 {
    font-size: 25px;
  }
  .user-profile-page .profile-header-info p {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .user-profile-page .profile-stats {
    grid-template-columns: 1fr;
  }
  .user-profile-page .stat-card {
    min-height: 85px;
    padding: 17px;
  }
  .user-profile-page .profile-section {
    padding: 22px 17px;
  }
  .user-profile-page .section-heading h2 {
    font-size: 21px;
  }
  .user-profile-page .security-item {
    padding: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .user-profile-page .btn, .user-profile-page .btn::before, .user-profile-page .stat-card, .user-profile-page .stat-card::before, .user-profile-page .stat-icon::after, .user-profile-page .profile-avatar::after, .user-profile-page .profile-input, .user-profile-page .detail-item {
    transition: none;
  }
}
.cart-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 76px;
  padding: 14px 58px 14px 58px;
  background: linear-gradient( 135deg, #f0fdf4, #ecfdf5 55%, #ffffff );
  border-bottom: 1px solid #dceee3;
  box-shadow: 0 3px 12px rgba(15, 138, 75, 0.06);
  box-sizing: border-box;
}
.cart-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}
.cart-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient( 135deg, #0f8a4b, #22c55e );
  color: #ffffff;
  box-shadow: 0 6px 15px rgba(15, 138, 75, 0.2);
}
.cart-header-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.cart-header h3 {
  margin: 0;
  color: #123b27;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
}
.cart-close {
  position: absolute;
  top: 50%;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #d6eadf;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #3d6250;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 60, 35, 0.06);
}
.cart-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.cart-close:active {
  transform: translateY(-50%) scale(0.96);
}
@media (max-width: 480px) {
  .cart-header {
    min-height: 68px;
    padding: 12px 54px;
  }
  .cart-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .cart-header-icon svg {
    width: 17px;
    height: 17px;
  }
  .cart-header h3 {
    font-size: 1.05rem;
  }
  .cart-header-title {
    gap: 9px;
  }
  .cart-close {
    right: 12px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
  }
  .cart-close svg {
    width: 17px;
    height: 17px;
  }
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cart-item:hover {
  background: #f8fafc;
  border-color: #d1d5db;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.cart-item-img {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 14px;
  transition: background 0.25s ease;
}
.cart-item:hover .cart-item-img {
  background: #e2e8f0;
}
.cart-item-info {
  flex: 1;
}
.cart-item-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111827;
  letter-spacing: 0.25px;
}
.cart-item-info p {
  font-size: 14px;
  font-weight: 700;
  color: #065f1a;
  opacity: 0.8;
}
.qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.qty button {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.qty button:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.qty button:active {
  transform: scale(0.94);
}
.qty span {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  min-width: 24px;
  text-align: center;
}
.remove-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.remove-item svg {
  stroke: #ef4444;
  transition: stroke 0.25s ease, transform 0.2s ease;
}
.remove-item:hover {
  background: #fef2f2;
  border-color: #fecaca;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.remove-item:hover svg {
  stroke: #dc2626;
  transform: rotate(8deg);
}
.remove-item:active {
  transform: scale(0.94);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.cart-total span {
  font-size: 14px;
  font-weight: 500;
  color: #111214;
}
.cart-total strong {
  font-size: 16px;
  font-weight: 700;
  color: #04911b;
  letter-spacing: 0.3px;
}
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-flex;
}
.htmx-request .cart-icon {
  display: none;
}
.cart-loading {
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
:root {
  --order-check-out-page-primary: #0F8A4B;
  --order-check-out-page-primary-dark: #086338;
  --order-check-out-page-primary-light: #EAF8F0;
  --order-check-out-page-accent: #22C55E;
  --order-check-out-page-accent-light: #BBF7D0;
  --order-check-out-page-success: #16A34A;
  --order-check-out-page-warning: #F59E0B;
  --order-check-out-page-danger: #EF4444;
  --order-check-out-page-background: #F5F8F6;
  --order-check-out-page-surface: #FFFFFF;
  --order-check-out-page-surface-2: #F9FCFA;
  --order-check-out-page-text: #07150E;
  --order-check-out-page-text-light: #26372F;
  --order-check-out-page-text-muted: #42534B;
  --order-check-out-page-border: #DDE8E1;
  --order-check-out-page-border-light: #E8F0EB;
  --order-check-out-page-radius-sm: 14px;
  --order-check-out-page-radius: 20px;
  --order-check-out-page-radius-lg: 28px;
  --order-check-out-page-shadow-sm: 0 6px 20px rgba(15, 23, 42, .05);
  --order-check-out-page-shadow: 0 16px 45px rgba(15, 23, 42, .07);
  --order-check-out-page-shadow-lg: 0 24px 65px rgba(15, 23, 42, .10);
  --order-check-out-page-transition: .25s ease;
}
.order-check-out-page-wrapper *, .order-check-out-page-wrapper *::before, .order-check-out-page-wrapper *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.order-check-out-page-wrapper img {
  max-width: 100%;
  display: block;
}
.order-check-out-page-wrapper input, .order-check-out-page-wrapper button, .order-check-out-page-wrapper textarea, .order-check-out-page-wrapper select {
  font: inherit;
}
.order-check-out-page-wrapper {
  min-height: 100vh;
  padding: 42px 32px 70px;
  background: radial-gradient( circle at 0% 0%, rgba(34, 197, 94, .09), transparent 34% ), radial-gradient( circle at 100% 10%, rgba(15, 138, 75, .07), transparent 32% ), linear-gradient( 180deg, #FAFCFB 0%, #F2F7F4 100% );
  color: var(--order-check-out-page-text);
}
.order-check-out-page-top {
  width: min(1500px, 100%);
  margin: 0 auto 32px;
  padding: 30px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  background: #FFFFFF;
  border: 1px solid var(--order-check-out-page-border-light);
  border-radius: var(--order-check-out-page-radius-lg);
  box-shadow: var(--order-check-out-page-shadow);
}
.order-check-out-page-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.order-check-out-page-brand-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient( 135deg, var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
  color: #FFFFFF;
  font-size: 1.7rem;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(15, 138, 75, .20);
}
.order-check-out-page-brand h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--order-check-out-page-text);
}
.order-check-out-page-brand p {
  margin-top: 7px;
  color: var(--order-check-out-page-text-light);
  font-size: .9rem;
  line-height: 1.5;
}
.order-check-out-page-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
}
.order-check-out-page-progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--order-check-out-page-text-light);
  font-size: .82rem;
  font-weight: 800;
}
.order-check-out-page-progress-item span {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E8F0EB;
  color: var(--order-check-out-page-text-light);
  font-size: .82rem;
  font-weight: 900;
}
.order-check-out-page-progress-item.active {
  color: var(--order-check-out-page-primary);
}
.order-check-out-page-progress-item.active span {
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
}
.order-check-out-page-progress-line {
  width: 45px;
  height: 2px;
  background: var(--order-check-out-page-border);
}
.order-check-out-page-alert {
  width: min(1500px, 100%);
  margin: 0 auto 25px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, .20);
  background: #FFF5F5;
  color: #B91C1C;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}
.order-check-out-page-container {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 28px;
  align-items: start;
}
.order-check-out-page-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.order-check-out-page-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.order-check-out-page-side {
  position: sticky;
  top: 24px;
}
.order-check-out-page-card {
  position: relative;
  padding: 30px;
  background: #FFFFFF;
  border: 1px solid var(--order-check-out-page-border-light);
  border-radius: var(--order-check-out-page-radius-lg);
  box-shadow: var(--order-check-out-page-shadow);
}
.order-check-out-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient( 90deg, var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
  border-radius: var(--order-check-out-page-radius-lg) var(--order-check-out-page-radius-lg) 0 0;
}
.order-check-out-page-card-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 30px;
}
.order-check-out-page-card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}
.order-check-out-page-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient( 135deg, var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(15, 138, 75, .18);
}
.order-check-out-page-card-icon svg {
  width: 25px;
  height: 25px;
}
.order-check-out-page-card-title h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--order-check-out-page-text);
  text-align: center;
}
.order-check-out-page-card-title p {
  margin-top: 6px;
  color: var(--order-check-out-page-text-light);
  font-size: .88rem;
  line-height: 1.55;
  text-align: center;
}
.order-check-out-page-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: #E7F8ED;
  color: #11733D;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.order-check-out-page-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.order-check-out-page-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.order-check-out-page-field-full {
  grid-column: 1 / -1;
}
.order-check-out-page-field label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--order-check-out-page-text);
  font-size: .86rem;
  font-weight: 850;
  text-align: center;
}
.order-check-out-page-field label svg {
  width: 17px;
  height: 17px;
  color: var(--order-check-out-page-primary);
}
.order-check-out-page-field label span {
  color: var(--order-check-out-page-text-light);
  font-size: .78rem;
  font-weight: 700;
}
.order-check-out-page-field input, .order-check-out-page-field textarea, .order-check-out-page-field select {
  width: 100%;
  min-height: 54px;
  padding: 15px 17px;
  border: 1px solid var(--order-check-out-page-border);
  border-radius: 15px;
  outline: none;
  background: #FFFFFF;
  color: var(--order-check-out-page-text);
  font-size: .92rem;
  font-weight: 600;
  transition: border-color var(--order-check-out-page-transition), box-shadow var(--order-check-out-page-transition);
}
.order-check-out-page-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.order-check-out-page-field input::placeholder, .order-check-out-page-field textarea::placeholder {
  color: var(--order-check-out-page-text-light);
  opacity: .8;
}
.order-check-out-page-field input:focus, .order-check-out-page-field textarea:focus, .order-check-out-page-field select:focus {
  border-color: var(--order-check-out-page-primary);
  box-shadow: 0 0 0 4px rgba(15, 138, 75, .10);
}
.checkout-error {
  padding: 10px 13px;
  border-radius: 12px;
  background: #FFF1F1;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: .82rem;
  font-weight: 700;
}
.order-check-out-page-delivery-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.order-check-out-page-delivery-card {
  position: relative;
  min-height: 120px;
  padding: 17px;
  display: flex;
  align-items: center;
  border: 1px solid var(--order-check-out-page-border);
  border-radius: 17px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color var(--order-check-out-page-transition), background var(--order-check-out-page-transition), box-shadow var(--order-check-out-page-transition);
}
.order-check-out-page-delivery-card:hover {
  border-color: rgba(15, 138, 75, .40);
}
.order-check-out-page-delivery-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.order-check-out-page-delivery-card.active {
  border-color: var(--order-check-out-page-primary);
  background: #F0FBF4;
  box-shadow: inset 0 0 0 1px rgba(15, 138, 75, .10);
}
.order-check-out-page-delivery-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.order-check-out-page-delivery-icon {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #EAF8F0;
  font-size: 1.3rem;
}
.order-check-out-page-delivery-content h4 {
  color: var(--order-check-out-page-text);
  font-size: .9rem;
  font-weight: 900;
}
.order-check-out-page-delivery-content p {
  margin-top: 4px;
  color: var(--order-check-out-page-text-light);
  font-size: .75rem;
  line-height: 1.4;
}
.order-check-out-page-delivery-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E4ECE7;
  color: transparent;
  font-size: .65rem;
  font-weight: 900;
}
.order-check-out-page-delivery-card.active .order-check-out-page-delivery-check {
  background: var(--order-check-out-page-primary);
  color: #FFFFFF;
}
.order-check-out-page-info-box {
  margin-top: 26px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #CDEDD8;
  border-radius: 17px;
  background: #F1FBF5;
}
.order-check-out-page-info-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #DDF5E5;
  color: var(--order-check-out-page-primary);
}
.order-check-out-page-info-icon svg {
  width: 22px;
  height: 22px;
}
.order-check-out-page-info-box strong {
  color: var(--order-check-out-page-text);
  font-size: .86rem;
  font-weight: 900;
}
.order-check-out-page-info-box p {
  margin-top: 4px;
  color: var(--order-check-out-page-text-light);
  font-size: .78rem;
  line-height: 1.5;
}
.order-check-out-page-vendor {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--order-check-out-page-border);
  border-radius: 20px;
  background: #FBFDFC;
}
.order-check-out-page-vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--order-check-out-page-border);
}
.order-check-out-page-vendor-profile {
  display: flex;
  align-items: center;
  gap: 13px;
}
.order-check-out-page-vendor-logo {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient( 135deg, var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 900;
}
.order-check-out-page-vendor-profile h3 {
  color: var(--order-check-out-page-text);
  font-size: .98rem;
  font-weight: 900;
}
.order-check-out-page-vendor-profile p {
  margin-top: 4px;
  color: #168044;
  font-size: .75rem;
  font-weight: 800;
}
.order-check-out-page-vendor-header strong {
  color: var(--order-check-out-page-primary);
  font-size: .9rem;
  font-weight: 900;
  text-align: right;
}
.order-check-out-page-vendor-header strong span {
  color: var(--order-check-out-page-text-light);
  font-weight: 700;
}
.order-check-out-page-product {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--order-check-out-page-border-light);
  border-radius: 16px;
  background: #FFFFFF;
}
.order-check-out-page-product:last-child {
  margin-bottom: 0;
}
.order-check-out-page-product img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid var(--order-check-out-page-border);
  background: #F4F8F5;
}
.order-check-out-page-product-details {
  min-width: 0;
}
.order-check-out-page-product-details h4 {
  color: var(--order-check-out-page-text);
  font-size: .92rem;
  font-weight: 850;
  line-height: 1.45;
}
.order-check-out-page-product-details p {
  margin-top: 6px;
  color: var(--order-check-out-page-text-light);
  font-size: .78rem;
  font-weight: 700;
}
.order-check-out-page-product-price {
  color: var(--order-check-out-page-primary);
  font-size: .95rem;
  font-weight: 900;
  white-space: nowrap;
}
.order-check-out-page-empty {
  padding: 60px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--order-check-out-page-border);
  border-radius: 20px;
  background: #FBFDFC;
  color: var(--order-check-out-page-text);
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}
.order-check-out-page-summary {
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid var(--order-check-out-page-border-light);
  border-radius: var(--order-check-out-page-radius-lg);
  box-shadow: var(--order-check-out-page-shadow);
}
.order-check-out-page-summary-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
  text-align: center;
}
.order-check-out-page-summary-header h2 {
  color: var(--order-check-out-page-text);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -.03em;
  text-align: center;
}
.order-check-out-page-summary-header span {
  padding: 6px 13px;
  border-radius: 999px;
  background: #E7F8ED;
  color: #11733D;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.order-check-out-page-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--order-check-out-page-border);
}
.order-check-out-page-summary-row span {
  color: var(--order-check-out-page-text-light);
  font-size: .86rem;
  font-weight: 700;
}
.order-check-out-page-summary-row strong {
  color: var(--order-check-out-page-text);
  font-size: .9rem;
  font-weight: 900;
}
.order-check-out-page-divider {
  height: 1px;
  margin: 20px 0;
  background: var(--order-check-out-page-border);
}
.order-check-out-page-total {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid #CFEED9;
  border-radius: 18px;
  background: linear-gradient( 135deg, #F0FBF4, #EAF8F0 );
}
.order-check-out-page-total span {
  color: var(--order-check-out-page-text);
  font-size: .9rem;
  font-weight: 850;
}
.order-check-out-page-total strong {
  color: var(--order-check-out-page-primary);
  font-size: 1.4rem;
  font-weight: 950;
  white-space: nowrap;
}
.order-check-out-page-security {
  margin-top: 22px;
  padding: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  background: #F2F7F4;
  text-align: center;
}
.order-check-out-page-security span {
  font-size: 1.45rem;
}
.order-check-out-page-security h4 {
  color: var(--order-check-out-page-text);
  font-size: .85rem;
  font-weight: 900;
}
.order-check-out-page-benefits {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.order-check-out-page-benefits p {
  padding: 12px 14px;
  border: 1px solid var(--order-check-out-page-border);
  border-radius: 13px;
  background: #FFFFFF;
  color: var(--order-check-out-page-text);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.4;
}
.place-order-wrapper {
  padding: 4px 0;
}
.place-order-btn {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 18px;
  background: linear-gradient( 135deg, var(--order-check-out-page-primary-dark), var(--order-check-out-page-primary), var(--order-check-out-page-accent) );
  color: #FFFFFF;
  font-size: .98rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15, 138, 75, .20);
  transition: filter var(--order-check-out-page-transition), box-shadow var(--order-check-out-page-transition);
}
.place-order-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 17px 34px rgba(15, 138, 75, .24);
}
.place-order-btn:active {
  filter: brightness(.98);
}
.place-order-btn svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 1200px) {
  .order-check-out-page-container {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
  .order-check-out-page-top {
    padding: 28px;
  }
}
@media (max-width: 1050px) {
  .order-check-out-page-container {
    grid-template-columns: 1fr;
  }
  .order-check-out-page-side {
    position: relative;
    top: auto;
  }
  .order-check-out-page-summary {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 850px) {
  .order-check-out-page-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .order-check-out-page-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .order-check-out-page-brand p {
    text-align: center;
  }
  .order-check-out-page-progress {
    width: 100%;
    flex-wrap: wrap;
  }
  .order-check-out-page-form-grid {
    grid-template-columns: 1fr;
  }
  .order-check-out-page-field-full {
    grid-column: auto;
  }
  .order-check-out-page-delivery-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .order-check-out-page-wrapper {
    padding: 22px 14px 45px;
  }
  .order-check-out-page-top {
    padding: 25px 18px;
    margin-bottom: 22px;
    border-radius: 22px;
  }
  .order-check-out-page-brand-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    font-size: 1.45rem;
  }
  .order-check-out-page-brand h1 {
    font-size: 1.45rem;
  }
  .order-check-out-page-brand p {
    font-size: .82rem;
  }
  .order-check-out-page-progress {
    gap: 8px;
  }
  .order-check-out-page-progress-line {
    display: none;
  }
  .order-check-out-page-progress-item {
    font-size: .75rem;
  }
  .order-check-out-page-card {
    padding: 22px 17px;
    border-radius: 22px;
  }
  .order-check-out-page-card-title {
    margin-bottom: 23px;
  }
  .order-check-out-page-vendor {
    padding: 15px;
    border-radius: 17px;
  }
  .order-check-out-page-vendor-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .order-check-out-page-vendor-header strong {
    width: 100%;
    text-align: left;
  }
  .order-check-out-page-product {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .order-check-out-page-product img {
    width: 62px;
    height: 62px;
    border-radius: 13px;
  }
  .order-check-out-page-product-price {
    grid-column: 2;
    font-size: .9rem;
  }
  .order-check-out-page-summary {
    padding: 22px 18px;
    border-radius: 22px;
  }
}
@media (max-width: 480px) {
  .order-check-out-page-delivery-methods {
    grid-template-columns: 1fr;
  }
  .order-check-out-page-delivery-card {
    min-height: 100px;
  }
  .order-check-out-page-info-box {
    align-items: flex-start;
  }
  .order-check-out-page-info-icon {
    width: 42px;
    height: 42px;
  }
  .order-check-out-page-total {
    padding: 17px;
  }
  .order-check-out-page-total strong {
    font-size: 1.15rem;
  }
  .place-order-btn {
    min-height: 58px;
    font-size: .9rem;
  }
}
.order-check-out-page-wrapper button:focus-visible, .order-check-out-page-wrapper input:focus-visible, .order-check-out-page-wrapper textarea:focus-visible, .order-check-out-page-wrapper select:focus-visible {
  outline: 3px solid rgba(15, 138, 75, .25);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .order-check-out-page-wrapper * {
    transition: none !important;
    animation: none !important;
  }
}
.order-success-page-wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 55px 24px 80px;
  background: radial-gradient( circle at 0% 0%, rgba(34, 197, 94, .09), transparent 35% ), radial-gradient( circle at 100% 10%, rgba(15, 138, 75, .07), transparent 35% ), linear-gradient( 180deg, #FAFCFB 0%, #F2F7F4 100% );
}
.order-success-page-card {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 48px;
  background: #FFFFFF;
  border: 1px solid #E3ECE6;
  border-radius: 30px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .07);
}
.order-success-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.order-success-page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 17px;
  margin-bottom: 24px;
  border: 1px solid #CBEED8;
  border-radius: 999px;
  background: #ECFAF1;
  color: #11733D;
  font-size: .82rem;
  font-weight: 900;
}
.order-success-page-badge span {
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16A34A;
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 900;
}
.order-success-page-icon {
  width: 105px;
  height: 105px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 135deg, #08753E, #0F8A4B, #22C55E );
  color: #FFFFFF;
  font-size: 2.8rem;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(15, 138, 75, .22);
}
.order-success-page-hero h1 {
  max-width: 720px;
  margin-bottom: 14px;
  color: #07150E;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.045em;
  text-align: center;
}
.order-success-page-message {
  max-width: 680px;
  margin: 0 auto;
  color: #26372F;
  font-size: .96rem;
  line-height: 1.8;
  font-weight: 600;
  text-align: center;
}
.order-success-page-reference {
  margin: 42px 0 28px;
  padding: 24px;
  display: flex;
  justify-content: center;
  text-align: center;
  border: 1px solid #DDE9E2;
  border-radius: 20px;
  background: #F7FBF8;
}
.order-success-page-reference div {
  width: 100%;
}
.order-success-page-reference span {
  display: block;
  margin-bottom: 9px;
  color: #26372F;
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.order-success-page-reference strong {
  display: block;
  color: #0F8A4B;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.order-success-page-reference p {
  max-width: 600px;
  margin: 9px auto 0;
  color: #26372F;
  font-size: .78rem;
  line-height: 1.55;
  font-weight: 600;
}
.order-success-page-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 45px;
}
.order-success-page-detail-item {
  min-height: 115px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #DDE8E1;
  border-radius: 18px;
  background: #FFFFFF;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.order-success-page-detail-item:hover {
  border-color: #9DD9B4;
  box-shadow: 0 8px 22px rgba(15, 138, 75, .07);
}
.order-success-page-detail-item span {
  display: block;
  margin-bottom: 9px;
  color: #26372F;
  font-size: .78rem;
  font-weight: 800;
}
.order-success-page-detail-item strong {
  color: #0F8A4B;
  font-size: 1.08rem;
  font-weight: 950;
}
.order-success-page-info-header {
  margin-bottom: 22px;
  text-align: center;
}
.order-success-page-info-header h3 {
  margin-bottom: 8px;
  color: #07150E;
  font-size: 1.4rem;
  font-weight: 950;
  letter-spacing: -.03em;
  text-align: center;
}
.order-success-page-info-header p {
  color: #26372F;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.order-success-page-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.order-success-page-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: 20px;
  border: 1px solid #DDE8E1;
  border-radius: 18px;
  background: #FBFDFC;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.order-success-page-step:hover {
  border-color: #A8DDBB;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(15, 138, 75, .06);
}
.order-success-page-step span {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient( 135deg, #0F8A4B, #22C55E );
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(15, 138, 75, .15);
}
.order-success-page-step svg {
  width: 22px;
  height: 22px;
}
.order-success-page-step strong {
  display: block;
  margin-bottom: 6px;
  color: #07150E;
  font-size: .9rem;
  line-height: 1.45;
  font-weight: 900;
}
.order-success-page-step p {
  color: #26372F;
  font-size: .81rem;
  line-height: 1.65;
  font-weight: 600;
}
.order-success-page-security {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  margin-bottom: 35px;
  border: 1px solid #CDECD8;
  border-radius: 18px;
  background: linear-gradient( 135deg, #F0FBF4, #EAF8F0 );
}
.order-success-page-security-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #0F8A4B;
  color: #FFFFFF;
  font-size: 1.3rem;
}
.order-success-page-security h4 {
  margin-bottom: 5px;
  color: #07150E;
  font-size: .9rem;
  font-weight: 900;
}
.order-success-page-security p {
  color: #26372F;
  font-size: .79rem;
  line-height: 1.6;
  font-weight: 600;
}
.order-success-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.order-success-page-button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 16px;
  text-decoration: none;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #086338, #0F8A4B, #22C55E );
  border: 1px solid #0F8A4B;
  font-size: .88rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 138, 75, .18);
  transition: filter .25s ease, box-shadow .25s ease;
}
.order-success-page-button:hover {
  filter: brightness(1.04);
  box-shadow: 0 13px 28px rgba(15, 138, 75, .23);
}
.order-success-page-button.secondary {
  background: #FFFFFF;
  color: #0F8A4B;
  border: 2px solid #0F8A4B;
  box-shadow: none;
}
.order-success-page-button.secondary:hover {
  background: #0F8A4B;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .order-success-page-wrapper {
    padding: 35px 16px 55px;
  }
  .order-success-page-card {
    padding: 34px 22px;
    border-radius: 24px;
  }
  .order-success-page-hero h1 {
    font-size: 1.8rem;
  }
  .order-success-page-message {
    font-size: .88rem;
    line-height: 1.75;
  }
  .order-success-page-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .order-success-page-detail-item {
    min-height: 95px;
  }
  .order-success-page-step {
    padding: 17px;
    gap: 13px;
  }
  .order-success-page-step span {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .order-success-page-step strong {
    font-size: .85rem;
  }
  .order-success-page-step p {
    font-size: .77rem;
  }
}
@media (max-width: 520px) {
  .order-success-page-wrapper {
    padding: 22px 12px 45px;
  }
  .order-success-page-card {
    padding: 28px 16px;
    border-radius: 21px;
  }
  .order-success-page-badge {
    font-size: .72rem;
    padding: 7px 13px;
  }
  .order-success-page-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 20px;
    font-size: 2.2rem;
  }
  .order-success-page-hero h1 {
    font-size: 1.5rem;
  }
  .order-success-page-message {
    font-size: .82rem;
    line-height: 1.7;
  }
  .order-success-page-reference {
    margin: 32px 0 20px;
    padding: 20px 15px;
  }
  .order-success-page-reference strong {
    font-size: 1.15rem;
  }
  .order-success-page-reference p {
    font-size: .74rem;
  }
  .order-success-page-details {
    margin-bottom: 35px;
  }
  .order-success-page-info-header h3 {
    font-size: 1.2rem;
  }
  .order-success-page-info-header p {
    font-size: .78rem;
  }
  .order-success-page-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .order-success-page-step span {
    width: 48px;
    height: 48px;
  }
  .order-success-page-step strong {
    text-align: center;
  }
  .order-success-page-step p {
    text-align: center;
  }
  .order-success-page-security {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 19px 16px;
  }
  .order-success-page-actions {
    grid-template-columns: 1fr;
  }
  .order-success-page-button {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .order-success-page-card {
    padding: 24px 13px;
  }
  .order-success-page-hero h1 {
    font-size: 1.35rem;
  }
  .order-success-page-reference strong {
    font-size: 1rem;
  }
  .order-success-page-step {
    padding: 15px;
  }
}
.order-success-page-button:focus-visible {
  outline: 3px solid rgba(15, 138, 75, .25);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .order-success-page-card *, .order-success-page-card *::before, .order-success-page-card *::after {
    transition: none !important;
    animation: none !important;
  }
}
.customer-orders-page-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 10px 0 40px;
}
.order-section-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 4px 0 0;
}
.order-section-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(40, 220, 108, 0.10) 25%, rgba(40, 220, 108, 0.38) 75%, rgba(40, 220, 108, 0.65) 100% );
  box-shadow: 0 0 7px rgba(35, 210, 101, 0.12);
}
.order-section-divider .divider-line:last-child {
  background: linear-gradient( 90deg, rgba(40, 220, 108, 0.65) 0%, rgba(40, 220, 108, 0.38) 25%, rgba(40, 220, 108, 0.10) 75%, transparent 100% );
}
.order-section-divider span {
  position: relative;
  flex: 0 0 auto;
  min-width: 285px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13px 25px 14px;
  color: #ffffff;
  background: linear-gradient( 145deg, #102d1d 0%, #081b11 55%, #05130b 100% );
  border: 1px solid rgba(62, 241, 126, 0.28);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.35px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.30), 0 0 22px rgba(36, 215, 105, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.order-section-divider span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, #4dff8a, transparent );
  border-radius: 10px;
  box-shadow: 0 0 9px rgba(77, 255, 138, 0.85), 0 0 18px rgba(77, 255, 138, 0.35);
}
.order-section-divider span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  background: #4dff8a;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(77, 255, 138, 1), 0 0 15px rgba(77, 255, 138, 0.55);
}
.order-section-divider i {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  color: #5cff96;
  stroke-width: 2.5;
  filter: drop-shadow( 0 0 5px rgba(92, 255, 150, 0.75) );
}
.order-section-divider span {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}
.customer-orders-page-list > .order-section-divider + * {
  margin-top: -2px;
}
@media (max-width: 850px) {
  .customer-orders-page-list {
    gap: 29px;
  }
  .order-section-divider {
    gap: 14px;
  }
  .order-section-divider span {
    min-width: 250px;
    padding: 12px 20px;
    font-size: 12px;
  }
  .order-section-divider i {
    width: 17px;
    height: 17px;
  }
}
@media (max-width: 600px) {
  .customer-orders-page-list {
    gap: 25px;
    padding: 7px 0 30px;
  }
  .order-section-divider {
    gap: 9px;
  }
  .order-section-divider .divider-line {
    min-width: 15px;
  }
  .order-section-divider span {
    min-width: 0;
    width: auto;
    max-width: 78%;
    padding: 11px 15px 12px;
    font-size: 11px;
    line-height: 1.55;
    border-radius: 12px;
  }
  .order-section-divider i {
    width: 16px;
    height: 16px;
    margin-right: 3px;
  }
}
@media (max-width: 400px) {
  .customer-orders-page-list {
    gap: 22px;
  }
  .order-section-divider {
    gap: 6px;
  }
  .order-section-divider span {
    max-width: 84%;
    padding: 10px 12px;
    font-size: 10px;
  }
  .order-section-divider i {
    width: 15px;
    height: 15px;
  }
  .order-section-divider .divider-line {
    min-width: 8px;
  }
}
.customer-orders-page-vendor-section {
  width: 100%;
  max-width: 100%;
  margin: 48px 0;
  padding: 0 24px;
  box-sizing: border-box;
  overflow: hidden;
}
.customer-orders-page-vendor-section *, .customer-orders-page-vendor-section *::before, .customer-orders-page-vendor-section *::after {
  box-sizing: border-box;
}
.customer-orders-page-section-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 34px;
  text-align: center;
}
.customer-orders-page-section-heading > div {
  min-width: 0;
  max-width: 100%;
}
.customer-orders-page-section-kicker {
  display: block;
  margin-bottom: 6px;
  color: #055823;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
}
.customer-orders-page-section-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding-bottom: 10px;
  color: #053d21;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.customer-orders-page-section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 4px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.75);
  transform: translateX(-50%);
}
.customer-orders-page-vendor-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( min(100%, 480px), 1fr ) );
  gap: 28px;
  align-items: start;
}
.customer-orders-page-vendor-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 26px;
  background: radial-gradient( circle at 100% 0%, rgba(34, 197, 94, 0.16), transparent 32% ), radial-gradient( circle at 0% 100%, rgba(22, 163, 74, 0.12), transparent 34% ), linear-gradient( 145deg, #07130d 0%, #020805 48%, #051109 100% );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.customer-orders-page-vendor-header {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.16);
}
.customer-orders-page-vendor-profile {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.customer-orders-page-vendor-avatar {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #22c55e;
  border-radius: 18px;
  background: linear-gradient( 145deg, #123b24, #06140c );
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.28), inset 0 0 16px rgba(34, 197, 94, 0.08);
}
.customer-orders-page-vendor-info {
  min-width: 0;
  max-width: 100%;
}
.customer-orders-page-vendor-label {
  display: block;
  margin-bottom: 4px;
  color: #22c55e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}
.customer-orders-page-vendor-info h4 {
  max-width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-vendor-update {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}
.customer-orders-page-status-badge {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-vendor-status-pending {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.13);
  color: #fde047;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.16);
}
.customer-orders-page-vendor-status-accepted {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.13);
  color: #4ade80;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.18);
}
.customer-orders-page-vendor-status-payment_confirmed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.18);
}
.customer-orders-page-vendor-status-processing {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.14);
  color: #4ade80;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.18);
}
.customer-orders-page-vendor-status-on_the_way {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
}
.customer-orders-page-vendor-status-delivered {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.22), inset 0 0 12px rgba(34, 197, 94, 0.05);
}
.customer-orders-page-vendor-status-cancelled {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}
.customer-orders-page-vendor-info-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.customer-orders-page-info-box {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 17px;
  background: linear-gradient( 145deg, rgba(9, 44, 25, 0.9), rgba(3, 15, 9, 0.96) );
  overflow: hidden;
}
.customer-orders-page-info-label {
  display: block;
  margin-bottom: 9px;
  color: #22c55e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.payment-success, .payment-pending, .payment-cancelled, .customer-orders-page-delivery-cancelled {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.payment-success {
  color: #4ade80;
}
.payment-pending {
  color: #fde047;
}
.payment-cancelled, .customer-orders-page-delivery-cancelled {
  color: #f87171;
}
.customer-orders-page-delivery-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-delivery-pending {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.13);
  color: #fde047;
}
.customer-orders-page-delivery-on_the_way {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
}
.customer-orders-page-delivery-delivered {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}
.customer-orders-page-delivery-cancelled {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}
.customer-orders-page-products {
  width: 100%;
  min-width: 0;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 21px;
  background: linear-gradient( 145deg, #eafff1, #f7fff9 );
  overflow: hidden;
}
.customer-orders-page-products-heading {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.customer-orders-page-products-heading > div {
  min-width: 0;
  max-width: 100%;
}
.customer-orders-page-products-kicker {
  display: block;
  margin-bottom: 4px;
  color: #15803d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
}
.customer-orders-page-products-heading h5 {
  margin: 0;
  color: #052e16;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
}
.customer-orders-page-product-count {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  background: #052e16;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.customer-orders-page-product-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( min(100%, 330px), 1fr ) );
  gap: 14px;
}
.customer-orders-page-product-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 12px;
  border: 1px solid rgba(21, 128, 61, 0.18);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(5, 46, 22, 0.08);
  overflow: hidden;
}
.customer-orders-page-product-image {
  width: 78px;
  height: 78px;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #dff8e8;
}
.customer-orders-page-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.customer-orders-page-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 145deg, #14532d, #052e16 );
  color: #ffffff;
  font-size: 27px;
  font-weight: 900;
}
.customer-orders-page-product-details {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.customer-orders-page-product-title-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  gap: 8px;
}
.customer-orders-page-product-title-row h4 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #052e16;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-product-price {
  min-width: 0;
  max-width: 100%;
  color: #166534;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-product-meta {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  overflow: hidden;
}
.customer-orders-page-product-meta span {
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e7f8ec;
  color: #14532d;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-vendor-subtotal {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid rgba(21, 128, 61, 0.16);
}
.customer-orders-page-vendor-subtotal > div {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.customer-orders-page-vendor-subtotal span {
  color: #052e16;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
}
.customer-orders-page-vendor-subtotal small {
  color: #166534;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
}
.customer-orders-page-vendor-subtotal strong {
  min-width: 0;
  max-width: 55%;
  color: #052e16;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-order-details-delivery-progress {
  width: 100%;
  min-width: 0;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 21px;
  background: radial-gradient( circle at 0% 100%, rgba(34, 197, 94, 0.12), transparent 35% ), #031008;
  overflow: hidden;
}
.customer-orders-page-tracker-heading {
  margin-bottom: 25px;
}
.customer-orders-page-tracker-heading span {
  display: block;
  margin-bottom: 5px;
  color: #22c55e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}
.customer-orders-page-tracker-heading h5 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
}
.customer-orders-page-delivery-tracker {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.customer-orders-page-delivery-tracker::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 11%;
  right: 11%;
  height: 2px;
  background: rgba(34, 197, 94, 0.2);
}
.delivery-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.delivery-step-marker {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #166534;
  border-radius: 50%;
  background: #031008;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}
.delivery-step.active .delivery-step-marker {
  border-color: #22c55e;
  background: #14532d;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.35), inset 0 0 10px rgba(34, 197, 94, 0.15);
}
.delivery-step-content {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.delivery-step-content strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
}
.delivery-step-content small {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-order-cancelled {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #ef4444;
  border-radius: 18px;
  background: linear-gradient( 145deg, rgba(127, 29, 29, 0.38), rgba(69, 10, 10, 0.5) );
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.1), inset 0 0 18px rgba(239, 68, 68, 0.04);
  overflow: hidden;
}
.customer-order-cancelled-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ef4444;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  font-size: 20px;
  font-weight: 900;
}
.customer-order-cancelled > div {
  min-width: 0;
  max-width: 100%;
}
.customer-order-cancelled div > span {
  display: block;
  margin-bottom: 4px;
  color: #f87171;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
}
.customer-order-cancelled h4 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.customer-orders-page-vendor-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(34, 197, 94, 0.14);
}
.customer-orders-page-vendor-actions form {
  margin: 0;
  max-width: 100%;
}
.cancel-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 145px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid #ef4444;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.28);
  color: #f87171;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12), inset 0 0 12px rgba(239, 68, 68, 0.04);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cancel-order-btn i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cancel-order-btn:hover {
  background: rgba(127, 29, 29, 0.5);
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.22), inset 0 0 14px rgba(239, 68, 68, 0.06);
}
.customer-orders-page-no-vendor-orders {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding: 55px 30px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 24px;
  background: radial-gradient( circle at center, rgba(34, 197, 94, 0.1), transparent 55% ), #031008;
  text-align: center;
  overflow: hidden;
}
.customer-orders-page-no-vendor-orders span {
  display: block;
  margin-bottom: 8px;
  color: #22c55e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}
.customer-orders-page-no-vendor-orders h3 {
  margin: 0;
  color: #ffffff;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .customer-orders-page-vendor-section {
    padding: 0 20px;
  }
  .customer-orders-page-vendor-card {
    padding: 22px;
  }
  .customer-orders-page-product-grid {
    grid-template-columns: repeat( auto-fit, minmax( min(100%, 300px), 1fr ) );
  }
}
@media (max-width: 900px) {
  .customer-orders-page-vendor-grid {
    grid-template-columns: 1fr;
  }
  .customer-orders-page-product-grid {
    grid-template-columns: repeat( auto-fit, minmax( min(100%, 320px), 1fr ) );
  }
}
@media (max-width: 700px) {
  .customer-orders-page-vendor-section {
    margin: 38px 0;
    padding: 0 15px;
  }
  .customer-orders-page-vendor-card {
    padding: 19px;
    border-radius: 21px;
  }
  .customer-orders-page-vendor-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .customer-orders-page-status-badge {
    align-self: flex-start;
  }
  .customer-orders-page-vendor-info-grid {
    grid-template-columns: 1fr;
  }
  .customer-orders-page-products {
    padding: 17px;
  }
  .customer-orders-page-product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .customer-orders-page-product-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 11px;
  }
  .customer-orders-page-product-image {
    width: 76px;
    height: 76px;
  }
  .customer-orders-page-product-title-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .customer-orders-page-product-price {
    text-align: left;
  }
  .customer-orders-page-vendor-subtotal {
    align-items: flex-start;
  }
  .customer-orders-page-vendor-subtotal strong {
    font-size: 20px;
  }
  .customer-orders-page-delivery-tracker {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .customer-orders-page-delivery-tracker::before {
    top: 23px;
    bottom: 23px;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .delivery-step {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    text-align: left;
  }
  .delivery-step-content {
    text-align: left;
  }
}
@media (max-width: 560px) {
  .customer-orders-page-vendor-section {
    padding: 0 11px;
  }
  .customer-orders-page-section-heading {
    margin-bottom: 27px;
  }
  .customer-orders-page-section-dot {
    width: 9px;
    height: 9px;
    flex-basis: 9px;
  }
  .customer-orders-page-section-kicker {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  .customer-orders-page-section-title {
    font-size: 24px;
  }
  .customer-orders-page-vendor-card {
    padding: 14px;
    border-radius: 18px;
  }
  .customer-orders-page-vendor-profile {
    width: 100%;
    gap: 12px;
  }
  .customer-orders-page-vendor-avatar {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 14px;
    font-size: 21px;
  }
  .customer-orders-page-vendor-info h4 {
    font-size: 18px;
  }
  .customer-orders-page-vendor-update {
    font-size: 11px;
  }
  .customer-orders-page-status-badge {
    min-width: 0;
    width: auto;
    font-size: 10px;
    padding: 8px 11px;
  }
  .customer-orders-page-info-box {
    padding: 14px;
  }
  .customer-orders-page-products {
    padding: 13px;
    border-radius: 17px;
  }
  .customer-orders-page-products-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .customer-orders-page-product-count {
    align-self: flex-start;
  }
  .customer-orders-page-product-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    border-radius: 14px;
  }
  .customer-orders-page-product-image {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }
  .customer-orders-page-product-placeholder {
    font-size: 22px;
  }
  .customer-orders-page-product-title-row {
    width: 100%;
    min-width: 0;
  }
  .customer-orders-page-product-title-row h4 {
    font-size: 14px;
    line-height: 1.3;
  }
  .customer-orders-page-product-price {
    font-size: 13px;
    line-height: 1.3;
  }
  .customer-orders-page-product-meta {
    gap: 5px;
    margin-top: 8px;
  }
  .customer-orders-page-product-meta span {
    max-width: 100%;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.3;
  }
  .customer-orders-page-vendor-subtotal {
    flex-direction: column;
    gap: 8px;
  }
  .customer-orders-page-vendor-subtotal strong {
    max-width: 100%;
    font-size: 19px;
    text-align: left;
  }
  .customer-order-details-delivery-progress {
    padding: 15px;
    border-radius: 17px;
  }
  .customer-orders-page-tracker-heading h5 {
    font-size: 18px;
  }
  .customer-order-cancelled {
    padding: 14px;
  }
  .customer-order-cancelled h4 {
    font-size: 13px;
  }
  .customer-orders-page-vendor-actions {
    align-items: stretch;
  }
  .customer-orders-page-vendor-actions form {
    width: 100%;
  }
  .cancel-order-btn {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .customer-orders-page-product-card {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 11px;
    padding: 11px;
  }
  .customer-orders-page-product-image {
    width: 100%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: start;
    border-radius: 12px;
  }
  .customer-orders-page-product-details {
    width: 100%;
    min-width: 0;
  }
  .customer-orders-page-product-title-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .customer-orders-page-product-title-row h4 {
    font-size: 15px;
  }
  .customer-orders-page-product-price {
    font-size: 14px;
    text-align: left;
  }
  .customer-orders-page-product-meta {
    width: 100%;
  }
  .customer-orders-page-product-meta span {
    max-width: 100%;
  }
}
@media (max-width: 420px) {
  .customer-orders-page-vendor-section {
    padding: 0 8px;
  }
  .customer-orders-page-vendor-card {
    padding: 11px;
  }
  .customer-orders-page-products {
    padding: 10px;
  }
  .customer-orders-page-product-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
  .customer-orders-page-product-image {
    width: 125px;
    max-width: 125px;
    height: 125px;
  }
  .customer-orders-page-product-title-row h4 {
    font-size: 14px;
  }
  .customer-orders-page-product-price {
    font-size: 13px;
  }
  .customer-orders-page-product-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .customer-orders-page-product-meta span {
    width: fit-content;
    max-width: 100%;
  }
  .customer-orders-page-vendor-subtotal span {
    font-size: 12px;
  }
  .customer-orders-page-vendor-subtotal small {
    font-size: 10px;
  }
  .customer-orders-page-vendor-subtotal strong {
    font-size: 17px;
  }
}
@media (max-width: 360px) {
  .customer-orders-page-vendor-section {
    padding: 0 6px;
  }
  .customer-orders-page-vendor-card {
    padding: 9px;
    border-radius: 15px;
  }
  .customer-orders-page-products {
    padding: 8px;
  }
  .customer-orders-page-product-card {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 8px;
    border-radius: 12px;
  }
  .customer-orders-page-product-image {
    width: 110px;
    max-width: 110px;
    height: 110px;
    border-radius: 10px;
  }
  .customer-orders-page-product-placeholder {
    font-size: 27px;
  }
  .customer-orders-page-product-title-row h4 {
    font-size: 13px;
  }
  .customer-orders-page-product-price {
    font-size: 12px;
  }
  .customer-orders-page-product-meta {
    gap: 5px;
  }
  .customer-orders-page-product-meta span {
    font-size: 9px;
    padding: 4px 6px;
  }
  .customer-orders-page-info-box {
    padding: 11px;
  }
  .customer-orders-page-section-title {
    font-size: 21px;
  }
  .customer-orders-page-section-kicker {
    font-size: 9px;
  }
  .customer-orders-page-vendor-info h4 {
    font-size: 16px;
  }
  .customer-orders-page-vendor-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 18px;
  }
  .cancel-order-btn {
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    font-size: 10px;
  }
}
@media (max-width: 320px) {
  .customer-orders-page-vendor-section {
    padding: 0 4px;
  }
  .customer-orders-page-vendor-card {
    padding: 8px;
  }
  .customer-orders-page-products {
    padding: 7px;
  }
  .customer-orders-page-product-card {
    padding: 7px;
  }
  .customer-orders-page-product-image {
    width: 95px;
    max-width: 95px;
    height: 95px;
  }
  .customer-orders-page-product-title-row h4 {
    font-size: 12px;
  }
  .customer-orders-page-product-price {
    font-size: 11px;
  }
  .customer-orders-page-product-meta span {
    font-size: 9px;
  }
  .customer-orders-page-vendor-subtotal strong {
    font-size: 16px;
  }
}
.customer-orders-page-empty-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 760px;
  min-height: 390px;
  margin: 35px auto 45px;
  padding: 55px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient( circle at 50% 20%, rgba(36, 220, 108, 0.13), transparent 34% ), radial-gradient( circle at 50% 100%, rgba(19, 137, 67, 0.10), transparent 42% ), linear-gradient( 145deg, #0a2115 0%, #07170e 50%, #040d08 100% );
  border: 1px solid rgba(67, 240, 126, 0.22);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.40), 0 0 35px rgba(29, 203, 95, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.customer-orders-page-empty-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, #43ff88, transparent );
  box-shadow: 0 0 10px rgba(67, 255, 136, 0.85), 0 0 22px rgba(67, 255, 136, 0.35);
}
.customer-orders-page-empty-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  background: rgba(35, 220, 105, 0.08);
  border-radius: 50%;
  filter: blur(65px);
  pointer-events: none;
}
.customer-orders-page-empty-icon {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  font-size: 42px;
  background: radial-gradient( circle, rgba(45, 225, 112, 0.16), rgba(8, 35, 20, 0.92) 70% );
  border: 1px solid rgba(69, 245, 132, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(53, 239, 123, 0.12), 0 0 45px rgba(53, 239, 123, 0.06), inset 0 0 20px rgba(53, 239, 123, 0.08);
}
.customer-orders-page-empty-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(69, 245, 132, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(69, 245, 132, 0.10);
}
.customer-orders-page-empty-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #48ff89;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(72, 255, 137, 1), 0 0 17px rgba(72, 255, 137, 0.55);
}
.customer-orders-page-empty-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.6px;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.40);
}
.customer-orders-page-empty-card h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 13px auto 0;
  background: #3ff47f;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(63, 244, 127, 0.90), 0 0 18px rgba(63, 244, 127, 0.35);
}
.customer-orders-page-empty-card p {
  max-width: 510px;
  margin: 17px auto 27px;
  color: #d9f7e3;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}
.customer-orders-page-primary-button {
  position: relative;
  isolation: isolate;
  min-width: 190px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  color: #03130a;
  background: linear-gradient( 135deg, #6aff9b, #28dc6c );
  border: 1px solid rgba(110, 255, 157, 0.65);
  border-radius: 13px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.25px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(31, 220, 102, 0.22), 0 0 20px rgba(45, 235, 115, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.customer-orders-page-primary-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  background: #39ed78;
  border-radius: 10px;
  filter: blur(14px);
  opacity: 0.20;
}
.customer-orders-page-primary-button:hover {
  color: #021008;
  filter: brightness(1.07);
  box-shadow: 0 10px 30px rgba(31, 220, 102, 0.30), 0 0 25px rgba(45, 235, 115, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
@media (max-width: 768px) {
  .customer-orders-page-empty-card {
    max-width: 680px;
    min-height: 360px;
    padding: 48px 35px;
  }
  .customer-orders-page-empty-icon {
    width: 82px;
    height: 82px;
    font-size: 39px;
  }
  .customer-orders-page-empty-card h2 {
    font-size: 28px;
  }
  .customer-orders-page-empty-card p {
    font-size: 15px;
  }
}
@media (max-width: 600px) {
  .customer-orders-page-empty-card {
    width: 100%;
    min-height: 350px;
    margin: 28px auto 35px;
    padding: 42px 23px;
    border-radius: 20px;
  }
  .customer-orders-page-empty-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 23px;
    font-size: 36px;
  }
  .customer-orders-page-empty-card h2 {
    font-size: 26px;
  }
  .customer-orders-page-empty-card p {
    margin-top: 15px;
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.65;
  }
  .customer-orders-page-primary-button {
    width: 100%;
    max-width: 280px;
    min-height: 52px;
    font-size: 14px;
  }
}
@media (max-width: 400px) {
  .customer-orders-page-empty-card {
    min-height: 330px;
    padding: 35px 19px;
  }
  .customer-orders-page-empty-icon {
    width: 70px;
    height: 70px;
    font-size: 33px;
  }
  .customer-orders-page-empty-card h2 {
    font-size: 24px;
  }
  .customer-orders-page-empty-card p {
    font-size: 13px;
  }
}
.customer-orders-page-header {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 42px 46px;
  margin-bottom: 38px;
  overflow: hidden;
  background: radial-gradient( circle at 8% 20%, rgba(35, 190, 102, 0.16), transparent 32% ), radial-gradient( circle at 85% 110%, rgba(18, 140, 70, 0.14), transparent 38% ), linear-gradient( 135deg, #06150e 0%, #081c12 48%, #04100a 100% );
  border: 1px solid rgba(52, 211, 112, 0.22);
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45), 0 0 35px rgba(24, 180, 88, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.customer-orders-page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(67, 255, 139, 0.8), transparent );
  box-shadow: 0 0 14px rgba(67, 255, 139, 0.65);
}
.customer-orders-page-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  top: -150px;
  right: 25%;
  background: rgba(25, 190, 91, 0.10);
  border-radius: 50%;
  filter: blur(65px);
  pointer-events: none;
}
.customer-orders-page-header-content {
  position: relative;
  flex: 1;
  min-width: 0;
}
.customer-orders-page-header-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  color: #69f59c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.customer-orders-page-header-label::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: #4dff8a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(77, 255, 138, 0.10), 0 0 12px rgba(77, 255, 138, 0.95), 0 0 25px rgba(77, 255, 138, 0.45);
}
.customer-orders-page-header-title {
  position: relative;
  margin: 0;
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.4px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.customer-orders-page-header-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 14px;
  background: #3df57d;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(61, 245, 125, 0.9), 0 0 20px rgba(61, 245, 125, 0.45);
}
.customer-orders-page-header-description {
  max-width: 680px;
  margin: 15px 0 0;
  color: #d8f7e2;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
}
.customer-orders-page-stat-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 205px;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient( 145deg, rgba(26, 116, 62, 0.55), rgba(8, 43, 24, 0.88) );
  border: 1px solid rgba(73, 255, 135, 0.30);
  border-radius: 19px;
  text-align: center;
  box-shadow: 0 0 25px rgba(36, 204, 103, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 25px rgba(35, 190, 102, 0.06);
}
.customer-orders-page-stat-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 110px;
  height: 110px;
  top: -65px;
  right: -35px;
  background: #3cff80;
  opacity: 0.12;
  border-radius: 50%;
  filter: blur(35px);
}
.customer-orders-page-stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, #4cff8b, transparent );
  box-shadow: 0 0 12px rgba(76, 255, 139, 0.8);
}
.customer-orders-page-stat-label {
  position: relative;
  margin-bottom: 10px;
  color: #aef6c6;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.customer-orders-page-stat-value {
  position: relative;
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 0 18px rgba(82, 255, 139, 0.20);
}
@media (max-width: 900px) {
  .customer-orders-page-header {
    gap: 30px;
    padding: 36px;
  }
  .customer-orders-page-header-title {
    font-size: 36px;
  }
  .customer-orders-page-stat-card {
    flex-basis: 180px;
    min-height: 130px;
  }
  .customer-orders-page-stat-value {
    font-size: 36px;
  }
}
@media (max-width: 650px) {
  .customer-orders-page-header {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 30px 24px;
    border-radius: 20px;
  }
  .customer-orders-page-header-title {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .customer-orders-page-header-description {
    font-size: 15px;
    line-height: 1.6;
  }
  .customer-orders-page-stat-card {
    width: 100%;
    min-height: 115px;
    flex-basis: auto;
  }
  .customer-orders-page-stat-value {
    font-size: 36px;
  }
}
@media (max-width: 400px) {
  .customer-orders-page-header {
    padding: 26px 20px;
  }
  .customer-orders-page-header-title {
    font-size: 29px;
  }
  .customer-orders-page-header-label {
    font-size: 12px;
  }
  .customer-orders-page-header-description {
    font-size: 14px;
  }
}
.customer-orders-list-page-order-card {
  --order-green-deep: #064e3b;
  --order-green: #047857;
  --order-green-mid: #065f46;
  --order-green-light: #ecfdf5;
  --order-green-soft: #d1fae5;
  --order-border: #a7f3d0;
  --order-border-light: #d1fae5;
  --order-text: #064e3b;
  --order-text-dark: #022c22;
  --order-white: #ffffff;
  width: 100%;
  overflow: hidden;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(6, 78, 59, 0.08), 0 4px 12px rgba(6, 78, 59, 0.05);
  isolation: isolate;
}
.customer-orders-list-page-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ffffff 48%, #ecfdf5 100% );
  border-bottom: 1px solid var(--order-border-light);
}
.customer-orders-list-page-order-heading {
  min-width: 0;
  flex: 1;
  text-align: center;
}
.customer-orders-list-page-order-label {
  display: block;
  margin-bottom: 7px;
  color: var(--order-green);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.customer-orders-list-page-order-title {
  margin: 0;
  color: var(--order-text-dark);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-align: center;
}
.customer-orders-list-page-order-date {
  display: block;
  margin-top: 7px;
  color: var(--order-green-mid);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}
.customer-orders-list-page-header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
}
.customer-orders-list-page-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.customer-orders-list-page-status-pending {
  color: #92400e;
  background: #fffbeb;
  border-color: #fcd34d;
}
.customer-orders-list-page-status-accepted {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}
.customer-orders-list-page-status-payment_confirmed {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.customer-orders-list-page-status-processing {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fdba74;
}
.customer-orders-list-page-status-on-the-way {
  color: #0e7490;
  background: #ecfeff;
  border-color: #67e8f9;
}
.customer-orders-list-page-status-delivered {
  color: #047857;
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.customer-orders-list-page-status-partial-delivered {
  color: #15803d;
  background: #f0fdf4;
  border-color: #86efac;
}
.customer-orders-list-page-status-cancelled {
  color: #b42318;
  background: #fff5f4;
  border-color: #fca5a5;
}
.customer-orders-list-page-primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border: 1px solid #064e3b;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 14px rgba(6, 78, 59, 0.18);
  transition: box-shadow 180ms ease, filter 180ms ease;
}
.customer-orders-list-page-primary-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.04) 70%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 420ms ease;
  pointer-events: none;
}
.customer-orders-list-page-primary-button:hover {
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-color: #064e3b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 7px 18px rgba(6, 78, 59, 0.22);
  filter: brightness(1.04);
}
.customer-orders-list-page-primary-button:hover::before {
  left: 130%;
}
.customer-orders-list-page-primary-button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
.customer-orders-list-page-primary-button svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.customer-orders-list-page-primary-button span {
  position: relative;
  z-index: 1;
}
.customer-orders-list-page-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 30px;
  background: #ffffff;
}
.customer-orders-list-page-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 82px;
  padding: 16px 17px;
  background: linear-gradient( 135deg, #ffffff 0%, #f0fdf4 100% );
  border: 1px solid var(--order-border-light);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.customer-orders-list-page-summary-card:hover {
  background: linear-gradient( 135deg, #f0fdf4 0%, #ffffff 100% );
  border-color: #86efac;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px rgba(6, 78, 59, 0.06);
}
.customer-orders-list-page-summary-card-amount {
  background: linear-gradient( 135deg, #ecfdf5 0%, #d1fae5 100% );
  border-color: #86efac;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 16px rgba(6, 78, 59, 0.06);
}
.customer-orders-list-page-summary-card-amount:hover {
  background: linear-gradient( 135deg, #d1fae5 0%, #ecfdf5 100% );
  border-color: #6ee7b7;
}
.customer-orders-list-page-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--order-green-deep);
  background: linear-gradient( 145deg, #ffffff 0%, #ecfdf5 100% );
  border: 1px solid #a7f3d0;
  border-radius: 11px;
  font-size: 18px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 8px rgba(6, 78, 59, 0.05);
}
.customer-orders-list-page-summary-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.customer-orders-list-page-summary-content {
  min-width: 0;
}
.customer-orders-list-page-summary-label {
  display: block;
  margin-bottom: 5px;
  color: var(--order-green-mid);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.025em;
}
.customer-orders-list-page-summary-value {
  display: block;
  overflow: hidden;
  color: var(--order-text-dark);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-orders-list-page-amount {
  color: var(--order-green);
  font-size: 19px;
  font-weight: 900;
}
.customer-orders-list-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 30px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ecfdf5 100% );
  border-top: 1px solid var(--order-border-light);
}
.customer-orders-list-page-footer-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--order-green-deep);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.customer-orders-list-page-footer-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 50%, #065f46 100% );
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.10);
}
.customer-orders-list-page-details-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  color: var(--order-green-deep);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}
.customer-orders-list-page-details-link:hover {
  color: #047857;
  opacity: 0.88;
}
.customer-orders-list-page-details-arrow {
  font-size: 17px;
  line-height: 1;
}
.customer-orders-list-page-primary-button:focus-visible, .customer-orders-list-page-details-link:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
@media (max-width: 800px) {
  .customer-orders-list-page-order-header {
    align-items: center;
    flex-direction: column;
    padding: 26px 24px;
  }
  .customer-orders-list-page-order-heading {
    width: 100%;
  }
  .customer-orders-list-page-header-action {
    width: 100%;
    justify-content: center;
  }
  .customer-orders-list-page-summary-grid {
    grid-template-columns: 1fr;
    padding: 18px 24px;
  }
  .customer-orders-list-page-summary-card {
    min-height: 76px;
  }
  .customer-orders-list-page-footer {
    padding: 17px 24px;
  }
}
@media (max-width: 560px) {
  .customer-orders-list-page-order-card {
    border-radius: 18px;
  }
  .customer-orders-list-page-order-header {
    padding: 22px 18px;
  }
  .customer-orders-list-page-order-title {
    font-size: 19px;
  }
  .customer-orders-list-page-order-date {
    font-size: 12px;
  }
  .customer-orders-list-page-header-action {
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }
  .customer-orders-list-page-status-badge {
    align-self: center;
  }
  .customer-orders-list-page-primary-button {
    width: 100%;
  }
  .customer-orders-list-page-summary-grid {
    gap: 10px;
    padding: 14px 18px;
  }
  .customer-orders-list-page-summary-card {
    min-height: 74px;
    padding: 14px;
  }
  .customer-orders-list-page-summary-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .customer-orders-list-page-footer {
    align-items: center;
    flex-direction: column;
    padding: 16px 18px;
    text-align: center;
  }
  .customer-orders-list-page-footer-message {
    justify-content: center;
  }
  .customer-orders-list-page-details-link {
    width: 100%;
    padding-top: 2px;
  }
}
@media (max-width: 380px) {
  .customer-orders-list-page-order-header {
    padding: 20px 15px;
  }
  .customer-orders-list-page-summary-grid {
    padding: 12px 15px;
  }
  .customer-orders-list-page-footer {
    padding: 15px;
  }
  .customer-orders-list-page-summary-card {
    gap: 11px;
    padding: 12px;
  }
  .customer-orders-list-page-summary-value {
    font-size: 15px;
  }
  .customer-orders-list-page-amount {
    font-size: 17px;
  }
}
.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 28px 0 10px;
  text-align: center;
}
.orders-pagination-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ffffff 48%, #ecfdf5 100% );
  border: 1px solid #a7f3d0;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.orders-pagination-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 96px;
  min-height: 38px;
  padding: 9px 14px;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border: 1px solid #064e3b;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(6, 78, 59, 0.16);
  transition: box-shadow 180ms ease, filter 180ms ease;
}
.orders-pagination-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.04) 70%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 420ms ease;
  pointer-events: none;
}
.orders-pagination-button:hover {
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-color: #064e3b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 6px 16px rgba(6, 78, 59, 0.21);
  filter: brightness(1.04);
}
.orders-pagination-button:hover::before {
  left: 130%;
}
.orders-pagination-button svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orders-pagination-button span {
  position: relative;
  z-index: 1;
}
.orders-pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  color: #064e3b;
  background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 100% );
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.orders-pagination-current-label {
  color: #065f46;
  font-weight: 700;
}
.orders-pagination-current strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 3px 7px;
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-radius: 7px;
  font-size: 12px;
  font-weight: 850;
}
.orders-pagination-current-of {
  color: #065f46;
  font-weight: 750;
}
.orders-pagination-button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
.orders-pagination-inner:only-child {
  margin-inline: auto;
}
@media (max-width: 560px) {
  .orders-pagination {
    margin-top: 22px;
    margin-bottom: 8px;
    padding-inline: 12px;
  }
  .orders-pagination-inner {
    width: 100%;
    gap: 7px;
    padding: 6px;
    border-radius: 13px;
  }
  .orders-pagination-button {
    min-width: 0;
    flex: 1;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 12px;
  }
  .orders-pagination-current {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .orders-pagination-current strong {
    min-width: 23px;
    min-height: 23px;
    padding: 3px 6px;
  }
}
@media (max-width: 380px) {
  .orders-pagination {
    padding-inline: 8px;
  }
  .orders-pagination-inner {
    gap: 5px;
  }
  .orders-pagination-button {
    padding-inline: 8px;
  }
  .orders-pagination-button svg {
    width: 14px;
    height: 14px;
  }
  .orders-pagination-current {
    gap: 4px;
    padding-inline: 8px;
  }
}
.customer-orders-page-summary-grid {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  margin-bottom: 35px;
}
.customer-orders-page-summary-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 320px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 25px;
  overflow: hidden;
  text-align: center;
  background: radial-gradient( circle at 50% 0%, rgba(45, 225, 112, 0.13), transparent 45% ), linear-gradient( 145deg, #0a2115 0%, #07170e 55%, #040e09 100% );
  border: 1px solid rgba(63, 222, 113, 0.22);
  border-radius: 20px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(35, 190, 102, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.customer-orders-page-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, #49ff8a, transparent );
  box-shadow: 0 0 12px rgba(73, 255, 138, 0.75);
  opacity: 0.9;
}
.customer-orders-page-summary-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  background: rgba(43, 232, 115, 0.12);
  border-radius: 50%;
  filter: blur(38px);
  pointer-events: none;
}
.customer-orders-page-summary-card span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #b5f5c9;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.9px;
  text-align: center;
  text-transform: uppercase;
}
.customer-orders-page-summary-card span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: #48f584;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(72, 245, 132, 1), 0 0 16px rgba(72, 245, 132, 0.55);
}
.customer-orders-page-summary-card strong {
  display: block;
  width: 100%;
  color: #ffffff;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
.customer-orders-page-summary-card:first-child strong {
  color: #63f596;
  font-size: 30px;
  text-shadow: 0 0 18px rgba(74, 246, 135, 0.20);
}
.customer-orders-page-summary-card:hover {
  border-color: rgba(72, 242, 130, 0.45);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.40), 0 0 30px rgba(38, 215, 105, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
  .customer-orders-page-summary-grid {
    flex-wrap: wrap;
    gap: 18px;
  }
  .customer-orders-page-summary-card {
    max-width: 300px;
  }
}
@media (max-width: 650px) {
  .customer-orders-page-summary-grid {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .customer-orders-page-summary-card {
    width: 100%;
    max-width: 360px;
    min-height: 135px;
    padding: 25px 22px;
    border-radius: 18px;
  }
  .customer-orders-page-summary-card span {
    font-size: 12px;
  }
  .customer-orders-page-summary-card strong {
    font-size: 27px;
  }
  .customer-orders-page-summary-card:first-child strong {
    font-size: 28px;
  }
}
@media (max-width: 400px) {
  .customer-orders-page-summary-card {
    max-width: 100%;
    min-height: 125px;
    padding: 22px 18px;
  }
  .customer-orders-page-summary-card strong {
    font-size: 25px;
  }
  .customer-orders-page-summary-card:first-child strong {
    font-size: 26px;
  }
}
.list-category-page {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 70px 24px;
  box-sizing: border-box;
  background: linear-gradient( 135deg, #ecfdf5 0%, #d1fae5 45%, #a7f3d0 72%, #6ee7b7 100% );
}
.list-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: stretch;
}
.list-category-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.list-category-card:hover {
  border-color: rgba(4, 120, 87, 0.25);
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}
.list-category-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.list-category-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient( 135deg, #ecfdf5, #d1fae5 );
}
.list-category-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.list-category-card:hover .list-category-image img {
  transform: scale(1.06);
}
.list-category-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 135deg, #047857 0%, #065f46 72%, #064e3b 100% );
}
.list-category-placeholder span {
  color: #ffffff;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
}
.list-category-content {
  flex: 1;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.list-category-content h2 {
  width: 100%;
  margin: 0 0 0.7rem;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 800;
  color: #111827;
  overflow-wrap: anywhere;
}
.list-category-content p {
  width: 100%;
  margin: 0 0 1.4rem;
  color: #1d1f1e;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.list-category-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease;
}
.list-category-card:hover .list-category-link {
  background: #047857;
  color: #ffffff;
}
.list-category-empty {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 4rem 2rem;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}
.list-category-empty h3 {
  margin: 0 0 0.75rem;
  color: #111827;
}
.list-category-empty p {
  margin: 0;
  color: #6b7280;
}
@media (min-width: 1200px) {
  .list-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .list-category-page {
    padding: 55px 22px;
  }
  .list-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .list-category-image {
    aspect-ratio: 16 / 10;
  }
  .list-category-content {
    padding: 1.4rem;
  }
  .list-category-content h2 {
    font-size: 1.25rem;
  }
}
@media (max-width: 767px) {
  .list-category-page {
    padding: 40px 16px;
  }
  .list-category-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .list-category-card {
    border-radius: 22px;
  }
  .list-category-image {
    aspect-ratio: 16 / 9;
  }
  .list-category-content {
    padding: 1.4rem 1.2rem 1.5rem;
  }
  .list-category-content h2 {
    font-size: 1.25rem;
  }
  .list-category-content p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .list-category-link {
    padding: 0.65rem 1.15rem;
  }
}
@media (max-width: 420px) {
  .list-category-page {
    padding: 30px 12px;
  }
  .list-category-grid {
    gap: 1.2rem;
  }
  .list-category-card {
    border-radius: 20px;
  }
  .list-category-image {
    aspect-ratio: 4 / 3;
  }
  .list-category-content {
    padding: 1.2rem 1rem 1.3rem;
  }
  .list-category-content h2 {
    font-size: 1.15rem;
  }
  .list-category-content p {
    font-size: 0.88rem;
  }
  .list-category-placeholder span {
    font-size: 2.8rem;
  }
}
@media (max-width: 340px) {
  .list-category-page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .list-category-content {
    padding: 1rem 0.85rem 1.1rem;
  }
  .list-category-content h2 {
    font-size: 1.05rem;
  }
  .list-category-link {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (prefers-reduced-motion: reduce) {
  .list-category-card, .list-category-image img, .list-category-link {
    transition: none;
  }
  .list-category-card:hover {
    transform: none;
  }
  .list-category-card:hover .list-category-image img {
    transform: none;
  }
}
.vendor-product-rejection-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 20px 0;
  padding: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #ea580c;
  border-radius: 14px;
}
.vendor-product-rejection-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #ffedd5;
  color: #c2410c;
}
.vendor-product-rejection-icon svg {
  width: 20px;
  height: 20px;
}
.vendor-product-rejection-content {
  min-width: 0;
}
.vendor-product-rejection-label {
  display: block;
  margin-bottom: 3px;
  color: #c2410c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vendor-product-rejection-content h3 {
  margin: 0 0 7px;
  color: #7c2d12;
  font-size: 17px;
  font-weight: 800;
}
.vendor-product-rejection-content p {
  margin: 0;
  color: #431407;
  font-size: 14px;
  line-height: 1.65;
}
.add-product-section {
  --add-primary: #07883f;
  --add-primary-dark: #056b31;
  --add-primary-soft: #eaf8ef;
  --add-primary-soft-2: #f3fbf6;
  --add-border: #dce8df;
  --add-border-strong: #c8d9cd;
  --add-text: #15251b;
  --add-muted: #6b7d71;
  --add-surface: #ffffff;
  --add-background: #f4f8f5;
  --add-danger: #dc2626;
  min-height: 100vh;
  padding: 50px 25px 70px;
  background: radial-gradient( circle at 10% 0%, rgba(5, 139, 46, .07), transparent 28% ), radial-gradient( circle at 90% 10%, rgba(16, 185, 129, .05), transparent 25% ), var(--add-background);
  color: var(--add-text);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.add-product-container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.add-product-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  padding: 28px 30px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--add-border);
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(22, 65, 39, .06);
}
.add-product-header-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient( 135deg, #e9f8ee, #d9f1e1 );
  color: var(--add-primary);
}
.add-product-header-icon svg {
  width: 27px;
  height: 27px;
}
.add-product-header-content {
  min-width: 0;
}
.add-product-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--add-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.add-product-header h1 {
  margin: 0 0 7px;
  color: var(--add-text);
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.04em;
}
.add-product-header p {
  max-width: 700px;
  margin: 0;
  color: var(--add-muted);
  font-size: 14px;
  line-height: 1.65;
}
.add-product-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 15px 17px;
  border-radius: 15px;
  font-size: 14px;
}
.add-product-alert-error {
  background: #fff7f7;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.add-product-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.add-product-alert-icon svg {
  width: 19px;
  height: 19px;
}
.add-product-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
.add-product-card {
  overflow: hidden;
  background: var(--add-surface);
  border: 1px solid var(--add-border);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(22, 65, 39, .045);
}
.add-product-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient( 180deg, #ffffff, #fbfdfb );
  border-bottom: 1px solid #e7eee9;
}
.add-product-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--add-primary-soft);
  color: var(--add-primary);
}
.add-product-card-icon svg {
  width: 20px;
  height: 20px;
}
.add-product-card-header h2 {
  margin: 0 0 4px;
  color: var(--add-text);
  font-size: 17px;
  font-weight: 800;
}
.add-product-card-header p {
  margin: 0;
  color: var(--add-muted);
  font-size: 13px;
  line-height: 1.5;
}
.add-product-card-body {
  padding: 25px;
}
.add-product-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 21px;
}
.add-product-form-group:last-child {
  margin-bottom: 0;
}
.add-product-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #26382d;
  font-size: 14px;
  font-weight: 700;
}
.add-product-form-group label span {
  margin-left: 3px;
  color: var(--add-danger);
}
.add-product-form input:not( [type="file"] ):not( [type="hidden"] ), .add-product-form textarea, .add-product-form select {
  width: 100%;
  max-width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--add-border-strong);
  border-radius: 13px;
  background: #ffffff;
  color: var(--add-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.add-product-form input:not( [type="file"] ):not( [type="hidden"] ):hover, .add-product-form textarea:hover, .add-product-form select:hover {
  border-color: #aac5b3;
}
.add-product-form input:not( [type="file"] ):not( [type="hidden"] ):focus, .add-product-form textarea:focus, .add-product-form select:focus {
  border-color: var(--add-primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(7, 136, 63, .10);
}
.add-product-form textarea {
  min-height: 155px;
  resize: vertical;
  line-height: 1.65;
}
.add-product-form select {
  appearance: none;
  padding-right: 42px;
  background-image: linear-gradient( 45deg, transparent 50%, #718277 50% ), linear-gradient( 135deg, #718277 50%, transparent 50% );
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.add-product-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.add-product-field-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 7px 0 0;
  color: var(--add-danger);
  font-size: 12px;
  line-height: 1.5;
}
.add-product-field-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.add-product-specifications {
  margin: 25px 0;
  padding: 20px;
  border: 1px solid #e0ebe3;
  border-radius: 17px;
  background: linear-gradient( 180deg, #fbfefc, #f7fbf8 );
}
.add-product-section-heading {
  margin-bottom: 18px;
}
.add-product-section-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--add-text);
  font-size: 15px;
  font-weight: 800;
}
.add-product-section-heading h3 svg {
  width: 18px;
  height: 18px;
  color: var(--add-primary);
}
.add-product-section-heading p {
  margin: 0;
  color: var(--add-muted);
  font-size: 12px;
}
.product-specifications {
  width: 100%;
}
.product-specifications .vendor-product-edit-specification-fields, .product-specifications .specification-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.product-specifications input, .product-specifications select, .product-specifications textarea {
  width: 100%;
  max-width: 100%;
}
.add-product-empty-specifications {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px dashed #cbdace;
  border-radius: 13px;
  background: #f8fcf9;
  color: var(--add-muted);
  font-size: 13px;
}
.add-product-empty-specifications svg {
  width: 18px;
  height: 18px;
  color: var(--add-primary);
}
.add-product-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--add-primary);
  font-size: 13px;
}
.add-product-loading svg {
  width: 16px;
  height: 16px;
  animation: addProductSpin 1s linear infinite;
}
@keyframes addProductSpin {
  to {
    transform: rotate(360deg);
  }
}
.add-product-helper {
  display: block;
  margin-top: 7px;
  color: var(--add-muted);
  font-size: 12px;
  line-height: 1.5;
}
.add-product-helper strong {
  color: #385543;
}
.add-product-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 18px;
  border: 1px dashed #b8cdbc;
  border-radius: 16px;
  background: linear-gradient( 180deg, #fbfefc, #f5faf7 );
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.add-product-upload:hover {
  border-color: var(--add-primary);
  background: #f1faf4;
  box-shadow: 0 0 0 3px rgba(7, 136, 63, .06);
}
.add-product-upload-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--add-primary-soft);
  color: var(--add-primary);
}
.add-product-upload-icon svg {
  width: 21px;
  height: 21px;
}
.add-product-upload-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.add-product-upload-content strong {
  color: var(--add-text);
  font-size: 14px;
  font-weight: 750;
}
.add-product-upload-content span {
  color: var(--add-muted);
  font-size: 12px;
  line-height: 1.45;
}
.add-product-upload-action {
  margin-left: auto;
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 9px;
  background: var(--add-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.add-product-hidden-input {
  display: none !important;
}
.add-product-main-preview {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.add-product-main-preview img {
  width: 230px;
  height: 230px;
  object-fit: cover;
  border-radius: 17px;
  border: 1px solid var(--add-border);
  box-shadow: 0 8px 25px rgba(22, 65, 39, .08);
}
.add-product-gallery-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.add-product-gallery-preview img {
  display: block;
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--add-border);
  box-shadow: 0 5px 15px rgba(22, 65, 39, .06);
}
.add-product-tag-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 53px;
  padding: 8px 11px;
  border: 1px solid var(--add-border-strong);
  border-radius: 13px;
  background: #ffffff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.add-product-tag-box:focus-within {
  border-color: var(--add-primary);
  box-shadow: 0 0 0 4px rgba(7, 136, 63, .10);
}
.add-product-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.add-product-tag-box input {
  flex: 1;
  min-width: 150px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 7px 4px !important;
  background: transparent !important;
}
.add-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #cce6d4;
  border-radius: 999px;
  background: #edf9f1;
  color: #176334;
  font-size: 12px;
  font-weight: 700;
}
.add-product-tag button {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #398052;
  cursor: pointer;
}
.add-product-tag button:hover {
  background: #d7efde;
  color: #b42318;
}
.add-product-tag-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-sizing: border-box;
  transition: .2s ease;
}
.add-product-tag-box:focus-within {
  border-color: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .12);
}
.add-product-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.add-product-tag-list .tag, .add-product-tag-box .tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.add-product-tag-list .tag button, .add-product-tag-box .tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #15803d;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.add-product-tag-list .tag button:hover {
  background: #16a34a;
  color: white;
}
.add-product-tag-box #tag-input {
  flex: 1;
  min-width: 180px;
  width: auto;
  padding: 7px 4px;
  border: none !important;
  outline: none !important;
  background: transparent;
  box-shadow: none !important;
  font-size: 14px;
  color: #111827;
}
.add-product-tag-box #tag-input::placeholder {
  color: #94a3b8;
}
.add-product-form-group input[name="tags"], .add-product-form-group textarea[name="tags"] {
  display: none;
}
.add-product-form input[type="hidden"] {
  display: none;
}
.vendor-dashboard-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-top: 20px;
}
.vendor-dashboard-action-buttons .vendor-dashboard-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-dashboard-back-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .vendor-dashboard-action-buttons {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .vendor-dashboard-action-buttons .vendor-dashboard-back-button {
    width: 100%;
    min-height: 46px;
  }
}
@media (max-width: 380px) {
  .vendor-dashboard-action-buttons {
    gap: 8px;
  }
  .vendor-dashboard-action-buttons .vendor-dashboard-back-button {
    padding: 10px 14px;
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .add-product-section {
    padding: 30px 16px 50px;
  }
  .add-product-header {
    align-items: flex-start;
    padding: 22px;
    border-radius: 18px;
  }
  .add-product-header-icon {
    width: 46px;
    height: 46px;
  }
  .add-product-header h1 {
    font-size: 25px;
  }
  .add-product-header p {
    font-size: 13px;
  }
  .add-product-card {
    border-radius: 18px;
  }
  .add-product-card-header {
    padding: 19px;
  }
  .add-product-card-body {
    padding: 19px;
  }
  .add-product-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .product-specifications .vendor-product-edit-specification-fields, .product-specifications .specification-fields {
    grid-template-columns: 1fr;
  }
  .add-product-gallery-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .add-product-upload {
    align-items: flex-start;
  }
  .add-product-upload-action {
    align-self: center;
  }
  .add-product-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .add-product-reset-btn, .add-product-submit-btn {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .add-product-section {
    padding: 20px 12px 40px;
  }
  .add-product-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 22px 17px;
  }
  .add-product-header-content {
    width: 100%;
  }
  .add-product-header h1 {
    font-size: 23px;
  }
  .add-product-card-header {
    align-items: flex-start;
  }
  .add-product-card-body {
    padding: 16px;
  }
  .add-product-specifications {
    padding: 15px;
  }
  .add-product-upload {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .add-product-upload-content {
    align-items: center;
  }
  .add-product-upload-action {
    margin-left: 0;
  }
  .add-product-main-preview img {
    width: 190px;
    height: 190px;
  }
  .add-product-gallery-preview {
    grid-template-columns: 1fr;
  }
  .add-product-gallery-preview img {
    height: 190px;
  }
}
.products-section {
  padding: clamp(25px, 5vw, 55px) clamp(12px, 2.5vw, 25px) 90px;
  background: #f6f8fc;
  box-sizing: border-box;
}
.products-section *, .products-section *::before, .products-section *::after {
  box-sizing: border-box;
}
.products-section .product-title {
  position: relative;
  display: table;
  max-width: 100%;
  margin: 0 auto 40px;
  text-align: center;
  font-size: clamp(23px, 4vw, 36px);
  font-weight: 900;
  color: #021a5a;
  line-height: 1.3;
}
.products-section .product-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 65%;
  height: 4px;
  background: linear-gradient(90deg, #021a5a, #16a34a);
  border-radius: 999px;
  box-shadow: 0 6px 15px rgba(2, 26, 90, 0.25);
}
.product-title::after {
  animation: underlineGlow 2.5s ease-in-out infinite;
}
@keyframes underlineGlow {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(0.9);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.05);
  }
}
.products-section .products-grid {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(14px, 2.4vw, 30px);
}
.products-section .product-card {
  position: relative;
  flex: 0 1 380px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05), 0 25px 50px rgba(15, 23, 42, .06);
}
.products-section .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0aa368, #0f833a);
  opacity: .85;
}
.products-section .product-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -80px;
  right: -80px;
  background: rgba(37, 99, 235, .08);
  border-radius: 50%;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .products-section .product-card:hover {
    transform: none;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .08), 0 25px 50px rgba(15, 23, 42, .06);
  }
}
.products-section .product-image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  width: 100%;
  height: clamp(190px, 27vw, 360px);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products-section .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.4s ease;
  display: block;
}
.products-section .product-card:hover .product-image img {
  transform: scale(1.06);
}
.products-section .discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
}
.products-section .product-icons {
  position: absolute;
  bottom: 12px;
  left: 50%;
  top: auto;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 15px);
  width: max-content;
  max-width: 95%;
  z-index: 5;
}
.products-section .product-icons form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.products-section .icon-btn {
  width: clamp(38px, 4.5vw, 54px);
  height: clamp(38px, 4.5vw, 54px);
  min-width: clamp(38px, 4.5vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(230, 226, 226, 0.96);
  color: #334155;
  font-size: clamp(19px, 2.2vw, 26px);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.products-section .icon-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.products-section .icon-btn:disabled {
  cursor: default;
  opacity: 1;
}
.products-section .wishlist {
  color: #ef4444;
}
@media (hover: hover) and (pointer: fine) {
  .products-section .wishlist:not(:disabled):hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.18);
    transform: scale(1.04);
  }
}
.products-section .cart {
  color: #16a34a;
}
@media (hover: hover) and (pointer: fine) {
  .products-section .cart:not(:disabled):hover {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
    box-shadow: 0 5px 15px rgba(22, 163, 74, 0.18);
    transform: scale(1.04);
  }
}
.products-section .cart.added {
  background: #dcfce7;
  color: #15803d;
  cursor: default;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .15);
}
.products-section .cart.added svg {
  stroke: #15803d;
  stroke-width: 2.8;
}
.products-section .cart.added:disabled {
  opacity: 1;
}
.products-section .icon-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.products-section .icon-btn:focus-visible {
  outline: 3px solid rgba(22, 163, 74, 0.35);
  outline-offset: 3px;
}
.products-section .cart-add-form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.products-section .wishlist-loading, .products-section .cart-loading {
  display: none;
  font-size: 10px;
  font-weight: 800;
}
.products-section .wishlist-add-form.htmx-request .wishlist-icon, .products-section .cart-add-form.htmx-request .cart-icon {
  display: none;
}
.products-section .wishlist-add-form.htmx-request .wishlist-loading, .products-section .cart-add-form.htmx-request .cart-loading {
  display: block;
}
.product-info {
  width: min(100%, 680px);
  margin: 18px auto 24px;
  padding: 13px 18px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.product-stock-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 15px auto;
  padding: 14px 24px;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 50px;
  text-align: center;
  transition: all 0.3s ease;
}
.product-stock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
}
.product-stock-icon svg {
  width: 30px;
  height: 25px;
  stroke-width: 2.5;
}
.product-stock-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.product-stock-text {
  color: #0c5025;
  font-size: 14px;
  font-weight: 700;
}
.product-stock-count {
  color: #19241c;
  font-size: 14px;
  font-weight: 700;
}
.product-stock-card.out {
  background: #ffffff;
  border-color: #fecaca;
}
.product-stock-icon.out {
  color: #dc2626;
}
.product-stock-text.out {
  color: #dc2626;
}
.product-stock-count.out {
  color: #991b1b;
}
.product-info-all {
  color: #28734f;
  background: #f0faf4;
  border-color: #c9e7d6;
}
.product-info-published {
  color: #176b45;
  background: #eaf8f0;
  border-color: #b8dfca;
}
.product-info-rejected {
  color: #a33a3a;
  background: #fff2f2;
  border-color: #f0caca;
}
.product-info-review {
  color: #8a6414;
  background: #fff9e8;
  border-color: #ead9a8;
}
.product-info-archived {
  color: #59636d;
  background: #f3f5f7;
  border-color: #d6dce1;
}
.products-section .badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  width: fit-content;
  transition: 0.2s ease;
}
.products-section .product-name {
  margin: 12px 0 8px;
  text-align: center;
  overflow-wrap: anywhere;
}
.products-section .product-name a {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  text-decoration: none;
  transition: color .25s ease;
}
.products-section .product-name a:hover {
  color: #022e46;
}
.products-section .vendor {
  margin-bottom: 10px;
  text-align: center;
}
.products-section .vendor a, .products-section .vendor span {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
  text-decoration: none;
  transition: color .25s ease;
}
.products-section .vendor a:hover {
  color: #092e17;
}
.products-section .product-category {
  font-size: 14px;
  font-weight: 800;
  color: #021a5a;
  display: inline-block;
  background: #e0e7ff;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.products-section .rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .18);
  box-shadow: 0 4px 12px rgba(245, 158, 11, .12);
  transition: box-shadow .25s ease, transform .25s ease;
}
.products-section .rating:hover {
  box-shadow: 0 8px 20px rgba(245, 158, 11, .18);
}
.products-section .stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(245, 158, 11, .25);
}
.products-section .rating-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #09995d;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.products-section .review-count {
  font-size: 14px;
  color: #09995d;
  font-weight: 600;
}
.products-section .product-prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
  text-align: center;
}
.products-section .old-price {
  font-size: 16px;
  color: #ff4d4f;
  text-decoration: line-through;
  font-weight: 600;
}
.products-section .price {
  font-size: 24px;
  font-weight: 900;
  color: #058b2e;
  line-height: 1.1;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 10px;
}
.products-section .price-only {
  font-size: 24px;
  font-weight: 900;
  color: #058b2e;
  line-height: 1.1;
}
.products-section .whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 30px 0 0;
  padding: 10px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, #03aa65, #028131);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(34, 197, 94, .35), 0 0 25px rgba(34, 197, 94, .15);
  transition: box-shadow .35s ease, background .35s ease;
}
.products-section .whatsapp-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, .35), transparent );
  transition: .6s ease;
}
.products-section .whatsapp-btn:hover::before {
  left: 120%;
}
.products-section .whatsapp-btn:hover {
  background: linear-gradient(135deg, #34d399, #16a34a);
  box-shadow: 0 0 20px rgba(34, 197, 94, .65), 0 0 45px rgba(34, 197, 94, .35);
}
.products-section .whatsapp-btn svg {
  width: 18px;
  height: 18px;
  stroke: #fff !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7));
  transition: .35s ease;
}
.products-section .whatsapp-btn:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(34, 197, 94, .9));
}
@keyframes whatsappGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(34, 197, 94, .35), 0 0 25px rgba(34, 197, 94, .15);
  }
  50% {
    box-shadow: 0 0 18px rgba(34, 197, 94, .5), 0 0 35px rgba(34, 197, 94, .25);
  }
}
.products-section .whatsapp-btn {
  animation: whatsappGlow 3s ease-in-out infinite;
}
.products-section .product-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.products-section .empty-products {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 50px 30px;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 2px dashed #16a34a;
  border-radius: 20px;
  text-align: center;
}
.products-section .empty-products p {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.5;
  color: #021a5a;
}
.products-section .empty-products svg {
  width: 80px;
  height: 80px;
  stroke: #16a34a;
  stroke-width: 2.2;
  margin-bottom: 20px;
}
.vendor-dashboard-product-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.vendor-dashboard-product-actions form {
  margin: 0;
}
.vendor-dashboard-product-edit-btn, .vendor-dashboard-product-delete-btn, .vendor-dashboard-product-restore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 145px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: none;
  background: none;
}
.vendor-dashboard-product-edit-btn {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  box-shadow: 0 0 12px rgba(16, 185, 129, .25), 0 0 25px rgba(16, 185, 129, .12);
}
.vendor-dashboard-product-delete-btn {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  box-shadow: 0 0 12px rgba(239, 68, 68, .25), 0 0 25px rgba(239, 68, 68, .12);
}
.vendor-dashboard-product-restore-btn {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  box-shadow: 0 0 12px rgba(59, 130, 246, .25), 0 0 25px rgba(59, 130, 246, .12);
}
.vendor-dashboard-product-edit-btn i, .vendor-dashboard-product-delete-btn i, .vendor-dashboard-product-restore-btn i {
  width: 18px;
  height: 18px;
}
.vendor-dashboard-product-edit-btn:active, .vendor-dashboard-product-delete-btn:active, .vendor-dashboard-product-restore-btn:active {
  transform: scale(.98);
}
.vendor-dashboard-product-edit-btn:focus-visible {
  outline: 3px solid rgba(16, 185, 129, .25);
  outline-offset: 3px;
}
.vendor-dashboard-product-delete-btn:focus-visible {
  outline: 3px solid rgba(239, 68, 68, .25);
  outline-offset: 3px;
}
.vendor-dashboard-product-restore-btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .25);
  outline-offset: 3px;
}
.load-more-trigger {
  width: 100%;
  text-align: center;
  padding: 30px;
  color: #0a8849;
  font-weight: 600;
}
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: block;
}
@media (max-width: 1000px) {
  .products-section .products-grid {
    gap: 22px;
  }
  .products-section .product-card {
    flex-basis: calc((100% - 22px) / 2);
    max-width: 420px;
  }
  .products-section .product-image {
    height: clamp(210px, 32vw, 300px);
  }
}
@media (max-width: 768px) {
  .products-section {
    padding: 35px 16px 65px;
  }
  .products-section .product-title {
    font-size: 29px;
    margin-bottom: 35px;
  }
  .products-section .products-grid {
    gap: 18px;
  }
  .products-section .product-card {
    padding: 15px;
    border-radius: 20px;
  }
  .products-section .product-image {
    height: clamp(190px, 35vw, 270px);
  }
  .products-section .product-icons {
    bottom: 10px;
    gap: 10px;
  }
  .products-section .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .products-section .icon-btn svg {
    width: 20px;
    height: 20px;
  }
  .product-stock-card {
    padding: 12px 20px;
    gap: 10px;
  }
  .product-stock-icon svg {
    width: 23px;
    height: 23px;
  }
  .product-stock-text {
    font-size: 16px;
    font-weight: 800;
  }
  .product-stock-count {
    font-size: 14px;
    font-weight: 700;
  }
  .products-section .stars {
    font-size: 18px;
  }
  .products-section .rating-value {
    font-size: 14px;
  }
  .products-section .product-name a {
    font-size: 18px;
    font-weight: 900;
  }
  .products-section .vendor a, .products-section .vendor span {
    font-size: 15px;
    font-weight: 800;
  }
  .products-section .price, .products-section .price-only {
    font-size: 23px;
    font-weight: 900;
  }
  .products-section .empty-products {
    min-height: 220px;
    padding: 40px 20px;
  }
  .products-section .empty-products p {
    font-size: 22px;
    font-weight: 900;
  }
  .products-section .empty-products svg {
    width: 65px;
    height: 65px;
  }
}
@media (max-width: 650px) {
  .products-section {
    padding: 28px 12px 55px;
  }
  .products-section .products-grid {
    gap: 16px;
  }
  .products-section .product-card {
    flex-basis: calc((100% - 16px) / 2);
    max-width: 360px;
    padding: 13px;
  }
  .products-section .product-image {
    height: clamp(155px, 38vw, 240px);
  }
  .products-section .product-name {
    margin: 12px 0 8px;
  }
  .products-section .product-name a {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
  }
  .products-section .vendor a, .products-section .vendor span {
    font-size: 14px;
    font-weight: 800;
  }
  .products-section .product-category {
    font-size: 13px;
    font-weight: 900;
  }
  .products-section .rating {
    gap: 6px;
    padding: 6px 9px;
  }
  .products-section .stars {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
  }
  .products-section .rating-value {
    min-width: auto;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: 900;
  }
  .products-section .review-count {
    font-size: 12px;
    font-weight: 800;
  }
  .products-section .old-price {
    font-size: 14px;
    font-weight: 800;
  }
  .products-section .price, .products-section .price-only {
    font-size: 21px;
    font-weight: 900;
  }
  .products-section .product-icons {
    bottom: 8px;
    gap: 8px;
  }
  .products-section .icon-btn {
    width: 39px;
    height: 39px;
    min-width: 39px;
  }
  .products-section .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .product-stock-card {
    padding: 11px 17px;
    gap: 8px;
  }
  .product-stock-icon svg {
    width: 21px;
    height: 21px;
  }
  .product-stock-text {
    font-size: 15px;
    font-weight: 900;
  }
  .product-stock-count {
    font-size: 13px;
    font-weight: 800;
  }
  .products-section .whatsapp-btn {
    margin-top: 20px;
    padding: 10px 17px;
    font-size: 13px;
    font-weight: 900;
  }
  .products-section .empty-products {
    min-height: 200px;
    padding: 30px 15px;
  }
  .products-section .empty-products p {
    font-size: 20px;
    font-weight: 900;
  }
  .vendor-dashboard-product-actions {
    gap: 10px;
  }
}
@media (max-width: 400px) {
  .products-section {
    padding-left: 10px;
    padding-right: 10px;
  }
  .products-section .product-title {
    font-size: 25px;
  }
  .products-section .products-grid {
    gap: 15px;
  }
  .products-section .product-card {
    flex-basis: 100%;
    max-width: 340px;
    padding: 15px;
  }
  .products-section .product-image {
    height: 250px;
  }
  .products-section .product-name a {
    font-size: 19px;
    font-weight: 900;
  }
  .products-section .vendor a, .products-section .vendor span {
    font-size: 15px;
    font-weight: 800;
  }
  .products-section .product-category {
    font-size: 14px;
  }
  .products-section .stars {
    font-size: 18px;
  }
  .products-section .rating-value {
    font-size: 14px;
  }
  .products-section .review-count {
    display: inline;
    font-size: 13px;
  }
  .products-section .price, .products-section .price-only {
    font-size: 23px;
    font-weight: 900;
  }
  .product-stock-text {
    font-size: 16px;
    font-weight: 900;
  }
  .product-stock-count {
    font-size: 14px;
    font-weight: 800;
  }
}
@media (max-width: 320px) {
  .products-section .product-card {
    max-width: 290px;
  }
  .products-section .product-image {
    height: 220px;
  }
  .products-section .product-name a {
    font-size: 18px;
  }
  .products-section .product-info {
    padding: 12px;
  }
  .products-section .product-icons {
    gap: 7px;
  }
  .products-section .icon-btn {
    width: 37px;
    height: 37px;
    min-width: 37px;
  }
  .products-section .price, .products-section .price-only {
    font-size: 21px;
  }
}
@media (max-width: 640px) {
  .vendor-dashboard-product-actions {
    flex-direction: column;
  }
  .vendor-dashboard-product-actions form {
    width: 100%;
  }
  .vendor-dashboard-product-edit-btn, .vendor-dashboard-product-delete-btn, .vendor-dashboard-product-restore-btn {
    width: 100%;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
  }
}
@media (prefers-reduced-motion: reduce) {
  .products-section .icon-btn, .products-section .product-card, .products-section .product-image img, .products-section .rating, .products-section .whatsapp-btn {
    transition: none;
    animation: none;
  }
}
.vendor-delete-product {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f8fafc;
}
.vendor-delete-product-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(15,23,42,.08);
}
.vendor-delete-product-icon {
  width: 75px;
  height: 75px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: #fee2e2;
}
.vendor-delete-product-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #dc2626;
}
.vendor-delete-product-text {
  margin: 15px 0 8px;
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
}
.vendor-delete-product-warning {
  color: #dc2626;
  font-weight: 600;
  margin-bottom: 25px;
}
.vendor-delete-product-image-wrapper {
  margin-bottom: 30px;
}
.vendor-delete-product-image {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.vendor-delete-product-form {
  display: flex;
  gap: 12px;
}
.vendor-delete-product-delete-btn {
  flex: 1;
  border: none;
  cursor: pointer;
  padding: 14px;
  border-radius: 12px;
  background: #dc2626;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: .3s;
}
.vendor-delete-product-delete-btn:hover {
  background: #b91c1c;
}
.vendor-delete-product-cancel-btn {
  flex: 1;
  text-decoration: none;
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-weight: 700;
  transition: .3s;
}
.vendor-delete-product-cancel-btn:hover {
  background: #f8fafc;
}
@media (max-width:600px) {
  .vendor-delete-product-card {
    padding: 24px;
  }
  .vendor-delete-product-form {
    flex-direction: column;
  }
}
css :root {
  --primary: #15803d;
  --primary-dark: #166534;
  --accent: #10b981;
  --danger: #dc2626;
  --warning: #f59e0b;
  --text: #0f172a;
  --muted: #64748b;
  --light: #f4f7fb;
  --card: #ffffff;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 12px 35px rgba(21, 128, 61, 0.12);
  --transition: all 0.25s ease;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Inter", sans-serif;
  background: var(--light);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.product-details-section {
  width: 100%;
  padding: clamp(24px, 4vw, 56px) clamp(12px, 2.5vw, 28px);
  background: radial-gradient( circle at top left, rgba(16, 185, 129, 0.06), transparent 35% ), var(--light);
}
.product-details-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}
.product-detail-gallery-card, .product-detail-info-card {
  width: 100%;
  min-width: 0;
}
.product-detail-info-card {
  position: sticky;
  top: 24px;
}
.product-detail-gallery-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient( 145deg, #ffffff, #f8fafc );
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-xl);
  padding: clamp(14px, 2vw, 24px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04), 0 25px 60px rgba(15, 23, 42, 0.04);
  isolation: isolate;
}
.product-detail-gallery-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient( 90deg, #15803d, #10b981, #34d399 );
  z-index: 1;
}
.product-detail-gallery-card::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 220px;
  height: 220px;
  background: rgba(16, 185, 129, 0.055);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.product-detail-discount-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 135deg, #ef4444, #b91c1c );
  color: #ffffff;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.22);
  z-index: 5;
}
.product-detail-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-detail-main-image-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  background: linear-gradient( 145deg, #ffffff, #f8fafc );
  border: 1px solid #edf2f7;
  border-radius: var(--radius-lg);
}
.main-product-detail-image {
  display: block;
  width: 100%;
  height: clamp(280px, 38vw, 480px);
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 2vw, 22px);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s cubic-bezier(.22, 1, .36, 1), transform 0.6s cubic-bezier(.22, 1, .36, 1), filter 0.45s ease;
  will-change: transform, opacity, filter;
}
@media (hover: hover) and (pointer: fine) {
  .product-detail-main-image-wrapper:hover .main-product-detail-image {
    transform: scale(1.04);
    filter: brightness(1.025) contrast(1.02);
  }
}
.main-product-detail-image.is-switching {
  opacity: 0;
  transform: scale(0.96);
  filter: blur(6px);
}
@keyframes imageFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
.main-product-detail-image {
  animation: imageFadeIn 0.6s cubic-bezier(.22, 1, .36, 1);
}
.product-detail-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.product-detail-thumbnail-gallery {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding: 2px;
}
.product-detail-thumbnail {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-detail-thumbnail:hover {
    transform: scale(1.04);
    border-color: #86efac;
    box-shadow: 0 6px 18px rgba(21, 128, 61, 0.10);
  }
}
.product-detail-thumbnail.active {
  border-color: var(--primary);
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.10), 0 5px 15px rgba(21, 128, 61, 0.08);
}
.product-detail-gallery-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
}
.product-detail-gallery-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.product-detail-gallery-meta-item i {
  width: 18px;
  height: 18px;
  color: var(--primary);
}
@media (max-width: 1000px) {
  .product-details-section {
    padding: 32px 16px;
  }
  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }
  .product-detail-info-card {
    top: 16px;
  }
  .product-detail-gallery-card {
    padding: 16px;
    border-radius: 22px;
  }
  .main-product-detail-image {
    height: clamp(260px, 40vw, 400px);
  }
  .product-detail-thumbnail {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
  }
}
@media (max-width: 768px) {
  .product-details-section {
    padding: 24px 14px 40px;
  }
  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .product-detail-info-card {
    position: relative;
    top: auto;
  }
  .product-detail-gallery-card {
    padding: 14px;
    border-radius: 20px;
  }
  .product-detail-gallery-wrapper {
    gap: 14px;
  }
  .product-detail-main-image-wrapper {
    min-height: 240px;
    border-radius: 16px;
  }
  .main-product-detail-image {
    height: clamp(250px, 65vw, 420px);
    padding: 12px;
  }
  .product-detail-discount-badge {
    top: 12px;
    left: 12px;
    font-size: 12px;
    padding: 6px 11px;
  }
  .product-detail-zoom-hint {
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    padding: 6px 10px;
  }
  .product-detail-thumbnail-gallery {
    gap: 10px;
  }
  .product-detail-thumbnail {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 12px;
  }
  .product-detail-gallery-meta {
    gap: 10px 16px;
    padding-top: 13px;
  }
  .product-detail-gallery-meta-item {
    font-size: 13px;
    font-weight: 800;
  }
}
@media (max-width: 480px) {
  .product-details-section {
    padding: 18px 10px 32px;
  }
  .product-detail-hero {
    gap: 18px;
  }
  .product-detail-gallery-card {
    padding: 11px;
    border-radius: 17px;
  }
  .product-detail-gallery-wrapper {
    gap: 12px;
  }
  .product-detail-main-image-wrapper {
    min-height: 220px;
    border-radius: 13px;
  }
  .main-product-detail-image {
    height: clamp(230px, 72vw, 340px);
    padding: 8px;
  }
  .product-detail-thumbnail-gallery {
    gap: 8px;
  }
  .product-detail-thumbnail {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    padding: 4px;
    border-radius: 10px;
  }
  .product-detail-gallery-meta {
    gap: 9px 12px;
    margin-top: 5px;
    padding-top: 12px;
  }
  .product-detail-gallery-meta-item {
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
  }
  .product-detail-gallery-meta-item i {
    width: 16px;
    height: 16px;
  }
  .product-detail-zoom-hint {
    font-size: 10px;
    padding: 5px 9px;
  }
}
@media (max-width: 350px) {
  .product-details-section {
    padding-left: 8px;
    padding-right: 8px;
  }
  .product-detail-gallery-card {
    padding: 9px;
    border-radius: 15px;
  }
  .main-product-detail-image {
    height: 220px;
  }
  .product-detail-thumbnail {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .product-detail-gallery-meta-item {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-product-detail-image, .product-detail-thumbnail {
    transition: none;
    animation: none;
  }
  .product-detail-main-image-wrapper:hover .main-product-detail-image, .product-detail-thumbnail:hover {
    transform: none;
  }
}
.product-detail-info-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.product-detail-top-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 0 auto 18px;
}
.product-detail-category-badge, .product-detail-condition-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.05);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.product-detail-category-badge {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.25);
  color: #2563eb;
}
.product-detail-condition-badge {
  background: rgba(5,151,49,.12);
  border-color: rgba(5,151,49,.25);
  color: #059731;
}
.product-detail-category-badge i, .product-detail-condition-badge i, .product-detail-category-badge svg, .product-detail-condition-badge svg {
  width: 18px;
  height: 18px;
  color: inherit;
  stroke: currentColor;
  flex-shrink: 0;
}
.product-detail-category-badge:hover {
  background: rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12), 0 0 18px rgba(37,99,235,.28), 0 8px 20px rgba(37,99,235,.12);
  filter: brightness(1.03);
}
.product-detail-condition-badge:hover {
  background: rgba(5,151,49,.18);
  border-color: rgba(5,151,49,.45);
  box-shadow: 0 0 0 2px rgba(5,151,49,.12), 0 0 18px rgba(5,151,49,.30), 0 8px 20px rgba(5,151,49,.12);
  filter: brightness(1.03);
}
.product-detail-category-badge:hover i, .product-detail-category-badge:hover svg {
  filter: drop-shadow(0 0 6px rgba(37,99,235,.6));
}
.product-detail-condition-badge:hover i, .product-detail-condition-badge:hover svg {
  filter: drop-shadow(0 0 6px rgba(5,151,49,.6));
}
.product-detail-name {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin: 12px 0 8px;
  letter-spacing: -0.4px;
  color: #0f172a;
}
.product-detail-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.product-detail-rating-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  font-size: 16px;
  font-weight: 700;
}
.product-detail-stars {
  font-size: 25px;
  color: #dba205;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(245, 179, 1, 0.25);
}
.product-detail-rating-score {
  font-size: 15px;
  font-weight: 700;
  color: #199409;
}
.product-detail-review-count {
  font-size: 13px;
  color: #199409;
}
.product-detail-vendor-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 14px auto;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-xl);
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: 0.25s ease;
}
.product-detail-vendor-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.product-detail-vendor-link img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.product-detail-price-card {
  position: relative;
  overflow: hidden;
  margin: 22px 0;
  padding: 22px;
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient( 135deg, var(--glass-strong), rgba(255,255,255,0.35) );
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}
.product-detail-price-card::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient( circle, rgba(0,0,0,0.05), transparent 60% );
  transform: rotate(25deg);
}
.product-detail-old-price {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: #ff4d4f;
  text-decoration: line-through;
  margin-bottom: 4px;
  font-weight: 700;
  opacity: 0.85;
}
.product-detail-current-price {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #098b30;
  margin: 6px 0;
}
.product-detail-save-price {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  color: #098b30;
}
.product-detail-stock-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  margin: 20px auto;
}
.product-detail-stock-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(5,139,46,.12);
  color: var(--primary);
  flex-shrink: 0;
}
.product-detail-stock-icon svg, .product-detail-stock-icon i {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.product-detail-stock-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.product-detail-stock-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient( 135deg, #0d9c4a, #047857 );
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 5px 14px rgba(16,185,129,.25);
}
.product-detail-stock-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.product-detail-stock-icon.out {
  background: rgba(220,38,38,.12);
  color: #dc2626;
}
.product-detail-stock-text.out {
  background: linear-gradient( 135deg, #ef4444, #b91c1c );
  box-shadow: 0 5px 14px rgba(239,68,68,.25);
}
.product-detail-overview {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  line-height: 1.6;
  font-size: 14px;
  color: var(--text);
}
.product-detail-overview h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
}
.product-detail-overview p {
  margin: 0;
}
.product-detail-overview ul {
  padding-left: 18px;
}
.product-detail-overview li {
  margin-bottom: 6px;
}
.product-detail-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.product-detail-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-size: 13px;
  border-radius: var(--radius-xl);
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.product-detail-feature-item i {
  flex-shrink: 0;
}
.product-detail-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.product-detail-action-buttons form {
  flex: 1;
}
.product-detail-cart-btn, .product-detail-wishlist-btn, .product-detail-whatsapp-btn {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: background .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  color: #fff;
}
.product-detail-cart-btn i, .product-detail-cart-btn svg, .product-detail-wishlist-btn i, .product-detail-wishlist-btn svg, .product-detail-whatsapp-btn i, .product-detail-whatsapp-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  flex-shrink: 0;
}
.product-detail-cart-btn--primary {
  background: #0b7e3b;
  color: #fff;
}
.product-detail-cart-btn--primary:hover {
  background: #026e4e;
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
}
.product-detail-cart-btn--success {
  background: #02742c;
  color: #fff;
  cursor: default;
  box-shadow: 0 8px 22px rgba(22,163,74,.28);
}
.product-detail-cart-btn--success i {
  color: #fff;
}
.product-detail-wishlist-btn {
  background: #d32727;
  color: #fff;
}
.product-detail-wishlist-btn:hover {
  background: #af1e1e;
  box-shadow: 0 10px 24px rgba(239,68,68,.28);
}
.product-detail-wishlist-btn .heart-filled {
  fill: #fff;
}
.product-detail-whatsapp-btn {
  background: #09943c;
  color: #fff;
}
.product-detail-whatsapp-btn:hover {
  background: #16a34a;
  box-shadow: 0 10px 24px rgba(34,197,94,.28);
}
.product-detail-cart-btn:active, .product-detail-wishlist-btn:active, .product-detail-whatsapp-btn:active {
  filter: brightness(.92);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.18);
}
.product-detail-cart-btn:disabled, .product-detail-wishlist-btn:disabled {
  opacity: 1;
  cursor: default;
}
.product-detail-cart-btn:focus-visible, .product-detail-wishlist-btn:focus-visible, .product-detail-whatsapp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18), 0 8px 18px rgba(0,0,0,.12);
}
.product-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.product-detail-stat-card {
  padding: 14px;
  text-align: center;
  border-radius: var(--radius-xl);
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 700;
  transition: 0.2s ease;
}
.product-detail-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.product-detail-stat-card i {
  margin-bottom: 8px;
}
.product-detail-stat-card h4 {
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.product-detail-stat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.product-extra-section {
  margin-top: 40px;
  padding: 30px 20px;
  background: var(--light);
}
.product-extra-container {
  max-width: 1200px;
  margin: 0 auto;
}
.product-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tab-btn i, .tab-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}
.tab-btn:hover {
  color: #16803c;
  background: #f1f8f3;
  border-color: #e0eee3;
}
.tab-btn.active {
  color: #166534;
  background: #e8f5ec;
  border-color: #cfe5d5;
  box-shadow: none;
}
.tab-btn.active svg, .tab-btn.active i {
  color: #16803c;
  stroke: #16803c;
}
.tab-btn:focus-visible {
  outline: 2px solid #4caf6a;
  outline-offset: 2px;
}
.tab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tab-content {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: 20px;
}
.tab-pane {
  display: none;
  animation: fadeIn 0.25s ease;
}
.tab-pane.active {
  display: block;
}
.content-card {
  position: relative;
  width: 100%;
  margin: 6px 0 20px;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.content-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
}
.content-card-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  background: #f7faf8;
  border-bottom: 1px solid var(--border);
}
.content-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e8f5ed;
  color: #16803c;
}
.content-card-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.content-card-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.content-card-header p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.description-content {
  padding: 22px;
}
.description-content p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.description-content p:last-child {
  margin-bottom: 0;
}
.description-content a {
  color: #16803c;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.description-content a:hover {
  color: #11632f;
  text-decoration: underline;
}
.description-content ul, .description-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.description-content li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}
.description-content li::marker {
  color: #16803c;
}
.description-content h3, .description-content h4, .description-content h5 {
  margin: 22px 0 10px;
  color: var(--text);
  font-weight: 700;
}
.description-content h3 {
  font-size: 17px;
}
.description-content h4 {
  font-size: 16px;
}
.description-content h5 {
  font-size: 15px;
}
.description-content blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid #16803c;
  border-radius: 0 8px 8px 0;
  background: #f5faf6;
  color: var(--muted);
  font-style: italic;
}
.description-content table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.description-content th, .description-content td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.description-content th {
  font-weight: 650;
  background: #f5faf6;
}
.description-content tr:last-child th, .description-content tr:last-child td {
  border-bottom: none;
}
.description-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px 0;
  border-radius: 10px;
}
.empty-description {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 100px;
  padding: 20px;
  border: 1px dashed #cfe3d4;
  border-radius: 10px;
  background: #f8fbf9;
  color: var(--muted);
  font-size: 14px;
}
.empty-description svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #16803c;
}
@media (max-width: 700px) {
  .content-card-header {
    padding: 17px 18px;
  }
  .content-card-icon {
    width: 38px;
    height: 38px;
  }
  .content-card-icon svg {
    width: 17px;
    height: 17px;
  }
  .content-card-header h2 {
    font-size: 17px;
  }
  .content-card-header p {
    font-size: 12px;
  }
  .description-content {
    padding: 18px;
  }
  .description-content p, .description-content li {
    font-size: 14px;
    line-height: 1.75;
  }
}
@media (max-width: 480px) {
  .content-card-header {
    gap: 10px;
  }
  .description-content {
    padding: 16px;
  }
}
#specifications {
  width: 100%;
}
#specifications .content-card {
  margin-bottom: 20px;
}
#specifications .content-card h2 {
  margin: 0;
}
.specification-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.specification-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #ffffff;
  overflow: hidden;
}
.specification-table tr {
  border-bottom: 1px solid #e5e7eb;
}
.specification-table tr:last-child {
  border-bottom: none;
}
.specification-table th {
  width: 38%;
  padding: 15px 18px;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
}
.specification-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  background: #ffffff;
}
.specification-table .specification-group-row {
  border-bottom: 1px solid #e5e7eb;
}
.specification-table .specification-group-row th {
  width: 100%;
  padding: 13px 18px;
  background: #f1f5f9;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  border-right: none;
}
.specification-unit {
  margin-left: 5px;
  font-size: 13px;
  color: #6b7280;
}
.success-text {
  font-weight: 600;
  color: #15803d;
}
.danger-text {
  font-weight: 600;
  color: #dc2626;
}
.no-specifications {
  padding: 25px 18px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 14px;
}
.specification-table tbody tr:not(.specification-group-row):hover td {
  background: #fafafa;
}
.specification-table tbody tr:not(.specification-group-row):hover th {
  background: #f3f4f6;
}
@media (max-width: 768px) {
  .specification-table {
    min-width: 600px;
  }
  .specification-table th {
    width: 40%;
    padding: 13px 14px;
    font-size: 13px;
  }
  .specification-table td {
    padding: 13px 14px;
    font-size: 13px;
  }
  .specification-table .specification-group-row th {
    padding: 12px 14px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .specification-table {
    min-width: 520px;
  }
  .specification-table th, .specification-table td {
    padding: 11px 12px;
  }
}
.product-detail-vendor-card {
  width: 100%;
  margin-top: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.product-detail-vendor-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.product-detail-vendor-logo-wrapper {
  flex-shrink: 0;
}
.product-detail-vendor-logo, .product-detail-vendor-logo-placeholder {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  object-fit: cover;
  background: #edf7f0;
  border: 1px solid #d8ebdc;
  color: #16803c;
}
.product-detail-vendor-logo-placeholder svg {
  width: 27px;
  height: 27px;
}
.product-detail-vendor-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-detail-vendor-name {
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  color: var(--text);
  word-break: break-word;
}
.product-detail-vendor-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #edf8f0;
  border: 1px solid #d7ecdc;
  color: #16803c;
  font-size: 12px;
  font-weight: 650;
}
.product-detail-vendor-badge svg {
  width: 14px;
  height: 14px;
}
.product-detail-vendor-bio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vendor-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #16803c;
  font-size: 13px;
  font-weight: 700;
}
.vendor-section-label svg {
  width: 15px;
  height: 15px;
}
.product-detail-vendor-bio p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.product-detail-vendor-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.product-detail-vendor-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  background: #f8fbf9;
  border: 1px solid #e3eee6;
  border-radius: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.product-detail-vendor-stat:hover {
  background: #f2f9f4;
  border-color: #cfe5d5;
  transform: translateY(-1px);
}
.vendor-stat-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: #e8f5ec;
  color: #16803c;
}
.vendor-stat-icon svg {
  width: 16px;
  height: 16px;
}
.vendor-stat-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vendor-stat-content span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-stat-content strong {
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
}
.product-detail-vendor-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 2px;
}
.product-detail-vendor-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vendor-detail-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: #edf7f0;
  color: #16803c;
}
.vendor-detail-icon svg {
  width: 15px;
  height: 15px;
}
.product-detail-vendor-detail > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.product-detail-vendor-detail span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.product-detail-vendor-detail strong {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}
.vendor-response-available {
  color: #16803c !important;
}
.vendor-response-unavailable {
  color: #b5473b !important;
}
.product-detail-vendor-card svg {
  stroke-width: 2;
}
@media (max-width: 900px) {
  .product-detail-vendor-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-detail-vendor-details {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .product-detail-vendor-card {
    padding: 17px;
    gap: 18px;
  }
  .product-detail-vendor-profile {
    gap: 12px;
    padding-bottom: 17px;
  }
  .product-detail-vendor-logo, .product-detail-vendor-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 11px;
  }
  .product-detail-vendor-name {
    font-size: 17px;
  }
  .product-detail-vendor-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .product-detail-vendor-stat {
    padding: 11px;
    gap: 8px;
  }
  .vendor-stat-icon {
    width: 30px;
    height: 30px;
  }
  .vendor-stat-icon svg {
    width: 14px;
    height: 14px;
  }
  .vendor-stat-content strong {
    font-size: 14px;
  }
  .product-detail-vendor-details {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .product-detail-vendor-stats {
    grid-template-columns: 1fr;
  }
}
.product-detail-review-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin-bottom: 28px;
}
.product-detail-overall-rating {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: #f7faf8;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.product-detail-rating-score, .product-detail-overall-rating h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  color: #16803c;
}
.product-detail-rating-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 3px 0;
  color: #f5b301;
  font-size: 21px;
  letter-spacing: 0;
}
.product-detail-rating-count, .product-detail-overall-rating p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.product-detail-rating-count strong {
  color: var(--text);
}
.product-detail-rating-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.product-detail-rating-bar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}
.product-detail-rating-bar span {
  width: auto;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.product-detail-rating-label {
  font-size: 13px;
  font-weight: 650;
}
.product-detail-progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee9;
}
.product-detail-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #2b9a52;
  transition: width 0.35s ease;
}
.product-detail-rating-percent {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}
.product-detail-no-rating {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: #f8fbf9;
  border: 1px dashed #d5e6d9;
  border-radius: 10px;
}
.product-detail-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.product-detail-review-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.product-detail-review-item:hover {
  background: #f8fbf9;
  border-color: #d7e9db;
}
.product-detail-review-avatar {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e8f5ec;
  color: #16803c;
  border: 1px solid #d3e8d8;
  font-size: 15px;
  font-weight: 750;
}
.product-detail-review-content {
  flex: 1;
  min-width: 0;
}
.product-detail-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  min-width: 0;
  margin-bottom: 7px;
}
.product-detail-review-header > div {
  min-width: 0;
}
.product-detail-review-header strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
.product-detail-review-header span {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}
.product-detail-review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 9px;
  color: #f5b301;
  font-size: 17px;
  line-height: 1;
}
.product-detail-review-content p {
  width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.product-detail-review-form {
  width: 100%;
  margin-top: 28px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.product-detail-review-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #f7faf8;
  border-bottom: 1px solid var(--border);
}
.product-detail-review-form-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e8f5ec;
  color: #16803c;
}
.product-detail-review-form-icon svg {
  width: 18px;
  height: 18px;
}
.product-detail-review-form-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}
.product-detail-review-form-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.product-detail-review-form-body {
  padding: 20px;
}
.product-detail-form-group {
  margin-bottom: 18px;
}
.product-detail-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.product-detail-form-group textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  padding: 13px 14px;
  resize: vertical;
  outline: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.product-detail-form-group textarea::placeholder {
  color: #9aa59d;
}
.product-detail-form-group textarea:hover {
  border-color: #cbded0;
}
.product-detail-form-group textarea:focus {
  background: #fff;
  border-color: #4aa866;
  box-shadow: 0 0 0 3px rgba(22, 128, 60, 0.09);
}
.product-detail-rating-select {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.product-detail-rating-star {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cbd3cd;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.product-detail-rating-star svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.product-detail-rating-star:hover {
  background: #fff7dc;
  color: #e5a900;
}
.product-detail-rating-star.active {
  color: #f5b301;
}
.product-detail-rating-star.active svg {
  fill: currentColor;
  stroke: currentColor;
}
.form-error {
  margin: 7px 0 0;
  color: #c0392b;
  font-size: 12px;
}
.product-detail-submit-review-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 11px 20px;
  border: 1px solid #16803c;
  border-radius: 9px;
  background: #16803c;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.product-detail-submit-review-btn svg {
  width: 16px;
  height: 16px;
}
.product-detail-submit-review-btn:hover {
  background: #126b32;
  border-color: #126b32;
}
.product-detail-submit-review-btn:active {
  background: #0f5b2b;
  border-color: #0f5b2b;
}
.product-detail-submit-review-btn:focus-visible {
  outline: 2px solid #4caf6a;
  outline-offset: 2px;
}
.product-detail-review-actions {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.product-detail-view-reviews-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 8px;
  background: linear-gradient( 90deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.product-detail-view-reviews-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.55), transparent );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.product-detail-view-reviews-btn:hover::before {
  left: 150%;
}
.product-detail-view-reviews-btn:hover {
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.product-detail-empty-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 30px 20px;
  text-align: center;
  background: #f8fbf9;
  border: 1px dashed #d5e6d9;
  border-radius: 14px;
}
.product-detail-empty-review p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 600px) {
  .product-detail-review-item {
    gap: 11px;
    padding: 15px;
  }
  .product-detail-review-avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .product-detail-review-header {
    flex-direction: column;
    gap: 3px;
  }
  .product-detail-review-header span {
    font-size: 11px;
  }
  .product-detail-review-content p {
    font-size: 13px;
  }
  .product-detail-review-form-header {
    padding: 16px;
  }
  .product-detail-review-form-body {
    padding: 16px;
  }
  .product-detail-rating-bar {
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    gap: 8px;
  }
  .product-detail-overall-rating {
    padding: 24px 18px;
  }
  .product-detail-rating-score, .product-detail-overall-rating h1 {
    font-size: 42px;
  }
}
@media (max-width: 400px) {
  .product-detail-rating-bar {
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    gap: 6px;
  }
  .product-detail-rating-bar span, .product-detail-rating-label {
    font-size: 12px;
  }
  .product-detail-rating-percent {
    font-size: 11px;
  }
  .product-detail-rating-star {
    width: 31px;
    height: 31px;
  }
}
.product-detail-related-section {
  margin-top: 10px;
  padding: 10px 20px 20px;
}
@media (max-width:1200px) {
  .product-detail-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-detail-info-card {
    position: relative;
    top: auto;
  }
  .main-product-detail-image {
    height: 420px;
  }
  .product-detail-stats {
    grid-template-columns: repeat(2,1fr);
  }
  .product-detail-feature-list {
    grid-template-columns: repeat(2,1fr);
  }
  .product-detail-review-summary {
    gap: 20px;
  }
}
@media (max-width:900px) {
  .product-details-section {
    padding: 30px 15px;
  }
  .product-detail-gallery-card, .product-detail-info-card {
    padding: 16px;
  }
  .product-detail-name {
    font-size: 24px;
  }
  .product-detail-current-price {
    font-size: 30px;
  }
  .main-product-detail-image {
    height: 360px;
  }
  .product-detail-action-buttons {
    flex-direction: column;
  }
  .product-detail-action-buttons form {
    width: 100%;
  }
  .product-detail-cart-btn, .product-detail-wishlist-btn, .product-detail-whatsapp-btn {
    width: 100%;
  }
  .product-detail-vendor-stats {
    grid-template-columns: 1fr;
  }
  .product-detail-review-item {
    flex-direction: column;
    gap: 12px;
  }
  .product-detail-review-header {
    flex-direction: column;
    gap: 6px;
  }
  .product-detail-review-header span {
    flex-shrink: 1;
  }
  .product-tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .tab-btn {
    width: 100%;
  }
}
@media (max-width:600px) {
  body {
    font-size: 14px;
  }
  .product-details-section {
    padding: 20px 10px;
  }
  .product-detail-container {
    width: 100%;
  }
  .product-detail-gallery-card, .product-detail-info-card {
    border-radius: 14px;
    padding: 12px;
  }
  .main-product-detail-image {
    height: 280px;
  }
  .product-detail-main-image-wrapper:hover .main-product-detail-image {
    transform: none;
  }
  .product-detail-thumbnail {
    width: 55px;
    height: 55px;
  }
  .product-detail-top-badges {
    gap: 8px;
  }
  .product-detail-category-badge, .product-detail-condition-badge {
    padding: 8px 12px;
    font-size: 12px;
  }
  .product-detail-name {
    font-size: 21px;
    line-height: 1.25;
  }
  .product-detail-subtitle {
    font-size: 13px;
  }
  .product-detail-stars {
    font-size: 20px;
  }
  .product-detail-price-card {
    padding: 18px 12px;
  }
  .product-detail-current-price {
    font-size: 28px;
  }
  .product-detail-stock-card {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  .product-detail-stock-info {
    justify-content: center;
  }
  .product-detail-feature-list {
    grid-template-columns: 1fr;
  }
  .product-detail-feature-item {
    font-size: 12px;
  }
  .product-detail-stats {
    grid-template-columns: 1fr;
  }
  .product-extra-section {
    padding: 20px 10px;
  }
  .tab-content {
    padding: 12px;
  }
  .specification-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .specification-table td {
    padding: 12px;
    font-size: 13px;
  }
  .product-detail-vendor-top {
    flex-direction: column;
    text-align: center;
  }
  .product-detail-vendor-text {
    align-items: center;
  }
  .product-detail-vendor-extra {
    flex-direction: column;
  }
  .product-detail-vendor-extra span {
    width: 100%;
    justify-content: center;
  }
  .product-detail-overall-rating {
    padding: 20px;
  }
  .product-detail-overall-rating h1 {
    font-size: 40px;
  }
  .product-detail-rating-bar {
    display: grid;
    grid-template-columns: 40px 1fr;
  }
  .product-detail-rating-percent {
    display: none;
  }
  .product-detail-review-avatar {
    width: 45px;
    height: 45px;
  }
  .product-detail-submit-review-btn {
    width: 100%;
  }
}
@media (max-width:380px) {
  .main-product-detail-image {
    height: 230px;
  }
  .product-detail-current-price {
    font-size: 24px;
  }
  .product-detail-name {
    font-size: 19px;
  }
  .product-detail-category-badge, .product-detail-condition-badge {
    width: 100%;
  }
  .product-detail-rating-wrapper {
    flex-direction: column;
  }
}
.vendor-product-edit-page {
  --edit-primary: #087f5b;
  --edit-primary-dark: #056044;
  --edit-primary-light: #e9f7f1;
  --edit-primary-soft: #f2faf6;
  --edit-text: #17231f;
  --edit-muted: #6b7c75;
  --edit-border: #dfe9e4;
  --edit-border-dark: #cbdad3;
  --edit-card: #ffffff;
  --edit-page: #f5f9f7;
  --edit-danger: #dc4c4c;
  --edit-warning: #a56a00;
  min-height: 100vh;
  padding: 42px 28px 70px;
  background: radial-gradient( circle at top left, rgba(8,127,91,.08), transparent 32% ), linear-gradient( 180deg, #f8fbf9 0%, #f3f8f5 100% );
  color: var(--edit-text);
}
.vendor-product-edit-container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}
.vendor-product-edit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 34px 40px;
  margin-bottom: 26px;
  text-align: left;
  background: linear-gradient( 135deg, #ffffff, #f4faf7 );
  border: 1px solid var(--edit-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(24,63,48,.06);
  overflow: hidden;
}
.vendor-product-edit-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient( 180deg, var(--edit-primary), #16a06f );
}
.vendor-product-edit-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 16px;
  color: var(--edit-primary);
  background: var(--edit-primary-light);
  border: 1px solid rgba(8,127,91,.14);
}
.vendor-product-edit-header-icon svg {
  width: 29px;
  height: 29px;
}
.vendor-product-edit-header-content {
  max-width: 760px;
}
.vendor-product-edit-eyebrow {
  margin-bottom: 5px;
  color: var(--edit-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vendor-product-edit-header h1 {
  margin: 0 0 7px;
  color: var(--edit-text);
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.035em;
}
.vendor-product-edit-header p {
  margin: 0;
  max-width: 720px;
  color: var(--edit-muted);
  font-size: 14px;
  line-height: 1.7;
}
.vendor-product-edit-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.vendor-product-edit-alert {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 600;
}
.vendor-product-edit-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.vendor-product-edit-alert.success {
  color: #08734f;
  background: #ecfaf3;
  border: 1px solid #bce8d3;
}
.vendor-product-edit-alert.error {
  color: #b53b3b;
  background: #fff2f2;
  border: 1px solid #f3caca;
}
.vendor-product-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: start;
}
.vendor-product-edit-main, .vendor-product-edit-sidebar {
  min-width: 0;
}
.vendor-product-edit-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vendor-product-edit-card {
  width: 100%;
  overflow: hidden;
  background: var(--edit-card);
  border: 1px solid var(--edit-border);
  border-radius: 19px;
  box-shadow: 0 7px 24px rgba(26,65,50,.045);
}
.vendor-product-edit-card:hover {
  border-color: #cdded6;
  box-shadow: 0 10px 28px rgba(26,65,50,.065);
}
.vendor-product-edit-card-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 21px;
  border-bottom: 1px solid var(--edit-border);
  background: linear-gradient( 180deg, #ffffff, #fbfdfc );
}
.vendor-product-edit-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--edit-primary);
  background: var(--edit-primary-light);
}
.vendor-product-edit-card-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-product-edit-card-header h2 {
  margin: 0 0 3px;
  color: var(--edit-text);
  font-size: 16px;
  font-weight: 800;
}
.vendor-product-edit-card-header p {
  margin: 0;
  color: var(--edit-muted);
  font-size: 12px;
  line-height: 1.45;
}
.vendor-product-edit-card-body {
  padding: 22px;
}
.vendor-product-edit-form-group {
  margin-bottom: 20px;
}
.vendor-product-edit-form-group:last-child {
  margin-bottom: 0;
}
.vendor-product-edit-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #33483f;
  font-size: 13px;
  font-weight: 750;
}
.vendor-product-edit-form-group label .required {
  color: var(--edit-danger);
  margin-left: 2px;
}
.vendor-product-edit-form input:not( [type="checkbox"] ):not( [type="file"] ), .vendor-product-edit-form textarea, .vendor-product-edit-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--edit-border-dark);
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: var(--edit-text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vendor-product-edit-form textarea {
  min-height: 155px;
  resize: vertical;
  line-height: 1.65;
}
.vendor-product-edit-form input:hover, .vendor-product-edit-form textarea:hover, .vendor-product-edit-form select:hover {
  border-color: #a9c0b6;
}
.vendor-product-edit-form input:focus, .vendor-product-edit-form textarea:focus, .vendor-product-edit-form select:focus {
  border-color: var(--edit-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(8,127,91,.10);
}
.vendor-product-edit-input-with-icon {
  position: relative;
}
.vendor-product-edit-input-with-icon svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--edit-primary);
  pointer-events: none;
}
.vendor-product-edit-input-with-icon input {
  padding-left: 40px !important;
}
.vendor-product-edit-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 17px;
}
.vendor-product-edit-field-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 7px 0 0;
  color: var(--edit-danger);
  font-size: 12px;
  line-height: 1.45;
}
.vendor-product-edit-field-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.vendor-product-edit-help-text {
  display: block;
  margin-top: 7px;
  color: var(--edit-muted);
  font-size: 12px;
  line-height: 1.5;
}
.vendor-product-edit-inner-section {
  margin: 25px 0;
  padding: 20px;
  background: linear-gradient( 180deg, #f7fbf9, #f3f9f6 );
  border: 1px solid #dcebe4;
  border-radius: 16px;
}
.vendor-product-edit-inner-header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
}
.vendor-product-edit-inner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--edit-primary);
  background: #ffffff;
  border: 1px solid #dcebe4;
}
.vendor-product-edit-inner-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-product-edit-inner-header h3 {
  margin: 0 0 3px;
  color: var(--edit-text);
  font-size: 15px;
  font-weight: 800;
}
.vendor-product-edit-inner-header p {
  margin: 0;
  color: var(--edit-muted);
  font-size: 12px;
  line-height: 1.5;
}
.vendor-product-edit-specification-group {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dce8e2;
}
.vendor-product-edit-specification-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.vendor-product-edit-specification-group h3 {
  margin: 0 0 14px;
  color: #355147;
  font-size: 13px;
  font-weight: 800;
}
.vendor-product-edit-specification-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px;
}
.vendor-product-edit-specification-fields .vendor-product-edit-form-group {
  margin-bottom: 0;
}
.vendor-product-edit-specification-fields small {
  display: block;
  margin-top: 6px;
  color: var(--edit-muted);
  font-size: 11px;
  line-height: 1.45;
}
.vendor-product-edit-specification-fields .form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px 0;
}
.vendor-product-edit-specification-fields .form-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.vendor-product-edit-specification-fields .form-checkbox-group input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  accent-color: var(--edit-primary);
}
.vendor-product-edit-empty-specifications {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px dashed #cbded5;
  color: var(--edit-muted);
}
.vendor-product-edit-empty-specifications > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--edit-primary);
}
.vendor-product-edit-empty-specifications strong {
  display: block;
  margin-bottom: 3px;
  color: var(--edit-text);
  font-size: 13px;
}
.vendor-product-edit-empty-specifications p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.vendor-product-edit-tag-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 50px;
  padding: 7px 11px;
  background: #ffffff;
  border: 1px solid var(--edit-border-dark);
  border-radius: 11px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vendor-product-edit-tag-box:hover {
  border-color: #a9c0b6;
}
.vendor-product-edit-tag-box:focus-within {
  border-color: var(--edit-primary);
  box-shadow: 0 0 0 3px rgba(8,127,91,.10);
}
.vendor-product-edit-tag-box input {
  flex: 1;
  min-width: 160px;
  min-height: 32px !important;
  padding: 5px 2px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.vendor-product-edit-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #086a4c;
  background: #e8f7f0;
  border: 1px solid #c7e9d9;
  font-size: 12px;
  font-weight: 700;
}
.vendor-product-edit-tag button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #087f5b;
  background: rgba(255,255,255,.75);
  cursor: pointer;
}
.vendor-product-edit-tag button:hover {
  color: #ffffff;
  background: #d94b4b;
}
.vendor-product-edit-main-image-preview {
  position: relative;
  width: 100%;
  height: 310px;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 135deg, #edf4f0, #f7faf8 );
  border: 1px solid var(--edit-border);
  border-radius: 15px;
}
.vendor-product-edit-main-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-product-edit-image-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #ffffff;
  background: rgba(8,127,91,.82);
  backdrop-filter: blur(8px);
}
.vendor-product-edit-image-overlay svg {
  width: 17px;
  height: 17px;
}
.vendor-product-edit-form input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed #b8cec3;
  border-radius: 12px;
  background: #f7faf8;
  color: var(--edit-muted);
  cursor: pointer;
}
.vendor-product-edit-form input[type="file"]:hover {
  border-color: var(--edit-primary);
  background: #f0f8f4;
}
.vendor-product-edit-existing-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.vendor-product-edit-existing-image-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edit-border);
  border-radius: 13px;
  background: #ffffff;
}
.vendor-product-edit-existing-image-card img {
  display: block;
  width: 100%;
  height: 135px;
  object-fit: cover;
}
.vendor-product-edit-existing-image-card:has( input:checked ) {
  border-color: #e6a5a5;
  background: #fff7f7;
}
.vendor-product-edit-existing-image-card:has( input:checked ) img {
  opacity: .45;
}
.vendor-product-edit-delete-checkbox {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border-radius: 9px;
  color: #4d5d56;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.vendor-product-edit-delete-checkbox span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.vendor-product-edit-delete-checkbox svg {
  width: 13px;
  height: 13px;
}
.vendor-product-edit-delete-checkbox input {
  width: 15px !important;
  height: 15px !important;
  accent-color: #d84d4d;
}
.vendor-product-edit-empty-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin-bottom: 18px;
  padding: 25px;
  text-align: center;
  color: var(--edit-muted);
  background: #f8fbf9;
  border: 1px dashed #c8dcd2;
  border-radius: 14px;
}
.vendor-product-edit-empty-images svg {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  color: #83a89a;
}
.vendor-product-edit-empty-images strong {
  margin-bottom: 3px;
  color: var(--edit-text);
  font-size: 13px;
}
.vendor-product-edit-empty-images p {
  margin: 0;
  font-size: 12px;
}
.vendor-product-edit-upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 130px;
  padding: 20px;
  text-align: center;
  border: 1px dashed #b8cec3;
  border-radius: 14px;
  background: #f7faf8;
  overflow: hidden;
}
.vendor-product-edit-upload-box > svg {
  width: 27px;
  height: 27px;
  margin-bottom: 3px;
  color: var(--edit-primary);
}
.vendor-product-edit-upload-box strong {
  color: var(--edit-text);
  font-size: 13px;
}
.vendor-product-edit-upload-box span {
  color: var(--edit-muted);
  font-size: 11px;
}
.vendor-product-edit-upload-box input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}
.vendor-product-edit-new-image-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.vendor-product-edit-new-image-preview img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--edit-border);
}
.vendor-product-edit-status-box {
  padding: 17px;
  border-radius: 14px;
  background: linear-gradient( 135deg, #f0faf5, #f7fbf9 );
  border: 1px solid #cfe7db;
}
.vendor-product-edit-status-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.vendor-product-edit-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5a21b;
  box-shadow: 0 0 0 4px rgba(229,162,27,.12);
}
.vendor-product-edit-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: #775000;
  background: #fff6dc;
  border: 1px solid #f0dda8;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.vendor-product-edit-status-box > p {
  margin: 0 0 13px;
  color: var(--edit-muted);
  font-size: 12px;
  line-height: 1.6;
}
.vendor-product-edit-status-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: #587066;
  font-size: 11px;
  line-height: 1.5;
}
.vendor-product-edit-status-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--edit-primary);
}
@media (max-width: 1100px) {
  .vendor-product-edit-grid {
    grid-template-columns: 1fr;
  }
  .vendor-product-edit-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
  }
}
@media (max-width: 800px) {
  .vendor-product-edit-page {
    padding: 28px 16px 50px;
  }
  .vendor-product-edit-header {
    padding: 27px 22px;
    align-items: flex-start;
  }
  .vendor-product-edit-sidebar {
    display: flex;
    flex-direction: column;
  }
  .vendor-product-edit-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .vendor-product-edit-specification-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .vendor-product-edit-page {
    padding: 18px 12px 40px;
  }
  .vendor-product-edit-header {
    flex-direction: column;
    gap: 14px;
    padding: 23px 19px;
    text-align: left;
    border-radius: 17px;
  }
  .vendor-product-edit-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .vendor-product-edit-header h1 {
    font-size: 25px;
  }
  .vendor-product-edit-header p {
    font-size: 13px;
  }
  .vendor-product-edit-card {
    border-radius: 16px;
  }
  .vendor-product-edit-card-header {
    padding: 17px;
  }
  .vendor-product-edit-card-body {
    padding: 17px;
  }
  .vendor-product-edit-inner-section {
    padding: 15px;
  }
  .vendor-product-edit-existing-images, .vendor-product-edit-new-image-preview {
    grid-template-columns: 1fr;
  }
  .vendor-product-edit-main-image-preview {
    height: 240px;
  }
  .vendor-product-edit-actions {
    flex-direction: column-reverse;
  }
  .vendor-product-edit-cancel-btn, .vendor-product-edit-save-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-product-edit-card, .vendor-product-edit-form input, .vendor-product-edit-form textarea, .vendor-product-edit-form select, .vendor-product-edit-save-btn, .vendor-product-edit-cancel-btn {
    transition: none;
  }
}
.product-all-reviews-page-container {
  width: min(1080px, 94%);
  margin: 45px auto 80px;
  color: #064e3b;
}
.product-all-reviews-page-header {
  margin-bottom: 38px;
  text-align: center;
}
.product-all-reviews-page-back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 10px 17px;
  overflow: hidden;
  border: 1px solid #047857;
  border-radius: 9px;
  background: #ffffff;
  color: #064e3b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.08);
}
.product-all-reviews-page-back-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.75), transparent );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.product-all-reviews-page-back-link:hover::before {
  left: 150%;
}
.product-all-reviews-page-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-all-reviews-page-heading-line {
  width: 60px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient( 90deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
}
.product-all-reviews-page-title {
  margin: 0;
  color: #064e3b;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.7px;
}
.product-all-reviews-page-subtitle {
  margin: 12px 0 0;
  color: #047857;
  font-size: 15px;
  font-weight: 600;
}
.product-all-reviews-page-product {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(850px, 100%);
  margin: 0 auto 35px;
  padding: 28px;
  gap: 28px;
  border: 1px solid #047857;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(6, 78, 59, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.product-all-reviews-page-product-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 125px;
  height: 125px;
  padding: 10px;
  border: 2px solid #047857;
  border-radius: 18px;
  background: #f0fdf4;
}
.product-all-reviews-page-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.product-all-reviews-page-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #ecfdf5;
  color: #047857;
  font-size: 38px;
}
.product-all-reviews-page-product-info {
  text-align: left;
}
.product-all-reviews-page-product-name {
  margin: 0;
  color: #064e3b;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.25;
}
.product-all-reviews-page-product-count {
  margin: 9px 0 0;
  color: #047857;
  font-size: 14px;
  font-weight: 700;
}
.product-all-reviews-page-rating {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  width: min(950px, 100%);
  margin: 0 auto 50px;
  gap: 25px;
}
.product-all-reviews-page-rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 30px;
  border: 1px solid #047857;
  border-radius: 20px;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 100% );
  box-shadow: 0 12px 30px rgba(6, 78, 59, 0.09);
  text-align: center;
}
.product-all-reviews-page-rating-number {
  color: #064e3b;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}
.product-all-reviews-page-rating-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 14px;
}
.product-all-reviews-page-star-filled {
  color: #f4c542;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(157, 108, 0, 0.30);
}
.product-all-reviews-page-star-empty {
  color: #d9a514;
  font-size: 25px;
  line-height: 1;
}
.product-all-reviews-page-rating-text {
  margin: 12px 0 0;
  color: #047857;
  font-size: 14px;
  font-weight: 700;
}
.product-all-reviews-page-breakdown {
  padding: 30px;
  border: 1px solid #047857;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(6, 78, 59, 0.09);
}
.product-all-reviews-page-breakdown-title {
  margin: 0 0 24px;
  color: #064e3b;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.product-all-reviews-page-breakdown-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}
.product-all-reviews-page-breakdown-row:last-child {
  margin-bottom: 0;
}
.product-all-reviews-page-breakdown-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: #064e3b;
  font-size: 14px;
  font-weight: 900;
}
.product-all-reviews-page-breakdown-label span {
  color: #f4c542;
  font-size: 15px;
  text-shadow: 0 1px 1px rgba(157, 108, 0, 0.25);
}
.product-all-reviews-page-breakdown-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #d1fae5;
}
.product-all-reviews-page-breakdown-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient( 90deg, #d9a514 0%, #f4c542 45%, #eab308 72%, #d9a514 100% );
}
.product-all-reviews-page-breakdown-count {
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}
.product-all-reviews-page-reviews {
  width: min(950px, 100%);
  margin: 0 auto;
}
.product-all-reviews-page-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  text-align: center;
}
.product-all-reviews-page-section-heading h2 {
  margin: 0;
  color: #064e3b;
  font-size: 30px;
  font-weight: 900;
}
.product-all-reviews-page-section-heading p {
  margin: 8px 0 0;
  color: #047857;
  font-size: 14px;
  font-weight: 600;
}
.product-all-reviews-page-review-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-all-reviews-page-review {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 25px;
  padding: 25px;
  border: 1px solid #047857;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 9px 24px rgba(6, 78, 59, 0.08);
}
.product-all-reviews-page-review-user {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.product-all-reviews-page-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.20);
}
.product-all-reviews-page-user-details {
  min-width: 0;
}
.product-all-reviews-page-user-details h3 {
  margin: 2px 0 5px;
  color: #064e3b;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}
.product-all-reviews-page-user-details span {
  color: #047857;
  font-size: 12px;
  font-weight: 600;
}
.product-all-reviews-page-review-content {
  min-width: 0;
}
.product-all-reviews-page-review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.product-all-reviews-page-review-stars .product-all-reviews-page-star-filled, .product-all-reviews-page-review-stars .product-all-reviews-page-star-empty {
  font-size: 20px;
}
.product-all-reviews-page-review-text {
  margin: 0;
  color: #064e3b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  white-space: pre-line;
}
.product-all-reviews-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 45px 25px;
  border: 1px solid #047857;
  border-radius: 20px;
  background: linear-gradient( 145deg, #ffffff, #f0fdf4 );
  text-align: center;
}
.product-all-reviews-page-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border: 2px solid #047857;
  border-radius: 50%;
  background: #ecfdf5;
  font-size: 30px;
}
.product-all-reviews-page-empty h3 {
  margin: 0;
  color: #064e3b;
  font-size: 23px;
  font-weight: 900;
}
.product-all-reviews-page-empty p {
  max-width: 500px;
  margin: 10px 0 22px;
  color: #047857;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.product-all-reviews-page-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px 22px;
  border-radius: 8px;
  background: linear-gradient( 90deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.product-all-reviews-page-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.55), transparent );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.product-all-reviews-page-button:hover::before {
  left: 150%;
}
.product-all-reviews-page-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 35px;
}
.product-all-reviews-page-pagination-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 105px;
  padding: 10px 16px;
  border: 1px solid #047857;
  border-radius: 8px;
  background: #ffffff;
  color: #064e3b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.product-all-reviews-page-pagination-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.75), transparent );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.product-all-reviews-page-pagination-button:hover::before {
  left: 150%;
}
.product-all-reviews-page-pagination-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.product-all-reviews-page-pagination-disabled::before {
  display: none;
}
.product-all-reviews-page-pagination-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.product-all-reviews-page-pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #047857;
  border-radius: 8px;
  background: #ffffff;
  color: #064e3b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.product-all-reviews-page-pagination-number:hover {
  background: #ecfdf5;
}
.product-all-reviews-page-pagination-active {
  border-color: transparent;
  background: linear-gradient( 90deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.20);
}
.product-all-reviews-page-pagination-info {
  margin-top: 16px;
  color: #047857;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.product-all-reviews-page-pagination-info strong {
  color: #064e3b;
  font-weight: 900;
}
@media (max-width: 800px) {
  .product-all-reviews-page-rating {
    grid-template-columns: 1fr;
  }
  .product-all-reviews-page-review {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .product-all-reviews-page-review-user {
    padding-bottom: 15px;
    border-bottom: 1px solid #a7f3d0;
  }
}
@media (max-width: 600px) {
  .product-all-reviews-page-container {
    width: 92%;
    margin-top: 30px;
    margin-bottom: 55px;
  }
  .product-all-reviews-page-product {
    flex-direction: column;
    padding: 25px 18px;
    text-align: center;
  }
  .product-all-reviews-page-product-info {
    text-align: center;
  }
  .product-all-reviews-page-product-image-wrapper {
    width: 110px;
    height: 110px;
  }
  .product-all-reviews-page-product-name {
    font-size: 21px;
  }
  .product-all-reviews-page-rating-summary {
    min-height: 220px;
    padding: 25px 18px;
  }
  .product-all-reviews-page-rating-number {
    font-size: 50px;
  }
  .product-all-reviews-page-breakdown {
    padding: 23px 17px;
  }
  .product-all-reviews-page-review {
    padding: 20px 17px;
  }
  .product-all-reviews-page-section-heading h2 {
    font-size: 25px;
  }
  .product-all-reviews-page-pagination {
    flex-wrap: wrap;
    gap: 12px;
  }
  .product-all-reviews-page-pagination-numbers {
    order: 3;
    width: 100%;
  }
  .product-all-reviews-page-pagination-button {
    min-width: 95px;
  }
}
@media (max-width: 420px) {
  .product-all-reviews-page-title {
    font-size: 29px;
  }
  .product-all-reviews-page-subtitle {
    font-size: 13px;
  }
  .product-all-reviews-page-breakdown-row {
    grid-template-columns: 40px minmax(0, 1fr) 35px;
    gap: 8px;
  }
  .product-all-reviews-page-review-text {
    font-size: 14px;
    line-height: 1.7;
  }
  .product-all-reviews-page-pagination-number {
    width: 36px;
    height: 36px;
  }
}
.product-search-feature-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 38px 28px 70px;
}
.product-search-feature-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 230px;
  margin: 0 auto 38px;
  padding: 42px 30px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient( 135deg, #f4fbf6 0%, #f8fcf8 48%, #eef9f2 100% );
  border: 1px solid #dcefe2;
  border-radius: 26px;
  box-shadow: 0 10px 35px rgba(22, 101, 52, 0.055);
}
.product-search-feature-header::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -150px;
  left: -80px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.07);
  pointer-events: none;
}
.product-search-feature-header::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -120px;
  bottom: -190px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.065);
  pointer-events: none;
}
.product-search-feature-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}
.product-search-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.product-search-feature-eyebrow svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}
.product-search-feature-title {
  margin: 0;
  color: #123524;
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.045em;
}
.product-search-feature-query {
  display: inline;
  color: #059669;
  font-weight: 800;
}
.product-search-feature-description {
  max-width: 650px;
  margin: 14px auto 0;
  color: #65786b;
  font-size: 0.94rem;
  line-height: 1.7;
}
.product-search-feature-description strong {
  color: #047857;
  font-weight: 750;
}
.product-search-feature-result-badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d7eee0;
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(22, 101, 52, 0.07);
  backdrop-filter: blur(10px);
}
.product-search-feature-result-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 31px;
  padding: 0 8px;
  color: #ffffff;
  background: linear-gradient( 135deg, #059669, #047857 );
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
.product-search-feature-result-label {
  color: #496153;
  font-size: 0.76rem;
  font-weight: 700;
}
.product-search-feature-page .products-section {
  width: 100%;
}
.product-search-feature-page .products-section .product-title {
  margin: 0 0 22px;
  color: #173b27;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.product-search-feature-page .empty-products {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 300px;
  padding: 50px 25px;
  text-align: center;
  background: #f8fcf9;
  border: 1px dashed #c9e7d4;
  border-radius: 22px;
}
.product-search-feature-page .empty-products svg, .product-search-feature-page .empty-products i {
  width: 46px;
  height: 46px;
  margin-bottom: 15px;
  color: #34a873;
}
.product-search-feature-page .empty-products p {
  margin: 0;
  color: #708177;
  font-size: 0.9rem;
}
.product-search-feature-page .load-more-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 65px;
  margin-top: 20px;
}
.product-search-feature-page .load-more-trigger .htmx-indicator {
  color: #059669;
  font-size: 0.84rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  .product-search-feature-page {
    padding: 30px 20px 60px;
  }
  .product-search-feature-header {
    min-height: 210px;
    padding: 38px 25px;
    border-radius: 22px;
  }
  .product-search-feature-title {
    font-size: 1.85rem;
  }
}
@media (max-width: 680px) {
  .product-search-feature-page {
    padding: 20px 14px 50px;
  }
  .product-search-feature-header {
    min-height: 205px;
    margin-bottom: 27px;
    padding: 32px 18px;
    border-radius: 19px;
  }
  .product-search-feature-header::before {
    width: 180px;
    height: 180px;
    top: -100px;
    left: -80px;
  }
  .product-search-feature-header::after {
    width: 210px;
    height: 210px;
    right: -100px;
    bottom: -140px;
  }
  .product-search-feature-eyebrow {
    margin-bottom: 11px;
    font-size: 0.65rem;
  }
  .product-search-feature-eyebrow svg {
    width: 15px;
    height: 15px;
  }
  .product-search-feature-title {
    max-width: 100%;
    font-size: 1.45rem;
    line-height: 1.25;
  }
  .product-search-feature-description {
    margin-top: 11px;
    font-size: 0.85rem;
    line-height: 1.6;
  }
  .product-search-feature-result-badge {
    margin-top: 18px;
  }
}
@media (max-width: 420px) {
  .product-search-feature-page {
    padding: 16px 10px 40px;
  }
  .product-search-feature-header {
    min-height: 195px;
    padding: 28px 15px;
    border-radius: 17px;
  }
  .product-search-feature-title {
    font-size: 1.3rem;
  }
  .product-search-feature-description {
    font-size: 0.82rem;
  }
  .product-search-feature-result-badge {
    margin-top: 16px;
  }
}
.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.search-clear svg {
  width: 17px;
  height: 17px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.5;
}
.search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
}
.search-box input[type="search"]::-webkit-search-cancel-button, .search-box input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search-box input[type="search"] {
  appearance: none;
}
.product-specifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.specification-group {
  position: relative;
  width: 100%;
  padding: 26px;
  background: #ffffff;
  border: 1px solid #cfe6d7;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(20, 83, 45, 0.06), 0 2px 6px rgba(20, 83, 45, 0.03);
}
.specification-group-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 21px;
  margin-bottom: 23px;
  border-bottom: 1px solid #d9eadf;
}
.specification-group-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #dcfce7;
  border: 1px solid #bbebca;
  color: #15803d;
}
.specification-group-icon svg {
  width: 21px;
  height: 21px;
}
.specification-group-heading {
  min-width: 0;
}
.specification-group-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: #14532d;
}
.specification-group-description {
  margin: 6px 0 0;
  color: #365b43;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
}
.specification-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.specification-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.specification-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  color: #173d27;
}
.specification-field-label .required {
  color: #dc2626;
  font-weight: 800;
}
.specification-input-wrapper {
  width: 100%;
}
.specification-field input:not([type="hidden"]), .specification-field select, .specification-field textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #c8dfd0;
  border-radius: 12px;
  background: #f8fcf9;
  color: #102b1b;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.specification-field input::placeholder, .specification-field textarea::placeholder {
  color: #52705d;
  opacity: 1;
}
.specification-field input:not([type="hidden"]):hover, .specification-field select:hover, .specification-field textarea:hover {
  border-color: #86bd98;
  background: #ffffff;
}
.specification-field input:not([type="hidden"]):focus, .specification-field select:focus, .specification-field textarea:focus {
  border-color: #16a34a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}
.specification-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}
.specification-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient( 45deg, transparent 50%, #166534 50% ), linear-gradient( 135deg, #166534 50%, transparent 50% );
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}
.specification-field .form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 0;
}
.specification-field .form-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cfe4d6;
  border-radius: 10px;
  background: #f8fcf9;
  color: #214d30;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.specification-field .form-checkbox-group label:hover {
  background: #ecfdf3;
  border-color: #86bd98;
  box-shadow: 0 2px 8px rgba(21, 128, 61, .06);
}
.specification-field .form-checkbox-group input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #16a34a;
}
.field-help {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 7px;
  color: #3d654a;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.field-help svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #16a34a;
}
.field-errors {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 7px;
}
.error-text {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}
.specification-field input[aria-invalid="true"], .specification-field select[aria-invalid="true"], .specification-field textarea[aria-invalid="true"] {
  border-color: #ef4444;
  background: #fffafa;
}
.no-specifications {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px dashed #a9ceb4;
  border-radius: 18px;
  background: #f1faf4;
}
.no-specifications-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #dcfce7;
  color: #15803d;
}
.no-specifications-icon svg {
  width: 21px;
  height: 21px;
}
.no-specifications h3 {
  margin: 0 0 4px;
  color: #14532d;
  font-size: 15px;
  font-weight: 800;
}
.no-specifications p {
  margin: 0;
  color: #365b43;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
#specifications-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid #b9dfc5;
  border-radius: 12px;
  background: #ecfdf3;
  color: #166534;
  font-size: 13px;
  font-weight: 700;
}
.specification-field input:-webkit-autofill, .specification-field input:-webkit-autofill:hover, .specification-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #102b1b;
  box-shadow: 0 0 0 1000px #f8fcf9 inset;
  transition: background-color 9999s ease-in-out 0s;
}
@media (max-width: 768px) {
  .specification-group {
    padding: 20px;
    border-radius: 17px;
  }
  .specification-fields {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .specification-group-header {
    gap: 11px;
    padding-bottom: 17px;
    margin-bottom: 19px;
  }
  .specification-group-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .specification-group-title {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .specification-group {
    padding: 16px;
  }
  .specification-group-header {
    align-items: flex-start;
  }
  .specification-group-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
  }
  .specification-group-icon svg {
    width: 17px;
    height: 17px;
  }
  .specification-field-label {
    font-size: 12px;
  }
  .specification-field input:not([type="hidden"]), .specification-field select, .specification-field textarea {
    padding: 11px 12px;
    font-size: 13px;
  }
  .no-specifications {
    align-items: flex-start;
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .specification-field input, .specification-field select, .specification-field textarea, .specification-field .form-checkbox-group label {
    transition: none;
  }
}
.main-vendordashboard-page-hero {
  --vendor-green-dark: #064e3b;
  --vendor-green: #047857;
  --vendor-green-mid: #065f46;
  --vendor-green-light: #10b981;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 28px;
  box-sizing: border-box;
  border-radius: 30px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20), 0 8px 25px rgba(0, 0, 0, 0.10);
}
.main-vendordashboard-page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
}
.main-vendordashboard-page-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.78) contrast(1.04) saturate(1.08);
  transform: scale(1);
  transition: transform 8s cubic-bezier(.2, .7, .2, 1);
}
.main-vendordashboard-page-hero:hover .main-vendordashboard-page-banner-image {
  transform: scale(1.015);
}
.main-vendordashboard-page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: radial-gradient( circle at 50% 45%, rgba(6, 78, 59, 0.05), rgba(6, 78, 59, 0.20) 72% ),  linear-gradient( 90deg, rgba(6, 78, 59, 0.30), rgba(4, 120, 87, 0.06) 30%, rgba(4, 120, 87, 0.06) 70%, rgba(6, 78, 59, 0.30) ),  linear-gradient( 180deg, rgba(6, 78, 59, 0.18), transparent 25%, transparent 75%, rgba(6, 78, 59, 0.24) );
}
.main-vendordashboard-page-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
}
.main-vendordashboard-page-glow-one {
  width: 260px;
  height: 260px;
  top: -135px;
  left: -90px;
  background: rgba(16, 185, 129, 0.18);
}
.main-vendordashboard-page-glow-two {
  width: 290px;
  height: 290px;
  right: -135px;
  bottom: -155px;
  background: rgba(6, 95, 70, 0.22);
}
.main-vendordashboard-page-hero-inner {
  position: relative;
  z-index: 5;
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 42px 38px;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
  background: linear-gradient( 145deg, rgba(6, 78, 59, 0.70), rgba(4, 120, 87, 0.48) );
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 28px;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.main-vendordashboard-page-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.main-vendordashboard-page-avatar {
  position: relative;
  width: 128px;
  height: 128px;
  padding: 5px;
  margin-bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient( 135deg, #10b981, #047857 50%, #064e3b );
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 0 0 9px rgba(16, 185, 129, 0.12), 0 15px 38px rgba(0, 0, 0, 0.35), 0 8px 25px rgba(16, 185, 129, 0.24);
}
.main-vendordashboard-page-avatar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.98);
}
.main-vendordashboard-page-logo {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  padding: 10px;
  border-radius: 0;
  background: #ffffff;
}
.main-vendordashboard-page-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient( 135deg, #064e3b, #047857 50%, #065f46 );
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
}
.main-vendordashboard-page-store-name {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #ffffff !important;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.5px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.main-vendordashboard-page-school {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.72);
  border: 1px solid rgba(167, 243, 208, 0.38);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.main-vendordashboard-page-school svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #a7f3d0;
  stroke-width: 2.3;
}
.main-vendordashboard-page-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.74);
  border: 1px solid rgba(167, 243, 208, 0.32);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.main-vendordashboard-page-rating-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main-vendordashboard-page-rating-icon svg {
  width: 16px;
  height: 16px;
  fill: #facc15;
  color: #facc15;
  stroke-width: 2;
}
.main-vendordashboard-page-rating-label {
  color: #ffffff;
}
.main-vendordashboard-page-rating strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}
.main-vendordashboard-page-rating-count {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.main-vendordashboard-page-divider {
  width: min(520px, 75%);
  height: 1px;
  margin: 25px auto 0;
  background: linear-gradient( 90deg, transparent, rgba(167, 243, 208, 0.30), rgba(255, 255, 255, 0.28), rgba(167, 243, 208, 0.30), transparent );
}
.main-vendordashboard-page-bio {
  width: min(650px, 100%);
  margin: 20px 0 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
  text-align: center;
}
.main-vendordashboard-page-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 27px;
}
.main-vendordashboard-page-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 48px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 21px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.1px;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.main-vendordashboard-page-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  left: -125%;
  width: 75%;
  height: 140%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.25) 42%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0.25) 58%, rgba(255, 255, 255, 0.04) 70%, transparent 100% );
  transform: skewX(-22deg);
  transition: left 0.65s cubic-bezier(.2, .7, .2, 1);
}
.main-vendordashboard-page-btn:hover::before {
  left: 140%;
}
.main-vendordashboard-page-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.main-vendordashboard-page-btn-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.main-vendordashboard-page-btn-primary {
  background: linear-gradient( 135deg, #10b981 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-color: rgba(167, 243, 208, 0.55);
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.main-vendordashboard-page-btn-primary:hover {
  background: linear-gradient( 135deg, #34d399 0%, #10b981 45%, #047857 72%, #065f46 100% );
  border-color: rgba(209, 250, 229, 0.75);
  color: #ffffff !important;
  box-shadow: 0 13px 30px rgba(6, 78, 59, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transform: none;
}
.main-vendordashboard-page-btn-secondary {
  background: linear-gradient( 135deg, rgba(6, 78, 59, 0.88), rgba(4, 120, 87, 0.68) );
  border-color: rgba(167, 243, 208, 0.44);
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.main-vendordashboard-page-btn-secondary:hover {
  background: linear-gradient( 135deg, rgba(16, 185, 129, 0.92), rgba(4, 120, 87, 0.92) );
  border-color: rgba(167, 243, 208, 0.70);
  color: #ffffff !important;
  box-shadow: 0 12px 27px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transform: none;
}
.main-vendordashboard-page-btn:active {
  transform: none;
  filter: brightness(0.94);
}
.main-vendordashboard-page-btn:focus-visible {
  outline: 2px solid rgba(167, 243, 208, 0.95);
  outline-offset: 4px;
}
@media (max-width: 768px) {
  .main-vendordashboard-page-hero {
    min-height: 500px;
    padding: 38px 18px;
    border-radius: 24px;
  }
  .main-vendordashboard-page-hero-inner {
    padding: 34px 25px 32px;
    border-radius: 24px;
    background: linear-gradient( 145deg, rgba(6, 78, 59, 0.72), rgba(4, 120, 87, 0.50) );
  }
  .main-vendordashboard-page-avatar {
    width: 108px;
    height: 108px;
    padding: 4px;
  }
  .main-vendordashboard-page-logo {
    padding: 8px;
  }
  .main-vendordashboard-page-store-name {
    width: 100%;
    font-size: 34px;
    text-align: center;
    color: #ffffff !important;
  }
  .main-vendordashboard-page-bio {
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
    color: #ffffff;
  }
  .main-vendordashboard-page-actions {
    margin-top: 24px;
  }
}
@media (max-width: 480px) {
  .main-vendordashboard-page-hero {
    min-height: auto;
    padding: 18px 10px;
    border-radius: 20px;
  }
  .main-vendordashboard-page-hero-inner {
    padding: 28px 16px 26px;
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(6, 78, 59, 0.74), rgba(4, 120, 87, 0.52) );
  }
  .main-vendordashboard-page-avatar {
    width: 92px;
    height: 92px;
    padding: 4px;
    margin-bottom: 15px;
  }
  .main-vendordashboard-page-avatar-inner {
    border-width: 2px;
  }
  .main-vendordashboard-page-logo {
    padding: 7px;
  }
  .main-vendordashboard-page-avatar-placeholder {
    font-size: 32px;
    color: #ffffff;
  }
  .main-vendordashboard-page-store-name {
    width: 100%;
    font-size: 28px;
    letter-spacing: -1px;
    text-align: center;
    color: #ffffff !important;
  }
  .main-vendordashboard-page-school {
    max-width: 100%;
    padding: 7px 12px;
    font-size: 11px;
    color: #ffffff;
  }
  .main-vendordashboard-page-rating {
    max-width: 100%;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #ffffff;
  }
  .main-vendordashboard-page-rating-count {
    width: 100%;
    font-size: 11px;
    color: #ffffff;
  }
  .main-vendordashboard-page-divider {
    width: 85%;
    margin-top: 21px;
  }
  .main-vendordashboard-page-bio {
    margin-top: 17px;
    font-size: 13px;
    line-height: 1.65;
    color: #ffffff;
    text-align: center;
  }
  .main-vendordashboard-page-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }
  .main-vendordashboard-page-btn {
    width: 100%;
    min-height: 48px;
    color: #ffffff !important;
  }
}
@media (max-width: 360px) {
  .main-vendordashboard-page-hero {
    padding: 12px 7px;
  }
  .main-vendordashboard-page-hero-inner {
    padding: 24px 13px 22px;
  }
  .main-vendordashboard-page-avatar {
    width: 82px;
    height: 82px;
  }
  .main-vendordashboard-page-logo {
    padding: 6px;
  }
  .main-vendordashboard-page-store-name {
    width: 100%;
    font-size: 25px;
    color: #ffffff !important;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-vendordashboard-page-banner-image, .main-vendordashboard-page-btn::before {
    transition: none;
  }
}
.notification-button-wrapper {
  width: min(100%, 560px);
  margin: 28px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  text-align: center;
  visibility: hidden;
}
.notification-button-wrapper.push-state-checking {
  visibility: hidden;
}
.notification-button-wrapper.push-state-ready {
  visibility: visible;
}
.notification-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 22px;
  box-sizing: border-box;
  border: 1px solid #cce8d8;
  border-radius: 20px;
  background: linear-gradient( 145deg, #ffffff 0%, #f6fcf8 55%, #eef9f2 100% );
  box-shadow: 0 12px 30px rgba(15, 138, 75, 0.07), 0 3px 10px rgba(15, 138, 75, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.notification-info-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #0f8a4b;
  background: linear-gradient( 145deg, #e7f8ed, #d8f2e2 );
  border: 1px solid #c6e7d3;
  box-shadow: 0 7px 16px rgba(15, 138, 75, 0.09), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.notification-info-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.3;
}
.notification-info-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.notification-info-content h4 {
  width: 100%;
  margin: 0;
  color: #123c27;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: center;
}
.notification-info-content p {
  width: 100%;
  max-width: 470px;
  margin: 0;
  color: #365d47;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.notification-info-content span {
  margin-top: 2px;
  color: #4a725b;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
#enable-push-notifications {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #0c7a42;
  border-radius: 13px;
  background: linear-gradient( 135deg, #087f45 0%, #0f9b55 50%, #18b866 100% ) !important;
  background-color: #0f9b55 !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 8px 20px rgba(15, 138, 75, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.22);
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
#enable-push-notifications svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.4;
}
#push-notification-button-text {
  color: #ffffff;
  white-space: nowrap;
}
#enable-push-notifications::before {
  content: "";
  position: absolute;
  top: 0;
  left: -125%;
  width: 62%;
  height: 100%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,0.08) 35%, rgba(255,255,255,0.48) 50%, rgba(255,255,255,0.08) 65%, transparent 100% );
  transform: skewX(-25deg);
  pointer-events: none;
  transition: left 0.7s ease;
}
#enable-push-notifications:hover::before {
  left: 140%;
}
#enable-push-notifications:hover {
  filter: brightness(1.05);
  background: linear-gradient( 135deg, #087f45 0%, #0f9b55 50%, #18b866 100% ) !important;
  background-color: #0f9b55 !important;
  box-shadow: 0 9px 22px rgba(15, 138, 75, 0.22), inset 0 1px 2px rgba(255,255,255,0.28);
}
#enable-push-notifications:focus {
  outline: none;
}
#enable-push-notifications:focus-visible {
  outline: 3px solid rgba(15, 155, 85, 0.25);
  outline-offset: 3px;
}
#enable-push-notifications:active {
  filter: brightness(0.97);
}
#enable-push-notifications:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  filter: none;
  box-shadow: 0 4px 12px rgba(15, 138, 75, 0.08);
}
#enable-push-notifications:disabled::before {
  display: none;
}
#enable-push-notifications[aria-busy="true"] {
  cursor: wait;
}
#enable-push-notifications[aria-busy="true"] svg {
  animation: notification-spin 0.9s linear infinite;
}
@keyframes notification-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .notification-button-wrapper {
    width: min( calc(100% - 30px), 560px );
    margin: 24px auto;
  }
  .notification-info {
    padding: 22px 20px;
    border-radius: 18px;
  }
}
@media (max-width: 600px) {
  .notification-button-wrapper {
    width: calc(100% - 30px);
    margin: 20px auto;
    gap: 13px;
  }
  .notification-info {
    padding: 20px 16px;
    gap: 10px;
    border-radius: 17px;
  }
  .notification-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .notification-info-icon svg {
    width: 20px;
    height: 20px;
  }
  .notification-info-content {
    gap: 6px;
  }
  .notification-info-content h4 {
    font-size: 0.94rem;
  }
  .notification-info-content p {
    font-size: 0.8rem;
    line-height: 1.55;
  }
  .notification-info-content span {
    font-size: 0.72rem;
  }
  #enable-push-notifications {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 0.83rem;
  }
}
@media (max-width: 380px) {
  .notification-button-wrapper {
    width: calc(100% - 20px);
    margin: 18px auto;
  }
  .notification-info {
    padding: 18px 14px;
    border-radius: 16px;
  }
  .notification-info-icon {
    width: 41px;
    height: 41px;
    border-radius: 12px;
  }
  .notification-info-content h4 {
    font-size: 0.9rem;
  }
  .notification-info-content p {
    font-size: 0.77rem;
  }
  .notification-info-content span {
    font-size: 0.7rem;
  }
  #enable-push-notifications {
    min-height: 44px;
    font-size: 0.81rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #enable-push-notifications, #enable-push-notifications::before {
    transition: none;
  }
  #enable-push-notifications[aria-busy="true"] svg {
    animation: none;
  }
}
:root {
  --main-vendordashboard-productplan-primary: #059669;
  --main-vendordashboard-productplan-primary-dark: #047857;
  --main-vendordashboard-productplan-danger: #dc2626;
  --main-vendordashboard-productplan-danger-dark: #b91c1c;
  --main-vendordashboard-productplan-warning: #d97706;
  --main-vendordashboard-productplan-warning-dark: #b45309;
  --main-vendordashboard-productplan-success: #059669;
  --main-vendordashboard-productplan-success-dark: #047857;
  --main-vendordashboard-productplan-text: #112719;
  --main-vendordashboard-productplan-text-secondary: #26382d;
  --main-vendordashboard-productplan-border: #e5e7eb;
  --main-vendordashboard-productplan-background: #ffffff;
  --main-vendordashboard-productplan-surface: #f8fafc;
  --main-vendordashboard-productplan-radius: 18px;
  --main-vendordashboard-productplan-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.main-vendordashboard-productplan-card {
  width: min(100%, 760px);
  margin: 24px auto;
  padding: 30px;
  background: var( --main-vendordashboard-productplan-background );
  border: 1px solid var(--main-vendordashboard-productplan-border);
  border-radius: var(--main-vendordashboard-productplan-radius);
  box-shadow: var(--main-vendordashboard-productplan-shadow);
  text-align: center;
  box-sizing: border-box;
}
.main-vendordashboard-productplan-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  margin-bottom: 28px;
}
.main-vendordashboard-productplan-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}
.main-vendordashboard-productplan-plan-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--main-vendordashboard-productplan-primary);
  background: rgba(5, 150, 105, 0.10);
  border-radius: 14px;
}
.main-vendordashboard-productplan-plan-icon svg {
  width: 25px;
  height: 25px;
}
.main-vendordashboard-productplan-eyebrow {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-plan h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
}
.main-vendordashboard-productplan-expiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  padding: 6px 11px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--main-vendordashboard-productplan-text-secondary);
  background: var(--main-vendordashboard-productplan-surface);
  border: 1px solid var(--main-vendordashboard-productplan-border);
  border-radius: 999px;
  box-sizing: border-box;
}
.main-vendordashboard-productplan-expiry-icon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--main-vendordashboard-productplan-primary);
  background: rgba(5, 150, 105, 0.08);
  border-radius: 50%;
}
.main-vendordashboard-productplan-expiry-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.main-vendordashboard-productplan-expiry span:last-child {
  display: inline-block;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-expiry-active {
  color: var(--main-vendordashboard-productplan-primary-dark);
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.15);
}
.main-vendordashboard-productplan-expiry-active .main-vendordashboard-productplan-expiry-icon {
  color: var(--main-vendordashboard-productplan-primary);
  background: rgba(5, 150, 105, 0.10);
}
.main-vendordashboard-productplan-expiry-active span:last-child {
  color: var(--main-vendordashboard-productplan-primary-dark);
}
.main-vendordashboard-productplan-expiry-free {
  color: var(--main-vendordashboard-productplan-success-dark);
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.15);
}
.main-vendordashboard-productplan-expiry-free .main-vendordashboard-productplan-expiry-icon {
  color: var(--main-vendordashboard-productplan-success);
  background: rgba(5, 150, 105, 0.10);
}
.main-vendordashboard-productplan-expiry-free span:last-child {
  color: var(--main-vendordashboard-productplan-success-dark);
}
.main-vendordashboard-productplan-expiry-warning {
  color: var(--main-vendordashboard-productplan-warning-dark);
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.16);
}
.main-vendordashboard-productplan-expiry-warning .main-vendordashboard-productplan-expiry-icon {
  color: var(--main-vendordashboard-productplan-warning);
  background: rgba(217, 119, 6, 0.10);
}
.main-vendordashboard-productplan-expiry-warning span:last-child {
  color: var(--main-vendordashboard-productplan-warning-dark);
}
.main-vendordashboard-productplan-expiry-danger {
  color: var(--main-vendordashboard-productplan-danger-dark);
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.16);
}
.main-vendordashboard-productplan-expiry-danger .main-vendordashboard-productplan-expiry-icon {
  color: var(--main-vendordashboard-productplan-danger);
  background: rgba(220, 38, 38, 0.10);
}
.main-vendordashboard-productplan-expiry-danger span:last-child {
  color: var(--main-vendordashboard-productplan-danger-dark);
}
.main-vendordashboard-productplan-capacity {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-vendordashboard-productplan-capacity-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-capacity-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.main-vendordashboard-productplan-capacity-count strong {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-capacity-count span {
  font-size: 16px;
  font-weight: 700;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-progress-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.main-vendordashboard-productplan-progress-track {
  flex: 1;
  height: 12px;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 999px;
}
.main-vendordashboard-productplan-progress-bar {
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  transition: width 0.4s ease, background-color 0.3s ease;
}
.main-vendordashboard-productplan-progress-normal {
  background: var(--main-vendordashboard-productplan-primary);
}
.main-vendordashboard-productplan-progress-full {
  background: var(--main-vendordashboard-productplan-warning);
}
.main-vendordashboard-productplan-progress-danger {
  background: var(--main-vendordashboard-productplan-danger);
}
.main-vendordashboard-productplan-progress-percentage {
  min-width: 45px;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-status {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  padding: 15px 18px;
  box-sizing: border-box;
  border-radius: 13px;
  text-align: left;
}
.main-vendordashboard-productplan-status-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 13px;
  border-radius: 11px;
}
.main-vendordashboard-productplan-status-icon svg {
  width: 20px;
  height: 20px;
}
.main-vendordashboard-productplan-status-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.main-vendordashboard-productplan-status-content strong {
  font-size: 14px;
  font-weight: 800;
}
.main-vendordashboard-productplan-status-content span {
  font-size: 13px;
  line-height: 1.5;
}
.main-vendordashboard-productplan-status-success {
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.18);
  color: var(--main-vendordashboard-productplan-success-dark);
}
.main-vendordashboard-productplan-status-success .main-vendordashboard-productplan-status-icon {
  background: rgba(5, 150, 105, 0.12);
}
.main-vendordashboard-productplan-status-warning {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.18);
  color: var(--main-vendordashboard-productplan-warning-dark);
}
.main-vendordashboard-productplan-status-warning .main-vendordashboard-productplan-status-icon {
  background: rgba(217, 119, 6, 0.12);
}
.main-vendordashboard-productplan-status-danger {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.18);
  color: var(--main-vendordashboard-productplan-danger-dark);
}
.main-vendordashboard-productplan-status-danger .main-vendordashboard-productplan-status-icon {
  background: rgba(220, 38, 38, 0.12);
}
.main-vendordashboard-productplan-unlimited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: 13px;
  color: var(--main-vendordashboard-productplan-success-dark);
}
.main-vendordashboard-productplan-unlimited-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(5, 150, 105, 0.12);
  border-radius: 11px;
}
.main-vendordashboard-productplan-unlimited-icon svg {
  width: 21px;
  height: 21px;
}
.main-vendordashboard-productplan-unlimited div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.main-vendordashboard-productplan-unlimited strong {
  font-size: 14px;
  font-weight: 800;
}
.main-vendordashboard-productplan-unlimited span {
  font-size: 13px;
}
.main-vendordashboard-productplan-warning {
  width: min(100%, 760px);
  margin: 24px auto;
  padding: 28px;
  box-sizing: border-box;
  border-radius: var(--main-vendordashboard-productplan-radius);
  box-shadow: var(--main-vendordashboard-productplan-shadow);
  text-align: center;
}
.main-vendordashboard-productplan-warning-danger {
  background: #fff7f7;
  border: 1px solid rgba(220, 38, 38, 0.22);
}
.main-vendordashboard-productplan-warning-limit {
  background: #fffaf0;
  border: 1px solid rgba(217, 119, 6, 0.22);
}
.main-vendordashboard-productplan-warning-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.main-vendordashboard-productplan-warning-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  border-radius: 16px;
}
.main-vendordashboard-productplan-warning-icon svg {
  width: 28px;
  height: 28px;
}
.main-vendordashboard-productplan-warning-danger .main-vendordashboard-productplan-warning-icon {
  color: var(--main-vendordashboard-productplan-danger);
  background: rgba(220, 38, 38, 0.10);
}
.main-vendordashboard-productplan-warning-limit .main-vendordashboard-productplan-warning-icon {
  color: var(--main-vendordashboard-productplan-warning);
  background: rgba(217, 119, 6, 0.10);
}
.main-vendordashboard-productplan-warning-content h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-warning-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-warning-content strong {
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-warning-message {
  max-width: 610px;
  margin: 22px auto 0;
  text-align: center;
}
.main-vendordashboard-productplan-warning-message p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--main-vendordashboard-productplan-text-secondary);
}
.main-vendordashboard-productplan-warning-message p:last-child {
  margin-bottom: 0;
}
.main-vendordashboard-productplan-warning-message strong {
  color: var(--main-vendordashboard-productplan-text);
}
.main-vendordashboard-productplan-upgrades {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 25px;
}
.main-vendordashboard-productplan-upgrade {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 230px;
  padding: 14px 17px;
  overflow: hidden;
  text-decoration: none;
  border-radius: 13px;
  box-sizing: border-box;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.main-vendordashboard-productplan-upgrade::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent );
  transition: left 0.55s ease;
  pointer-events: none;
}
.main-vendordashboard-productplan-upgrade:hover::before {
  left: 140%;
}
.main-vendordashboard-productplan-upgrade:hover {
  transform: none;
}
.main-vendordashboard-productplan-upgrade-primary {
  color: #ffffff;
  background: linear-gradient( 135deg, var(--main-vendordashboard-productplan-primary), var(--main-vendordashboard-productplan-primary-dark) );
  border: 1px solid var(--main-vendordashboard-productplan-primary);
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.20);
}
.main-vendordashboard-productplan-upgrade-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.28);
}
.main-vendordashboard-productplan-upgrade-secondary {
  color: var(--main-vendordashboard-productplan-text);
  background: #ffffff;
  border: 1px solid var(--main-vendordashboard-productplan-border);
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.06);
}
.main-vendordashboard-productplan-upgrade-secondary:hover {
  filter: brightness(0.98);
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.10);
}
.main-vendordashboard-productplan-upgrade-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 11px;
  border-radius: 10px;
}
.main-vendordashboard-productplan-upgrade-icon svg {
  width: 18px;
  height: 18px;
}
.main-vendordashboard-productplan-upgrade-primary .main-vendordashboard-productplan-upgrade-icon {
  background: rgba(255, 255, 255, 0.15);
}
.main-vendordashboard-productplan-upgrade-secondary .main-vendordashboard-productplan-upgrade-icon {
  color: var(--main-vendordashboard-productplan-primary);
  background: rgba(5, 150, 105, 0.08);
}
.main-vendordashboard-productplan-upgrade-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
.main-vendordashboard-productplan-upgrade-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.main-vendordashboard-productplan-upgrade-price {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}
.main-vendordashboard-productplan-upgrade-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.main-vendordashboard-productplan-upgrade-arrow svg {
  width: 17px;
  height: 17px;
}
.main-vendordashboard-productplan-no-upgrade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: 22px auto 0;
  padding: 15px 18px;
  background: #f8fafc;
  border: 1px solid var(--main-vendordashboard-productplan-border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--main-vendordashboard-productplan-text-secondary);
  text-align: center;
}
.main-vendordashboard-productplan-no-upgrade svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--main-vendordashboard-productplan-primary);
}
.main-vendordashboard-productplan-upgrade:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.30);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .main-vendordashboard-productplan-card {
    padding: 23px 18px;
  }
  .main-vendordashboard-productplan-card-header {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }
  .main-vendordashboard-productplan-plan, .main-vendordashboard-productplan-capacity {
    min-width: 0;
    width: 100%;
  }
  .main-vendordashboard-productplan-capacity-count strong {
    font-size: 30px;
  }
  .main-vendordashboard-productplan-dates {
    gap: 6px;
  }
  .main-vendordashboard-productplan-expiry {
    max-width: 100%;
    margin-top: 0;
    padding: 6px 10px;
    font-size: 12px;
  }
  .main-vendordashboard-productplan-expiry-icon {
    width: 16px;
    height: 16px;
  }
  .main-vendordashboard-productplan-expiry-icon svg {
    width: 11px;
    height: 11px;
  }
  .main-vendordashboard-productplan-warning {
    padding: 23px 18px;
  }
  .main-vendordashboard-productplan-warning-content h3 {
    font-size: 20px;
  }
  .main-vendordashboard-productplan-upgrades {
    flex-direction: column;
    width: 100%;
  }
  .main-vendordashboard-productplan-upgrade {
    width: 100%;
    min-width: 0;
  }
  .main-vendordashboard-productplan-status {
    align-items: flex-start;
  }
  .main-vendordashboard-productplan-status-icon {
    width: 36px;
    height: 36px;
  }
  .main-vendordashboard-productplan-unlimited {
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 420px) {
  .main-vendordashboard-productplan-card {
    padding: 20px 15px;
  }
  .main-vendordashboard-productplan-warning {
    padding: 20px 15px;
  }
  .main-vendordashboard-productplan-progress-wrapper {
    gap: 8px;
  }
  .main-vendordashboard-productplan-progress-percentage {
    min-width: 40px;
    font-size: 12px;
  }
  .main-vendordashboard-productplan-upgrade {
    padding: 13px;
  }
  .main-vendordashboard-productplan-upgrade-name {
    font-size: 12px;
  }
  .main-vendordashboard-productplan-upgrade-price {
    font-size: 14px;
  }
  .main-vendordashboard-productplan-expiry {
    max-width: 100%;
    padding: 6px 9px;
    font-size: 11.5px;
  }
  .main-vendordashboard-productplan-expiry-icon {
    width: 15px;
    height: 15px;
  }
  .main-vendordashboard-productplan-expiry-icon svg {
    width: 10px;
    height: 10px;
  }
}
.dashboard-vendorstore-advert {
  --advert-green: #168a5a;
  --advert-green-dark: #0f7049;
  --advert-green-deep: #0a5236;
  --advert-green-soft: #e8f8ef;
  --advert-green-light: #d5f1e1;
  --advert-border: #b9dfcc;
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--advert-border);
  border-radius: 22px;
  background: linear-gradient( 135deg, #f2fbf6 0%, #ffffff 48%, #e9f8f0 100% );
  box-shadow: 0 14px 38px rgba(15, 91, 59, 0.09), 0 3px 12px rgba(15, 91, 59, 0.04);
}
.dashboard-vendorstore-advert::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: -175px;
  right: 8%;
  border-radius: 50%;
  background: rgba(22, 138, 90, 0.10);
  pointer-events: none;
}
.dashboard-vendorstore-advert::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  bottom: -125px;
  left: 7%;
  border-radius: 50%;
  background: rgba(22, 138, 90, 0.06);
  pointer-events: none;
}
.dashboard-vendorstore-advert-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 28px;
  text-align: center;
}
.dashboard-vendorstore-advert-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #b5dec9;
  border-radius: 17px;
  background: linear-gradient( 145deg, #e2f6ea, #cceedd );
  color: var(--advert-green-dark);
  box-shadow: 0 8px 18px rgba(22, 138, 90, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.85);
}
.dashboard-vendorstore-advert-icon svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.1;
}
.dashboard-vendorstore-advert-content {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dashboard-vendorstore-advert-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  color: var(--advert-green);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
}
.dashboard-vendorstore-advert-content h2 {
  width: 100%;
  margin: 0;
  color: #153d2b;
  font-size: clamp( 1.2rem, 2vw, 1.5rem );
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-align: center;
}
.dashboard-vendorstore-advert-content p {
  width: 100%;
  max-width: 650px;
  margin: 8px auto 16px;
  color: #315c46;
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1.65;
  text-align: center;
}
.dashboard-vendorstore-advert-benefits {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 20px;
  text-align: center;
}
.dashboard-vendorstore-advert-benefit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #356149;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.dashboard-vendorstore-advert-benefit svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--advert-green);
  stroke-width: 2.3;
}
.dashboard-vendorstore-advert-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.dashboard-vendorstore-advert-btn {
  position: relative;
  width: auto;
  min-width: 190px;
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--advert-green);
  border-radius: 12px;
  background: linear-gradient( 135deg, #087d45 0%, #168f58 48%, #1aae68 100% ) !important;
  background-color: #168f58 !important;
  color: #ffffff !important;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 8px 20px rgba(22, 138, 90, 0.20), inset 0 1px 2px rgba(255, 255, 255, 0.24);
  transition: filter 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.dashboard-vendorstore-advert-btn span {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-align: center;
}
.dashboard-vendorstore-advert-btn svg {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.3;
  transition: transform 0.18s ease;
}
.dashboard-vendorstore-advert-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -135%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.48) 50%, rgba(255, 255, 255, 0.04) 70%, transparent 100% );
  transform: skewX(-25deg);
  pointer-events: none;
  transition: left 0.7s ease;
}
.dashboard-vendorstore-advert-btn:hover::before {
  left: 145%;
}
.dashboard-vendorstore-advert-btn:hover {
  background: linear-gradient( 135deg, #087d45 0%, #168f58 48%, #1aae68 100% ) !important;
  color: #ffffff !important;
  filter: brightness(1.05);
  box-shadow: 0 9px 23px rgba(22, 138, 90, 0.24), inset 0 1px 2px rgba(255, 255, 255, 0.30);
}
.dashboard-vendorstore-advert-btn:hover svg {
  transform: translateX(2px);
}
.dashboard-vendorstore-advert-btn:active {
  background: linear-gradient( 135deg, #076d3c 0%, #0f814c 50%, #169a58 100% ) !important;
  filter: brightness(0.97);
}
.dashboard-vendorstore-advert-btn:focus {
  outline: none;
}
.dashboard-vendorstore-advert-btn:focus-visible {
  outline: 3px solid rgba(22, 138, 90, 0.22);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .dashboard-vendorstore-advert-inner {
    gap: 17px;
    padding: 26px 22px;
  }
  .dashboard-vendorstore-advert-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 15px;
  }
  .dashboard-vendorstore-advert-icon svg {
    width: 25px;
    height: 25px;
  }
  .dashboard-vendorstore-advert-content p {
    max-width: 600px;
  }
}
@media (max-width: 600px) {
  .dashboard-vendorstore-advert {
    border-radius: 18px;
  }
  .dashboard-vendorstore-advert-inner {
    gap: 15px;
    padding: 23px 18px;
  }
  .dashboard-vendorstore-advert-icon {
    width: 49px;
    height: 49px;
    flex-basis: 49px;
    border-radius: 14px;
  }
  .dashboard-vendorstore-advert-icon svg {
    width: 22px;
    height: 22px;
  }
  .dashboard-vendorstore-advert-eyebrow {
    margin-bottom: 6px;
    font-size: 0.69rem;
  }
  .dashboard-vendorstore-advert-content h2 {
    font-size: 1.16rem;
    line-height: 1.3;
  }
  .dashboard-vendorstore-advert-content p {
    margin: 8px auto 15px;
    font-size: 0.8rem;
    line-height: 1.58;
  }
  .dashboard-vendorstore-advert-benefits {
    flex-direction: column;
    gap: 8px;
  }
  .dashboard-vendorstore-advert-benefit {
    font-size: 0.73rem;
  }
  .dashboard-vendorstore-advert-action {
    width: 100%;
    margin-top: 3px;
  }
  .dashboard-vendorstore-advert-btn {
    width: 100%;
    min-height: 46px;
    min-width: 0;
    border-radius: 11px;
    font-size: 0.82rem;
  }
}
@media (max-width: 380px) {
  .dashboard-vendorstore-advert-inner {
    padding: 20px 15px;
  }
  .dashboard-vendorstore-advert-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    border-radius: 13px;
  }
  .dashboard-vendorstore-advert-icon svg {
    width: 20px;
    height: 20px;
  }
  .dashboard-vendorstore-advert-content h2 {
    font-size: 1.08rem;
  }
  .dashboard-vendorstore-advert-content p {
    font-size: 0.77rem;
  }
  .dashboard-vendorstore-advert-benefit {
    font-size: 0.7rem;
  }
  .dashboard-vendorstore-advert-btn {
    min-height: 44px;
    font-size: 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-vendorstore-advert-btn, .dashboard-vendorstore-advert-btn::before, .dashboard-vendorstore-advert-btn svg {
    transition: none;
  }
}
.vendor-deal-page {
  --deal-green: #168a5a;
  --deal-green-dark: #0f6f48;
  --deal-green-deep: #0b5137;
  --deal-green-soft: #eaf8f1;
  --deal-green-light: #f4fbf7;
  --deal-green-border: #bfe4d1;
  --deal-text: #17251f;
  --deal-text-secondary: #38564a;
  --deal-border: #d8e8df;
  --deal-background: #f5faf7;
  --deal-white: #ffffff;
  min-height: 100vh;
  background: radial-gradient( circle at 50% 0%, rgba(22, 138, 90, 0.08), transparent 34% ), var(--deal-background);
  color: var(--deal-text);
}
.vendor-deal-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 112px;
  background: linear-gradient( 135deg, #0b5137 0%, #106b48 48%, #168a5a 100% );
  color: #ffffff;
}
.vendor-deal-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -260px;
  right: -120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.vendor-deal-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -220px;
  left: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.vendor-deal-hero-inner {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vendor-deal-hero-icon {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}
.vendor-deal-hero-icon svg {
  width: 31px;
  height: 31px;
}
.vendor-deal-hero-content {
  width: 100%;
}
.vendor-deal-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #b9efd1;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vendor-deal-hero-content h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.25rem, 5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -0.045em;
}
.vendor-deal-hero-content p {
  width: min(650px, 100%);
  margin: 17px auto 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.75;
}
.vendor-deal-main {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: -58px auto 0;
  padding-bottom: 80px;
}
.vendor-deal-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.vendor-deal-preview-card, .vendor-deal-card {
  overflow: hidden;
  background: var(--deal-white);
  border: 1px solid var(--deal-border);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(11, 81, 55, 0.09);
}
.vendor-deal-preview-card {
  position: sticky;
  top: 24px;
}
.vendor-deal-preview-image {
  position: relative;
  height: 215px;
  overflow: hidden;
  background: linear-gradient( 135deg, #dff4e9, #eefaf4 );
}
.vendor-deal-preview-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-deal-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deal-green);
}
.vendor-deal-preview-placeholder svg {
  width: 48px;
  height: 48px;
}
.vendor-deal-preview-gradient {
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient( to top, rgba(5, 45, 29, 0.32), transparent );
  pointer-events: none;
}
.vendor-deal-preview-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px 18px;
}
.vendor-deal-store-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 16px;
  background: var(--deal-green-soft);
  box-shadow: 0 4px 14px rgba(10, 62, 42, 0.14);
}
.vendor-deal-store-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-deal-store-avatar span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deal-green);
}
.vendor-deal-store-avatar svg {
  width: 25px;
  height: 25px;
}
.vendor-deal-store-details {
  min-width: 0;
}
.vendor-deal-store-details h2 {
  margin: 0;
  overflow: hidden;
  color: var(--deal-text);
  font-size: 1.04rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-deal-store-details > span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--deal-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}
.vendor-deal-store-details svg {
  width: 14px;
  height: 14px;
  color: var(--deal-green);
}
.vendor-deal-preview-footer {
  padding: 2px 20px 20px;
}
.vendor-deal-preview-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--deal-green-border);
  border-radius: 10px;
  background: var(--deal-green-light);
  color: var(--deal-green-dark);
  font-size: 0.76rem;
  font-weight: 750;
  text-align: center;
}
.vendor-deal-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--deal-green);
}
.vendor-deal-card {
  min-width: 0;
}
.vendor-deal-card-header {
  padding: 34px 36px 30px;
  border-bottom: 1px solid var(--deal-border);
  text-align: center;
}
.vendor-deal-step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--deal-green);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vendor-deal-card-header h2 {
  margin: 0;
  color: var(--deal-text);
  font-size: 1.55rem;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: -0.025em;
}
.vendor-deal-card-header p {
  max-width: 600px;
  margin: 10px auto 0;
  color: var(--deal-text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
}
.vendor-deal-card-body {
  padding: 32px 36px 36px;
}
.vendor-deal-form-group {
  margin-bottom: 25px;
}
.vendor-deal-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.vendor-deal-form-label-row label {
  color: var(--deal-text);
  font-size: 0.87rem;
  font-weight: 800;
}
.vendor-deal-form-label-row span {
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--deal-green-soft);
  color: var(--deal-green-dark);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vendor-deal-duration-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vendor-deal-duration-card {
  position: relative;
  min-height: 94px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  cursor: pointer;
  border: 1.5px solid var(--deal-border);
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-duration-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vendor-deal-duration-card:hover {
  border-color: #82c6a5;
  background: #fbfefc;
  box-shadow: 0 3px 10px rgba(16, 100, 66, 0.05);
}
.vendor-deal-duration-card:has( input[type="radio"]:checked ) {
  border-color: var(--deal-green);
  background: var(--deal-green-light);
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.08);
}
.vendor-deal-duration-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1ecdd;
  border-radius: 11px;
  background: #edf9f3;
  color: var(--deal-green);
}
.vendor-deal-duration-icon svg {
  width: 21px;
  height: 21px;
}
.vendor-deal-duration-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vendor-deal-duration-content strong {
  color: var(--deal-text);
  font-size: 0.92rem;
  font-weight: 800;
}
.vendor-deal-duration-content small {
  color: var(--deal-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.vendor-deal-duration-check {
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #aacbbc;
  border-radius: 50%;
  background: #ffffff;
  color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vendor-deal-duration-check svg {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.vendor-deal-duration-card:has( input[type="radio"]:checked ) .vendor-deal-duration-check {
  border-color: var(--deal-green);
  background: var(--deal-green);
  color: #ffffff;
}
.vendor-deal-form-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: #b42318;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.5;
}
.vendor-deal-form-error svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.vendor-deal-info-box {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 24px;
  padding: 17px;
  border: 1px solid var(--deal-green-border);
  border-radius: 13px;
  background: var(--deal-green-light);
}
.vendor-deal-info-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #d9f2e5;
  color: var(--deal-green-dark);
}
.vendor-deal-info-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-info-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--deal-text);
  font-size: 0.82rem;
  font-weight: 800;
}
.vendor-deal-info-box p {
  margin: 0;
  color: var(--deal-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.6;
}
.vendor-deal-form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--deal-border);
}
.vendor-deal-submit-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 25px;
  border: 1px solid var(--deal-green);
  border-radius: 11px;
  background: var(--deal-green);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(22, 138, 90, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-submit-btn:hover {
  background: var(--deal-green-dark);
  border-color: var(--deal-green-dark);
  box-shadow: 0 6px 17px rgba(22, 138, 90, 0.2);
}
.vendor-deal-submit-btn:active {
  background: var(--deal-green-deep);
  border-color: var(--deal-green-deep);
  box-shadow: 0 3px 9px rgba(22, 138, 90, 0.16);
}
.vendor-deal-submit-btn svg {
  width: 17px;
  height: 17px;
}
.vendor-deal-submit-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.2), 0 5px 14px rgba(22, 138, 90, 0.18);
}
.vendor-deal-duration-card:focus-within {
  border-color: var(--deal-green);
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.12);
}
@media (max-width: 900px) {
  .vendor-deal-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vendor-deal-preview-card {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
  .vendor-deal-card {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .vendor-deal-hero {
    padding: 46px 18px 88px;
  }
  .vendor-deal-hero-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 15px;
  }
  .vendor-deal-hero-icon svg {
    width: 25px;
    height: 25px;
  }
  .vendor-deal-eyebrow {
    font-size: 0.7rem;
  }
  .vendor-deal-hero-content h1 {
    font-size: 2rem;
    letter-spacing: -0.035em;
  }
  .vendor-deal-hero-content p {
    margin-top: 14px;
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .vendor-deal-main {
    width: min(100% - 24px, 620px);
    margin-top: -42px;
    padding-bottom: 50px;
  }
  .vendor-deal-preview-card, .vendor-deal-card {
    border-radius: 16px;
  }
  .vendor-deal-preview-image {
    height: 185px;
  }
  .vendor-deal-preview-info {
    padding: 18px 16px 16px;
  }
  .vendor-deal-preview-footer {
    padding: 2px 16px 16px;
  }
  .vendor-deal-card-header {
    padding: 25px 20px 23px;
  }
  .vendor-deal-card-header h2 {
    font-size: 1.3rem;
  }
  .vendor-deal-card-header p {
    font-size: 0.84rem;
  }
  .vendor-deal-card-body {
    padding: 24px 20px 25px;
  }
  .vendor-deal-duration-options {
    grid-template-columns: 1fr;
  }
  .vendor-deal-duration-card {
    min-height: 88px;
  }
  .vendor-deal-info-box {
    padding: 14px;
  }
  .vendor-deal-form-actions {
    display: block;
  }
  .vendor-deal-submit-btn {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .vendor-deal-hero {
    padding-top: 38px;
    padding-bottom: 80px;
  }
  .vendor-deal-hero-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }
  .vendor-deal-hero-icon svg {
    width: 22px;
    height: 22px;
  }
  .vendor-deal-hero-content h1 {
    font-size: 1.8rem;
  }
  .vendor-deal-main {
    width: calc(100% - 18px);
    margin-top: -36px;
  }
  .vendor-deal-preview-image {
    height: 165px;
  }
  .vendor-deal-duration-card {
    padding: 13px;
  }
  .vendor-deal-duration-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .vendor-deal-duration-icon svg {
    width: 19px;
    height: 19px;
  }
  .vendor-deal-duration-content strong {
    font-size: 0.86rem;
  }
  .vendor-deal-duration-content small {
    font-size: 0.7rem;
  }
  .vendor-deal-duration-check {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}
.vendor-deal-detail-page {
  --deal-green: #168a5a;
  --deal-green-dark: #0f7049;
  --deal-green-deep: #0b5137;
  --deal-green-soft: #eaf8f1;
  --deal-green-border: #c5e7d4;
  --deal-text: #17251f;
  --deal-text-soft: #66776f;
  --deal-border: #dfe9e4;
  --deal-background: #f6faf8;
  --deal-white: #ffffff;
  width: min(1050px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 70px;
  color: var(--deal-text);
}
.vendor-deal-detail-header {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 26px;
}
.vendor-deal-detail-header-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--deal-green-border);
  border-radius: 14px;
  background: var(--deal-green-soft);
  color: var(--deal-green);
}
.vendor-deal-detail-header-icon svg {
  width: 24px;
  height: 24px;
}
.vendor-deal-detail-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--deal-green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vendor-deal-detail-header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.vendor-deal-detail-header p {
  margin: 5px 0 0;
  color: var(--deal-text-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}
.vendor-deal-detail-card {
  overflow: hidden;
  border: 1px solid var(--deal-border);
  border-radius: 20px;
  background: var(--deal-white);
  box-shadow: 0 14px 40px rgba(16, 61, 43, 0.08);
}
.vendor-deal-detail-banner {
  position: relative;
  height: 285px;
  overflow: hidden;
  background: linear-gradient( 135deg, var(--deal-green-deep), var(--deal-green) );
}
.vendor-deal-detail-banner > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-deal-detail-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
}
.vendor-deal-detail-banner-placeholder svg {
  width: 52px;
  height: 52px;
}
.vendor-deal-detail-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( to top, rgba(5, 31, 21, 0.82) 0%, rgba(5, 31, 21, 0.25) 48%, rgba(5, 31, 21, 0.04) 100% );
}
.vendor-deal-detail-store {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #ffffff;
}
.vendor-deal-detail-logo {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 17px;
  background: #ffffff;
  color: var(--deal-green);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.16);
}
.vendor-deal-detail-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-deal-detail-logo svg {
  width: 27px;
  height: 27px;
}
.vendor-deal-detail-store-info {
  min-width: 0;
}
.vendor-deal-detail-store-info h2 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.vendor-deal-detail-store-info > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
}
.vendor-deal-detail-store-info svg {
  width: 14px;
  height: 14px;
}
.vendor-deal-detail-body {
  padding: 32px;
}
.vendor-deal-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--deal-border);
}
.vendor-deal-detail-label {
  display: block;
  margin-bottom: 7px;
  color: var(--deal-green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vendor-deal-detail-heading h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.vendor-deal-detail-heading p {
  margin: 7px 0 0;
  color: var(--deal-text-soft);
  font-size: 0.82rem;
}
.vendor-deal-detail-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--deal-border);
  border-radius: 9px;
  background: #f7faf8;
  color: #5d6c65;
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}
.vendor-deal-detail-status svg {
  width: 15px;
  height: 15px;
}
.vendor-deal-status-approved {
  border-color: #b9e2ca;
  background: #eaf8f0;
  color: #107047;
}
.vendor-deal-status-pending_payment, .vendor-deal-status-payment_received, .vendor-deal-status-pending_approval {
  border-color: #e8d9ac;
  background: #fffaf0;
  color: #8a6512;
}
.vendor-deal-status-rejected {
  border-color: #efc6c3;
  background: #fff3f2;
  color: #b42318;
}
.vendor-deal-status-expired {
  border-color: #d9dce0;
  background: #f5f6f7;
  color: #59636b;
}
.vendor-deal-status-cancelled {
  border-color: #e5ccd1;
  background: #fff5f6;
  color: #8e3544;
}
.vendor-deal-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.vendor-deal-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--deal-border);
  border-radius: 13px;
  background: #fbfdfc;
}
.vendor-deal-detail-item-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--deal-green-soft);
  color: var(--deal-green);
}
.vendor-deal-detail-item-icon svg {
  width: 18px;
  height: 18px;
}
.vendor-deal-detail-item > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vendor-deal-detail-item span {
  color: var(--deal-text-soft);
  font-size: 0.72rem;
}
.vendor-deal-detail-item strong {
  color: var(--deal-text);
  font-size: 0.88rem;
  font-weight: 750;
}
.vendor-deal-period-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding: 17px;
  border: 1px solid #c9e7d6;
  border-radius: 13px;
  background: #f4fbf7;
}
.vendor-deal-period-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #def3e7;
  color: var(--deal-green-dark);
}
.vendor-deal-period-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-period-content {
  min-width: 0;
}
.vendor-deal-period-content > span {
  display: block;
  margin-bottom: 7px;
  color: var(--deal-text-soft);
  font-size: 0.72rem;
}
.vendor-deal-period-dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.vendor-deal-period-dates > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vendor-deal-period-dates small {
  color: #72827a;
  font-size: 0.68rem;
}
.vendor-deal-period-dates strong {
  color: var(--deal-text);
  font-size: 0.82rem;
}
.vendor-deal-detail-message {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 24px;
  padding: 17px;
  border: 1px solid var(--deal-border);
  border-radius: 13px;
  background: #f8faf9;
}
.vendor-deal-message-approved {
  border-color: #bde4cd;
  background: #effaf4;
}
.vendor-deal-message-pending_payment, .vendor-deal-message-payment_received, .vendor-deal-message-pending_approval {
  border-color: #eadfbf;
  background: #fffcf3;
}
.vendor-deal-message-rejected {
  border-color: #efcfcc;
  background: #fff6f5;
}
.vendor-deal-message-expired {
  border-color: #dfe2e5;
  background: #f7f8f9;
}
.vendor-deal-message-cancelled {
  border-color: #ead5d9;
  background: #fff7f8;
}
.vendor-deal-message-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7eee9;
  color: #587067;
}
.vendor-deal-message-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-message-approved .vendor-deal-message-icon {
  background: #d8f1e3;
  color: var(--deal-green-dark);
}
.vendor-deal-message-pending_payment .vendor-deal-message-icon, .vendor-deal-message-payment_received .vendor-deal-message-icon, .vendor-deal-message-pending_approval .vendor-deal-message-icon {
  background: #f7ebc8;
  color: #8a6512;
}
.vendor-deal-message-rejected .vendor-deal-message-icon {
  background: #f8ddda;
  color: #b42318;
}
.vendor-deal-message-expired .vendor-deal-message-icon {
  background: #e9ebed;
  color: #59636b;
}
.vendor-deal-message-cancelled .vendor-deal-message-icon {
  background: #f2dfe3;
  color: #8e3544;
}
.vendor-deal-message-content {
  min-width: 0;
}
.vendor-deal-message-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.83rem;
  font-weight: 750;
}
.vendor-deal-message-content p {
  margin: 0;
  color: var(--deal-text-soft);
  font-size: 0.76rem;
  line-height: 1.6;
}
.vendor-deal-admin-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #e0e5e2;
  border-radius: 13px;
  background: #f8faf9;
  text-align: left;
}
.vendor-deal-admin-note-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #e8efeb;
  color: var(--deal-green-dark);
}
.vendor-deal-admin-note-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-deal-admin-note span {
  display: block;
  margin-bottom: 4px;
  color: #64736b;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vendor-deal-admin-note p {
  margin: 0;
  color: #53635b;
  font-size: 0.74rem;
  line-height: 1.55;
}
.vendor-deal-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--deal-border);
}
.vendor-deal-primary-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid var(--deal-green);
  border-radius: 10px;
  background: var(--deal-green);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 750;
  box-shadow: 0 5px 14px rgba(22, 138, 90, 0.17);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-primary-btn:hover {
  background: var(--deal-green-dark);
  border-color: var(--deal-green-dark);
  color: #ffffff;
  box-shadow: 0 6px 17px rgba(22, 138, 90, 0.22);
}
.vendor-deal-primary-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.vendor-deal-primary-btn:hover svg {
  transform: translateX(2px);
}
.vendor-deal-secondary-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--deal-border);
  border-radius: 10px;
  background: #ffffff;
  color: #52645b;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vendor-deal-secondary-btn:hover {
  border-color: #b9d9c8;
  background: #f5faf7;
  color: var(--deal-green-dark);
}
.vendor-deal-secondary-btn svg {
  width: 16px;
  height: 16px;
}
.vendor-deal-primary-btn:focus-visible, .vendor-deal-secondary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.16);
}
@media (max-width: 700px) {
  .vendor-deal-detail-page {
    width: min(100% - 28px, 1050px);
    padding-top: 28px;
  }
  .vendor-deal-detail-banner {
    height: 245px;
  }
  .vendor-deal-detail-body {
    padding: 24px;
  }
  .vendor-deal-detail-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .vendor-deal-detail-status {
    align-self: flex-start;
  }
}
@media (max-width: 520px) {
  .vendor-deal-detail-page {
    width: min(100% - 20px, 1050px);
    padding-top: 22px;
    padding-bottom: 45px;
  }
  .vendor-deal-detail-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }
  .vendor-deal-detail-header-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
  }
  .vendor-deal-detail-header-icon svg {
    width: 20px;
    height: 20px;
  }
  .vendor-deal-detail-header h1 {
    font-size: 1.45rem;
  }
  .vendor-deal-detail-header p {
    font-size: 0.78rem;
  }
  .vendor-deal-detail-card {
    border-radius: 16px;
  }
  .vendor-deal-detail-banner {
    height: 210px;
  }
  .vendor-deal-detail-store {
    left: 18px;
    right: 18px;
    bottom: 18px;
    gap: 11px;
  }
  .vendor-deal-detail-logo {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 14px;
  }
  .vendor-deal-detail-store-info h2 {
    font-size: 1.15rem;
  }
  .vendor-deal-detail-store-info > span {
    font-size: 0.72rem;
  }
  .vendor-deal-detail-body {
    padding: 20px;
  }
  .vendor-deal-detail-heading h2 {
    font-size: 1.18rem;
  }
  .vendor-deal-detail-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  .vendor-deal-detail-item {
    padding: 13px;
  }
  .vendor-deal-period-card {
    align-items: flex-start;
    padding: 14px;
  }
  .vendor-deal-period-dates {
    gap: 15px;
  }
  .vendor-deal-detail-message {
    padding: 14px;
  }
  .vendor-deal-detail-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .vendor-deal-primary-btn, .vendor-deal-secondary-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-deal-primary-btn, .vendor-deal-secondary-btn {
    transition: none;
  }
}
.vendor-deal-payment-page {
  --payment-green: #168a5a;
  --payment-green-dark: #0f7049;
  --payment-green-deep: #0b5137;
  --payment-green-soft: #eaf8f1;
  --payment-green-light: #f4fbf7;
  --payment-green-border: #bfe4d1;
  --payment-text: #17251f;
  --payment-text-secondary: #15221d;
  --payment-border: #d8e8df;
  --payment-background: #f5faf7;
  --payment-white: #ffffff;
  min-height: 100vh;
  background: radial-gradient( circle at 50% 0%, rgba(22, 138, 90, 0.08), transparent 34% ), var(--payment-background);
  color: var(--payment-text);
}
.vendor-deal-payment-hero {
  position: relative;
  overflow: hidden;
  padding: 55px 20px 105px;
  background: linear-gradient( 135deg, #0b5137 0%, #106b48 48%, #168a5a 100% );
  color: #ffffff;
  text-align: center;
}
.vendor-deal-payment-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -280px;
  right: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.vendor-deal-payment-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  left: -120px;
  bottom: -240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.vendor-deal-payment-hero-inner {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vendor-deal-payment-header-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  backdrop-filter: blur(12px);
}
.vendor-deal-payment-header-icon svg {
  width: 28px;
  height: 28px;
}
.vendor-deal-payment-eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  color: #b9efd1;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vendor-deal-payment-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -0.045em;
}
.vendor-deal-payment-hero p {
  max-width: 590px;
  margin: 14px auto 0;
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.7;
}
.vendor-deal-payment-main {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 40px));
  margin: -55px auto 0;
  padding-bottom: 75px;
}
.vendor-deal-payment-card {
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--payment-border);
  border-radius: 20px;
  background: var(--payment-white);
  box-shadow: 0 18px 48px rgba(11, 81, 55, 0.1);
}
.vendor-deal-payment-store {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--payment-border);
}
.vendor-deal-payment-store-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--payment-green-border);
  border-radius: 15px;
  background: var(--payment-green-soft);
  color: var(--payment-green);
}
.vendor-deal-payment-store-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-deal-payment-store-logo svg {
  width: 25px;
  height: 25px;
}
.vendor-deal-payment-store-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vendor-deal-payment-store-info > span {
  color: var(--payment-green);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vendor-deal-payment-store-info strong {
  overflow: hidden;
  color: var(--payment-text);
  font-size: 1rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-deal-payment-store-info small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--payment-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}
.vendor-deal-payment-store-info small svg {
  width: 13px;
  height: 13px;
  color: var(--payment-green);
}
.vendor-deal-payment-summary {
  margin-top: 23px;
  padding: 19px;
  border: 1px solid var(--payment-border);
  border-radius: 14px;
  background: #fbfefc;
}
.vendor-deal-payment-summary-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--payment-border);
}
.vendor-deal-payment-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vendor-deal-summary-heading-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--payment-green-soft);
  color: var(--payment-green);
}
.vendor-deal-summary-heading-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-deal-payment-summary-title > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vendor-deal-payment-summary-title strong {
  color: var(--payment-text);
  font-size: 0.82rem;
  font-weight: 850;
}
.vendor-deal-payment-summary-title small {
  color: var(--payment-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
}
.vendor-deal-summary-details {
  padding-top: 2px;
}
.vendor-deal-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}
.vendor-deal-summary-row span {
  color: var(--payment-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
}
.vendor-deal-summary-row strong {
  max-width: 60%;
  overflow: hidden;
  color: var(--payment-text);
  font-size: 0.79rem;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-deal-summary-divider {
  height: 1px;
  background: var(--payment-border);
}
.vendor-deal-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 17px;
}
.vendor-deal-summary-total > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vendor-deal-summary-total span {
  color: var(--payment-text);
  font-size: 0.85rem;
  font-weight: 850;
}
.vendor-deal-summary-total small {
  color: var(--payment-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
}
.vendor-deal-summary-total > strong {
  color: var(--payment-green-dark);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.vendor-deal-payment-security {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--payment-green-border);
  border-radius: 13px;
  background: var(--payment-green-light);
}
.vendor-deal-payment-security-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #d9f2e5;
  color: var(--payment-green-dark);
}
.vendor-deal-payment-security-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-payment-security strong {
  display: block;
  margin-bottom: 3px;
  color: var(--payment-text);
  font-size: 0.8rem;
  font-weight: 850;
}
.vendor-deal-payment-security p {
  margin: 0;
  color: var(--payment-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
}
.vendor-deal-payment-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #dce0c5;
  border-radius: 13px;
  background: #fffdf4;
}
.vendor-deal-payment-notice-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f5eccd;
  color: #80651c;
}
.vendor-deal-payment-notice-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-payment-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #3c3626;
  font-size: 0.8rem;
  font-weight: 850;
}
.vendor-deal-payment-notice p {
  margin: 0;
  color: #665d47;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
}
.vendor-deal-payment-form {
  margin-top: 24px;
}
.vendor-deal-pay-btn {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid var(--payment-green);
  border-radius: 11px;
  background: var(--payment-green);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(22, 138, 90, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-pay-btn:hover {
  background: var(--payment-green-dark);
  border-color: var(--payment-green-dark);
  color: #ffffff;
  box-shadow: 0 8px 21px rgba(22, 138, 90, 0.23);
}
.vendor-deal-pay-btn:active {
  background: var(--payment-green-deep);
  border-color: var(--payment-green-deep);
  box-shadow: 0 4px 11px rgba(22, 138, 90, 0.16);
}
.vendor-deal-pay-btn-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
}
.vendor-deal-pay-btn-icon svg {
  width: 15px;
  height: 15px;
}
.vendor-deal-pay-btn-arrow {
  width: 17px;
  height: 17px;
  margin-left: 2px;
}
.vendor-deal-back-link {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 17px auto 0;
  color: var(--payment-green-dark);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 750;
  transition: color 0.18s ease;
}
.vendor-deal-back-link:hover {
  color: var(--payment-green-deep);
}
.vendor-deal-back-link svg {
  width: 15px;
  height: 15px;
}
.vendor-deal-payment-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid var(--payment-border);
}
.vendor-deal-payment-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--payment-text-secondary);
  font-size: 0.66rem;
  font-weight: 700;
}
.vendor-deal-payment-footer svg {
  width: 13px;
  height: 13px;
  color: var(--payment-green);
}
.vendor-deal-pay-btn:focus-visible, .vendor-deal-back-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.18);
}
@media (max-width: 650px) {
  .vendor-deal-payment-hero {
    padding: 45px 20px 92px;
  }
  .vendor-deal-payment-main {
    width: min(100% - 28px, 720px);
    margin-top: -45px;
  }
  .vendor-deal-payment-card {
    padding: 23px;
  }
}
@media (max-width: 480px) {
  .vendor-deal-payment-hero {
    padding: 38px 16px 82px;
  }
  .vendor-deal-payment-header-icon {
    width: 53px;
    height: 53px;
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .vendor-deal-payment-header-icon svg {
    width: 24px;
    height: 24px;
  }
  .vendor-deal-payment-eyebrow {
    font-size: 0.68rem;
  }
  .vendor-deal-payment-hero h1 {
    font-size: 1.9rem;
  }
  .vendor-deal-payment-hero p {
    font-size: 0.82rem;
    line-height: 1.65;
  }
  .vendor-deal-payment-main {
    width: calc(100% - 18px);
    margin-top: -38px;
    padding-bottom: 45px;
  }
  .vendor-deal-payment-card {
    padding: 18px;
    border-radius: 16px;
  }
  .vendor-deal-payment-store {
    gap: 12px;
    padding-bottom: 19px;
  }
  .vendor-deal-payment-store-logo {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 12px;
  }
  .vendor-deal-payment-store-info strong {
    font-size: 0.9rem;
  }
  .vendor-deal-payment-store-info small {
    font-size: 0.68rem;
  }
  .vendor-deal-payment-summary {
    margin-top: 18px;
    padding: 15px;
  }
  .vendor-deal-summary-row {
    gap: 10px;
    padding: 13px 0;
  }
  .vendor-deal-summary-row span {
    font-size: 0.72rem;
  }
  .vendor-deal-summary-row strong {
    max-width: 56%;
    font-size: 0.74rem;
  }
  .vendor-deal-summary-total {
    gap: 12px;
    padding-top: 15px;
  }
  .vendor-deal-summary-total span {
    font-size: 0.79rem;
  }
  .vendor-deal-summary-total small {
    font-size: 0.63rem;
  }
  .vendor-deal-summary-total > strong {
    font-size: 1.3rem;
  }
  .vendor-deal-payment-security, .vendor-deal-payment-notice {
    gap: 10px;
    padding: 14px;
  }
  .vendor-deal-payment-security-icon, .vendor-deal-payment-notice-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .vendor-deal-payment-security p, .vendor-deal-payment-notice p {
    font-size: 0.69rem;
  }
  .vendor-deal-payment-security strong, .vendor-deal-payment-notice strong {
    font-size: 0.75rem;
  }
  .vendor-deal-pay-btn {
    min-height: 52px;
    font-size: 0.8rem;
  }
  .vendor-deal-payment-footer {
    gap: 11px;
  }
  .vendor-deal-payment-footer span {
    font-size: 0.61rem;
  }
}
@media (max-width: 360px) {
  .vendor-deal-payment-card {
    padding: 15px;
  }
  .vendor-deal-payment-summary {
    padding: 13px;
  }
  .vendor-deal-payment-hero h1 {
    font-size: 1.7rem;
  }
  .vendor-deal-summary-total > strong {
    font-size: 1.18rem;
  }
  .vendor-deal-pay-btn {
    padding: 0 12px;
    gap: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-deal-pay-btn, .vendor-deal-back-link {
    transition: none;
  }
}
.vendor-deal-status-page {
  --status-green: #168a5a;
  --status-green-dark: #0f7049;
  --status-green-deep: #0b5137;
  --status-green-soft: #eaf8f1;
  --status-green-light: #f4fbf7;
  --status-green-border: #c4e6d3;
  --status-text: #14251e;
  --status-text-secondary: #21302b;
  --status-border: #d8e7df;
  --status-white: #ffffff;
  --status-background: #f4faf7;
  min-height: 100vh;
  padding: 55px 20px 75px;
  background: radial-gradient( circle at top center, rgba(22, 138, 90, 0.10), transparent 35% ), var(--status-background);
  color: var(--status-text);
}
.vendor-deal-status-card {
  width: min(670px, 100%);
  margin: 0 auto;
  padding: 42px 42px 30px;
  border: 1px solid var(--status-border);
  border-radius: 24px;
  background: var(--status-white);
  text-align: center;
  box-shadow: 0 22px 55px rgba(12, 73, 48, 0.09);
}
.vendor-deal-status-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--status-green-border);
  border-radius: 22px;
  background: var(--status-green-soft);
  color: var(--status-green);
  box-shadow: 0 8px 22px rgba(22, 138, 90, 0.10);
}
.vendor-deal-status-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.9;
}
.vendor-deal-status-icon.approved {
  border-color: #b7dfc8;
  background: #e8f8ef;
  color: #108354;
}
.vendor-deal-status-icon.pending {
  border-color: #d9e8b9;
  background: #f3fae9;
  color: #638d23;
}
.vendor-deal-status-icon.payment {
  border-color: #b9e1cf;
  background: #eaf8f1;
  color: var(--status-green);
}
.vendor-deal-status-icon.rejected {
  border-color: #e6c5c5;
  background: #fff2f2;
  color: #bd4545;
}
.vendor-deal-status-icon.expired {
  border-color: #c8ddd4;
  background: #eff7f3;
  color: #477365;
}
.vendor-deal-status-icon.cancelled {
  border-color: #dec9c9;
  background: #faf1f1;
  color: #815252;
}
.vendor-deal-status-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 7px 13px;
  border: 1px solid var(--status-green-border);
  border-radius: 999px;
  background: var(--status-green-soft);
  color: var(--status-green-dark);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.vendor-deal-status-label svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.vendor-deal-status-label.approved {
  border-color: #b9dfca;
  background: #e9f8ef;
  color: #11784d;
}
.vendor-deal-status-label.pending {
  border-color: #d7e7b7;
  background: #f3fae9;
  color: #648b28;
}
.vendor-deal-status-label.payment {
  border-color: #bce2d0;
  background: #eaf8f1;
  color: var(--status-green-dark);
}
.vendor-deal-status-label.rejected {
  border-color: #e6c6c6;
  background: #fff1f1;
  color: #b13f3f;
}
.vendor-deal-status-label.expired {
  border-color: #c9ddd5;
  background: #eff7f3;
  color: #3f6e60;
}
.vendor-deal-status-label.cancelled {
  border-color: #dfcbcb;
  background: #faf1f1;
  color: #744b4b;
}
.vendor-deal-status-card h1 {
  max-width: 560px;
  margin: 0 auto;
  color: var(--status-green-deep);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.045em;
}
.vendor-deal-status-description {
  max-width: 510px;
  margin: 13px auto 0;
  color: var(--status-text-secondary);
  font-size: 0.88rem;
  line-height: 1.7;
}
.vendor-deal-status-summary {
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--status-border);
  border-radius: 17px;
  background: #fbfefc;
  text-align: left;
}
.vendor-deal-status-summary-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--status-border);
  background: var(--status-green-light);
  color: var(--status-green-deep);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vendor-deal-status-summary-heading svg {
  width: 17px;
  height: 17px;
  color: var(--status-green);
}
.vendor-deal-status-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.vendor-deal-status-summary-item {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid var(--status-border);
}
.vendor-deal-status-summary-item:last-child {
  border-right: 0;
}
.vendor-deal-status-summary-item span {
  display: block;
  margin-bottom: 7px;
  color: var(--status-green-dark);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.vendor-deal-status-summary-item strong {
  display: block;
  overflow: hidden;
  color: var(--status-text);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-deal-active-period {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 13px;
  padding: 16px;
  border: 1px solid #bfe2ce;
  border-radius: 15px;
  background: #edf9f3;
  text-align: left;
}
.vendor-deal-active-period-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #d7f0e2;
  color: var(--status-green-dark);
}
.vendor-deal-active-period-icon svg {
  width: 20px;
  height: 20px;
}
.vendor-deal-active-period-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vendor-deal-active-period-content span {
  color: var(--status-green-dark);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.vendor-deal-active-period-content strong {
  color: var(--status-text);
  font-size: 0.82rem;
  font-weight: 800;
}
.vendor-deal-active-period-content b {
  margin: 0 3px;
  color: var(--status-green);
}
.vendor-deal-admin-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 13px;
  padding: 16px;
  border: 1px solid #c9e3d5;
  border-radius: 15px;
  background: #f1faf5;
  text-align: left;
}
.vendor-deal-admin-note-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #dcefe5;
  color: var(--status-green-dark);
}
.vendor-deal-admin-note-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-deal-admin-note-content {
  min-width: 0;
}
.vendor-deal-admin-note-content > span {
  display: block;
  margin-bottom: 5px;
  color: var(--status-green-dark);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.vendor-deal-admin-note-content p {
  margin: 0;
  color: var(--status-text-secondary);
  font-size: 0.77rem;
  line-height: 1.65;
}
.vendor-deal-status-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.vendor-deal-status-primary-btn {
  position: relative;
  min-height: 53px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid var(--status-green);
  border-radius: 12px;
  background: var(--status-green);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(22, 138, 90, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-button-reflection {
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.20), transparent );
  transition: left 0.55s ease;
}
.vendor-deal-status-primary-btn:hover .vendor-deal-button-reflection {
  left: 130%;
}
.vendor-deal-status-primary-btn:hover {
  background: var(--status-green-dark);
  border-color: var(--status-green-dark);
  color: #ffffff;
  box-shadow: 0 9px 22px rgba(22, 138, 90, 0.22);
}
.vendor-deal-status-primary-btn:active {
  background: var(--status-green-deep);
  border-color: var(--status-green-deep);
  box-shadow: 0 4px 12px rgba(22, 138, 90, 0.17);
}
.vendor-deal-status-primary-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vendor-deal-status-primary-content svg {
  width: 17px;
  height: 17px;
}
.vendor-deal-status-primary-arrow {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
}
.vendor-deal-status-secondary-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--status-green-border);
  border-radius: 11px;
  background: #ffffff;
  color: var(--status-green-dark);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.vendor-deal-status-secondary-btn:hover {
  border-color: var(--status-green);
  background: var(--status-green-light);
  color: var(--status-green-deep);
  box-shadow: 0 5px 14px rgba(22, 138, 90, 0.08);
}
.vendor-deal-status-secondary-btn:active {
  background: var(--status-green-soft);
  border-color: var(--status-green-dark);
}
.vendor-deal-status-secondary-btn svg {
  width: 17px;
  height: 17px;
  color: var(--status-green);
}
.vendor-deal-status-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 25px;
  padding-top: 19px;
  border-top: 1px solid var(--status-border);
  text-align: left;
}
.vendor-deal-status-footer-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--status-green-soft);
  color: var(--status-green);
}
.vendor-deal-status-footer-icon svg {
  width: 16px;
  height: 16px;
}
.vendor-deal-status-footer div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vendor-deal-status-footer strong {
  color: var(--status-green-dark);
  font-size: 0.68rem;
  font-weight: 800;
}
.vendor-deal-status-footer span {
  color: var(--status-text-secondary);
  font-size: 0.67rem;
  line-height: 1.4;
}
.vendor-deal-status-primary-btn:focus-visible, .vendor-deal-status-secondary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 138, 90, 0.18), 0 7px 18px rgba(22, 138, 90, 0.13);
}
@media (max-width: 650px) {
  .vendor-deal-status-page {
    padding: 38px 16px 60px;
  }
  .vendor-deal-status-card {
    padding: 35px 28px 27px;
  }
}
@media (max-width: 480px) {
  .vendor-deal-status-page {
    padding: 24px 10px 45px;
  }
  .vendor-deal-status-card {
    padding: 28px 17px 22px;
    border-radius: 19px;
  }
  .vendor-deal-status-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 15px;
    border-radius: 18px;
  }
  .vendor-deal-status-icon svg {
    width: 30px;
    height: 30px;
  }
  .vendor-deal-status-label {
    font-size: 0.64rem;
    padding: 6px 11px;
  }
  .vendor-deal-status-card h1 {
    font-size: 1.55rem;
    letter-spacing: -0.035em;
  }
  .vendor-deal-status-description {
    margin-top: 11px;
    font-size: 0.79rem;
    line-height: 1.65;
  }
  .vendor-deal-status-summary {
    margin-top: 24px;
    border-radius: 15px;
  }
  .vendor-deal-status-summary-grid {
    grid-template-columns: 1fr;
  }
  .vendor-deal-status-summary-item {
    padding: 14px 16px;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--status-border);
  }
  .vendor-deal-status-summary-item:last-child {
    border-bottom: 0;
  }
  .vendor-deal-status-summary-item strong {
    white-space: normal;
  }
  .vendor-deal-active-period {
    align-items: flex-start;
    padding: 14px;
  }
  .vendor-deal-active-period-content strong {
    font-size: 0.76rem;
    line-height: 1.5;
  }
  .vendor-deal-admin-note {
    padding: 14px;
  }
  .vendor-deal-admin-note-content p {
    font-size: 0.73rem;
  }
  .vendor-deal-status-primary-btn {
    min-height: 52px;
  }
  .vendor-deal-status-secondary-btn {
    min-height: 46px;
  }
  .vendor-deal-status-footer {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}
@media (max-width: 360px) {
  .vendor-deal-status-page {
    padding-left: 7px;
    padding-right: 7px;
  }
  .vendor-deal-status-card {
    padding-left: 14px;
    padding-right: 14px;
  }
  .vendor-deal-status-card h1 {
    font-size: 1.42rem;
  }
  .vendor-deal-status-description {
    font-size: 0.76rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-deal-status-primary-btn, .vendor-deal-status-secondary-btn, .vendor-deal-button-reflection {
    transition: none;
  }
}
.vendor-all-customer-orders-page {
  --orders-green-start: #064e3b;
  --orders-green-mid: #047857;
  --orders-green-mid-dark: #065f46;
  --orders-green-end: #064e3b;
  --orders-gradient: linear-gradient(
            115deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --orders-gradient-hover: linear-gradient(
            115deg,
            #047857 0%,
            #065f46 45%,
            #064e3b 72%,
            #047857 100%
        );
  --orders-text: #073b2d;
  --orders-text-dark: #032c21;
  --orders-text-green: #064e3b;
  --orders-white: #ffffff;
  --orders-page-bg: #f3faf7;
  --orders-border: #cfe5db;
  --orders-border-light: #e1eee9;
  --orders-green-light: #e8f6f0;
  --orders-green-soft: #f1faf6;
  --orders-warning: #9a5d00;
  --orders-warning-bg: #fff8e6;
  --orders-warning-border: #efd69a;
  --orders-danger: #a51d2d;
  --orders-danger-bg: #fff0f2;
  --orders-danger-border: #efc7cd;
  --orders-radius: 18px;
  --orders-small-radius: 10px;
  width: 100%;
}
.main-vendor-dashboard:has(.vendor-all-customer-orders-page) {
  background: radial-gradient( circle at top right, rgba(4, 120, 87, 0.08), transparent 30% ), var(--orders-page-bg);
}
.vendor-all-customer-orders-page .table-card {
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--orders-border);
  border-radius: var(--orders-radius);
  background: var(--orders-white);
  box-shadow: 0 2px 5px rgba(6, 78, 59, 0.035), 0 12px 35px rgba(6, 78, 59, 0.06);
}
.vendor-all-customer-orders-page-header-card {
  position: relative;
  overflow: hidden;
  border-top: 4px solid transparent;
  border-image: linear-gradient( 90deg, #064e3b, #047857, #065f46, #064e3b ) 1;
}
.vendor-orders-page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 34px 30px 27px;
  text-align: center;
}
.vendor-orders-page-header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.vendor-all-customer-orders-page-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--orders-green-mid);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.vendor-all-customer-orders-page-title {
  margin: 0;
  color: var(--orders-text-dark);
  font-size: 36px;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-align: center;
}
.vendor-all-customer-orders-page-description {
  max-width: 620px;
  margin: 9px auto 0;
  color: var(--orders-text);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.6;
  text-align: center;
}
.vendor-orders-back-button {
  position: absolute;
  top: 25px;
  right: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  overflow: hidden;
  border: 1px solid #047857;
  border-radius: 11px;
  background: var(--orders-gradient);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.16);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  isolation: isolate;
}
.vendor-orders-back-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.08) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: -1;
}
.vendor-orders-back-button:hover {
  background: var(--orders-gradient-hover);
  border-color: #064e3b;
  box-shadow: 0 7px 20px rgba(6, 78, 59, 0.23);
}
.vendor-orders-back-button:hover::before {
  left: 145%;
}
.vendor-orders-back-button svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.vendor-all-customer-orders-page-search {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 30px 21px;
}
.vendor-all-customer-orders-page-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.vendor-all-customer-orders-page-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  color: #047857;
  transform: translateY(-50%);
  pointer-events: none;
}
.vendor-all-customer-orders-page-search-field input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px 0 44px;
  border: 1px solid var(--orders-border);
  border-radius: 11px;
  outline: none;
  background: #f8fcfa;
  color: var(--orders-text-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-all-customer-orders-page-search-field input::placeholder {
  color: #286050;
  opacity: 1;
}
.vendor-all-customer-orders-page-search-field input:hover {
  border-color: #86b8a6;
  background: #ffffff;
}
.vendor-all-customer-orders-page-search-field input:focus {
  border-color: #047857;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.13);
}
.vendor-orders-reflective-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--orders-gradient);
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.15);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-orders-reflective-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -125%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.07) 70%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: -1;
}
.vendor-orders-reflective-button:hover {
  background: var(--orders-gradient-hover);
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.23);
}
.vendor-orders-reflective-button:hover::before {
  left: 150%;
}
.vendor-orders-reflective-button:active {
  background: var(--orders-green-end);
  box-shadow: 0 3px 9px rgba(6, 78, 59, 0.17);
}
.vendor-all-customer-orders-page-search-button {
  position: relative;
  height: 48px;
  min-width: 105px;
  padding: 0 21px;
  border: 1px solid #064e3b;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  isolation: isolate;
  overflow: hidden;
}
.vendor-all-customer-orders-page-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 30px 25px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vendor-all-customer-orders-page-filters::-webkit-scrollbar {
  display: none;
}
.vendor-all-customer-orders-page-filters a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 16px;
  border: 1px solid var(--orders-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--orders-text-green);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-all-customer-orders-page-filters a:hover {
  border-color: #047857;
  background: var(--orders-green-soft);
  color: #064e3b;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.09);
}
.vendor-all-customer-orders-page-filters a.active {
  border-color: #064e3b;
  background: var(--orders-gradient);
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.16);
}
.vendor-all-customer-orders-page-filters a.active:hover {
  border-color: #064e3b;
  background: var(--orders-gradient-hover);
  color: #ffffff;
}
.vendor-all-customer-orders-page-table-card {
  margin-bottom: 0 !important;
}
.vendor-all-customer-orders-page-table-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 88px;
  padding: 18px 25px;
  border-bottom: 1px solid var(--orders-border);
  background: linear-gradient( 180deg, #ffffff 0%, #f8fcfa 100% );
  text-align: center;
}
.vendor-orders-table-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}
.vendor-all-customer-orders-page-table-header h2 {
  margin: 3px 0 0;
  color: var(--orders-text-dark);
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
}
.vendor-all-customer-orders-page-result-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #b8dccd;
  border-radius: 999px;
  background: var(--orders-green-light);
  color: #064e3b;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.vendor-all-customer-orders-page .dashboard-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #6ba58f #eaf4ef;
}
.vendor-all-customer-orders-page .dashboard-table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.vendor-all-customer-orders-page .dashboard-table-wrapper::-webkit-scrollbar-track {
  background: #eaf4ef;
}
.vendor-all-customer-orders-page .dashboard-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #6ba58f;
}
.vendor-all-customer-orders-page .dashboard-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #047857;
}
.vendor-all-customer-orders-page .dashboard-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}
.vendor-all-customer-orders-page .dashboard-table thead th {
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--orders-border);
  background: linear-gradient( 115deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.065em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.vendor-all-customer-orders-page .dashboard-table thead th:first-child {
  padding-left: 22px;
}
.vendor-all-customer-orders-page .dashboard-table thead th:last-child {
  padding-right: 22px;
  text-align: center;
}
.vendor-all-customer-orders-page .dashboard-table tbody tr {
  background: #ffffff;
  transition: background-color 0.18s ease;
}
.vendor-all-customer-orders-page .dashboard-table tbody tr:hover {
  background: linear-gradient( 90deg, #f0faf6 0%, #ffffff 50%, #f0faf6 100% );
}
.vendor-all-customer-orders-page .dashboard-table tbody td {
  height: 70px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--orders-border-light);
  color: var(--orders-text);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
.vendor-all-customer-orders-page .dashboard-table tbody tr:last-child td {
  border-bottom: 0;
}
.vendor-all-customer-orders-page .dashboard-table tbody td:first-child {
  padding-left: 22px;
  text-align: center;
}
.vendor-all-customer-orders-page .dashboard-table tbody td:last-child {
  padding-right: 22px;
  text-align: center;
}
.vendor-order-id-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #047857;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  transition: color 0.18s ease;
}
.vendor-order-id-link:hover {
  color: #064e3b;
  text-decoration: underline;
}
.vendor-all-customer-orders-page .dashboard-table .order-amount {
  color: #064e3b;
  font-size: 14px;
  font-weight: 850;
}
.vendor-all-customer-orders-page .dashboard-table .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.vendor-all-customer-orders-page .dashboard-table .status-pending {
  border: 1px solid var(--orders-warning-border);
  background: var(--orders-warning-bg);
  color: var(--orders-warning);
}
.vendor-all-customer-orders-page .dashboard-table .status-delivered {
  border: 1px solid #b7dccd;
  background: var(--orders-green-light);
  color: #064e3b;
}
.vendor-all-customer-orders-page .dashboard-table .status-on_the_way {
  border: 1px solid #b9ddcf;
  background: #edf9f4;
  color: #047857;
}
.vendor-all-customer-orders-page .dashboard-table .status-cancelled {
  border: 1px solid var(--orders-danger-border);
  background: var(--orders-danger-bg);
  color: var(--orders-danger);
}
.vendor-all-customer-orders-page .dashboard-table tbody td:nth-child(5) {
  color: var(--orders-text);
  font-size: 13px;
  font-weight: 650;
}
.vendor-order-date {
  color: #145c47;
}
.vendor-order-view-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 36px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid #047857;
  border-radius: 9px;
  background: var(--orders-gradient);
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 4px 11px rgba(6, 78, 59, 0.13);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  isolation: isolate;
}
.vendor-order-view-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 65%;
  height: 100%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.06) 70%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: -1;
}
.vendor-order-view-button:hover {
  background: var(--orders-gradient-hover);
  border-color: #064e3b;
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.2);
}
.vendor-order-view-button:hover::before {
  left: 150%;
}
.vendor-all-customer-orders-page-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 45px 20px;
  text-align: center;
}
.vendor-all-customer-orders-page-empty-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border: 1px solid #b9ddcf;
  border-radius: 50%;
  background: var(--orders-green-light);
  color: #047857;
}
.vendor-all-customer-orders-page-empty-icon svg {
  width: 27px;
  height: 27px;
}
.vendor-all-customer-orders-page-empty-state h3 {
  margin: 0 0 7px;
  color: #064e3b;
  font-size: 19px;
  font-weight: 850;
}
.vendor-all-customer-orders-page-empty-state p {
  margin: 0;
  color: #145c47;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
}
.vendor-all-customer-orders-page-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 22px 0 7px;
}
.vendor-orders-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 41px;
  padding: 0 17px;
  border: 1px solid #064e3b;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.pagination-arrow {
  font-size: 16px;
  line-height: 1;
}
.vendor-all-customer-orders-page-pagination-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 41px;
  padding: 0 13px;
  border: 1px solid var(--orders-border);
  border-radius: 10px;
  background: #ffffff;
  color: #145c47;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.vendor-all-customer-orders-page-pagination-info strong {
  color: #064e3b;
  font-size: 14px;
  font-weight: 900;
}
.vendor-all-customer-orders-page a:focus-visible, .vendor-all-customer-orders-page button:focus-visible, .vendor-all-customer-orders-page input:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 2px;
}
.vendor-all-customer-orders-page a:hover, .vendor-all-customer-orders-page button:hover {
  transform: none !important;
}
@media (max-width: 900px) {
  .vendor-orders-page-header {
    padding: 30px 20px 24px;
  }
  .vendor-all-customer-orders-page-title {
    font-size: 31px;
  }
  .vendor-orders-back-button {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
  }
  .vendor-all-customer-orders-page-search {
    padding-right: 20px;
    padding-left: 20px;
  }
  .vendor-all-customer-orders-page-filters {
    padding-right: 20px;
    padding-left: 20px;
  }
  .vendor-all-customer-orders-page .dashboard-table {
    min-width: 880px;
  }
}
@media (max-width: 600px) {
  .vendor-all-customer-orders-page .table-card {
    border-radius: 13px;
  }
  .vendor-orders-page-header {
    flex-direction: column;
    gap: 19px;
    padding: 25px 15px 21px;
  }
  .vendor-all-customer-orders-page-title {
    font-size: 27px;
  }
  .vendor-all-customer-orders-page-description {
    max-width: 340px;
    margin-top: 8px;
    font-size: 13px;
  }
  .vendor-orders-back-button {
    width: 100%;
    min-height: 43px;
  }
  .vendor-all-customer-orders-page-search {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 0 15px 18px;
  }
  .vendor-all-customer-orders-page-search-field input {
    height: 46px;
    font-size: 14px;
  }
  .vendor-all-customer-orders-page-search-button {
    width: 100%;
    height: 46px;
  }
  .vendor-all-customer-orders-page-filters {
    justify-content: flex-start;
    gap: 6px;
    padding: 0 15px 19px;
  }
  .vendor-all-customer-orders-page-filters a {
    min-height: 37px;
    padding: 0 13px;
    font-size: 12px;
  }
  .vendor-all-customer-orders-page-table-header {
    flex-direction: column;
    gap: 10px;
    min-height: 105px;
    padding: 17px 15px;
  }
  .vendor-all-customer-orders-page-table-header h2 {
    font-size: 20px;
  }
  .vendor-all-customer-orders-page-result-label {
    min-height: 29px;
    font-size: 11px;
  }
  .vendor-all-customer-orders-page .dashboard-table {
    min-width: 850px;
  }
  .vendor-all-customer-orders-page .dashboard-table thead th {
    height: 51px;
    padding: 0 15px;
    font-size: 11px;
  }
  .vendor-all-customer-orders-page .dashboard-table tbody td {
    height: 66px;
    padding: 9px 15px;
    font-size: 13px;
  }
  .vendor-order-id-link {
    font-size: 14px;
  }
  .vendor-all-customer-orders-page .dashboard-table .order-amount {
    font-size: 13px;
  }
  .vendor-all-customer-orders-page .dashboard-table .status-badge {
    min-height: 29px;
    padding: 5px 10px;
    font-size: 11px;
  }
  .vendor-all-customer-orders-page .dashboard-table tbody td:nth-child(5) {
    font-size: 12px;
  }
  .vendor-order-view-button {
    min-width: 60px;
    min-height: 35px;
    font-size: 12px;
  }
  .vendor-all-customer-orders-page-empty-state {
    min-height: 260px;
  }
  .vendor-all-customer-orders-page-empty-state h3 {
    font-size: 17px;
  }
  .vendor-all-customer-orders-page-empty-state p {
    font-size: 13px;
  }
  .vendor-all-customer-orders-page-pagination {
    gap: 7px;
    padding-top: 17px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .vendor-orders-pagination-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }
  .vendor-all-customer-orders-page-pagination-info {
    min-height: 38px;
    padding: 0 9px;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .vendor-all-customer-orders-page-title {
    font-size: 24px;
  }
  .vendor-all-customer-orders-page-description {
    font-size: 12px;
  }
  .vendor-all-customer-orders-page-search-field input, .vendor-all-customer-orders-page-search-button {
    height: 44px;
  }
  .vendor-all-customer-orders-page-filters a {
    min-height: 35px;
    padding: 0 11px;
    font-size: 11px;
  }
  .vendor-all-customer-orders-page .dashboard-table {
    min-width: 820px;
  }
  .vendor-orders-pagination-button {
    min-height: 36px;
    padding: 0 9px;
    font-size: 11px;
  }
  .vendor-all-customer-orders-page-pagination-info {
    min-height: 36px;
    padding: 0 7px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-all-customer-orders-page *, .vendor-all-customer-orders-page *::before, .vendor-all-customer-orders-page *::after {
    transition: none !important;
  }
}
.main-vendor-dashboard {
  --primary: #064e3b;
  --primary-mid: #047857;
  --primary-light: #065f46;
  --primary-dark: #022c22;
  --accent-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --page-bg: #f0fdf8;
  --card-bg: #ffffff;
  --soft-green: #ecfdf5;
  --border: #cce9dc;
  --heading: #022c22;
  --body: #14532d;
  --green-text: #047857;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 24px 36px;
  background: radial-gradient( circle at top center, rgba(16,185,129,.08), transparent 35% ), var(--page-bg);
  color: var(--body);
  overflow-x: hidden;
}
.main-vendor-dashboard *, .main-vendor-dashboard *::before, .main-vendor-dashboard *::after {
  box-sizing: border-box;
}
.main-vendor-dashboard img {
  display: block;
  max-width: 100%;
  height: auto;
}
.main-vendor-dashboard h1, .main-vendor-dashboard h2, .main-vendor-dashboard h3, .main-vendor-dashboard h4, .main-vendor-dashboard h5, .main-vendor-dashboard h6 {
  color: var(--heading);
}
.main-vendor-dashboard .hero-content, .main-vendor-dashboard .table-header, .main-vendor-dashboard .vendor-earnings-header, .main-vendor-dashboard .vendor-earnings-heading {
  text-align: center;
}
.main-vendor-dashboard .hero-content {
  margin-left: auto;
  margin-right: auto;
}
.main-vendor-dashboard .hero-content h1, .main-vendor-dashboard .vendor-earnings-title {
  color: var(--heading);
}
.main-vendor-dashboard .hero-content p, .main-vendor-dashboard .vendor-earnings-description {
  color: var(--body);
}
.main-vendor-dashboard .vendor-dashboard-tab-page-tabs {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px auto 24px;
  padding: 0 8px;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn, .main-vendor-dashboard .btn, .main-vendor-dashboard .vendor-actions .btn, .main-vendor-dashboard .vendor-earnings-header-action, .main-vendor-dashboard .vendor-earnings-pending-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  transform: none !important;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn::before, .main-vendor-dashboard .btn::before, .main-vendor-dashboard .vendor-actions .btn::before, .main-vendor-dashboard .vendor-earnings-header-action::before, .main-vendor-dashboard .vendor-earnings-pending-action::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -130%;
  width: 65%;
  height: 140%;
  background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.08) 70%, transparent 100% );
  transform: skewX(-22deg);
  transition: left .65s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 3;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn:hover::before, .main-vendor-dashboard .btn:hover::before, .main-vendor-dashboard .vendor-actions .btn:hover::before, .main-vendor-dashboard .vendor-earnings-header-action:hover::before, .main-vendor-dashboard .vendor-earnings-pending-action:hover::before {
  left: 145%;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn {
  min-width: 125px;
  max-width: 210px;
  padding: 12px 20px;
  border: 1px solid #b7dfce;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 5px 15px rgba(6,78,59,.07);
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn:hover {
  background: #f0fdf8;
  border-color: #65b996;
  color: var(--primary-dark);
  box-shadow: 0 7px 18px rgba(6,78,59,.11);
  transform: none !important;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn.active {
  background: var(--accent-gradient);
  border-color: #064e3b;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(6,78,59,.22);
  transform: none !important;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-btn.active::before {
  background: linear-gradient( 115deg, transparent, rgba(255,255,255,.12), rgba(255,255,255,.48), rgba(255,255,255,.12), transparent );
}
.main-vendor-dashboard .vendor-dashboard-tab-page-content {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-panel {
  display: none;
}
.main-vendor-dashboard .vendor-dashboard-tab-page-panel.active {
  display: block;
}
.main-vendor-dashboard .card {
  position: relative;
  background: linear-gradient( 180deg, #ffffff 0%, #f7fffb 100% );
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(6,78,59,.07);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.main-vendor-dashboard .card:hover {
  border-color: #9ed3bd;
  box-shadow: 0 12px 30px rgba(6,78,59,.11);
  transform: none !important;
}
.main-vendor-dashboard .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}
.main-vendor-dashboard .stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 19px 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 7px 20px rgba(6,78,59,.06);
  transition: border-color .25s ease, box-shadow .25s ease;
  transform: none !important;
}
.main-vendor-dashboard .stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 115deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70% );
  transform: translateX(-130%) skewX(-18deg);
  transition: transform .65s ease;
  pointer-events: none;
}
.main-vendor-dashboard .stat-card:hover {
  border-color: #8fcab2;
  box-shadow: 0 11px 26px rgba(6,78,59,.11);
  transform: none !important;
}
.main-vendor-dashboard .stat-card:hover::after {
  transform: translateX(130%) skewX(-18deg);
}
.main-vendor-dashboard .stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #ecfdf5;
  color: var(--primary-mid);
  border: 1px solid #c7ead9;
}
.main-vendor-dashboard .stat-icon i {
  width: 21px;
  height: 21px;
}
.main-vendor-dashboard .stat-info {
  min-width: 0;
}
.main-vendor-dashboard .stat-info h2 {
  margin: 0;
  color: var(--heading);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}
.main-vendor-dashboard .stat-info p {
  margin: 3px 0 0;
  color: var(--green-text);
  font-size: 12.5px;
  font-weight: 650;
}
.main-vendor-dashboard .stat-card.approved {
  border-left: 4px solid #16a34a;
}
.main-vendor-dashboard .stat-card.approved .stat-icon {
  background: #ecfdf5;
  color: #16a34a;
}
.main-vendor-dashboard .stat-card.pending {
  border-left: 4px solid #d97706;
}
.main-vendor-dashboard .stat-card.pending .stat-icon {
  background: #fff7ed;
  color: #d97706;
}
.main-vendor-dashboard .stat-card.rejected {
  border-left: 4px solid #dc2626;
}
.main-vendor-dashboard .stat-card.rejected .stat-icon {
  background: #fef2f2;
  color: #dc2626;
}
.main-vendor-dashboard .stat-card.archived {
  border-left: 4px solid #2563eb;
}
.main-vendor-dashboard .stat-card.archived .stat-icon {
  background: #eff6ff;
  color: #2563eb;
}
.main-vendor-dashboard .vendor-earnings {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--body);
}
.main-vendor-dashboard .vendor-earnings-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 28px;
}
.main-vendor-dashboard .vendor-earnings-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.main-vendor-dashboard .vendor-earnings-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 15px;
  background: #dff7eb;
  color: var(--primary-mid);
  border: 1px solid #bde4d0;
}
.main-vendor-dashboard .vendor-earnings-heading-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}
.main-vendor-dashboard .vendor-earnings-title {
  margin: 0;
  color: var(--heading);
  font-size: 30px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.main-vendor-dashboard .vendor-earnings-description {
  margin: 7px 0 0;
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.main-vendor-dashboard .vendor-earnings-header-action {
  min-height: 45px;
  padding: 0 18px;
  border: 1px solid #9fd2bb;
  border-radius: 11px;
  background: #ffffff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 5px 15px rgba(6,78,59,.06);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-header-action:hover {
  background: #ecfdf5;
  border-color: #65b996;
  color: var(--primary-dark);
  box-shadow: 0 8px 20px rgba(6,78,59,.10);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-revenue {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 210px;
  margin-bottom: 18px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--accent-gradient);
  box-shadow: 0 16px 38px rgba(6,78,59,.22);
}
.main-vendor-dashboard .vendor-earnings-revenue::before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -100px;
  top: -155px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.main-vendor-dashboard .vendor-earnings-revenue::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: 90px;
  bottom: -155px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.main-vendor-dashboard .vendor-earnings-revenue-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.main-vendor-dashboard .vendor-earnings-revenue-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #d1fae5;
  font-size: 15px;
  font-weight: 700;
}
.main-vendor-dashboard .vendor-earnings-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 0 5px rgba(134,239,172,.13);
}
.main-vendor-dashboard .vendor-earnings-revenue-value {
  color: #ffffff;
  text-align: center;
  font-size: clamp(36px, 4.5vw, 50px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.main-vendor-dashboard .vendor-earnings-revenue-description {
  max-width: 650px;
  margin: 12px auto 0;
  color: #d1fae5;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
.main-vendor-dashboard .vendor-earnings-revenue-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  margin-left: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.main-vendor-dashboard .vendor-earnings-revenue-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.7;
}
.main-vendor-dashboard .vendor-earnings-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 20px;
}
.main-vendor-dashboard .vendor-earnings-stat {
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(6,78,59,.055);
  transition: border-color .25s ease, box-shadow .25s ease;
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-stat:hover {
  border-color: #92cdb5;
  box-shadow: 0 10px 24px rgba(6,78,59,.10);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 16px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}
.main-vendor-dashboard .vendor-earnings-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #e7f8ef;
  color: var(--primary-mid);
  border: 1px solid #c7ead9;
}
.main-vendor-dashboard .vendor-earnings-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.main-vendor-dashboard .vendor-earnings-stat-value {
  overflow: hidden;
  color: var(--primary-mid);
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-vendor-dashboard .vendor-earnings-stat-note {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.main-vendor-dashboard .vendor-earnings-pending {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid #f0d5a9;
  border-left: 4px solid #d97706;
  border-radius: 17px;
  background: #fffaf2;
}
.main-vendor-dashboard .vendor-earnings-pending-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 13px;
  background: #fff1dc;
  color: #c2410c;
  border: 1px solid #f4d4aa;
}
.main-vendor-dashboard .vendor-earnings-pending-icon svg {
  width: 24px;
  height: 24px;
}
.main-vendor-dashboard .vendor-earnings-pending-content {
  flex: 1;
  min-width: 0;
}
.main-vendor-dashboard .vendor-earnings-pending-label {
  margin-bottom: 4px;
  color: #b45309;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.main-vendor-dashboard .vendor-earnings-pending-content h3 {
  margin: 0;
  color: #78350f;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
.main-vendor-dashboard .vendor-earnings-pending-content p {
  max-width: 700px;
  margin: 6px 0 0;
  color: #92400e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}
.main-vendor-dashboard .vendor-earnings-pending-action {
  min-height: 44px;
  flex-shrink: 0;
  padding: 0 18px;
  border: 1px solid #064e3b;
  border-radius: 10px;
  background: var(--accent-gradient);
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 6px 17px rgba(6,78,59,.18);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-pending-action:hover {
  background: linear-gradient( 135deg, #022c22, #047857, #064e3b );
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(6,78,59,.24);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 21px 22px;
  border: 1px solid #a9dfc2;
  border-radius: 17px;
  background: #ecfdf5;
  text-align: center;
}
.main-vendor-dashboard .vendor-earnings-clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 13px;
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7e3c3;
}
.main-vendor-dashboard .vendor-earnings-clear-icon svg {
  width: 24px;
  height: 24px;
}
.main-vendor-dashboard .vendor-earnings-clear-content h3 {
  margin: 0;
  color: #065f46;
  font-size: 17px;
  font-weight: 800;
}
.main-vendor-dashboard .vendor-earnings-clear-content p {
  margin: 5px 0 0;
  color: #047857;
  font-size: 14px;
  font-weight: 500;
}
.main-vendor-dashboard .vendor-earnings-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  padding: 17px 2px 0;
  border-top: 1px solid #cce9dc;
}
.main-vendor-dashboard .vendor-earnings-footer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
}
.main-vendor-dashboard .vendor-earnings-footer-info svg {
  width: 16px;
  height: 16px;
  color: var(--primary-mid);
}
.main-vendor-dashboard .vendor-earnings-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-mid);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: color .2s ease;
}
.main-vendor-dashboard .vendor-earnings-footer-link:hover {
  color: var(--primary-dark);
  transform: none !important;
}
.main-vendor-dashboard .vendor-earnings-footer-link svg {
  width: 16px;
  height: 16px;
  transition: none;
}
.main-vendor-dashboard .vendor-dashboard-product-detail-image-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.main-vendor-dashboard .vendor-dashboard-product-detail-main-image {
  width: 100%;
  display: block;
  transition: opacity .35s ease, transform .35s ease;
}
.main-vendor-dashboard .vendor-dashboard-product-detail-main-image.slide-out {
  opacity: 0;
  transform: translateX(30px) scale(.98);
}
.main-vendor-dashboard .vendor-dashboard-product-detail-main-image.slide-in {
  animation: vendorSlideIn .4s ease;
}
@keyframes vendorSlideIn {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.main-vendor-dashboard .vendor-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.main-vendor-dashboard .vendor-actions .btn {
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid #064e3b;
  border-radius: 10px;
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 6px 17px rgba(6,78,59,.15);
  transform: none !important;
}
.main-vendor-dashboard .vendor-actions .btn:hover {
  box-shadow: 0 8px 21px rgba(6,78,59,.20);
  transform: none !important;
}
.main-vendor-dashboard .table-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 7px 22px rgba(6,78,59,.06);
  overflow: hidden;
}
.main-vendor-dashboard .table-header {
  padding: 21px;
  border-bottom: 1px solid var(--border);
  background: #f7fffb;
}
.main-vendor-dashboard .table-header h2 {
  margin: 0;
  color: var(--heading);
  font-size: 1.25rem;
  font-weight: 850;
}
.main-vendor-dashboard .dashboard-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--body);
}
.main-vendor-dashboard .dashboard-table th {
  color: var(--primary);
  background: #ecfdf5;
  font-weight: 800;
  text-align: left;
}
.main-vendor-dashboard .dashboard-table th, .main-vendor-dashboard .dashboard-table td {
  padding: 15px;
  border-bottom: 1px solid #e1f0e8;
}
.main-vendor-dashboard .dashboard-table td {
  color: var(--body);
  font-weight: 500;
}
.main-vendor-dashboard .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}
@media (max-width: 1400px) {
  .main-vendor-dashboard {
    padding: 12px 18px 32px;
  }
}
@media (max-width: 1200px) {
  .main-vendor-dashboard .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .main-vendor-dashboard .dashboard-table {
    min-width: 900px;
  }
  .main-vendor-dashboard .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-vendor-dashboard .hero-content h1 {
    font-size: 36px;
  }
}
@media (max-width: 992px) {
  .main-vendor-dashboard {
    padding: 12px 14px 28px;
  }
  .main-vendor-dashboard .vendor-earnings-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .main-vendor-dashboard .vendor-dashboard-tab-page-tabs {
    gap: 8px;
  }
  .main-vendor-dashboard .vendor-dashboard-tab-page-btn {
    min-width: 115px;
    padding: 11px 16px;
  }
  .main-vendor-dashboard .vendor-earnings-revenue {
    padding: 34px 30px;
  }
}
@media (max-width: 768px) {
  .main-vendor-dashboard {
    padding: 10px 12px 25px;
  }
  .main-vendor-dashboard .grid-4 {
    grid-template-columns: 1fr;
  }
  .main-vendor-dashboard .hero-content h1 {
    font-size: 28px;
  }
  .main-vendor-dashboard .hero-content p {
    font-size: 14px;
  }
  .main-vendor-dashboard .vendor-actions {
    flex-direction: column;
    width: 100%;
  }
  .main-vendor-dashboard .vendor-actions .btn {
    width: 100%;
  }
  .main-vendor-dashboard .vendor-earnings-header {
    flex-direction: column;
    margin-bottom: 23px;
  }
  .main-vendor-dashboard .vendor-earnings-header-action {
    width: 100%;
  }
  .main-vendor-dashboard .vendor-earnings-revenue {
    min-height: 190px;
    padding: 30px 22px;
    justify-content: center;
  }
  .main-vendor-dashboard .vendor-earnings-revenue-icon {
    display: none;
  }
  .main-vendor-dashboard .vendor-earnings-stat-grid {
    grid-template-columns: 1fr;
  }
  .main-vendor-dashboard .vendor-earnings-pending {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .main-vendor-dashboard .vendor-earnings-pending-content {
    width: 100%;
  }
  .main-vendor-dashboard .vendor-earnings-pending-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .main-vendor-dashboard .vendor-earnings-pending-action {
    width: 100%;
  }
  .main-vendor-dashboard .vendor-earnings-clear {
    flex-direction: column;
  }
  .main-vendor-dashboard .vendor-earnings-footer {
    flex-direction: column;
    text-align: center;
  }
  .main-vendor-dashboard .table-header {
    padding: 18px;
  }
}
@media (max-width: 600px) {
  .main-vendor-dashboard .vendor-dashboard-tab-page-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 5px;
  }
  .main-vendor-dashboard .vendor-dashboard-tab-page-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 11px 10px;
    font-size: .81rem;
  }
}
@media (max-width: 480px) {
  .main-vendor-dashboard {
    padding: 9px 10px 22px;
  }
  .main-vendor-dashboard .hero-content {
    padding: 18px 14px;
  }
  .main-vendor-dashboard .hero-content h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  .main-vendor-dashboard .hero-content p {
    font-size: 13px;
  }
  .main-vendor-dashboard .vendor-earnings-title {
    font-size: 26px;
  }
  .main-vendor-dashboard .vendor-earnings-description {
    font-size: 14px;
  }
  .main-vendor-dashboard .vendor-earnings-revenue {
    min-height: 175px;
    padding: 27px 17px;
    border-radius: 19px;
  }
  .main-vendor-dashboard .vendor-earnings-revenue-value {
    font-size: 32px;
  }
  .main-vendor-dashboard .vendor-earnings-revenue-description {
    font-size: 13px;
  }
  .main-vendor-dashboard .vendor-earnings-stat {
    padding: 20px;
  }
  .main-vendor-dashboard .vendor-earnings-stat-value {
    font-size: 25px;
  }
  .main-vendor-dashboard .stat-card {
    padding: 16px;
  }
  .main-vendor-dashboard .stat-info h2 {
    font-size: 18px;
  }
  .main-vendor-dashboard .stat-info p {
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .main-vendor-dashboard .vendor-dashboard-tab-page-tabs {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .main-vendor-dashboard .vendor-dashboard-tab-page-btn {
    width: min(100%, 220px) !important;
    justify-self: center;
    padding: 10px 15px;
  }
  .main-vendor-dashboard .vendor-earnings-title {
    font-size: 24px;
  }
}
@media (max-width: 320px) {
  .main-vendor-dashboard .vendor-dashboard-tab-page-btn {
    width: min(100%, 200px) !important;
    font-size: .78rem;
    padding: 9px 12px;
  }
  .main-vendor-dashboard .vendor-earnings-revenue-value {
    font-size: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-vendor-dashboard *, .main-vendor-dashboard *::before, .main-vendor-dashboard *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.vendor-deals-section {
  --vendor-dark: #064e3b;
  --vendor-green: #047857;
  --vendor-mid: #065f46;
  --vendor-bright: #059669;
  --vendor-soft: #ecfdf5;
  --vendor-soft-2: #d1fae5;
  --vendor-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  position: relative;
  width: 100%;
  padding: 88px 24px 105px;
  overflow: hidden;
  background: radial-gradient( circle at 8% 8%, rgba(16, 185, 129, .13), transparent 28% ), radial-gradient( circle at 92% 88%, rgba(4, 120, 87, .11), transparent 31% ), linear-gradient( 180deg, #f2fcf6 0%, #ffffff 48%, #f0faf4 100% );
}
.vendor-deals-section::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: -430px;
  right: -310px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(16, 185, 129, .16) 0%, rgba(4, 120, 87, .06) 42%, transparent 72% );
  pointer-events: none;
}
.vendor-deals-section::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  bottom: -420px;
  left: -300px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(5, 150, 105, .13) 0%, rgba(16, 185, 129, .05) 45%, transparent 72% );
  pointer-events: none;
}
.vendor-deals-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin: 0 auto;
}
.vendor-deals-header {
  width: 100%;
  max-width: 850px;
  margin: 0 auto 58px;
  text-align: center;
}
.vendor-deals-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  margin-bottom: 21px;
  border: 1px solid rgba(4, 120, 87, .22);
  border-radius: 999px;
  background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 100% );
  color: #064e3b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .9px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(6, 78, 59, .08);
}
.vendor-deals-eyebrow-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vendor-gradient);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(6, 78, 59, .22);
}
.vendor-deals-eyebrow-icon svg {
  width: 15px;
  height: 15px;
  stroke: #ffffff;
  stroke-width: 2.5;
}
.vendor-deals-title {
  margin: 0;
  color: #064e3b;
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -3px;
  text-align: center;
}
.vendor-deals-title span {
  display: block;
  margin-top: 7px;
  background: var(--vendor-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #047857;
}
.vendor-deals-header .vendor-deals-description {
  width: 100%;
  max-width: 700px;
  margin: 22px auto 0;
  color: #164e3b;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.8;
  text-align: center;
}
.vendor-deals-slider {
  width: 100%;
}
.vendor-deals-slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.vendor-deals-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #064e3b;
}
.vendor-deals-current {
  color: #047857;
  font-size: 23px;
  font-weight: 950;
  line-height: 1;
}
.vendor-deals-counter-line {
  width: 36px;
  height: 2px;
  border-radius: 999px;
  background: var(--vendor-gradient);
}
.vendor-deals-total {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}
.vendor-deals-navigation {
  display: flex;
  align-items: center;
  gap: 9px;
}
.vendor-deals-nav-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(4, 120, 87, .25);
  border-radius: 50%;
  background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 100% );
  color: #064e3b;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(6, 78, 59, .09);
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vendor-deals-nav-btn svg {
  position: relative;
  z-index: 4;
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.vendor-deals-nav-btn:hover {
  background: var(--vendor-gradient);
  color: #ffffff;
  border-color: #047857;
  box-shadow: 0 10px 28px rgba(6, 78, 59, .20);
}
.vendor-deals-nav-btn:active {
  background: linear-gradient( 135deg, #047857 0%, #064e3b 100% );
  color: #ffffff;
}
.vendor-deals-nav-btn:focus-visible {
  outline: 3px solid rgba(5, 150, 105, .28);
  outline-offset: 3px;
}
.vendor-deals-button-shine {
  position: absolute;
  z-index: 2;
  top: -35%;
  left: -110%;
  width: 55%;
  height: 170%;
  transform: skewX(-24deg);
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.75), rgba(255,255,255,.10), transparent );
  pointer-events: none;
  transition: left .65s ease;
}
.vendor-deals-nav-btn:hover .vendor-deals-button-shine {
  left: 145%;
}
.vendor-deals-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 32px;
}
.vendor-deals-track {
  display: flex;
  width: 100%;
  transition: transform .62s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.vendor-deal-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}
.vendor-deal-card {
  position: relative;
  display: grid;
  grid-template-columns: 45% 55%;
  width: 100%;
  min-height: 535px;
  overflow: hidden;
  border: 1px solid rgba(6, 78, 59, .15);
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(6, 78, 59, .08), 0 35px 90px rgba(6, 78, 59, .11);
}
.vendor-deal-image {
  position: relative;
  min-height: 535px;
  overflow: hidden;
  background: var(--vendor-gradient);
  isolation: isolate;
}
.vendor-deal-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: filter .4s ease, transform .55s ease;
}
.vendor-deal-card:hover .vendor-deal-banner {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.025);
}
.vendor-deal-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vendor-gradient);
  color: rgba(255,255,255,.9);
}
.vendor-deal-image-fallback svg {
  width: 100px;
  height: 100px;
  stroke-width: 1.2;
  opacity: .55;
}
.vendor-deal-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient( 180deg, rgba(6, 78, 59, .08) 0%, rgba(6, 78, 59, .02) 35%, rgba(2, 44, 34, .48) 68%, rgba(2, 35, 27, .92) 100% );
  pointer-events: none;
}
.vendor-deal-image-glow {
  position: absolute;
  z-index: 3;
  width: 360px;
  height: 360px;
  top: -200px;
  right: -170px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(52, 211, 153, .34) 0%, transparent 70% );
  pointer-events: none;
}
.vendor-deal-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transform: translate(-50%, -50%);
  border: 7px solid rgba(255,255,255,.98);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 25px 55px rgba(0,0,0,.28), 0 8px 25px rgba(6,78,59,.22);
}
.vendor-deal-logo::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  pointer-events: none;
}
.vendor-deal-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}
.vendor-deal-logo-fallback {
  background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 100% );
  color: #047857;
}
.vendor-deal-logo-fallback svg {
  width: 58px;
  height: 58px;
  stroke: #047857;
  stroke-width: 1.8;
}
.vendor-deal-featured-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #064e3b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .55px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
}
.vendor-deal-featured-badge svg {
  width: 15px;
  height: 15px;
  stroke: #047857;
  stroke-width: 2.6;
}
.vendor-deal-duration {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 44px);
  padding: 10px 14px;
  border: 1px solid rgba(134,239,172,.42);
  border-radius: 12px;
  background: linear-gradient( 135deg, rgba(6,78,59,.98), rgba(4,120,87,.95) );
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}
.vendor-deal-duration svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: #a7f3d0;
  stroke-width: 2.5;
}
.vendor-deal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px 52px;
  background: radial-gradient( circle at 100% 0%, rgba(16,185,129,.09), transparent 35% ), #ffffff;
}
.vendor-deal-store-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 21px;
  text-align: center;
}
.vendor-deal-store-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 17px;
  background: linear-gradient( 135deg, #ecfdf5 0%, #d1fae5 100% );
  box-shadow: 0 8px 20px rgba(6,78,59,.07);
}
.vendor-deal-store-icon svg {
  width: 27px;
  height: 27px;
  stroke: #047857;
  stroke-width: 2.4;
}
.vendor-deal-store-title-wrap {
  min-width: 0;
  width: 100%;
  text-align: center;
}
.vendor-deal-kicker {
  margin-bottom: 6px;
  color: #047857;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.3px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.vendor-deal-store-heading h2 {
  margin: 0;
  color: #064e3b;
  font-size: clamp(25px, 2.6vw, 35px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -1.1px;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-deal-store-heading p {
  margin: 7px 0 0;
  color: #047857;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-deal-content > .vendor-deal-description {
  width: 100%;
  max-width: 570px;
  margin: 0 auto 22px;
  color: #163b2c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-deal-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}
.vendor-deal-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 10px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ecfdf5 100% );
  color: #166534;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-deal-meta span strong {
  color: #14532d;
  font-weight: 900;
  text-align: center;
}
.vendor-deal-meta svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke: #047857;
  stroke-width: 2.5;
}
.store-rating-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 23px;
  padding: 15px 18px;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 15px;
  background: linear-gradient( 135deg, #f7fffa 0%, #ecfdf5 100% );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.store-rating-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.store-rating-label {
  margin-bottom: 7px;
  color: #166534;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
}
.store-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.store-rating-number {
  color: #064e3b;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.8px;
}
.store-rating-stars {
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-rating-star {
  width: 18px;
  height: 18px;
  fill: #fbbf24;
  stroke: #b45309;
  stroke-width: 2.2;
}
.store-rating-count {
  color: #166534;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.store-rating-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #166534;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.store-rating-first {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.vendor-deal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 21px;
  border-top: 1px solid rgba(4,120,87,.14);
}
.vendor-deal-school {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
  padding: 10px 13px;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 14px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ecfdf5 100% );
}
.vendor-deal-school-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(4,120,87,.18);
}
.vendor-deal-school-icon svg {
  width: 17px;
  height: 17px;
  stroke: #047857;
  stroke-width: 2.4;
}
.vendor-deal-school-info {
  min-width: 0;
}
.vendor-deal-school small {
  display: block;
  margin-bottom: 3px;
  color: #166534;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.vendor-deal-school strong {
  display: block;
  color: #047857;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-deal-school span {
  display: block;
  margin-top: 3px;
  color: #059669;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
}
.vendor-deal-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #064e3b;
  border-radius: 14px;
  background: var(--vendor-gradient);
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(6,78,59,.22);
  transition: filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vendor-deal-button > span:not(.vendor-deal-button-shine) {
  position: relative;
  z-index: 4;
}
.vendor-deal-button svg {
  position: relative;
  z-index: 4;
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.vendor-deal-button-shine {
  position: absolute;
  z-index: 2;
  top: -35%;
  left: -110%;
  width: 55%;
  height: 170%;
  transform: skewX(-24deg);
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.72), rgba(255,255,255,.10), transparent );
  pointer-events: none;
  transition: left .65s ease;
}
.vendor-deal-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(6,78,59,.30);
}
.vendor-deal-button:hover .vendor-deal-button-shine {
  left: 145%;
}
.vendor-deal-button:focus-visible {
  outline: 3px solid rgba(5,150,105,.30);
  outline-offset: 3px;
}
.vendor-deals-slider-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 20px;
}
.vendor-deals-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}
.vendor-deals-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #86d8ad;
  cursor: pointer;
  transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}
.vendor-deals-dot:hover {
  background: #047857;
}
.vendor-deals-dot.active {
  width: 30px;
  background: var(--vendor-gradient);
  box-shadow: 0 3px 10px rgba(4,120,87,.25);
}
.vendor-deals-dot:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 4px;
}
.vendor-deals-progress {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #b7e8cf;
}
.vendor-deals-progress span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--vendor-gradient);
  transition: width .65s ease;
}
.vendor-deals-empty {
  width: 100%;
  padding: 85px 25px;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 30px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 18px 45px rgba(6,78,59,.08);
}
.vendor-deals-empty-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient( 135deg, #ecfdf5, #d1fae5 );
  border: 1px solid rgba(4,120,87,.18);
  color: #047857;
}
.vendor-deals-empty-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}
.vendor-deals-empty h2 {
  margin: 0 0 9px;
  color: #064e3b;
  font-size: 25px;
  font-weight: 950;
  text-align: center;
}
.vendor-deals-empty p {
  max-width: 460px;
  margin: 0 auto;
  color: #164e3b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}
.vendor-deals-bottom-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 46px;
  padding: 23px 25px;
  overflow: hidden;
  border: 1px solid rgba(4,120,87,.19);
  border-radius: 22px;
  background: radial-gradient( circle at 100% 0%, rgba(16,185,129,.13), transparent 35% ), linear-gradient( 135deg, #ecfdf5 0%, #ffffff 100% );
  box-shadow: 0 12px 35px rgba(6,78,59,.07);
}
.vendor-deals-bottom-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--vendor-gradient);
}
.vendor-deals-cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.vendor-deals-bottom-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(4,120,87,.18);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(6,78,59,.07);
}
.vendor-deals-bottom-icon svg {
  width: 22px;
  height: 22px;
  stroke: #047857;
  stroke-width: 2.3;
}
.vendor-deals-cta-label {
  display: block;
  margin-bottom: 4px;
  color: #047857;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.vendor-deals-bottom-cta h3 {
  margin: 0 0 4px;
  color: #064e3b;
  font-size: 17px;
  font-weight: 950;
  text-align: center;
}
.vendor-deals-bottom-cta p {
  margin: 0;
  color: #164e3b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.vendor-deals-cta-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 47px;
  padding: 0 19px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #064e3b;
  border-radius: 13px;
  background: var(--vendor-gradient);
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(6,78,59,.20);
  transition: filter .25s ease, box-shadow .25s ease;
}
.vendor-deals-cta-button > span:not(.vendor-deals-cta-button-shine) {
  position: relative;
  z-index: 4;
}
.vendor-deals-cta-button svg {
  position: relative;
  z-index: 4;
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}
.vendor-deals-cta-button-shine {
  position: absolute;
  z-index: 2;
  top: -35%;
  left: -110%;
  width: 55%;
  height: 170%;
  transform: skewX(-24deg);
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.72), rgba(255,255,255,.10), transparent );
  pointer-events: none;
  transition: left .65s ease;
}
.vendor-deals-cta-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 29px rgba(6,78,59,.29);
}
.vendor-deals-cta-button:hover .vendor-deals-cta-button-shine {
  left: 145%;
}
.vendor-deals-cta-button:focus-visible {
  outline: 3px solid rgba(5,150,105,.30);
  outline-offset: 3px;
}
@media (max-width: 1050px) {
  .vendor-deals-section {
    padding: 72px 20px 88px;
  }
  .vendor-deal-card {
    grid-template-columns: 43% 57%;
    min-height: 500px;
  }
  .vendor-deal-image {
    min-height: 500px;
  }
  .vendor-deal-content {
    padding: 40px;
  }
  .vendor-deal-logo {
    width: 150px;
    height: 150px;
  }
}
@media (max-width: 850px) {
  .vendor-deals-section {
    padding: 62px 18px 76px;
  }
  .vendor-deals-header {
    margin-bottom: 40px;
  }
  .vendor-deals-title {
    font-size: clamp(35px, 6vw, 49px);
    letter-spacing: -2px;
  }
  .vendor-deal-card {
    grid-template-columns: 40% 60%;
    min-height: 465px;
    border-radius: 27px;
  }
  .vendor-deal-image {
    min-height: 465px;
  }
  .vendor-deal-logo {
    width: 128px;
    height: 128px;
    padding: 8px;
    border-width: 5px;
  }
  .vendor-deal-content {
    padding: 31px;
  }
  .vendor-deal-store-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .vendor-deal-store-heading h2 {
    font-size: 24px;
  }
  .vendor-deal-content > .vendor-deal-description {
    font-size: 13px;
  }
  .vendor-deal-school {
    max-width: 230px;
  }
  .vendor-deal-button {
    padding: 0 16px;
  }
}
@media (max-width: 700px) {
  .vendor-deals-section {
    padding: 52px 15px 68px;
  }
  .vendor-deals-header {
    margin-bottom: 32px;
  }
  .vendor-deals-title {
    font-size: 34px;
    letter-spacing: -1.4px;
  }
  .vendor-deals-header .vendor-deals-description {
    font-size: 14px;
    line-height: 1.7;
  }
  .vendor-deals-slider-top {
    margin-bottom: 14px;
  }
  .vendor-deal-card {
    display: block;
    min-height: auto;
    border-radius: 23px;
  }
  .vendor-deal-image {
    width: 100%;
    height: 305px;
    min-height: 305px;
  }
  .vendor-deal-logo {
    width: 126px;
    height: 126px;
  }
  .vendor-deal-content {
    width: 100%;
    padding: 30px 24px 28px;
  }
  .vendor-deal-store-heading {
    margin-bottom: 19px;
  }
  .vendor-deal-store-heading h2 {
    font-size: 24px;
  }
  .vendor-deal-content > .vendor-deal-description {
    max-width: none;
    font-size: 14px;
  }
  .vendor-deal-meta {
    flex-direction: column;
    align-items: center;
  }
  .vendor-deal-meta span {
    width: fit-content;
    max-width: 100%;
  }
  .store-rating-box {
    margin-bottom: 22px;
  }
  .vendor-deal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .vendor-deal-school {
    width: 100%;
    max-width: none;
  }
  .vendor-deal-button {
    width: 100%;
  }
  .vendor-deals-bottom-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-top: 35px;
  }
  .vendor-deals-cta-content {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .vendor-deals-cta-button {
    width: 100%;
  }
}
@media (max-width: 550px) {
  .vendor-deals-section {
    padding: 46px 12px 60px;
  }
  .vendor-deals-eyebrow {
    font-size: 9px;
    letter-spacing: .6px;
  }
  .vendor-deals-title {
    font-size: 30px;
    letter-spacing: -1.1px;
  }
  .vendor-deals-header .vendor-deals-description {
    font-size: 13px;
    line-height: 1.68;
  }
  .vendor-deals-current {
    font-size: 19px;
  }
  .vendor-deals-nav-btn {
    width: 41px;
    height: 41px;
  }
  .vendor-deals-nav-btn svg {
    width: 16px;
    height: 16px;
  }
  .vendor-deal-image {
    height: 275px;
    min-height: 275px;
  }
  .vendor-deal-logo {
    width: 112px;
    height: 112px;
    padding: 7px;
    border-width: 4px;
  }
  .vendor-deal-logo::after {
    inset: -9px;
  }
  .vendor-deal-featured-badge {
    top: 13px;
    left: 13px;
    padding: 8px 10px;
    font-size: 9px;
  }
  .vendor-deal-duration {
    left: 13px;
    bottom: 13px;
    max-width: calc(100% - 26px);
    padding: 8px 10px;
    font-size: 9px;
  }
  .vendor-deal-content {
    padding: 26px 20px 25px;
  }
  .vendor-deal-store-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
  }
  .vendor-deal-store-icon svg {
    width: 20px;
    height: 20px;
  }
  .vendor-deal-store-heading h2 {
    font-size: 21px;
  }
  .vendor-deal-store-heading p {
    font-size: 10px;
  }
  .vendor-deal-content > .vendor-deal-description {
    font-size: 13px;
    line-height: 1.72;
  }
  .vendor-deal-meta span {
    font-size: 9.5px;
  }
  .store-rating-box {
    padding: 13px;
  }
  .store-rating-number {
    font-size: 21px;
  }
  .store-rating-star {
    width: 17px;
    height: 17px;
  }
  .store-rating-count {
    font-size: 9px;
  }
  .vendor-deal-footer {
    padding-top: 18px;
  }
  .vendor-deal-button {
    min-height: 47px;
  }
  .vendor-deals-slider-bottom {
    gap: 12px;
  }
  .vendor-deals-progress {
    max-width: 145px;
  }
  .vendor-deals-bottom-cta {
    padding: 19px;
    border-radius: 19px;
  }
  .vendor-deals-bottom-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .vendor-deals-bottom-cta h3 {
    font-size: 15px;
  }
  .vendor-deals-bottom-cta p {
    font-size: 10px;
  }
}
@media (max-width: 450px) {
  .vendor-deals-section {
    padding: 41px 10px 54px;
  }
  .vendor-deals-title {
    font-size: 28px;
  }
  .vendor-deals-header .vendor-deals-description {
    font-size: 12.5px;
  }
  .vendor-deal-card {
    border-radius: 20px;
  }
  .vendor-deal-image {
    height: 240px;
    min-height: 240px;
  }
  .vendor-deal-logo {
    width: 100px;
    height: 100px;
    padding: 6px;
    border-width: 3px;
  }
  .vendor-deal-featured-badge {
    top: 11px;
    left: 11px;
    padding: 7px 9px;
    font-size: 9px;
  }
  .vendor-deal-duration {
    left: 11px;
    bottom: 11px;
    padding: 8px 9px;
    font-size: 9px;
  }
  .vendor-deal-content {
    padding: 23px 17px 22px;
  }
  .vendor-deal-store-icon {
    width: 41px;
    height: 41px;
    flex-basis: 41px;
  }
  .vendor-deal-store-heading h2 {
    font-size: 19px;
  }
  .vendor-deal-store-heading p {
    font-size: 10px;
  }
  .vendor-deal-content > .vendor-deal-description {
    font-size: 12.5px;
  }
  .vendor-deal-meta span {
    font-size: 9.5px;
  }
  .vendor-deal-school {
    padding: 9px 11px;
  }
  .vendor-deal-button {
    min-height: 46px;
    font-size: 11px;
  }
  .vendor-deals-progress {
    max-width: 105px;
  }
  .vendor-deals-bottom-cta h3 {
    font-size: 14px;
  }
  .vendor-deals-bottom-cta p {
    font-size: 10px;
  }
}
@media (max-width: 360px) {
  .vendor-deals-section {
    padding-left: 8px;
    padding-right: 8px;
  }
  .vendor-deals-title {
    font-size: 25px;
  }
  .vendor-deals-header .vendor-deals-description {
    font-size: 12px;
  }
  .vendor-deals-nav-btn {
    width: 36px;
    height: 36px;
  }
  .vendor-deal-image {
    height: 220px;
    min-height: 220px;
  }
  .vendor-deal-logo {
    width: 89px;
    height: 89px;
  }
  .vendor-deal-featured-badge {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vendor-deal-duration {
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vendor-deal-content {
    padding: 21px 15px 21px;
  }
  .vendor-deal-store-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .vendor-deal-store-heading h2 {
    font-size: 18px;
  }
  .vendor-deal-content > .vendor-deal-description {
    font-size: 12px;
  }
  .vendor-deals-slider-bottom {
    gap: 8px;
  }
  .vendor-deals-progress {
    max-width: 75px;
  }
}
@media (hover: none) {
  .vendor-deal-card:hover .vendor-deal-banner {
    filter: none;
    transform: none;
  }
  .vendor-deals-nav-btn:hover {
    background: linear-gradient( 135deg, #ffffff 0%, #ecfdf5 100% );
    color: #064e3b;
    border-color: rgba(4,120,87,.25);
    box-shadow: 0 8px 24px rgba(6,78,59,.09);
  }
  .vendor-deal-button:hover {
    filter: none;
    box-shadow: 0 10px 24px rgba(6,78,59,.22);
  }
  .vendor-deals-cta-button:hover {
    filter: none;
    box-shadow: 0 10px 24px rgba(6,78,59,.20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-deals-track, .vendor-deal-banner, .vendor-deals-dot, .vendor-deals-progress span, .vendor-deals-button-shine, .vendor-deal-button-shine, .vendor-deals-cta-button-shine {
    transition: none;
  }
}
.vendor-register-section {
  --primary: #087f5b;
  --primary-dark: #056044;
  --primary-deep: #034c38;
  --primary-light: #e8f7f0;
  --primary-soft: #f2fbf6;
  --text: #14231c;
  --text-soft: #30453b;
  --muted: #718078;
  --border: #dce9e2;
  --border-strong: #c5dbd0;
  --input-border: #d2e0d9;
  --input-bg: #ffffff;
  --card: #ffffff;
  --page-bg: #f5faf7;
  --shadow-card: 0 20px 55px rgba(15, 71, 52, 0.08);
  --shadow-button: 0 8px 20px rgba(8, 127, 91, 0.18);
  background: radial-gradient( circle at 50% 0%, rgba(8, 127, 91, 0.08), transparent 38% ), linear-gradient( 180deg, #f8fcfa 0%, var(--page-bg) 100% );
  color: var(--text);
}
.vendor-register-header {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}
.vendor-register-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 9px 15px;
  border: 1px solid rgba(8, 127, 91, 0.15);
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-register-badge svg {
  width: 15px;
  height: 15px;
}
.vendor-register-header h1 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.vendor-register-header p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.vendor-register-card {
  overflow: hidden;
  padding: clamp(22px, 4vw, 38px);
  background: linear-gradient( 180deg, #ffffff, #fcfefd );
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.vendor-register-form {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.vendor-form-section {
  padding-bottom: 32px;
  border-bottom: 1px solid #e8f0eb;
}
.vendor-form-section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.vendor-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.vendor-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #cce7da;
  border-radius: 13px;
  background: var(--primary-light);
  color: var(--primary-dark);
}
.vendor-section-icon svg {
  width: 21px;
  height: 21px;
}
.vendor-section-header h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -0.02em;
}
.vendor-section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.vendor-form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vendor-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.vendor-form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vendor-form-group > label {
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 780;
}
.vendor-register-section .form-input, .vendor-register-section input.form-input, .vendor-register-section select.form-input, .vendor-register-section textarea.form-input {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--input-border);
  border-radius: 13px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vendor-register-section textarea.form-input {
  min-height: 145px;
  resize: vertical;
}
.vendor-register-section .form-input::placeholder {
  color: #9aaaA2;
}
.vendor-register-section .form-input:hover {
  border-color: #b8cec3;
}
.vendor-register-section .form-input:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(8, 127, 91, 0.10);
}
.vendor-field-hint {
  margin-top: 7px;
  color: #829088;
  font-size: 12px;
  line-height: 1.5;
}
.vendor-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.vendor-upload-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 230px;
  overflow: hidden;
  padding: 24px;
  border: 2px dashed #bfd7ca;
  border-radius: 17px;
  background: linear-gradient( 145deg, #f7fcf9, #eef8f2 );
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.vendor-upload-box:hover {
  border-color: #72b99c;
  background: #f0faf4;
  box-shadow: 0 8px 24px rgba(8, 127, 91, 0.07);
}
.vendor-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.vendor-upload-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.vendor-upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 15px;
  background: #dff4e9;
  color: var(--primary-dark);
}
.vendor-upload-icon svg {
  width: 24px;
  height: 24px;
}
.vendor-upload-content strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.vendor-upload-content span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.vendor-upload-content small {
  max-width: 260px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.vendor-upload-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-upload-preview.is-existing {
  display: block;
}
.vendor-upload-preview.is-existing + .vendor-upload-content {
  opacity: 0;
}
.vendor-upload-box:hover .vendor-upload-preview.is-existing + .vendor-upload-content {
  opacity: 1;
  padding: 15px 20px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
}
.vendor-edit-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid #cce7da;
  border-radius: 15px;
  background: linear-gradient( 135deg, #f0faf4, #e8f7f0 );
}
.vendor-edit-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: #d8f1e3;
  color: var(--primary-dark);
}
.vendor-edit-notice-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-edit-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #075d42;
  font-size: 13px;
  font-weight: 800;
}
.vendor-edit-notice p {
  margin: 0;
  color: #60766b;
  font-size: 12px;
  line-height: 1.55;
}
.vendor-register-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}
.vendor-register-primary, .vendor-register-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.vendor-register-primary svg, .vendor-register-secondary svg {
  width: 17px;
  height: 17px;
}
.vendor-register-primary {
  border: 1px solid var(--primary);
  background: linear-gradient( 135deg, #099268, #087f5b );
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(8, 127, 91, 0.18);
}
.vendor-register-primary:hover {
  background: linear-gradient( 135deg, #087f5b, #056044 );
  border-color: #056044;
  box-shadow: 0 9px 22px rgba(8, 127, 91, 0.23);
}
.vendor-register-primary:active {
  background: #04563d;
  border-color: #04563d;
  box-shadow: 0 4px 10px rgba(8, 127, 91, 0.16);
}
.vendor-register-secondary {
  border: 1px solid #cce1d6;
  background: #f5faf7;
  color: #17634b;
}
.vendor-register-secondary:hover {
  border-color: #a9ccb9;
  background: #eaf6ef;
  color: #075d42;
  box-shadow: 0 5px 14px rgba(8, 127, 91, 0.07);
}
.vendor-register-primary:focus-visible, .vendor-register-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(8, 127, 91, 0.12);
}
.vendor-register-section .errorlist {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  color: #c0392b;
  font-size: 12px;
  line-height: 1.5;
}
.vendor-register-section .form-input:has(+ .errorlist) {
  border-color: #e06b5f;
}
@media (max-width: 768px) {
  .vendor-register-section {
    padding: 42px 16px;
  }
  .vendor-register-card {
    padding: 24px;
    border-radius: 20px;
  }
  .vendor-form-grid, .vendor-upload-grid {
    grid-template-columns: 1fr;
  }
  .vendor-register-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .vendor-register-primary, .vendor-register-secondary {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .vendor-register-section {
    padding: 30px 12px;
  }
  .vendor-register-header {
    margin-bottom: 26px;
  }
  .vendor-register-header h1 {
    font-size: 29px;
  }
  .vendor-register-header p {
    font-size: 13px;
  }
  .vendor-register-card {
    padding: 18px;
    border-radius: 18px;
  }
  .vendor-register-form {
    gap: 26px;
  }
  .vendor-section-header {
    align-items: flex-start;
  }
  .vendor-section-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .vendor-section-header h2 {
    font-size: 16px;
  }
  .vendor-section-header p {
    font-size: 12px;
  }
  .vendor-upload-box {
    min-height: 200px;
  }
  .vendor-edit-notice {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-register-section *, .vendor-register-section *::before, .vendor-register-section *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
:root {
  --vendor-order-detail-page-primary: #0F8A4B;
  --vendor-order-detail-page-primary-dark: #086338;
  --vendor-order-detail-page-primary-light: #EAF8F0;
  --vendor-order-detail-page-accent: #22C55E;
  --vendor-order-detail-page-accent-light: #DCFCE7;
  --vendor-order-detail-page-success: #0f7233;
  --vendor-order-detail-page-warning: #F59E0B;
  --vendor-order-detail-page-danger: #EF4444;
  --vendor-order-detail-page-info: #3B82F6;
  --vendor-order-detail-page-background: #F4F7FA;
  --vendor-order-detail-page-surface: #FFFFFF;
  --vendor-order-detail-page-surface-soft: #F8FAFC;
  --vendor-order-detail-page-text: #14213D;
  --vendor-order-detail-page-text-light: #18221c;
  --vendor-order-detail-page-text-muted: #1d251f;
  --vendor-order-detail-page-border: #E5EAF0;
  --vendor-order-detail-page-border-dark: #D8E0E8;
  --vendor-order-detail-page-radius-sm: 14px;
  --vendor-order-detail-page-radius: 20px;
  --vendor-order-detail-page-radius-lg: 28px;
  --vendor-order-detail-page-radius-xl: 34px;
  --vendor-order-detail-page-shadow-xs: 0 2px 8px rgba(15, 23, 42, .035);
  --vendor-order-detail-page-shadow-sm: 0 8px 25px rgba(15, 23, 42, .055);
  --vendor-order-detail-page-shadow: 0 18px 50px rgba(15, 23, 42, .075);
  --vendor-order-detail-page-shadow-lg: 0 28px 70px rgba(15, 23, 42, .10);
  --vendor-order-detail-page-transition: .3s cubic-bezier(.22, .61, .36, 1);
}
.vendor-order-detail-page-page *, .vendor-order-detail-page-page *::before, .vendor-order-detail-page-page *::after {
  box-sizing: border-box;
}
.vendor-order-detail-page-page img {
  max-width: 100%;
  display: block;
}
.vendor-order-detail-page-page button, .vendor-order-detail-page-page input, .vendor-order-detail-page-page select {
  font: inherit;
}
.vendor-order-detail-page-page a {
  color: inherit;
  text-decoration: none;
}
.vendor-order-detail-page-page {
  min-height: 100vh;
  padding: 42px 34px 72px;
  background: radial-gradient( circle at 5% 0%, rgba(34, 197, 94, .075), transparent 32% ), radial-gradient( circle at 100% 0%, rgba(59, 130, 246, .055), transparent 34% ), linear-gradient( 180deg, #FAFCFD 0%, #F3F6F9 100% );
  overflow-x: hidden;
}
.vendor-order-detail-page-wrapper {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}
.vendor-order-detail-page-order-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
  min-height: 280px;
  margin-bottom: 32px;
  padding: 46px 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--vendor-order-detail-page-radius-xl);
  background: linear-gradient( 135deg, rgba(255,255,255,.96), rgba(247,252,249,.9) );
  box-shadow: 0 25px 70px rgba(15, 23, 42, .075);
}
.vendor-order-detail-page-order-header::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: -270px;
  right: -130px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(34, 197, 94, .14), transparent 68% );
  pointer-events: none;
}
.vendor-order-detail-page-order-header::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -180px;
  left: -120px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(59, 130, 246, .07), transparent 70% );
  pointer-events: none;
}
.vendor-order-detail-page-order-header > * {
  position: relative;
  z-index: 2;
}
.vendor-order-detail-page-order-header-left {
  min-width: 0;
}
.vendor-order-detail-page-order-title {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vendor-order-detail-page-order-meta {
  display: flex;
  align-items: center;
  gap: 13px;
}
.vendor-order-detail-page-order-meta-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--vendor-order-detail-page-primary);
  background: var(--vendor-order-detail-page-primary-light);
}
.vendor-order-detail-page-order-meta-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-order-detail-page-order-meta-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
.vendor-order-detail-page-order-meta-label {
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-order-detail-page-order-meta-content strong {
  color: var(--vendor-order-detail-page-primary);
  font-size: .86rem;
  font-weight: 800;
}
.vendor-order-detail-page-order-meta-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vendor-order-detail-page-border-dark);
}
.vendor-order-detail-page-order-date {
  color: var(--vendor-order-detail-page-text-light);
  font-size: .8rem;
  font-weight: 600;
}
.vendor-order-detail-page-title-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vendor-order-detail-page-title-label {
  color: var(--vendor-order-detail-page-primary);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vendor-order-detail-page-order-title h1 {
  margin: 0;
  color: var(--vendor-order-detail-page-text);
  font-size: clamp(2.25rem, 4vw, 3.35rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.055em;
}
.vendor-order-detail-page-order-title p {
  max-width: 650px;
  margin: 3px 0 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: 1rem;
  line-height: 1.7;
}
.vendor-order-detail-page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  padding: 10px 15px;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 999px;
  color: var(--vendor-order-detail-page-text-light);
  background: rgba(255,255,255,.8);
  font-size: .82rem;
  font-weight: 700;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.vendor-order-detail-page-back-link:hover {
  color: var(--vendor-order-detail-page-primary);
  border-color: rgba(15,138,75,.3);
  background: #fff;
}
.vendor-order-detail-page-back-link svg {
  width: 16px;
  height: 16px;
}
.vendor-order-detail-page-order-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vendor-order-detail-page-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 155px;
  padding: 14px 24px;
  border-radius: 999px;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 15px 32px rgba(0,0,0,.14);
}
.vendor-order-detail-page-status-pending {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
}
.vendor-order-detail-page-status-accepted {
  background: linear-gradient(135deg, #0F8A4B, #22C55E);
}
.vendor-order-detail-page-status-payment-confirmed {
  background: linear-gradient(135deg, #2563EB, #60A5FA);
}
.vendor-order-detail-page-status-processing {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
}
.vendor-order-detail-page-status-on-the-way {
  background: linear-gradient(135deg, #0891B2, #22D3EE);
}
.vendor-order-detail-page-status-delivered {
  background: linear-gradient(135deg, #15803D, #4ADE80);
}
.vendor-order-detail-page-status-cancelled {
  background: linear-gradient(135deg, #DC2626, #EF4444);
}
.vendor-order-detail-page-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 30px;
  align-items: start;
}
.vendor-order-detail-page-dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}
.vendor-order-detail-page-dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.vendor-order-detail-page-dashboard-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--vendor-order-detail-page-radius-lg);
  background: rgba(255,255,255,.88);
  box-shadow: var(--vendor-order-detail-page-shadow-sm);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.vendor-order-detail-page-dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(255,255,255,.32), transparent 30% );
}
.vendor-order-detail-page-dashboard-card > * {
  position: relative;
  z-index: 1;
}
.vendor-order-detail-page-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.vendor-order-detail-page-card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vendor-order-detail-page-card-heading-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: var(--vendor-order-detail-page-primary);
  background: linear-gradient( 135deg, #EAF8F0, #DDF7E8 );
}
.vendor-order-detail-page-card-heading-icon.product {
  color: #2563EB;
  background: linear-gradient( 135deg, #EFF6FF, #DBEAFE );
}
.vendor-order-detail-page-card-heading-icon.delivery {
  color: #7C3AED;
  background: linear-gradient( 135deg, #F5F3FF, #EDE9FE );
}
.vendor-order-detail-page-card-heading-icon svg {
  width: 21px;
  height: 21px;
}
.vendor-order-detail-page-card-heading h2 {
  margin: 3px 0 0;
  color: var(--vendor-order-detail-page-text);
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.035em;
}
.vendor-order-detail-page-eyebrow {
  display: block;
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vendor-order-detail-page-products-count {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--vendor-order-detail-page-primary);
  background: var(--vendor-order-detail-page-primary-light);
  font-size: .75rem;
  font-weight: 800;
}
.vendor-order-detail-page-customer-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 22px;
  background: linear-gradient( 135deg, #FFFFFF, #F8FAFC );
}
.vendor-order-detail-page-customer-avatar {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient( 145deg, #0F8A4B, #22C55E );
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(15,138,75,.22);
}
.vendor-order-detail-page-profile-label {
  display: block;
  margin-bottom: 4px;
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-order-detail-page-customer-profile h3 {
  margin: 0 0 7px;
  color: var(--vendor-order-detail-page-text);
  font-size: 1.2rem;
  font-weight: 850;
}
.vendor-order-detail-page-customer-contact {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .84rem;
}
.vendor-order-detail-page-customer-contact svg {
  width: 15px;
  height: 15px;
}
.vendor-order-detail-page-customer-details {
  display: flex;
  flex-direction: column;
}
.vendor-order-detail-page-info-row {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--vendor-order-detail-page-border);
}
.vendor-order-detail-page-info-row:last-child {
  border-bottom: 0;
}
.vendor-order-detail-page-info-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .82rem;
  font-weight: 700;
}
.vendor-order-detail-page-info-label svg {
  width: 16px;
  height: 16px;
  color: var(--vendor-order-detail-page-text-muted);
}
.vendor-order-detail-page-info-value {
  color: var(--vendor-order-detail-page-text);
  font-size: .88rem;
  font-weight: 750;
  text-align: right;
}
.vendor-order-detail-page-address {
  line-height: 1.55;
}
.vendor-order-detail-page-customer-note {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 18px;
  background: linear-gradient( 135deg, #FFF9EA, #FFFDF8 );
}
.vendor-order-detail-page-note-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #D97706;
  background: #FEF3C7;
}
.vendor-order-detail-page-note-icon svg {
  width: 18px;
  height: 18px;
}
.vendor-order-detail-page-customer-note h4 {
  margin: 0 0 5px;
  color: var(--vendor-order-detail-page-text);
  font-size: .86rem;
  font-weight: 850;
}
.vendor-order-detail-page-customer-note p {
  margin: 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .84rem;
  line-height: 1.65;
}
.vendor-order-detail-page-products-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vendor-order-detail-page-product-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 22px;
  background: #fff;
}
.vendor-order-detail-page-product-main {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}
.vendor-order-detail-page-product-image-wrapper {
  width: 82px;
  height: 82px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 19px;
  background: #F8FAFC;
}
.vendor-order-detail-page-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-order-detail-page-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vendor-order-detail-page-text-muted);
  background: linear-gradient( 135deg, #F8FAFC, #EEF2F7 );
}
.vendor-order-detail-page-product-placeholder svg {
  width: 28px;
  height: 28px;
}
.vendor-order-detail-page-product-content {
  min-width: 0;
}
.vendor-order-detail-page-product-label {
  display: block;
  margin-bottom: 4px;
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vendor-order-detail-page-product-content h3 {
  overflow: hidden;
  margin: 0;
  color: #111827;
  font-size: .98rem;
  line-height: 1.4;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-order-detail-page-product-content p {
  margin: 6px 0 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .8rem;
}
.vendor-order-detail-page-product-content strong {
  color: var(--vendor-order-detail-page-primary);
}
.vendor-order-detail-page-product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(95px, 1fr));
  gap: 9px;
}
.vendor-order-detail-page-product-stat {
  min-width: 100px;
  padding: 12px 13px;
  text-align: center;
  border-radius: 15px;
  background: #F8FAFC;
}
.vendor-order-detail-page-product-stat span {
  display: block;
  margin-bottom: 6px;
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.vendor-order-detail-page-product-stat strong {
  color: #111827;
  font-size: .84rem;
  font-weight: 850;
}
.vendor-order-detail-page-quantity-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 43px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #15803D !important;
  background: #DCFCE7;
}
.vendor-order-detail-page-total {
  background: linear-gradient( 135deg, rgba(15,138,75,.07), rgba(34,197,94,.10) );
}
.vendor-order-detail-page-total strong {
  color: var(--vendor-order-detail-page-primary) !important;
}
.vendor-order-detail-page-vendor-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 22px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.vendor-order-detail-page-vendor-total-label {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a632c;
}
.vendor-order-detail-page-vendor-total-amount {
  font-size: 1.7rem;
  font-weight: 700;
  color: #067026;
}
.vendor-order-detail-page-empty-products {
  padding: 60px 25px;
  text-align: center;
  border: 1px dashed var(--vendor-order-detail-page-border-dark);
  border-radius: 20px;
  background: #FAFBFC;
}
.vendor-order-detail-page-empty-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--vendor-order-detail-page-text-muted);
  background: #F1F5F9;
}
.vendor-order-detail-page-empty-icon svg {
  width: 27px;
  height: 27px;
}
.vendor-order-detail-page-empty-products h3 {
  margin: 0 0 7px;
  color: var(--vendor-order-detail-page-text);
  font-size: 1rem;
  font-weight: 850;
}
.vendor-order-detail-page-empty-products p {
  margin: 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .84rem;
}
.vendor-order-detail-page-summary-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
}
.vendor-order-detail-page-summary-header-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient( 135deg, #0F8A4B, #22C55E );
  box-shadow: 0 10px 24px rgba(15,138,75,.2);
}
.vendor-order-detail-page-summary-header-icon svg {
  width: 21px;
  height: 21px;
}
.vendor-order-detail-page-summary-header-content h2 {
  margin: 3px 0 0;
  color: var(--vendor-order-detail-page-text);
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: -.035em;
}
.vendor-order-detail-page-summary-header-content p {
  margin: 4px 0 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .76rem;
  line-height: 1.45;
}
.vendor-order-detail-page-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vendor-order-detail-page-summary-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 17px;
  background: linear-gradient( 135deg, #FFFFFF, #F9FAFB );
}
.vendor-order-detail-page-summary-icon {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
}
.vendor-order-detail-page-summary-icon svg {
  width: 19px;
  height: 19px;
}
.vendor-order-detail-page-summary-icon.acceptance {
  color: #15803D;
  background: linear-gradient( 135deg, #DCFCE7, #BBF7D0 );
}
.vendor-order-detail-page-summary-icon.payment {
  color: #2563EB;
  background: linear-gradient( 135deg, #DBEAFE, #BFDBFE );
}
.vendor-order-detail-page-summary-icon.delivery {
  color: #7C3AED;
  background: linear-gradient( 135deg, #EDE9FE, #DDD6FE );
}
.vendor-order-detail-page-summary-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vendor-order-detail-page-summary-content span {
  color: var(--vendor-order-detail-page-text-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-order-detail-page-summary-content strong {
  color: var(--vendor-order-detail-page-text);
  font-size: .88rem;
  font-weight: 850;
}
.vendor-order-detail-page-summary-content small {
  color: var(--vendor-order-detail-page-text-light);
  font-size: .69rem;
  line-height: 1.4;
}
.vendor-order-detail-page-summary-content strong.confirmed {
  color: #15803D;
}
.vendor-order-detail-page-summary-content strong.waiting {
  color: #D97706;
}
.vendor-order-detail-page-summary-content strong.cancelled {
  color: #DC2626;
}
.vendor-order-detail-page-summary-content strong.delivered {
  color: #15803D;
}
.vendor-order-detail-page-summary-content strong.transit {
  color: #0891B2;
}
.vendor-order-detail-page-summary-content strong.pending {
  color: #D97706;
}
.vendor-order-detail-page-progress-steps {
  position: relative;
  display: flex;
  flex-direction: column;
}
.vendor-order-detail-page-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 13px;
  min-height: 72px;
}
.vendor-order-detail-page-step:last-child {
  min-height: auto;
}
.vendor-order-detail-page-step-indicator {
  position: relative;
  display: flex;
  justify-content: center;
}
.vendor-order-detail-page-step:not(:last-child) .vendor-order-detail-page-step-indicator::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  width: 2px;
  height: calc(100% - 6px);
  transform: translateX(-50%);
  background: #E2E8F0;
}
.vendor-order-detail-page-step-circle {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #CBD5E1;
  box-shadow: 0 0 0 1px #CBD5E1;
}
.vendor-order-detail-page-step-circle.active {
  background: linear-gradient( 135deg, #0F8A4B, #22C55E );
  box-shadow: 0 0 0 5px rgba(34,197,94,.11);
}
.vendor-order-detail-page-step-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 20px;
}
.vendor-order-detail-page-step-content strong {
  color: var(--vendor-order-detail-page-text);
  font-size: .84rem;
  font-weight: 850;
}
.vendor-order-detail-page-step-content span {
  color: var(--vendor-order-detail-page-text-light);
  font-size: .72rem;
  line-height: 1.45;
}
.vendor-order-detail-page-actions-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
}
.vendor-order-detail-page-actions-header-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient( 135deg, #2563EB, #60A5FA );
  box-shadow: 0 10px 24px rgba(37,99,235,.2);
}
.vendor-order-detail-page-actions-header-icon svg {
  width: 21px;
  height: 21px;
}
.vendor-order-detail-page-actions-header-content h2 {
  margin: 3px 0 0;
  color: var(--vendor-order-detail-page-text);
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: -.035em;
}
.vendor-order-detail-page-actions-header-content p {
  margin: 4px 0 0;
  color: var(--vendor-order-detail-page-text-light);
  font-size: .76rem;
  line-height: 1.45;
}
.vendor-order-detail-page-dashboard-card form {
  width: 100%;
}
.vendor-order-detail-page-dashboard-card form + form {
  margin-top: 11px;
}
.vendor-order-detail-page-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 53px;
  padding: 14px 20px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
  letter-spacing: .1px;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: box-shadow .35s ease, filter .35s ease, opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.vendor-order-detail-page-btn svg, .vendor-order-detail-page-cancel-btn svg {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
}
.vendor-order-detail-page-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255,255,255,.28), transparent );
  transform: skewX(-20deg);
  animation: vendor-order-detail-page-btnShine 4s linear infinite;
}
.vendor-order-detail-page-btn > * {
  position: relative;
  z-index: 2;
}
@keyframes vendor-order-detail-page-btnShine {
  0% {
    left: -150%;
  }
  100% {
    left: 180%;
  }
}
.vendor-order-detail-page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
.vendor-order-detail-page-btn:active {
  filter: brightness(.96);
}
.vendor-order-detail-page-btn-primary {
  background: linear-gradient( 135deg, #0F8A4B, #22C55E );
  box-shadow: 0 12px 27px rgba(15,138,75,.22);
}
.vendor-order-detail-page-btn-success {
  background: linear-gradient( 135deg, #15803D, #4ADE80 );
  box-shadow: 0 12px 27px rgba(21,128,61,.20);
}
.vendor-order-detail-page-btn-dark {
  background: linear-gradient( 135deg, #111827, #1F2937 );
  box-shadow: 0 12px 27px rgba(17,24,39,.20);
}
.vendor-order-detail-page-cancel-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 53px;
  padding: 14px 20px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient( 135deg, #DC2626, #EF4444 );
  box-shadow: 0 12px 27px rgba(220,38,38,.19);
  font-size: .84rem;
  font-weight: 750;
  transition: box-shadow .35s ease, filter .35s ease, opacity .35s ease;
}
.vendor-order-detail-page-cancel-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255,255,255,.28), transparent );
  transform: skewX(-20deg);
  animation: vendor-order-detail-page-btnShine 4s linear infinite;
}
.vendor-order-detail-page-cancel-btn > * {
  position: relative;
  z-index: 2;
}
.vendor-order-detail-page-cancel-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}
.vendor-order-detail-page-cancel-btn:active {
  filter: brightness(.96);
}
.vendor-order-detail-page-btn:disabled, .vendor-order-detail-page-cancel-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.15);
}
.vendor-order-detail-page-btn:disabled::before, .vendor-order-detail-page-cancel-btn:disabled::before {
  display: none;
}
.vendor-order-detail-page-delivery-form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--vendor-order-detail-page-border);
}
.vendor-order-detail-page-delivery-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 11px;
}
.vendor-order-detail-page-delivery-form-header label {
  display: block;
  margin-top: 4px;
  color: var(--vendor-order-detail-page-text);
  font-size: .83rem;
  font-weight: 800;
}
.vendor-order-detail-page-delivery-form-header > svg {
  width: 18px;
  height: 18px;
  color: var(--vendor-order-detail-page-primary);
}
.vendor-order-detail-page-select-wrapper {
  position: relative;
  margin-bottom: 11px;
}
.vendor-order-detail-page-delivery-form select {
  width: 100%;
  min-height: 52px;
  padding: 13px 42px 13px 15px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--vendor-order-detail-page-border);
  border-radius: 15px;
  outline: none;
  color: var(--vendor-order-detail-page-text);
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.vendor-order-detail-page-delivery-form select:hover {
  border-color: #CBD5E1;
}
.vendor-order-detail-page-delivery-form select:focus {
  border-color: var(--vendor-order-detail-page-primary);
  box-shadow: 0 0 0 4px rgba(15,138,75,.10);
}
.vendor-order-detail-page-select-wrapper > svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 16px;
  height: 16px;
  color: var(--vendor-order-detail-page-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.vendor-order-detail-page-alert {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border-radius: 17px;
}
.vendor-order-detail-page-alert-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.vendor-order-detail-page-alert-icon svg {
  width: 18px;
  height: 18px;
}
.vendor-order-detail-page-alert h4 {
  margin: 2px 0 0;
  font-size: .82rem;
  line-height: 1.5;
}
.vendor-order-detail-page-alert-warning {
  border: 1px solid rgba(245,158,11,.2);
  color: #92400E;
  background: #FFFBEB;
}
.vendor-order-detail-page-alert-warning .vendor-order-detail-page-alert-icon {
  color: #D97706;
  background: #FEF3C7;
}
.vendor-order-detail-page-alert-danger {
  border: 1px solid rgba(239,68,68,.2);
  color: #991B1B;
  background: #FEF2F2;
}
.vendor-order-detail-page-alert-danger .vendor-order-detail-page-alert-icon {
  color: #DC2626;
  background: #FEE2E2;
}
@media (max-width: 1200px) {
  .vendor-order-detail-page-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
  .vendor-order-detail-page-product-card {
    grid-template-columns: 1fr;
  }
  .vendor-order-detail-page-product-stats {
    width: 100%;
  }
}
@media (max-width: 1050px) {
  .vendor-order-detail-page-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .vendor-order-detail-page-dashboard-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .vendor-order-detail-page-actions-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 800px) {
  .vendor-order-detail-page-page {
    padding: 24px 18px 50px;
  }
  .vendor-order-detail-page-order-header {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 32px 27px;
    text-align: center;
  }
  .vendor-order-detail-page-order-header-left {
    width: 100%;
  }
  .vendor-order-detail-page-order-title {
    align-items: center;
  }
  .vendor-order-detail-page-order-meta-content {
    justify-content: center;
  }
  .vendor-order-detail-page-order-title p {
    max-width: 520px;
  }
  .vendor-order-detail-page-order-header-right {
    width: 100%;
  }
  .vendor-order-detail-page-status-badge {
    width: 100%;
  }
  .vendor-order-detail-page-back-link {
    margin-top: 4px;
  }
  .vendor-order-detail-page-dashboard-sidebar {
    grid-template-columns: 1fr;
  }
  .vendor-order-detail-page-actions-card {
    grid-column: auto;
  }
}
@media (max-width: 650px) {
  .vendor-order-detail-page-dashboard-card {
    padding: 22px;
    border-radius: 23px;
  }
  .vendor-order-detail-page-order-header {
    border-radius: 26px;
  }
  .vendor-order-detail-page-order-title h1 {
    font-size: 2rem;
  }
  .vendor-order-detail-page-order-meta {
    justify-content: center;
  }
  .vendor-order-detail-page-card-header {
    align-items: flex-start;
  }
  .vendor-order-detail-page-product-main {
    align-items: flex-start;
  }
  .vendor-order-detail-page-product-stats {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .vendor-order-detail-page-info-row {
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: flex-start;
  }
  .vendor-order-detail-page-info-value {
    text-align: left;
  }
}
@media (max-width: 480px) {
  .vendor-order-detail-page-page {
    padding: 16px 12px 40px;
  }
  .vendor-order-detail-page-order-header {
    padding: 27px 19px;
    border-radius: 22px;
  }
  .vendor-order-detail-page-order-title {
    gap: 18px;
  }
  .vendor-order-detail-page-order-title h1 {
    font-size: 1.75rem;
  }
  .vendor-order-detail-page-order-title p {
    font-size: .86rem;
  }
  .vendor-order-detail-page-order-meta-content {
    gap: 6px;
  }
  .vendor-order-detail-page-order-meta-divider {
    display: none;
  }
  .vendor-order-detail-page-order-date {
    width: 100%;
  }
  .vendor-order-detail-page-dashboard-card {
    padding: 18px;
    border-radius: 20px;
  }
  .vendor-order-detail-page-card-heading-icon, .vendor-order-detail-page-summary-header-icon, .vendor-order-detail-page-actions-header-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }
  .vendor-order-detail-page-card-heading h2, .vendor-order-detail-page-summary-header-content h2, .vendor-order-detail-page-actions-header-content h2 {
    font-size: 1.05rem;
  }
  .vendor-order-detail-page-card-header {
    margin-bottom: 20px;
  }
  .vendor-order-detail-page-customer-profile {
    padding: 16px;
    gap: 14px;
  }
  .vendor-order-detail-page-customer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    font-size: 1.35rem;
  }
  .vendor-order-detail-page-product-card {
    padding: 14px;
    border-radius: 18px;
  }
  .vendor-order-detail-page-product-image-wrapper {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }
  .vendor-order-detail-page-product-content h3 {
    font-size: .9rem;
  }
  .vendor-order-detail-page-product-content p {
    font-size: .75rem;
  }
  .vendor-order-detail-page-product-stats {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .vendor-order-detail-page-product-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    text-align: left;
    padding: 11px 13px;
  }
  .vendor-order-detail-page-product-stat span {
    margin: 0;
  }
  .vendor-order-detail-page-summary-item {
    padding: 12px;
  }
  .vendor-order-detail-page-summary-icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
  }
  .vendor-order-detail-page-summary-content small {
    font-size: .66rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-order-detail-page-btn::before, .vendor-order-detail-page-cancel-btn::before {
    animation: none;
  }
}
.vendor-order-detail-page-page {
  overflow-x: hidden;
}
.customer-order-summary-page {
  --cos-primary: #064e3b;
  --cos-primary-mid: #047857;
  --cos-primary-light: #065f46;
  --cos-primary-dark: #022c22;
  --cos-accent-gradient: linear-gradient(
        135deg,
        #064e3b 0%,
        #047857 45%,
        #065f46 72%,
        #064e3b 100%
    );
  --cos-primary-soft: #ecfdf5;
  --cos-primary-pale: #f0fdf4;
  --cos-text: #022c22;
  --cos-text-secondary: #065f46;
  --cos-text-muted: #166534;
  --cos-border: #cce7d9;
  --cos-border-strong: #9ed3b8;
  --cos-background: #f3faf6;
  --cos-white: #ffffff;
  --cos-warning: #9a5b00;
  --cos-warning-bg: #fff7df;
  --cos-warning-border: #f1d58b;
  --cos-danger: #a61b13;
  --cos-danger-bg: #fff0ee;
  --cos-danger-border: #efb5ae;
  --cos-info: #075985;
  --cos-info-bg: #eaf8ff;
  --cos-info-border: #9ed7ef;
  --cos-radius: 14px;
  --cos-radius-small: 9px;
  width: 100%;
  color: var(--cos-text);
}
.customer-order-summary-page h1, .customer-order-summary-page h2, .customer-order-summary-page h3, .customer-order-summary-page h4, .customer-order-summary-page .title, .customer-order-summary-page .heading {
  color: var(--cos-primary-dark);
  text-align: center;
}
.customer-order-summary-page-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.customer-order-summary-page-summary-card {
  position: relative;
  overflow: hidden;
  background: var(--cos-white);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius);
  padding: 22px;
  box-shadow: 0 4px 14px rgba(2, 44, 34, 0.045);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.customer-order-summary-page-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 120deg, transparent 20%, rgba(255, 255, 255, 0.5) 48%, transparent 72% );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.customer-order-summary-page-summary-card:hover {
  border-color: var(--cos-border-strong);
  background: var(--cos-primary-pale);
  box-shadow: 0 8px 24px rgba(4, 120, 87, 0.11), 0 0 0 3px rgba(4, 120, 87, 0.045);
}
.customer-order-summary-page-summary-card:hover::before {
  transform: translateX(120%);
}
.customer-order-summary-page-summary-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.customer-order-summary-page-summary-label {
  color: var(--cos-text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.customer-order-summary-page-summary-value {
  color: var(--cos-primary);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}
.customer-order-summary-page-table-card {
  background: var(--cos-white);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius);
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(2, 44, 34, 0.045);
}
.customer-order-summary-page-table-header {
  min-height: 76px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cos-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient( 180deg, #ffffff 0%, #f6fcf8 100% );
}
.customer-order-summary-page-table-header h2 {
  margin: 3px 0 0;
  color: var(--cos-primary-dark);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
}
.customer-order-summary-page-section-kicker {
  display: block;
  color: var(--cos-primary-mid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.customer-order-summary-page-view-all {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--cos-primary-mid);
  border-radius: 9px;
  background: var(--cos-accent-gradient);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.18);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}
.customer-order-summary-page-view-all::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -75%;
  width: 42%;
  height: 160%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.12) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.customer-order-summary-page-view-all:hover {
  background: var(--cos-accent-gradient);
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 7px 20px rgba(4, 120, 87, 0.27), 0 0 0 3px rgba(16, 185, 129, 0.1);
  filter: brightness(1.06);
}
.customer-order-summary-page-view-all:hover::before {
  left: 135%;
}
.customer-order-summary-page-attention-list {
  display: flex;
  flex-direction: column;
}
.customer-order-summary-page-attention-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--cos-border);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-order-summary-page-attention-card:last-child {
  border-bottom: 0;
}
.customer-order-summary-page-attention-card:hover {
  background: var(--cos-primary-soft);
  box-shadow: inset 4px 0 0 var(--cos-primary-mid);
}
.customer-order-summary-page-attention-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.customer-order-summary-page-order-id {
  color: var(--cos-primary-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.customer-order-summary-page-order-id:hover {
  color: var(--cos-primary-mid);
  text-decoration: underline;
}
.customer-order-summary-page-order-amount {
  color: var(--cos-primary);
  font-size: 14px;
  font-weight: 800;
}
.customer-order-summary-page-attention-status {
  display: flex;
  justify-content: flex-end;
}
.customer-order-summary-page-attention-action {
  display: flex;
  justify-content: flex-end;
}
.customer-order-summary-page-attention-action a, .customer-order-summary-page-recent-action a {
  position: relative;
  overflow: hidden;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cos-border-strong);
  border-radius: 9px;
  background: var(--cos-primary-soft);
  color: var(--cos-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.customer-order-summary-page-attention-action a::before, .customer-order-summary-page-recent-action a::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -85%;
  width: 45%;
  height: 170%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.1) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.customer-order-summary-page-attention-action a:hover, .customer-order-summary-page-recent-action a:hover {
  background: var(--cos-accent-gradient);
  border-color: var(--cos-primary-mid);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(4, 120, 87, 0.2), 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.customer-order-summary-page-attention-action a:hover::before, .customer-order-summary-page-recent-action a:hover::before {
  left: 135%;
}
.customer-order-summary-page-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent;
}
.customer-order-summary-page-status-pending {
  color: var(--cos-warning);
  background: var(--cos-warning-bg);
  border-color: var(--cos-warning-border);
}
.customer-order-summary-page-status-paid, .customer-order-summary-page-status-delivered {
  color: var(--cos-primary-dark);
  background: var(--cos-primary-soft);
  border-color: var(--cos-border-strong);
}
.customer-order-summary-page-status-on-the-way {
  color: var(--cos-info);
  background: var(--cos-info-bg);
  border-color: var(--cos-info-border);
}
.customer-order-summary-page-status-cancelled {
  color: var(--cos-danger);
  background: var(--cos-danger-bg);
  border-color: var(--cos-danger-border);
}
.customer-order-summary-page-recent-list {
  display: flex;
  flex-direction: column;
}
.customer-order-summary-page-recent-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(130px, 1fr) minmax(120px, auto) minmax(120px, auto) 40px;
  align-items: center;
  gap: 20px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--cos-border);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-order-summary-page-recent-card:last-child {
  border-bottom: 0;
}
.customer-order-summary-page-recent-card:hover {
  background: var(--cos-primary-soft);
  box-shadow: inset 4px 0 0 var(--cos-primary-mid);
}
.customer-order-summary-page-recent-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.customer-order-summary-page-order-date {
  color: var(--cos-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.customer-order-summary-page-recent-amount {
  min-width: 0;
}
.customer-order-summary-page-recent-payment, .customer-order-summary-page-recent-delivery {
  display: flex;
  align-items: center;
}
.customer-order-summary-page-recent-action {
  display: flex;
  justify-content: flex-end;
}
.customer-order-summary-page-mobile-label {
  display: none;
}
.customer-order-summary-page-empty-state {
  padding: 55px 20px;
  text-align: center;
}
.customer-order-summary-page-empty-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 13px;
  border-radius: 50%;
  background: var(--cos-primary-soft);
  border: 1px solid var(--cos-border-strong);
  color: var(--cos-primary);
  font-size: 21px;
  box-shadow: 0 5px 15px rgba(4, 120, 87, 0.1);
}
.customer-order-summary-page-empty-state h3 {
  margin: 0 0 6px;
  color: var(--cos-primary-dark);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.customer-order-summary-page-empty-state p {
  margin: 0;
  color: var(--cos-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.customer-order-summary-page-status-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.customer-order-summary-page-status-column {
  min-width: 0;
  border-right: 1px solid var(--cos-border);
  background: #ffffff;
}
.customer-order-summary-page-status-column:last-child {
  border-right: 0;
}
.customer-order-summary-page-status-column-header {
  min-height: 58px;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cos-border);
  background: linear-gradient( 180deg, #ffffff 0%, #f1faf5 100% );
}
.customer-order-summary-page-status-column-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.customer-order-summary-page-status-column-header h3 {
  margin: 0;
  color: var(--cos-primary-dark);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}
.customer-order-summary-page-status-column-header > span:last-child {
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cos-primary-soft);
  border: 1px solid var(--cos-border-strong);
  color: var(--cos-primary-dark);
  font-size: 11px;
  font-weight: 800;
}
.customer-order-summary-page-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}
.customer-order-summary-page-dot-pending {
  background: #d89a20;
  box-shadow: 0 0 0 4px rgba(216, 154, 32, 0.12);
}
.customer-order-summary-page-dot-on-the-way {
  background: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.11);
}
.customer-order-summary-page-dot-delivered {
  background: var(--cos-primary-mid);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.11);
}
.customer-order-summary-page-status-column-content {
  padding: 10px;
  min-height: 120px;
  background: #f8fdf9;
}
.customer-order-summary-page-mini-card {
  position: relative;
  overflow: hidden;
  display: block;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius-small);
  background: var(--cos-white);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(2, 44, 34, 0.035);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-order-summary-page-mini-card::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -90%;
  width: 40%;
  height: 160%;
  background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.08) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.customer-order-summary-page-mini-card:last-child {
  margin-bottom: 0;
}
.customer-order-summary-page-mini-card:hover {
  background: var(--cos-primary-pale);
  border-color: var(--cos-border-strong);
  box-shadow: 0 6px 16px rgba(4, 120, 87, 0.1), 0 0 0 2px rgba(4, 120, 87, 0.04);
}
.customer-order-summary-page-mini-card:hover::before {
  left: 135%;
}
.customer-order-summary-page-mini-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.customer-order-summary-page-mini-card-top strong {
  color: var(--cos-primary);
  font-size: 13px;
  font-weight: 800;
}
.customer-order-summary-page-mini-card-top span {
  color: var(--cos-text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.customer-order-summary-page-mini-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.customer-order-summary-page-column-empty {
  margin: 0;
  padding: 28px 12px;
  color: var(--cos-text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 1000px) {
  .customer-order-summary-page-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-order-summary-page-recent-card {
    grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(110px, auto) minmax(110px, auto) 40px;
    gap: 12px;
  }
  .customer-order-summary-page-status-columns {
    grid-template-columns: 1fr;
  }
  .customer-order-summary-page-status-column {
    border-right: 0;
    border-bottom: 1px solid var(--cos-border);
  }
  .customer-order-summary-page-status-column:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 700px) {
  .customer-order-summary-page-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .customer-order-summary-page-summary-card {
    padding: 16px;
    border-radius: 11px;
  }
  .customer-order-summary-page-summary-label {
    font-size: 11px;
  }
  .customer-order-summary-page-summary-value {
    font-size: 22px;
  }
  .customer-order-summary-page-table-card {
    margin-bottom: 14px;
    border-radius: 11px;
  }
  .customer-order-summary-page-table-header {
    min-height: 65px;
    padding: 14px 15px;
    flex-direction: column;
    gap: 9px;
  }
  .customer-order-summary-page-table-header h2 {
    font-size: 16px;
  }
  .customer-order-summary-page-attention-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px 15px;
  }
  .customer-order-summary-page-attention-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .customer-order-summary-page-attention-status {
    grid-column: 1;
    justify-content: flex-start;
  }
  .customer-order-summary-page-attention-action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .customer-order-summary-page-recent-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 13px;
    padding: 15px;
  }
  .customer-order-summary-page-recent-main {
    grid-column: 1;
  }
  .customer-order-summary-page-recent-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .customer-order-summary-page-recent-payment {
    grid-column: 1;
  }
  .customer-order-summary-page-recent-delivery {
    grid-column: 2;
    justify-content: flex-end;
  }
  .customer-order-summary-page-recent-action {
    display: none;
  }
  .customer-order-summary-page-mobile-label {
    display: inline;
    margin-right: 6px;
    color: var(--cos-text-secondary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .customer-order-summary-page-status-column-content {
    padding: 8px;
  }
  .customer-order-summary-page-status-column-header {
    padding: 13px 14px;
  }
}
@media (max-width: 430px) {
  .customer-order-summary-page-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .customer-order-summary-page-summary-card {
    padding: 14px;
  }
  .customer-order-summary-page-summary-value {
    font-size: 20px;
  }
  .customer-order-summary-page-view-all {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }
  .customer-order-summary-page-status-badge {
    font-size: 10px;
    padding: 4px 7px;
  }
  .customer-order-summary-page-order-amount {
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .customer-order-summary-page-summary-grid {
    gap: 8px;
  }
  .customer-order-summary-page-summary-card {
    padding: 12px 10px;
  }
  .customer-order-summary-page-summary-label {
    font-size: 10px;
  }
  .customer-order-summary-page-summary-value {
    font-size: 18px;
  }
  .customer-order-summary-page-attention-card {
    padding: 12px;
  }
  .customer-order-summary-page-recent-card {
    padding: 12px;
  }
  .customer-order-summary-page-status-column-header {
    padding: 11px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .customer-order-summary-page *, .customer-order-summary-page *::before, .customer-order-summary-page *::after {
    transition: none !important;
  }
}
:root {
  --vendor-green: #0F8A4B;
  --vendor-green-dark: #086338;
  --vendor-green-light: #EAF8F0;
  --vendor-green-soft: #F3FBF6;
  --vendor-accent: #22C55E;
  --vendor-text: #14213D;
  --vendor-text-light: #64748B;
  --vendor-text-muted: #94A3B8;
  --vendor-white: #FFFFFF;
  --vendor-background: #F5F8F6;
  --vendor-border: #E4ECE7;
  --vendor-danger: #DC2626;
  --vendor-danger-bg: #FEF2F2;
  --vendor-warning: #D97706;
  --vendor-warning-bg: #FFF7ED;
  --vendor-shadow: 0 20px 50px rgba(15,23,42,.07);
  --vendor-shadow-soft: 0 8px 30px rgba(15,23,42,.05);
  --vendor-transition: .35s cubic-bezier(.22,.61,.36,1);
}
.vendor-product-page *, .vendor-product-page *::before, .vendor-product-page *::after {
  box-sizing: border-box;
}
.vendor-product-page img {
  max-width: 100%;
  display: block;
}
.vendor-product-page button {
  font: inherit;
}
.vendor-product-page {
  min-height: 100vh;
  padding: 42px 32px 70px;
  background: radial-gradient( circle at 10% 0%, rgba(34,197,94,.08), transparent 32% ), radial-gradient( circle at 100% 15%, rgba(15,138,75,.07), transparent 35% ), linear-gradient( 180deg, #FAFCFB 0%, #F3F7F5 100% );
  overflow-x: hidden;
}
.vendor-product-page-container {
  width: min(1450px,100%);
  margin: 0 auto;
}
.vendor-product-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}
.vendor-product-header-content {
  max-width: 760px;
}
.vendor-product-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--vendor-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vendor-product-header h1 {
  margin: 0;
  color: var(--vendor-text);
  font-size: clamp( 2rem, 4vw, 3.25rem );
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.055em;
}
.vendor-product-header p {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--vendor-text-light);
  font-size: 1rem;
  line-height: 1.7;
}
.vendor-product-header-status {
  flex-shrink: 0;
}
.vendor-product-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.vendor-product-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.vendor-product-status.published {
  color: #15803D;
  background: #ECFDF3;
  border-color: #BBF7D0;
}
.vendor-product-status.published .status-dot {
  background: #22C55E;
}
.vendor-product-status.review {
  color: #B45309;
  background: #FFF7ED;
  border-color: #FED7AA;
}
.vendor-product-status.review .status-dot {
  background: #F59E0B;
}
.vendor-product-status.rejected {
  color: #B91C1C;
  background: #FEF2F2;
  border-color: #FECACA;
}
.vendor-product-status.rejected .status-dot {
  background: #EF4444;
}
.vendor-product-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 390px;
  gap: 30px;
  align-items: start;
}
.vendor-product-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vendor-product-image-section {
  padding: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  box-shadow: var(--vendor-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.vendor-product-image-wrapper {
  position: relative;
  width: 100%;
  height: clamp( 380px, 48vw, 620px );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: radial-gradient( circle at center, #ffffff 0%, #F7FAF8 75%, #EEF5F0 100% );
  border: 1px solid var(--vendor-border);
}
.vendor-product-image-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,138,75,.12);
  color: var(--vendor-green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(10px);
}
.vendor-product-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 28px;
  will-change: transform, opacity;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .32s ease;
  transform: translateX(0);
  opacity: 1;
}
.vendor-product-main-image.slide-out {
  transform: translateX(-35px);
  opacity: 0;
}
.vendor-product-main-image.slide-in {
  transform: translateX(0);
  opacity: 1;
}
.vendor-product-gallery {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.vendor-product-thumbnail {
  position: relative;
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  padding: 4px;
  border: 1px solid var(--vendor-border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
}
.vendor-product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  transition: transform .35s ease, opacity .25s ease;
}
.vendor-product-thumbnail:hover {
  border-color: rgba(15,138,75,.45);
  box-shadow: 0 7px 18px rgba(15,138,75,.12);
}
.vendor-product-thumbnail:hover img {
  transform: scale(1.04);
}
.vendor-product-thumbnail.active {
  border: 2px solid var(--vendor-green);
  box-shadow: 0 0 0 3px rgba(15,138,75,.10);
}
.vendor-product-card {
  position: relative;
  padding: 28px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(228,236,231,.9);
  border-radius: 24px;
  box-shadow: var(--vendor-shadow-soft);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.vendor-product-card:hover {
  border-color: rgba(15,138,75,.18);
  box-shadow: 0 14px 35px rgba(15,23,42,.07);
}
.vendor-product-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.vendor-product-heading-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--vendor-green);
  background: var(--vendor-green-light);
}
.vendor-product-card-heading span {
  display: block;
  margin-bottom: 3px;
  color: var(--vendor-text-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vendor-product-card-heading h2 {
  margin: 0;
  color: var(--vendor-text);
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.025em;
}
.vendor-product-description {
  margin: 0;
  color: var(--vendor-text-light);
  font-size: .98rem;
  line-height: 1.85;
}
.vendor-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.vendor-product-tags span {
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--vendor-green-dark);
  background: var(--vendor-green-soft);
  border: 1px solid #D5EFDE;
  font-size: .78rem;
  font-weight: 700;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.vendor-product-tags span:hover {
  background: var(--vendor-green-light);
  border-color: #B9E3C8;
  color: var(--vendor-green);
}
.vendor-product-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}
.vendor-product-price-card {
  background: linear-gradient( 145deg, #FFFFFF 0%, #F2FBF5 100% );
  border-color: #DCEFE2;
}
.vendor-product-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.vendor-product-price strong {
  display: block;
  width: 100%;
  color: var(--vendor-green-dark);
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.045em;
}
.vendor-product-old-price {
  color: var(--vendor-text-muted);
  font-size: .9rem;
  text-decoration: line-through;
}
.vendor-product-discount {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 7px;
  color: #15803D;
  background: #DCFCE7;
  font-size: .7rem;
  font-weight: 850;
}
.vendor-product-stock {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 17px;
}
.vendor-product-stock.available {
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
}
.vendor-product-stock.unavailable {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.vendor-product-stock-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 900;
}
.vendor-product-stock.available .vendor-product-stock-icon {
  color: #15803D;
  background: #DCFCE7;
}
.vendor-product-stock.unavailable .vendor-product-stock-icon {
  color: #B91C1C;
  background: #FEE2E2;
}
.vendor-product-stock strong {
  display: block;
  margin-bottom: 3px;
  color: var(--vendor-text);
  font-size: 1.1rem;
  font-weight: 850;
}
.vendor-product-stock span {
  color: var(--vendor-text-light);
  font-size: .78rem;
}
.vendor-product-status-list, .vendor-product-details {
  display: flex;
  flex-direction: column;
}
.vendor-product-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #EDF1EF;
}
.vendor-product-info-row:first-child {
  padding-top: 0;
}
.vendor-product-info-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.vendor-product-info-row span {
  color: var(--vendor-text-light);
  font-size: .82rem;
  font-weight: 600;
}
.vendor-product-info-row strong {
  max-width: 58%;
  color: var(--vendor-text);
  font-size: .84rem;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}
.text-success {
  color: #15803D !important;
}
.text-danger {
  color: #DC2626 !important;
}
.text-warning {
  color: #D97706 !important;
}
.text-muted {
  color: #64748B !important;
}
@media (max-width:1100px) {
  .vendor-product-layout {
    grid-template-columns: minmax(0,1fr) 340px;
  }
}
@media (max-width:900px) {
  .vendor-product-layout {
    grid-template-columns: 1fr;
  }
  .vendor-product-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
  }
}
@media (max-width:700px) {
  .vendor-product-page {
    padding: 28px 16px 50px;
  }
  .vendor-product-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .vendor-product-header h1 {
    font-size: 2rem;
  }
  .vendor-product-image-section {
    padding: 12px;
    border-radius: 22px;
  }
  .vendor-product-image-wrapper {
    height: 380px;
    border-radius: 17px;
  }
  .vendor-product-main-image {
    padding: 18px;
  }
  .vendor-product-sidebar {
    grid-template-columns: 1fr;
  }
  .vendor-product-card {
    padding: 22px;
    border-radius: 20px;
  }
}
@media (max-width:480px) {
  .vendor-product-page {
    padding: 22px 12px 40px;
  }
  .vendor-product-header h1 {
    font-size: 1.75rem;
  }
  .vendor-product-header p {
    font-size: .9rem;
  }
  .vendor-product-image-wrapper {
    height: 300px;
  }
  .vendor-product-thumbnail {
    flex-basis: 66px;
    width: 66px;
    height: 66px;
  }
  .vendor-product-price strong {
    font-size: 1.9rem;
  }
  .vendor-product-info-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .vendor-product-info-row strong {
    max-width: 100%;
    text-align: left;
  }
}
.vendor-product-thumbnail:focus-visible {
  outline: 3px solid rgba(15,138,75,.25);
  outline-offset: 3px;
}
@media (prefers-reduced-motion:reduce) {
  .vendor-product-main-image, .vendor-product-thumbnail, .vendor-product-thumbnail img, .vendor-product-card, .vendor-product-tags span {
    transition: none !important;
  }
}
.vendor-register-section {
  --vendor-green: #059669;
  --vendor-green-dark: #047857;
  --vendor-green-deep: #065f46;
  --vendor-green-soft: #ecfdf5;
  --vendor-green-light: #d1fae5;
  --vendor-green-border: #a7f3d0;
  --vendor-text: #17221b;
  --vendor-text-soft: #34443b;
  --vendor-muted: #6b7a72;
  --vendor-bg: #f5faf7;
  --vendor-card: #ffffff;
  --vendor-border: #e2ebe5;
  --vendor-input-border: #d4dfd9;
  --vendor-danger: #dc2626;
  --vendor-radius-sm: 10px;
  --vendor-radius-md: 14px;
  --vendor-radius-lg: 18px;
  --vendor-radius-xl: 24px;
  --vendor-shadow: 0 12px 40px rgba(22, 101, 52, 0.07);
  --vendor-shadow-soft: 0 5px 18px rgba(22, 101, 52, 0.06);
  width: 100%;
  min-height: 100vh;
  padding: clamp(40px, 6vw, 76px) 20px;
  background: radial-gradient( circle at 50% 0%, rgba(16, 185, 129, 0.10), transparent 34% ), linear-gradient( 180deg, #f8fcfa 0%, var(--vendor-bg) 100% );
  color: var(--vendor-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vendor-register-section *, .vendor-register-section *::before, .vendor-register-section *::after {
  box-sizing: border-box;
}
.vendor-register-section input, .vendor-register-section select, .vendor-register-section textarea, .vendor-register-section button {
  font: inherit;
}
.vendor-register-section button {
  -webkit-tap-highlight-color: transparent;
}
.vendor-register-container {
  width: min(100%, 1040px);
  margin-inline: auto;
}
.vendor-register-header {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}
.vendor-register-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 15px;
  border: 1px solid var(--vendor-green-border);
  border-radius: 999px;
  background: var(--vendor-green-soft);
  color: var(--vendor-green-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.vendor-register-badge svg {
  width: 15px;
  height: 15px;
}
.vendor-register-header h1 {
  margin: 0 0 13px;
  color: var(--vendor-text);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.vendor-register-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--vendor-muted);
  font-size: 15px;
  line-height: 1.7;
}
.vendor-register-card {
  position: relative;
  padding: clamp(22px, 4vw, 42px);
  background: var(--vendor-card);
  border: 1px solid var(--vendor-border);
  border-radius: var(--vendor-radius-xl);
  box-shadow: var(--vendor-shadow);
}
.vendor-register-form {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.vendor-form-section {
  padding-bottom: 34px;
  border-bottom: 1px solid #edf2ef;
}
.vendor-section-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}
.vendor-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--vendor-green-border);
  border-radius: 12px;
  background: var(--vendor-green-soft);
  color: var(--vendor-green-dark);
}
.vendor-section-icon svg {
  width: 20px;
  height: 20px;
}
.vendor-section-header h2 {
  margin: 0 0 4px;
  color: var(--vendor-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.vendor-section-header p {
  margin: 0;
  color: var(--vendor-muted);
  font-size: 13px;
  line-height: 1.5;
}
.vendor-form-fields, .vendor-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.vendor-form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vendor-form-group + .vendor-form-group {
  min-width: 0;
}
.vendor-form-group > label:not(.vendor-upload-box) {
  margin-bottom: 8px;
  color: var(--vendor-text-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}
.vendor-register-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vendor-register-section select, .vendor-register-section textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--vendor-input-border);
  border-radius: var(--vendor-radius-md);
  outline: none;
  background: #ffffff;
  color: var(--vendor-text);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.vendor-register-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"])::placeholder, .vendor-register-section textarea::placeholder {
  color: #9aa9a1;
}
.vendor-register-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, .vendor-register-section select:hover, .vendor-register-section textarea:hover {
  border-color: #9ccdb7;
  background: #fbfefc;
}
.vendor-register-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .vendor-register-section select:focus, .vendor-register-section textarea:focus {
  border-color: var(--vendor-green);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.10);
}
.vendor-register-section select {
  cursor: pointer;
}
.vendor-register-section textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.65;
}
.vendor-field-hint {
  margin-top: 7px;
  color: #819088;
  font-size: 12px;
  line-height: 1.5;
}
.vendor-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.vendor-upload-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 230px;
  padding: 24px;
  overflow: hidden;
  border: 1.5px dashed #a9c7b8;
  border-radius: var(--vendor-radius-lg);
  background: linear-gradient( 145deg, #f8fdf9, #f0faf4 );
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-upload-box:hover {
  border-color: var(--vendor-green);
  background: linear-gradient( 145deg, #f0fdf4, #ecfdf5 );
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.08);
}
.vendor-upload-box:focus-within {
  border-color: var(--vendor-green);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.10);
}
.vendor-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.vendor-upload-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.vendor-upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border: 1px solid var(--vendor-green-border);
  border-radius: 15px;
  background: #ffffff;
  color: var(--vendor-green);
}
.vendor-upload-icon svg {
  width: 25px;
  height: 25px;
}
.vendor-upload-content strong {
  color: var(--vendor-text);
  font-size: 15px;
  font-weight: 800;
}
.vendor-upload-content span {
  color: var(--vendor-green-dark);
  font-size: 12px;
  font-weight: 700;
}
.vendor-upload-content small {
  max-width: 220px;
  color: var(--vendor-muted);
  font-size: 11px;
  line-height: 1.5;
}
.vendor-upload-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #edf7f1;
}
.vendor-upload-box.has-image .vendor-upload-preview {
  display: block;
}
.vendor-upload-box.has-image .vendor-upload-content {
  display: none;
}
.vendor-terms-box {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--vendor-green-border);
  border-radius: var(--vendor-radius-md);
  background: var(--vendor-green-soft);
}
.vendor-terms-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #ffffff;
  color: var(--vendor-green-dark);
}
.vendor-terms-icon svg {
  width: 18px;
  height: 18px;
}
.vendor-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.vendor-terms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  accent-color: var(--vendor-green);
  cursor: pointer;
}
.vendor-terms-check span {
  color: #52635a;
  font-size: 12px;
  line-height: 1.6;
}
.vendor-register-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 2px;
}
.vendor-register-primary, .vendor-register-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-register-primary svg, .vendor-register-secondary svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.vendor-register-primary {
  min-width: 190px;
  border: 1px solid var(--vendor-green);
  background: var(--vendor-green);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.18);
}
.vendor-register-primary:hover {
  border-color: var(--vendor-green-dark);
  background: var(--vendor-green-dark);
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.25);
}
.vendor-register-primary:active {
  border-color: var(--vendor-green-deep);
  background: var(--vendor-green-deep);
  box-shadow: 0 3px 9px rgba(5, 150, 105, 0.18);
}
.vendor-register-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12), 0 6px 16px rgba(5, 150, 105, 0.18);
}
.vendor-register-secondary {
  border: 1px solid var(--vendor-green-border);
  background: #ffffff;
  color: var(--vendor-green-dark);
}
.vendor-register-secondary:hover {
  border-color: #6ee7b7;
  background: var(--vendor-green-soft);
  color: var(--vendor-green-deep);
  box-shadow: 0 5px 14px rgba(5, 150, 105, 0.08);
}
.vendor-register-secondary:active {
  border-color: #6ee7b7;
  background: var(--vendor-green-light);
}
.vendor-register-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.10);
}
.vendor-register-section .errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--vendor-danger);
  font-size: 12px;
  line-height: 1.5;
}
.vendor-register-section input.is-invalid, .vendor-register-section select.is-invalid, .vendor-register-section textarea.is-invalid {
  border-color: #ef4444;
}
.vendor-register-section input.is-invalid:focus, .vendor-register-section select.is-invalid:focus, .vendor-register-section textarea.is-invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}
@media (max-width: 800px) {
  .vendor-register-section {
    padding: 48px 16px;
  }
  .vendor-register-card {
    padding: 28px;
  }
  .vendor-form-fields, .vendor-form-grid, .vendor-upload-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .vendor-register-section {
    padding: 36px 13px;
  }
  .vendor-register-header {
    margin-bottom: 28px;
  }
  .vendor-register-header h1 {
    font-size: 30px;
  }
  .vendor-register-header p {
    font-size: 13px;
  }
  .vendor-register-card {
    padding: 20px;
    border-radius: 20px;
  }
  .vendor-register-form {
    gap: 30px;
  }
  .vendor-form-section {
    padding-bottom: 28px;
  }
  .vendor-section-header {
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .vendor-section-icon {
    width: 38px;
    height: 38px;
  }
  .vendor-section-header h2 {
    font-size: 17px;
  }
  .vendor-section-header p {
    font-size: 12px;
  }
  .vendor-upload-box {
    min-height: 210px;
  }
  .vendor-terms-box {
    padding: 14px;
  }
  .vendor-register-actions {
    flex-direction: column-reverse;
    width: 100%;
  }
  .vendor-register-primary, .vendor-register-secondary {
    width: 100%;
    min-height: 48px;
  }
}
@media (max-width: 400px) {
  .vendor-register-section {
    padding: 28px 10px;
  }
  .vendor-register-card {
    padding: 17px;
    border-radius: 18px;
  }
  .vendor-register-header h1 {
    font-size: 27px;
  }
  .vendor-register-badge {
    font-size: 10px;
  }
  .vendor-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vendor-form-group select, .vendor-form-group textarea {
    min-height: 48px;
    padding: 12px 13px;
    font-size: 13px;
  }
  .vendor-upload-box {
    min-height: 190px;
    padding: 18px;
  }
  .vendor-upload-icon {
    width: 48px;
    height: 48px;
  }
  .vendor-terms-icon {
    display: none;
  }
  .vendor-terms-check span {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-register-section *, .vendor-register-section *::before, .vendor-register-section *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.vendor-sales-page {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 34px 24px 60px;
  color: #064e3b;
  background: #ffffff;
}
.vendor-sales-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  text-align: center;
}
.vendor-sales-page-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.vendor-sales-page-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient( 135deg, #d1fae5 0%, #a7f3d0 50%, #bbf7d0 100% );
  color: #064e3b;
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.12);
}
.vendor-sales-page-title-icon svg {
  width: 27px;
  height: 27px;
}
.vendor-sales-page-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vendor-sales-page-title {
  margin: 0;
  color: #064e3b;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-align: center;
}
.vendor-sales-page-description {
  margin: 7px 0 0;
  color: #065f46;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}
.vendor-sales-page-dashboard-link, .vendor-sales-page-filter-button, .vendor-sales-page-pagination-button {
  position: relative;
  overflow: hidden;
}
.vendor-sales-page-dashboard-link::before, .vendor-sales-page-filter-button::before, .vendor-sales-page-pagination-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.08) 65%, transparent 100% );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.vendor-sales-page-dashboard-link:hover::before, .vendor-sales-page-filter-button:hover::before, .vendor-sales-page-pagination-button:hover::before {
  left: 150%;
}
.vendor-sales-page-dashboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid #047857;
  border-radius: 11px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  background-size: 200% 200%;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-position 0.35s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.vendor-sales-page-dashboard-link svg {
  width: 17px;
  height: 17px;
  position: relative;
  z-index: 2;
}
.vendor-sales-page-dashboard-link span {
  position: relative;
  z-index: 2;
}
.vendor-sales-page-dashboard-link:hover {
  background-position: 100% 50%;
  border-color: #059669;
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.vendor-sales-page-notice {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 21px 24px;
  border: 1px solid #a7f3d0;
  border-radius: 16px;
  background: linear-gradient( 135deg, #ecfdf5 0%, #dff9eb 50%, #ecfdf5 100% );
  box-shadow: 0 5px 18px rgba(6, 78, 59, 0.06);
}
.vendor-sales-page-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient( 135deg, #bbf7d0, #a7f3d0 );
  color: #064e3b;
}
.vendor-sales-page-notice-icon svg {
  width: 23px;
  height: 23px;
}
.vendor-sales-page-notice-content {
  text-align: center;
}
.vendor-sales-page-notice-content h3 {
  margin: 1px 0 5px;
  color: #064e3b;
  font-size: 16px;
  font-weight: 800;
}
.vendor-sales-page-notice-content p {
  max-width: 950px;
  margin: 0;
  color: #065f46;
  font-size: 14px;
  line-height: 1.6;
}
.vendor-sales-page-main-stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 215px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 36px 40px;
  border-radius: 21px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  background-size: 200% 200%;
  box-shadow: 0 16px 38px rgba(6, 78, 59, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: vendor-sales-gradient 8s ease infinite;
}
@keyframes vendor-sales-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.vendor-sales-page-main-stat::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -180px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}
.vendor-sales-page-main-stat::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: 100px;
  bottom: -160px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}
.vendor-sales-page-main-stat-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.vendor-sales-page-main-stat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #d1fae5;
  font-size: 15px;
  font-weight: 700;
}
.vendor-sales-page-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 0 5px rgba(134, 239, 172, 0.13), 0 0 15px rgba(134, 239, 172, 0.45);
}
.vendor-sales-page-main-stat-value {
  color: #ffffff;
  font-size: clamp(38px, 4.8vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
}
.vendor-sales-page-main-stat-content p {
  margin: 11px 0 0;
  color: #bbf7d0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.vendor-sales-page-main-stat-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-right: 20px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08);
}
.vendor-sales-page-main-stat-icon svg {
  width: 38px;
  height: 38px;
}
.vendor-sales-page-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.vendor-sales-page-stat-card {
  position: relative;
  overflow: hidden;
  padding: 23px;
  border: 1px solid #b7e4ca;
  border-radius: 16px;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 100% );
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-sales-page-stat-card:hover {
  border-color: #6ee7b7;
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.vendor-sales-page-stat-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 17px;
  color: #065f46;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}
.vendor-sales-page-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient( 135deg, #d1fae5, #a7f3d0 );
  color: #064e3b;
}
.vendor-sales-page-stat-icon svg {
  width: 20px;
  height: 20px;
}
.vendor-sales-page-stat-value {
  overflow: hidden;
  color: #064e3b;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}
.vendor-sales-page-stat-card p {
  margin: 8px 0 0;
  color: #047857;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.vendor-sales-page-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.vendor-sales-page-secondary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 21px;
  border: 1px solid #b7e4ca;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 4px 13px rgba(6, 78, 59, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-sales-page-secondary-card:hover {
  border-color: #6ee7b7;
  box-shadow: 0 6px 17px rgba(6, 78, 59, 0.08);
}
.vendor-sales-page-secondary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
}
.vendor-sales-page-secondary-icon svg {
  width: 22px;
  height: 22px;
}
.vendor-sales-page-secondary-content {
  min-width: 0;
}
.vendor-sales-page-secondary-content span {
  display: block;
  margin-bottom: 3px;
  color: #047857;
  font-size: 13px;
  font-weight: 700;
}
.vendor-sales-page-secondary-content strong {
  display: block;
  overflow: hidden;
  color: #064e3b;
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vendor-sales-page-secondary-content p {
  margin: 4px 0 0;
  color: #065f46;
  font-size: 12px;
  font-weight: 600;
}
.vendor-sales-page-pending-card {
  border-color: #f3d19b;
  background: linear-gradient( 145deg, #fffdf8, #fff8e9 );
}
.vendor-sales-page-pending-card .vendor-sales-page-secondary-icon {
  background: #fef3c7;
  color: #92400e;
}
.vendor-sales-page-confirmed-card {
  border-color: #a7e6bd;
  background: linear-gradient( 145deg, #ffffff, #f0fdf4 );
}
.vendor-sales-page-confirmed-card .vendor-sales-page-secondary-icon {
  background: #d1fae5;
  color: #064e3b;
}
.vendor-sales-page-cancelled-card {
  border-color: #efb5b5;
  background: linear-gradient( 145deg, #fffafa, #fef2f2 );
}
.vendor-sales-page-cancelled-card .vendor-sales-page-secondary-icon {
  background: #fee2e2;
  color: #991b1b;
}
.vendor-sales-page-records {
  overflow: hidden;
  border: 1px solid #b7e4ca;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(6, 78, 59, 0.055);
}
.vendor-sales-page-records-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 27px 26px;
  border-bottom: 1px solid #d1fae5;
  text-align: center;
}
.vendor-sales-page-records-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-sales-page-records-header h2 {
  margin: 0;
  color: #064e3b;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}
.vendor-sales-page-records-header p {
  margin: 5px 0 0;
  color: #065f46;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.vendor-sales-page-record-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #047857;
  font-size: 13px;
  font-weight: 700;
}
.vendor-sales-page-record-count svg {
  width: 17px;
  height: 17px;
  color: #047857;
}
.vendor-sales-page-filter {
  padding: 19px 26px;
  border-bottom: 1px solid #d1fae5;
  background: linear-gradient( 135deg, #f0fdf4, #ecfdf5 );
}
.vendor-sales-page-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 130px;
  gap: 10px;
}
.vendor-sales-page-search, .vendor-sales-page-select {
  position: relative;
  display: flex;
  align-items: center;
}
.vendor-sales-page-search svg, .vendor-sales-page-select svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #047857;
  pointer-events: none;
}
.vendor-sales-page-search input, .vendor-sales-page-select select {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid #a7d9bc;
  border-radius: 10px;
  outline: none;
  background: #ffffff;
  color: #064e3b;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-sales-page-search input::placeholder {
  color: #047857;
  opacity: 0.8;
}
.vendor-sales-page-search input:focus, .vendor-sales-page-select select:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}
.vendor-sales-page-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid #047857;
  border-radius: 10px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  background-size: 200% 200%;
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-position 0.35s ease, box-shadow 0.25s ease;
}
.vendor-sales-page-filter-button svg {
  width: 17px;
  height: 17px;
  position: relative;
  z-index: 2;
}
.vendor-sales-page-filter-button:hover {
  background-position: 100% 50%;
  box-shadow: 0 8px 21px rgba(6, 78, 59, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.vendor-sales-page-table-wrapper {
  width: 100%;
}
.vendor-sales-page-table-scroll {
  width: 100%;
  overflow-x: auto;
}
.vendor-sales-page-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}
.vendor-sales-page-table thead {
  background: linear-gradient( 135deg, #ecfdf5, #dff9eb );
}
.vendor-sales-page-table th {
  padding: 15px 20px;
  border-bottom: 1px solid #b7e4ca;
  color: #064e3b;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}
.vendor-sales-page-table td {
  padding: 18px 20px;
  border-bottom: 1px solid #dff5e7;
  color: #065f46;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}
.vendor-sales-page-table tbody tr {
  transition: background 0.15s ease;
}
.vendor-sales-page-table tbody tr:hover {
  background: #f0fdf4;
}
.vendor-sales-page-table tbody tr:last-child td {
  border-bottom: 0;
}
.vendor-sales-page-order {
  display: flex;
  align-items: center;
  gap: 11px;
}
.vendor-sales-page-order-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient( 135deg, #d1fae5, #a7f3d0 );
  color: #064e3b;
}
.vendor-sales-page-order-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-sales-page-order strong {
  color: #064e3b;
  font-size: 14px;
  font-weight: 800;
}
.vendor-sales-page-date {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vendor-sales-page-date strong {
  color: #065f46;
  font-size: 13px;
  font-weight: 700;
}
.vendor-sales-page-date span {
  color: #047857;
  font-size: 12px;
  font-weight: 600;
}
.vendor-sales-page-amount {
  color: #064e3b;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.vendor-sales-page-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.vendor-sales-page-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.vendor-sales-page-status-confirmed {
  background: #d1fae5;
  color: #064e3b;
}
.vendor-sales-page-status-confirmed > span {
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}
.vendor-sales-page-status-pending {
  background: #fef3c7;
  color: #92400e;
}
.vendor-sales-page-status-pending > span {
  background: #d97706;
}
.vendor-sales-page-status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}
.vendor-sales-page-status-cancelled > span {
  background: #dc2626;
}
.vendor-sales-page-confirmation {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}
.vendor-sales-page-confirmation svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #047857;
}
.vendor-sales-page-not-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #065f46;
  font-size: 12px;
  font-weight: 600;
}
.vendor-sales-page-not-confirmed svg {
  width: 15px;
  height: 15px;
  color: #047857;
}
.vendor-sales-page-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 65px 20px;
  text-align: center;
}
.vendor-sales-page-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient( 135deg, #d1fae5, #a7f3d0 );
  color: #064e3b;
}
.vendor-sales-page-empty-icon svg {
  width: 27px;
  height: 27px;
}
.vendor-sales-page-empty h3 {
  margin: 0;
  color: #064e3b;
  font-size: 17px;
  font-weight: 800;
}
.vendor-sales-page-empty p {
  margin: 6px 0 0;
  color: #047857;
  font-size: 14px;
  font-weight: 600;
}
.vendor-sales-page-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  border-top: 1px solid #d1fae5;
  background: #f8fffa;
}
.vendor-sales-page-pagination-info {
  color: #047857;
  font-size: 13px;
  font-weight: 600;
}
.vendor-sales-page-pagination-info strong {
  color: #064e3b;
  font-weight: 800;
}
.vendor-sales-page-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vendor-sales-page-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #047857;
  border-radius: 9px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  background-size: 200% 200%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.17);
  transition: background-position 0.35s ease, box-shadow 0.25s ease;
}
.vendor-sales-page-pagination-button svg {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 2;
}
.vendor-sales-page-pagination-button:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 17px rgba(6, 78, 59, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@media (max-width: 1000px) {
  .vendor-sales-page-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vendor-sales-page-secondary-grid {
    grid-template-columns: 1fr;
  }
  .vendor-sales-page-filter-form {
    grid-template-columns: 1fr 1fr;
  }
  .vendor-sales-page-filter-button {
    grid-column: 1 / -1;
  }
  .vendor-sales-page-header {
    flex-direction: column;
  }
  .vendor-sales-page-dashboard-link {
    width: auto;
  }
}
@media (max-width: 650px) {
  .vendor-sales-page {
    padding: 24px 15px 45px;
  }
  .vendor-sales-page-header {
    align-items: center;
    flex-direction: column;
    margin-bottom: 24px;
  }
  .vendor-sales-page-heading {
    flex-direction: column;
    gap: 12px;
  }
  .vendor-sales-page-title {
    font-size: 29px;
  }
  .vendor-sales-page-dashboard-link {
    width: 100%;
  }
  .vendor-sales-page-notice {
    align-items: center;
    flex-direction: column;
    padding: 19px;
  }
  .vendor-sales-page-main-stat {
    min-height: 185px;
    padding: 30px 22px;
  }
  .vendor-sales-page-main-stat-content {
    width: 100%;
  }
  .vendor-sales-page-main-stat-icon {
    display: none;
  }
  .vendor-sales-page-stat-grid {
    grid-template-columns: 1fr;
  }
  .vendor-sales-page-stat-card {
    padding: 21px;
  }
  .vendor-sales-page-records-header {
    align-items: center;
    flex-direction: column;
    padding: 22px 18px;
  }
  .vendor-sales-page-filter {
    padding: 16px;
  }
  .vendor-sales-page-filter-form {
    grid-template-columns: 1fr;
  }
  .vendor-sales-page-filter-button {
    grid-column: auto;
  }
  .vendor-sales-page-pagination {
    align-items: center;
    flex-direction: column;
    gap: 13px;
    text-align: center;
  }
  .vendor-sales-page-pagination-controls {
    width: 100%;
    justify-content: center;
  }
  .vendor-sales-page-secondary-card {
    padding: 19px;
  }
}
@media (max-width: 420px) {
  .vendor-sales-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .vendor-sales-page-title {
    font-size: 26px;
  }
  .vendor-sales-page-description {
    font-size: 14px;
  }
  .vendor-sales-page-main-stat {
    min-height: 175px;
    padding: 27px 18px;
  }
  .vendor-sales-page-main-stat-value {
    font-size: 34px;
  }
  .vendor-sales-page-stat-value {
    font-size: 24px;
  }
  .vendor-sales-page-notice-content p {
    font-size: 13px;
  }
  .vendor-sales-page-records-header h2 {
    font-size: 20px;
  }
  .vendor-sales-page-pagination-controls {
    flex-direction: column;
    width: 100%;
  }
  .vendor-sales-page-pagination-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-sales-page-main-stat {
    animation: none;
  }
  .vendor-sales-page-dashboard-link, .vendor-sales-page-filter-button, .vendor-sales-page-pagination-button, .vendor-sales-page-stat-card, .vendor-sales-page-secondary-card {
    transition: none;
  }
  .vendor-sales-page-dashboard-link::before, .vendor-sales-page-filter-button::before, .vendor-sales-page-pagination-button::before {
    display: none;
  }
}
.vendor-sales-page-dashboard-link:focus-visible, .vendor-sales-page-filter-button:focus-visible, .vendor-sales-page-pagination-button:focus-visible, .vendor-sales-page-search input:focus-visible, .vendor-sales-page-select select:focus-visible {
  outline: 3px solid rgba(16, 185, 129, 0.35);
  outline-offset: 2px;
}
.vendor-public-list-page {
  max-width: 1350px;
  margin: auto;
  padding: 35px 24px 70px;
}
.vendor-public-list-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 2rem;
  margin-bottom: 3.5rem;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient( 135deg, #ffffff 0%, #f8f9ff 45%, #eef2ff 100% );
  border: 1px solid rgba(79,70,229,.08);
  box-shadow: 0 20px 60px rgba(15,23,42,.08);
}
.vendor-public-list-header::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: -220px;
  left: -180px;
  border-radius: 50%;
  background: radial-gradient( rgba(99,102,241,.18), transparent 70% );
  filter: blur(30px);
}
.vendor-public-list-header::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -150px;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient( rgba(168,85,247,.18), transparent 70% );
  filter: blur(30px);
}
.vendor-public-list-header > * {
  position: relative;
  z-index: 2;
}
.vendor-public-list-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.3rem;
  margin-bottom: 1.4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  color: var(--primary);
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(79,70,229,.08);
}
.vendor-public-list-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0c662d;
  box-shadow: 0 0 10px #07752f;
}
.vendor-public-list-header h1 {
  max-width: 900px;
  margin-top: 3.5rem;
  font-size: clamp(2.6rem,5vw,4.5rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 1.2rem;
  color: #111827;
}
.vendor-public-list-header h1 span {
  background: linear-gradient( 135deg, #047935, #059c05, #027a66 );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vendor-public-list-header p {
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #23262c;
  margin: 0;
}
@media (max-width:768px) {
  .vendor-public-list-page {
    padding: 20px 15px 50px;
  }
  .vendor-public-list-header {
    padding: 2.5rem 1.2rem;
    margin-bottom: 2.5rem;
    border-radius: 24px;
  }
  .vendor-public-list-header::before {
    width: 350px;
    height: 350px;
  }
  .vendor-public-list-header::after {
    width: 300px;
    height: 300px;
  }
  .vendor-public-list-badge {
    padding: .65rem 1.1rem;
    margin-bottom: 1rem;
    font-size: .8rem;
  }
  .vendor-public-list-header h1 {
    letter-spacing: -1px;
    margin-bottom: 1rem;
  }
  .vendor-public-list-header p {
    font-size: 1rem;
    line-height: 1.7;
  }
}
.vendor-public-list-search {
  width: min(100%,950px);
  margin: clamp(2rem,5vw,4rem) auto;
  padding-inline: 1rem;
}
.vendor-public-list-search form {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.vendor-search-input {
  flex: 1;
  min-width: 0;
}
.vendor-search-input input {
  width: 100%;
  height: clamp(54px,6vw,64px);
  padding: 0 clamp(1rem,2vw,1.5rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  font-size: clamp(.9rem,2vw,1rem);
  font-weight: 500;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.vendor-search-input input::placeholder {
  color: var(--text-light);
}
.vendor-search-input input:hover {
  border-color: #cbd5e1;
}
.vendor-search-input input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,.12), 0 10px 25px rgba(79,70,229,.10);
}
.vendor-public-list-search button {
  flex-shrink: 0;
  height: clamp(54px,6vw,64px);
  padding: 0 clamp(1.25rem,3vw,2rem);
  border: none;
  border-radius: 18px;
  cursor: pointer;
  color: #fff;
  font-size: clamp(.9rem,2vw,.95rem);
  font-weight: 700;
  letter-spacing: .3px;
  background: linear-gradient( 135deg, var(--primary), var(--accent) );
  box-shadow: 0 10px 24px rgba(79,70,229,.22);
  transition: background .25s ease, box-shadow .25s ease, filter .25s ease;
}
.vendor-public-list-search button:hover {
  background: linear-gradient( 135deg, var(--primary-dark), var(--primary) );
  filter: brightness(1.03);
  box-shadow: 0 14px 32px rgba(79,70,229,.30);
}
.vendor-public-list-search button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(79,70,229,.18), 0 14px 32px rgba(79,70,229,.30);
}
.vendor-public-list-search button:active {
  filter: brightness(.97);
  box-shadow: 0 6px 16px rgba(79,70,229,.18);
}
@media (max-width:900px) {
  .vendor-public-list-search {
    padding-inline: .75rem;
  }
}
@media (max-width:768px) {
  .vendor-public-list-search {
    margin: 2.5rem auto;
  }
  .vendor-public-list-search form {
    gap: .75rem;
  }
}
@media (max-width:600px) {
  .vendor-public-list-search {
    padding-inline: .5rem;
  }
  .vendor-public-list-search form {
    flex-direction: column;
    align-items: stretch;
  }
  .vendor-search-input {
    width: 100%;
  }
  .vendor-search-input input {
    border-radius: 16px;
  }
  .vendor-public-list-search button {
    width: 100%;
    border-radius: 16px;
  }
}
@media (max-width:360px) {
  .vendor-public-list-search {
    padding-inline: .25rem;
  }
  .vendor-search-input input {
    padding: 0 .9rem;
    font-size: .88rem;
  }
  .vendor-public-list-search button {
    font-size: .88rem;
  }
}
.vendor-public-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,380px));
  justify-content: center;
  gap: 2rem;
  width: 100%;
}
.vendor-public-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 35px rgba(15,23,42,.07);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.vendor-public-list-card:hover {
  border-color: rgba(79,70,229,.18);
  box-shadow: 0 25px 60px rgba(15,23,42,.12);
}
.vendor-public-list-cover {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: linear-gradient( 135deg, #eef2ff, #f8fafc );
}
.vendor-public-list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.vendor-public-list-card:hover .vendor-public-list-cover img {
  transform: scale(1.06);
}
.vendor-public-list-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(15,23,42,.05), rgba(15,23,42,.55) );
}
.vendor-public-list-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  color: #059669;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.vendor-public-list-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px rgba(16,185,129,.7);
}
@media (max-width:768px) {
  .vendor-public-list-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .vendor-public-list-card {
    border-radius: 24px;
  }
  .vendor-public-list-cover {
    height: 190px;
  }
}
@media (max-width:420px) {
  .vendor-public-list-grid {
    padding: 0 .25rem;
  }
  .vendor-public-list-cover {
    height: 170px;
  }
}
.vendor-public-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px 28px;
}
.vendor-public-list-avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: -56px;
  margin-bottom: 20px;
  position: relative;
  z-index: 5;
}
.vendor-public-list-avatar {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 30px;
  border: 6px solid #ffffff;
  box-shadow: 0 18px 45px rgba(15,23,42,.18), 0 5px 15px rgba(15,23,42,.08);
}
.vendor-public-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-public-list-title {
  width: 100%;
  margin: 0;
  color: #111827;
  font-size: clamp(1.25rem,2vw,1.55rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.5px;
}
.vendor-public-list-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.vendor-public-list-school {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient( 135deg, #eef2ff, #f5f3ff );
  border: 1px solid rgba(79,70,229,.12);
  color: #032e19;
  font-size: .82rem;
  font-weight: 700;
}
.vendor-public-list-description {
  width: 100%;
  max-width: 300px;
  margin: 18px 0 24px;
  color: #1b1f25;
  font-size: .95rem;
  line-height: 1.75;
}
.vendor-public-list-divider {
  width: 100%;
  height: 1px;
  margin-top: auto;
  margin-bottom: 20px;
  background: linear-gradient( to right, transparent, #e5e7eb, transparent );
}
.vendor-public-list-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width:768px) {
  .vendor-public-list-content {
    padding: 0 24px 26px;
  }
}
@media (max-width:480px) {
  .vendor-public-list-content {
    padding: 0 18px 22px;
  }
  .vendor-public-list-avatar-wrapper {
    margin-top: -46px;
    margin-bottom: 16px;
  }
  .vendor-public-list-avatar {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    border-width: 5px;
  }
  .vendor-public-list-title {
    font-size: 1.2rem;
  }
  .vendor-public-list-description {
    max-width: 260px;
    font-size: .88rem;
    line-height: 1.65;
  }
}
.vendor-public-list-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  text-decoration: none;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: .2px;
  background: linear-gradient( 135deg, var(--primary), var(--accent) );
  box-shadow: 0 12px 28px rgba(79,70,229,.22);
  transition: background .25s ease, box-shadow .25s ease, filter .25s ease;
}
.vendor-public-list-button:hover {
  background: linear-gradient( 135deg, var(--primary-dark), var(--primary) );
  filter: brightness(1.05);
  box-shadow: 0 18px 35px rgba(79,70,229,.30);
}
.vendor-public-list-button:active {
  filter: brightness(.95);
  box-shadow: 0 8px 18px rgba(79,70,229,.20);
}
.vendor-public-list-empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 350px;
  padding: 3rem 2rem;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 15px 40px rgba(15,23,42,.06);
}
.vendor-public-list-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border-radius: 24px;
  background: #eef2ff;
  font-size: 2.5rem;
}
.vendor-public-list-empty h3 {
  margin: 0 0 .75rem;
  color: #111827;
  font-size: 1.4rem;
  font-weight: 800;
}
.vendor-public-list-empty p {
  max-width: 480px;
  margin: 0;
  color: #6b7280;
  line-height: 1.8;
  font-size: .95rem;
}
@media (min-width:1200px) {
  .vendor-public-list-grid {
    gap: 2.5rem;
  }
}
@media (max-width:900px) {
  .vendor-public-list-button {
    height: 50px;
  }
}
@media (max-width:600px) {
  .vendor-public-list-grid {
    width: 100%;
  }
  .vendor-public-list-button {
    height: 48px;
    font-size: .9rem;
  }
  .vendor-public-list-empty {
    min-height: 300px;
    padding: 2.5rem 1.5rem;
  }
}
@media (max-width:360px) {
  .vendor-public-list-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .vendor-public-list-title {
    font-size: 1.15rem;
  }
  .vendor-public-list-empty-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
}
.vendor-store-page {
  --vendor-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --vendor-dark: #064e3b;
  --vendor-green: #047857;
  --vendor-light: #ecfdf5;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 24px 80px;
  color: #111827;
}
.vendor-store-hero {
  position: relative;
}
.vendor-store-banner {
  position: relative;
  height: 430px;
  overflow: hidden;
  border-radius: 0 0 44px 44px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  isolation: isolate;
}
.vendor-store-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.03);
}
.vendor-store-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient( 180deg, rgba(6,78,59,.08) 0%, rgba(6,78,59,.16) 28%, rgba(4,78,59,.42) 55%, rgba(2,35,27,.92) 100% );
}
.vendor-store-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -80px 120px rgba(0,0,0,.10);
}
.vendor-banner-glow {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
  opacity: .6;
}
.vendor-banner-glow-one {
  width: 340px;
  height: 340px;
  top: -210px;
  right: 4%;
  background: radial-gradient( circle, rgba(52,211,153,.28), transparent 70% );
}
.vendor-banner-glow-two {
  width: 420px;
  height: 420px;
  left: -170px;
  bottom: -300px;
  background: radial-gradient( circle, rgba(16,185,129,.22), transparent 70% );
}
.vendor-store-banner-content {
  position: absolute;
  z-index: 5;
  left: 20px;
  right: 20px;
  bottom: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}
.vendor-store-banner-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem 1rem;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
.vendor-store-banner-label svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.vendor-store-banner-content h1 {
  max-width: 950px;
  margin: 18px 0 14px;
  padding: 0;
  color: #ffffff;
  font-size: clamp( 2.35rem, 5vw, 4.15rem );
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-align: center;
  text-shadow: 0 6px 26px rgba(0,0,0,.28);
}
.vendor-banner-school {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .48rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .1em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vendor-banner-school svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.vendor-store-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 2.8rem;
  max-width: 1160px;
  margin: -78px auto 0;
  padding: 2.7rem;
  background: #ffffff;
  border: 1px solid rgba(6,78,59,.13);
  border-radius: 36px;
  box-shadow: 0 30px 80px rgba(6,78,59,.14);
}
.vendor-store-header::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient( 135deg, rgba(6,78,59,.025), transparent 45%, rgba(4,120,87,.025) );
}
.vendor-store-logo-container {
  position: relative;
  flex-shrink: 0;
  padding: 8px;
}
.vendor-store-logo-ring {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 45px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  box-shadow: 0 24px 55px rgba(6,78,59,.24);
}
.vendor-store-logo-ring::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 43px;
  background: linear-gradient( 145deg, rgba(255,255,255,.48), transparent 32%, rgba(255,255,255,.08) );
  pointer-events: none;
}
.vendor-store-logo {
  position: relative;
  z-index: 2;
  width: 172px;
  height: 172px;
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 38px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.17);
}
.vendor-store-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}
.vendor-store-logo:hover img {
  transform: scale(1.045);
}
.vendor-store-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
}
.vendor-store-logo-placeholder svg {
  width: 58px;
  height: 58px;
  stroke-width: 1.6;
}
.vendor-store-details {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.vendor-store-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-store-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .42rem .82rem;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid rgba(6,78,59,.14);
  color: #064e3b;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-store-status > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #047857;
  box-shadow: 0 0 0 4px rgba(4,120,87,.12);
}
.vendor-store-heading h2 {
  margin: .8rem 0 .55rem;
  color: #064e3b;
  font-size: clamp( 2rem, 4vw, 3rem );
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -1.3px;
  text-align: center;
}
.vendor-store-school {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #047857;
  font-size: .94rem;
  font-weight: 850;
}
.vendor-store-school svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.5;
}
.vendor-store-bio-wrapper {
  max-width: 760px;
  margin: 1.75rem auto 0;
  text-align: center;
}
.vendor-store-bio-wrapper h3 {
  margin: 0 0 .65rem;
  color: #064e3b;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-store-bio {
  margin: 0;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
  word-break: normal;
}
.vendor-store-meta {
  display: grid;
  grid-template-columns: repeat( 3, minmax(0,1fr) );
  gap: .9rem;
  max-width: 900px;
  margin: 2rem auto 0;
}
.vendor-store-meta-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 76px;
  padding: .9rem 1rem;
  border: 1px solid rgba(6,78,59,.13);
  border-radius: 18px;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 100% );
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vendor-store-meta-card:hover {
  border-color: rgba(4,120,87,.35);
  background: linear-gradient( 145deg, #f0fdf4 0%, #ffffff 100% );
  box-shadow: 0 10px 28px rgba(6,78,59,.09);
}
.vendor-meta-icon {
  flex-shrink: 0;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--vendor-gradient);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(6,78,59,.18);
}
.vendor-meta-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.vendor-meta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vendor-meta-content span {
  color: #047857;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.vendor-meta-content strong {
  margin-top: .18rem;
  color: #111827;
  font-size: .87rem;
  font-weight: 850;
  line-height: 1.25;
}
.vendor-store-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.vendor-store-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-width: 235px;
  min-height: 54px;
  padding: 0 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  color: #ffffff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(6,78,59,.24);
  transition: filter .25s ease, box-shadow .25s ease;
}
.vendor-btn-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  transform: skewX(-23deg);
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.48), rgba(255,255,255,.08), transparent );
  pointer-events: none;
  transition: left .65s ease;
}
.vendor-store-btn:hover .vendor-btn-shine {
  left: 140%;
}
.vendor-store-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 17px 38px rgba(6,78,59,.30);
}
.vendor-store-btn:focus-visible {
  outline: 3px solid rgba(4,120,87,.25);
  outline-offset: 4px;
}
.vendor-store-btn svg, .vendor-btn-text {
  position: relative;
  z-index: 2;
}
.vendor-store-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}
.products-section {
  width: 100%;
}
.vendor-store-products-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 4rem 0 2.5rem;
}
.vendor-store-products-header h2 {
  position: relative;
  margin: 0;
  padding-bottom: .8rem;
  font-size: clamp( 1.8rem, 4vw, 2.5rem );
  font-weight: 900;
  letter-spacing: -1px;
  color: #064e3b;
  text-align: center;
}
.vendor-store-products-header h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
}
.vendor-store-products-header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .25rem;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient( 135deg, #ecfdf5, #d1fae5 );
  border: 1px solid rgba(6,78,59,.14);
  color: #064e3b;
  font-size: .9rem;
  font-weight: 750;
}
.vendor-store-products-header span::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: .55rem;
  border-radius: 50%;
  background: #047857;
  box-shadow: 0 0 12px rgba(4,120,87,.55);
}
@media (max-width: 950px) {
  .vendor-store-banner {
    height: 400px;
  }
  .vendor-store-header {
    flex-direction: column;
    align-items: center;
    margin-top: -72px;
    padding: 2.3rem;
    text-align: center;
  }
  .vendor-store-meta {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}
@media (max-width: 600px) {
  .vendor-store-page {
    padding: 0 14px 60px;
  }
  .vendor-store-banner {
    height: 315px;
    border-radius: 0 0 29px 29px;
  }
  .vendor-store-banner-content {
    left: 16px;
    right: 16px;
    bottom: 58px;
  }
  .vendor-store-banner-label {
    padding: .52rem .78rem;
    font-size: .65rem;
  }
  .vendor-store-banner-content h1 {
    margin: 16px 0 12px;
    font-size: 2.1rem;
    line-height: 1.05;
    letter-spacing: -1px;
  }
  .vendor-banner-school {
    padding: .42rem .72rem;
    font-size: .68rem;
    letter-spacing: .07em;
  }
  .vendor-store-header {
    gap: 1.3rem;
    margin-top: -60px;
    padding: 1.5rem;
    border-radius: 27px;
  }
  .vendor-store-logo-container {
    padding: 6px;
  }
  .vendor-store-logo-ring {
    width: 142px;
    height: 142px;
    border-radius: 33px;
  }
  .vendor-store-logo {
    width: 128px;
    height: 128px;
    border-width: 5px;
    border-radius: 28px;
  }
  .vendor-store-logo-placeholder svg {
    width: 45px;
    height: 45px;
  }
  .vendor-store-heading h2 {
    font-size: 1.85rem;
    line-height: 1.08;
  }
  .vendor-store-school {
    font-size: .8rem;
  }
  .vendor-store-bio-wrapper {
    margin-top: 1.4rem;
  }
  .vendor-store-bio-wrapper h3 {
    font-size: .8rem;
  }
  .vendor-store-bio {
    font-size: .92rem;
    line-height: 1.72;
  }
  .vendor-store-meta {
    width: 100%;
    gap: .7rem;
    margin-top: 1.5rem;
  }
  .vendor-store-meta-card {
    justify-content: flex-start;
    min-height: 70px;
    padding: .75rem .9rem;
  }
  .vendor-meta-icon {
    width: 40px;
    height: 40px;
  }
  .vendor-meta-content strong {
    font-size: .83rem;
  }
  .vendor-store-socials {
    width: 100%;
    margin-top: 1.5rem;
  }
  .vendor-store-btn {
    width: 100%;
    min-width: 0;
    min-height: 53px;
  }
  .vendor-store-products-header {
    margin: 3rem 0 2rem;
  }
  .vendor-store-products-header h2 {
    font-size: 1.7rem;
  }
  .vendor-store-products-header span {
    padding: .55rem 1rem;
    font-size: .85rem;
  }
}
@media (max-width: 380px) {
  .vendor-store-banner {
    height: 295px;
  }
  .vendor-store-banner-content {
    bottom: 53px;
  }
  .vendor-store-banner-content h1 {
    font-size: 1.85rem;
  }
  .vendor-store-header {
    padding: 1.25rem;
    border-radius: 24px;
  }
  .vendor-store-logo-ring {
    width: 128px;
    height: 128px;
    border-radius: 30px;
  }
  .vendor-store-logo {
    width: 115px;
    height: 115px;
    border-radius: 25px;
  }
  .vendor-store-heading h2 {
    font-size: 1.65rem;
  }
  .vendor-store-products-header h2 {
    font-size: 1.55rem;
  }
}
.vendor-share-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.vendor-share-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.vendor-share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 6, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.vendor-share-modal-content {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient( 145deg, rgba(20, 35, 29, 0.98), rgba(6, 17, 13, 0.98) );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.50);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.25s ease;
}
.vendor-share-modal.is-open .vendor-share-modal-content {
  transform: translateY(0) scale(1);
}
.vendor-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.vendor-share-modal-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.vendor-share-modal-header h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}
.vendor-share-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}
.vendor-share-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(90deg);
}
.vendor-share-modal-close svg {
  width: 20px;
  height: 20px;
}
.vendor-share-preview-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 18px;
}
.vendor-share-preview {
  width: min(100%, 390px);
  overflow: hidden;
  border-radius: 20px;
  background: #07130f;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
}
.vendor-share-preview canvas {
  display: block;
  width: 100%;
  height: auto;
}
.vendor-share-visit-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 17px;
  margin-bottom: 14px;
  border-radius: 15px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.2s ease, transform 0.2s ease;
}
.vendor-share-visit-link:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.vendor-share-visit-link span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
}
.vendor-share-visit-link svg {
  width: 18px;
  height: 18px;
}
.vendor-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vendor-share-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 82px;
  padding: 13px 8px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, background 0.2s ease;
}
.vendor-share-action:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}
.vendor-share-action svg {
  width: 22px;
  height: 22px;
}
.vendor-share-action span {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}
.vendor-share-status {
  min-height: 20px;
  margin: 14px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.58);
}
body.vendor-share-modal-open {
  overflow: hidden;
}
@media (max-width: 600px) {
  .vendor-share-modal {
    padding: 10px;
  }
  .vendor-share-modal-content {
    max-height: calc(100vh - 20px);
    padding: 18px;
    border-radius: 23px;
  }
  .vendor-share-modal-header {
    margin-bottom: 15px;
  }
  .vendor-share-modal-header h3 {
    font-size: 21px;
  }
  .vendor-share-preview {
    width: min( 100%, 350px );
    border-radius: 17px;
  }
  .vendor-share-actions {
    grid-template-columns: 1fr 1fr;
  }
  .vendor-share-action:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 380px) {
  .vendor-share-modal-content {
    padding: 14px;
  }
  .vendor-share-actions {
    gap: 7px;
  }
  .vendor-share-action {
    min-height: 74px;
  }
}
.wishlist-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 76px;
  padding: 14px 58px;
  box-sizing: border-box;
  background: linear-gradient( 135deg, #fff7f8, #fff1f3 55%, #ffffff );
  border-bottom: 1px solid #f3dfe3;
  box-shadow: 0 3px 12px rgba(180, 50, 70, 0.06);
}
.wishlist-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}
.wishlist-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient( 135deg, #d6334c, #f05b70 );
  color: #ffffff;
  box-shadow: 0 6px 15px rgba(214, 51, 76, 0.2);
}
.wishlist-header-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.wishlist-header h3 {
  margin: 0;
  color: #4a1720;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
}
.wishlist-close {
  position: absolute;
  top: 50%;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #efd7dc;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #70414a;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(100, 30, 40, 0.06);
}
.wishlist-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.wishlist-close:active {
  transform: translateY(-50%) scale(0.96);
}
@media (max-width: 480px) {
  .wishlist-header {
    min-height: 68px;
    padding: 12px 54px;
  }
  .wishlist-header-title {
    gap: 9px;
  }
  .wishlist-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .wishlist-header-icon svg {
    width: 17px;
    height: 17px;
  }
  .wishlist-header h3 {
    font-size: 1.05rem;
  }
  .wishlist-close {
    right: 12px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
  }
  .wishlist-close svg {
    width: 17px;
    height: 17px;
  }
}
.wishlist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wishlist-item:hover {
  background: #f8fafc;
  border-color: #d1d5db;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}
.wishlist-item-img {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 14px;
  transition: background 0.25s ease;
}
.wishlist-item:hover .wishlist-item-img {
  background: #e2e8f0;
}
.wishlist-item-info {
  flex: 1;
}
.wishlist-item-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: #080b13;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.wishlist-item-info p {
  font-size: 14px;
  font-weight: 700;
  color: #065f1a;
  opacity: 0.85;
}
.move-cart {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  background: linear-gradient( 135deg, #111827, #4f46e5 );
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(79,70,229,0.18);
  transition: box-shadow 0.25s ease, filter 0.25s ease, transform 0.15s ease;
}
.move-cart:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 18px rgba(79,70,229,0.25);
}
.move-cart:active {
  transform: scale(0.95);
}
.remove-wishlist {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.remove-wishlist svg {
  stroke: #ef4444;
  transition: stroke 0.25s ease, transform 0.2s ease;
}
.remove-wishlist:hover {
  background: #fef2f2;
  border-color: #fecaca;
  box-shadow: 0 4px 12px rgba(239,68,68,0.15);
}
.remove-wishlist:hover svg {
  stroke: #dc2626;
  transform: rotate(8deg);
}
.remove-wishlist:active {
  transform: scale(0.94);
}
.heart-filled {
  fill: currentColor;
  color: #ef4444;
}
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-flex;
}
.htmx-request .wishlist-icon {
  display: none;
}
.wishlist-loading {
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.htmx-indicator {
  display: none;
}
.htmx-request .move-text {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline;
}
:root {
  --studentsquare-footer-accent: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --studentsquare-footer-bg: #ffffff;
  --studentsquare-footer-surface: linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fcfa 50%,
            #edf8f2 100%
        );
  --studentsquare-footer-surface-hover: linear-gradient(
            145deg,
            #ffffff 0%,
            #f2fcf6 48%,
            #e5f6ec 100%
        );
  --studentsquare-footer-title: #022c22;
  --studentsquare-footer-text: #12372c;
  --studentsquare-footer-green: #047857;
  --studentsquare-footer-deep: #064e3b;
  --studentsquare-footer-border: #cce9da;
  --studentsquare-footer-border-strong: #9dd5ba;
  --studentsquare-footer-shadow: 0 8px 24px rgba(6, 78, 59, 0.07),
        0 2px 7px rgba(6, 78, 59, 0.035);
}
.studentsquare-admin-dashboard-footer {
  position: relative;
  width: 100%;
  min-height: 126px;
  margin-top: 24px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--studentsquare-footer-bg);
  border: 1px solid var(--studentsquare-footer-border);
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: var(--studentsquare-footer-shadow);
}
.studentsquare-admin-dashboard-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--studentsquare-footer-accent);
}
.studentsquare-admin-dashboard-footer::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100% );
  pointer-events: none;
}
.studentsquare-admin-dashboard-footer-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.studentsquare-admin-dashboard-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  text-align: center;
}
.studentsquare-admin-dashboard-footer-mark {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--studentsquare-footer-accent);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(6, 78, 59, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
}
.studentsquare-admin-dashboard-footer-mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.studentsquare-admin-dashboard-footer-mark svg {
  position: relative;
  z-index: 2;
  width: 23px;
  height: 23px;
  color: #ffffff;
  stroke-width: 2.15;
}
.studentsquare-admin-dashboard-footer-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.studentsquare-admin-dashboard-footer-title {
  display: block;
  color: var(--studentsquare-footer-title);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
}
.studentsquare-admin-dashboard-footer-subtitle {
  display: block;
  color: var(--studentsquare-footer-text);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  text-align: left;
}
.studentsquare-admin-dashboard-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 15px;
  background: var(--studentsquare-footer-surface);
  border: 1px solid var(--studentsquare-footer-border);
  border-radius: 13px;
  color: var(--studentsquare-footer-text);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 5px 15px rgba(6, 78, 59, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.studentsquare-admin-dashboard-footer-meta:hover {
  background: var(--studentsquare-footer-surface-hover);
  border-color: var(--studentsquare-footer-border-strong);
  box-shadow: 0 9px 22px rgba(6, 78, 59, 0.09), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: none;
}
.studentsquare-admin-dashboard-footer-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--studentsquare-footer-green);
  font-weight: 750;
}
.studentsquare-admin-dashboard-footer-status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  background: #047857;
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.10);
}
.studentsquare-admin-dashboard-footer-divider {
  color: var(--studentsquare-footer-green);
  font-size: 12px;
  font-weight: 800;
}
.studentsquare-admin-dashboard-footer-meta > span:last-child {
  color: var(--studentsquare-footer-text);
  font-weight: 650;
}
@media (max-width: 850px) {
  .studentsquare-admin-dashboard-footer {
    min-height: 150px;
    padding: 25px 24px;
  }
  .studentsquare-admin-dashboard-footer-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    text-align: center;
  }
  .studentsquare-admin-dashboard-footer-brand {
    justify-content: center;
  }
  .studentsquare-admin-dashboard-footer-copy {
    align-items: center;
    text-align: center;
  }
  .studentsquare-admin-dashboard-footer-title, .studentsquare-admin-dashboard-footer-subtitle {
    text-align: center;
  }
  .studentsquare-admin-dashboard-footer-meta {
    justify-content: center;
  }
}
@media (max-width: 520px) {
  .studentsquare-admin-dashboard-footer {
    min-height: 185px;
    margin-top: 18px;
    padding: 24px 18px;
    border-radius: 17px;
  }
  .studentsquare-admin-dashboard-footer-inner {
    gap: 20px;
  }
  .studentsquare-admin-dashboard-footer-brand {
    flex-direction: column;
    gap: 11px;
  }
  .studentsquare-admin-dashboard-footer-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .studentsquare-admin-dashboard-footer-mark svg {
    width: 22px;
    height: 22px;
  }
  .studentsquare-admin-dashboard-footer-title {
    font-size: 14px;
  }
  .studentsquare-admin-dashboard-footer-subtitle {
    font-size: 11px;
  }
  .studentsquare-admin-dashboard-footer-meta {
    width: 100%;
    padding: 12px 10px;
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
    line-height: 1.5;
    box-sizing: border-box;
  }
  .studentsquare-admin-dashboard-footer-status {
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .studentsquare-admin-dashboard-footer {
    padding: 22px 14px;
  }
  .studentsquare-admin-dashboard-footer-meta {
    flex-direction: column;
    gap: 5px;
  }
  .studentsquare-admin-dashboard-footer-divider {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-admin-dashboard-footer-meta {
    transition: none;
  }
}
:root {
  --admin-header-green-950: #022c22;
  --admin-header-green-900: #064e3b;
  --admin-header-green-800: #065f46;
  --admin-header-green-700: #047857;
  --admin-header-green-gradient: linear-gradient(
        135deg,
        #064e3b 0%,
        #047857 45%,
        #065f46 72%,
        #064e3b 100%
    );
  --admin-header-green-light: #d1fae5;
  --admin-header-green-soft: #ecfdf5;
  --admin-header-green-pale: #f0fdf4;
  --admin-header-white: #ffffff;
  --admin-header-surface: #ffffff;
  --admin-header-surface-green: #f0fdf4;
  --admin-header-text: #064e3b;
  --admin-header-text-strong: #022c22;
  --admin-header-text-white: #ffffff;
  --admin-header-text-green: #047857;
  --admin-header-border: #a7f3d0;
  --admin-header-border-strong: #6ee7b7;
  --admin-header-shadow: 0 4px 14px rgba(6, 78, 59, 0.08),
    0 12px 32px rgba(6, 78, 59, 0.06);
  --admin-header-button-shadow: 0 4px 12px rgba(6, 78, 59, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --admin-header-radius-sm: 10px;
  --admin-header-radius-md: 13px;
  --admin-header-radius-lg: 17px;
  --admin-header-radius-xl: 20px;
}
.admin-dashboard-header {
  position: relative;
  z-index: 100;
  width: 100%;
  min-height: 88px;
  background: var(--admin-header-surface);
  border-bottom: 1px solid var(--admin-header-border);
  box-shadow: var(--admin-header-shadow);
  color: var(--admin-header-text);
}
.admin-dashboard-header-inner {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.15fr) minmax(520px, 1.8fr);
  align-items: center;
  gap: 22px;
  padding: 12px 28px;
}
.admin-dashboard-header-brand-area {
  min-width: 0;
  display: flex;
  align-items: center;
}
.admin-dashboard-header-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
  padding: 6px 8px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--admin-header-radius-md);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.admin-dashboard-header-brand:hover {
  background: var(--admin-header-green-pale);
  box-shadow: inset 0 0 0 1px var(--admin-header-border);
  opacity: 1;
}
.admin-dashboard-header-brand:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.24);
  outline-offset: 3px;
}
.admin-dashboard-header-brand-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--admin-header-radius-md);
  background: var(--admin-header-white);
  border: 1px solid var(--admin-header-border);
  box-shadow: var(--admin-header-button-shadow);
}
.admin-dashboard-header-brand-mark img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.admin-dashboard-header-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.admin-dashboard-header-brand-title {
  display: block;
  color: var(--admin-header-green-950);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.45px;
  white-space: nowrap;
}
.admin-dashboard-header-brand-subtitle {
  display: block;
  margin-top: 4px;
  color: var(--admin-header-green-700);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.admin-dashboard-header-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-dashboard-header-heading-label {
  display: block;
  color: var(--admin-header-green-700);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.admin-dashboard-header-heading-title {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  color: var(--admin-header-green-950);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.45px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dashboard-header-right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.admin-dashboard-console {
  position: relative;
  min-width: 122px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 12px;
  overflow: hidden;
  color: var(--admin-header-green-900);
  text-decoration: none;
  background: var(--admin-header-white);
  border: 1px solid var(--admin-header-border);
  border-radius: var(--admin-header-radius-md);
  box-shadow: var(--admin-header-button-shadow);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.admin-dashboard-console::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) );
  opacity: 0.75;
}
.admin-dashboard-console:hover {
  transform: none;
  color: var(--admin-header-green-950);
  background: var(--admin-header-green-pale);
  border-color: var(--admin-header-border-strong);
  box-shadow: 0 5px 16px rgba(6, 78, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.admin-dashboard-console-admin.is-active {
  color: var(--admin-header-text-white);
  background: var(--admin-header-green-gradient);
  border-color: var(--admin-header-green-900);
  box-shadow: 0 5px 16px rgba(6, 78, 59, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.admin-dashboard-console-admin.is-active:hover {
  color: var(--admin-header-text-white);
  background: var(--admin-header-green-gradient);
  border-color: var(--admin-header-green-900);
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.admin-dashboard-console-icon {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--admin-header-green-soft);
  border: 1px solid var(--admin-header-border);
}
.admin-dashboard-console-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--admin-header-green-800);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-dashboard-console-admin.is-active .admin-dashboard-console-icon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.admin-dashboard-console-admin.is-active .admin-dashboard-console-icon svg {
  stroke: var(--admin-header-text-white);
}
.admin-dashboard-console-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.admin-dashboard-console-label {
  display: block;
  color: var(--admin-header-green-700);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.admin-dashboard-console-copy strong {
  display: block;
  margin-top: 4px;
  color: var(--admin-header-green-950);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.admin-dashboard-console-admin.is-active .admin-dashboard-console-label, .admin-dashboard-console-admin.is-active .admin-dashboard-console-copy strong {
  color: var(--admin-header-text-white);
}
.admin-dashboard-header-profile {
  min-width: 165px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 6px 10px 6px 7px;
  background: var(--admin-header-green-pale);
  border: 1px solid var(--admin-header-border);
  border-radius: var(--admin-header-radius-md);
  box-shadow: var(--admin-header-button-shadow);
}
.admin-dashboard-header-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--admin-header-text-white);
  background: var(--admin-header-green-gradient);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 3px 8px rgba(6, 78, 59, 0.18);
}
.admin-dashboard-header-profile-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.admin-dashboard-header-profile-copy strong {
  display: block;
  overflow: hidden;
  color: var(--admin-header-green-950);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dashboard-header-profile-copy span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--admin-header-green-700);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dashboard-console:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
@media (max-width: 1250px) {
  .admin-dashboard-header-inner {
    grid-template-columns: minmax(175px, 1fr) minmax(180px, 1fr) minmax(470px, 1.7fr);
    gap: 14px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .admin-dashboard-console {
    min-width: 108px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .admin-dashboard-header-profile {
    min-width: 145px;
  }
}
@media (max-width: 1050px) {
  .admin-dashboard-header {
    min-height: 82px;
  }
  .admin-dashboard-header-inner {
    min-height: 82px;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 10px 16px;
  }
  .admin-dashboard-header-heading {
    order: 2;
  }
  .admin-dashboard-header-brand-area {
    order: 1;
  }
  .admin-dashboard-header-right {
    order: 3;
  }
  .admin-dashboard-header-profile-copy {
    display: none;
  }
  .admin-dashboard-header-profile {
    min-width: auto;
    width: 50px;
    height: 50px;
    padding: 5px;
  }
  .admin-dashboard-console {
    min-width: auto;
    width: 50px;
    height: 50px;
    padding: 5px;
  }
  .admin-dashboard-console-copy {
    display: none;
  }
  .admin-dashboard-console-icon {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 700px) {
  .admin-dashboard-header {
    min-height: auto;
  }
  .admin-dashboard-header-inner {
    min-height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand profile" "heading heading" "navigation navigation";
    gap: 10px;
    padding: 11px 13px 12px;
  }
  .admin-dashboard-header-brand-area {
    grid-area: brand;
  }
  .admin-dashboard-header-heading {
    grid-area: heading;
    padding: 7px 0 5px;
  }
  .admin-dashboard-header-right {
    grid-area: navigation;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-dashboard-header-profile {
    grid-area: profile;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border-radius: 11px;
  }
  .admin-dashboard-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 9px;
  }
  .admin-dashboard-header-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .admin-dashboard-header-brand-mark img {
    width: 29px;
    height: 29px;
  }
  .admin-dashboard-header-brand-title {
    font-size: 14px;
  }
  .admin-dashboard-header-brand-subtitle {
    font-size: 8px;
  }
  .admin-dashboard-header-heading-label {
    font-size: 8px;
  }
  .admin-dashboard-header-heading-title {
    max-width: 90%;
    font-size: 16px;
  }
  .admin-dashboard-console {
    width: 100%;
    min-height: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
  }
  .admin-dashboard-console-copy {
    display: flex;
    align-items: center;
  }
}
@media (max-width: 430px) {
  .admin-dashboard-header-inner {
    padding: 9px 10px 10px;
  }
  .admin-dashboard-header-brand-copy {
    display: none;
  }
  .admin-dashboard-header-brand {
    padding: 3px;
  }
  .admin-dashboard-header-brand-mark {
    width: 39px;
    height: 39px;
  }
  .admin-dashboard-header-heading {
    padding-top: 4px;
  }
  .admin-dashboard-header-heading-title {
    font-size: 15px;
  }
  .admin-dashboard-console {
    min-height: 46px;
    height: 46px;
  }
  .admin-dashboard-console-icon {
    width: 30px;
    height: 30px;
  }
  .admin-dashboard-console-copy strong {
    font-size: 10px;
  }
}
@media (max-width: 330px) {
  .admin-dashboard-header-heading-title {
    max-width: 210px;
  }
  .admin-dashboard-console {
    gap: 6px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .admin-dashboard-console-icon {
    width: 27px;
    height: 27px;
  }
  .admin-dashboard-console-copy strong {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-dashboard-header-brand, .admin-dashboard-console {
    transition: none;
  }
}
.admin-page-product-detail-page-messages {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.admin-page-product-detail-page-message {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d7e5dd;
  border-radius: 16px;
  color: #173d2c;
  box-shadow: 0 8px 24px rgba(13, 56, 38, 0.07), 0 2px 6px rgba(13, 56, 38, 0.04);
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  animation: admin-page-product-detail-page-message-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.admin-page-product-detail-page-message.is-closing {
  animation: admin-page-product-detail-page-message-exit 0.28s ease forwards;
  pointer-events: none;
}
.admin-page-product-detail-page-message-accent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: #0d3826;
}
.admin-page-product-detail-page-message-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e8f3ed;
  color: #0d3826;
}
.admin-page-product-detail-page-message-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.admin-page-product-detail-page-message-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-page-product-detail-page-message-title {
  display: block;
  color: #0d3826;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.admin-page-product-detail-page-message-text {
  display: block;
  color: #244c3b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.admin-page-product-detail-page-message-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #edf4ef;
  color: #173d2c;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.admin-page-product-detail-page-message-close:hover {
  background: #dcebe2;
  color: #0d3826;
  transform: scale(1.05);
}
.admin-page-product-detail-page-message-close:active {
  transform: scale(0.94);
}
.admin-page-product-detail-page-message-close:focus-visible {
  outline: 3px solid rgba(13, 56, 38, 0.18);
  outline-offset: 2px;
}
.admin-page-product-detail-page-message-close svg {
  width: 17px;
  height: 17px;
}
.admin-page-product-detail-page-message-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #0d3826;
  transform-origin: left center;
  animation: admin-page-product-detail-page-message-timer 5000ms linear forwards;
}
.admin-page-product-detail-page-message.success {
  border-color: #b8d8c5;
}
.admin-page-product-detail-page-message.success .admin-page-product-detail-page-message-accent {
  background: #19713f;
}
.admin-page-product-detail-page-message.success .admin-page-product-detail-page-message-icon {
  background: #e4f4e9;
  color: #176b3a;
}
.admin-page-product-detail-page-message.success .admin-page-product-detail-page-message-timer {
  background: #19713f;
}
.admin-page-product-detail-page-message.error {
  border-color: #e4bcbc;
}
.admin-page-product-detail-page-message.error .admin-page-product-detail-page-message-accent {
  background: #b52f2f;
}
.admin-page-product-detail-page-message.error .admin-page-product-detail-page-message-icon {
  background: #fceaea;
  color: #a52a2a;
}
.admin-page-product-detail-page-message.error .admin-page-product-detail-page-message-timer {
  background: #b52f2f;
}
.admin-page-product-detail-page-message.warning {
  border-color: #e5d4aa;
}
.admin-page-product-detail-page-message.warning .admin-page-product-detail-page-message-accent {
  background: #9a730d;
}
.admin-page-product-detail-page-message.warning .admin-page-product-detail-page-message-icon {
  background: #fff5dc;
  color: #85620a;
}
.admin-page-product-detail-page-message.warning .admin-page-product-detail-page-message-timer {
  background: #9a730d;
}
.admin-page-product-detail-page-message.info {
  border-color: #bfd6e5;
}
.admin-page-product-detail-page-message.info .admin-page-product-detail-page-message-accent {
  background: #23658a;
}
.admin-page-product-detail-page-message.info .admin-page-product-detail-page-message-icon {
  background: #e9f3f9;
  color: #205d80;
}
.admin-page-product-detail-page-message.info .admin-page-product-detail-page-message-timer {
  background: #23658a;
}
@keyframes admin-page-product-detail-page-message-enter {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes admin-page-product-detail-page-message-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 200px;
    margin-bottom: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -6px;
  }
}
@keyframes admin-page-product-detail-page-message-timer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (max-width: 700px) {
  .admin-page-product-detail-page-messages {
    padding: 0 14px;
    margin-bottom: 20px;
    gap: 10px;
  }
  .admin-page-product-detail-page-message {
    align-items: flex-start;
    gap: 11px;
    padding: 14px 14px 16px;
    border-radius: 14px;
  }
  .admin-page-product-detail-page-message-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px;
  }
  .admin-page-product-detail-page-message-icon svg {
    width: 18px;
    height: 18px;
  }
  .admin-page-product-detail-page-message-title {
    font-size: 13px;
  }
  .admin-page-product-detail-page-message-text {
    font-size: 13px;
    line-height: 1.45;
  }
  .admin-page-product-detail-page-message-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
  }
  .admin-page-product-detail-page-message-close svg {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 420px) {
  .admin-page-product-detail-page-messages {
    padding: 0 10px;
  }
  .admin-page-product-detail-page-message {
    gap: 9px;
    padding: 13px 12px 15px;
  }
  .admin-page-product-detail-page-message-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .admin-page-product-detail-page-message-close {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-product-detail-page-message {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .admin-page-product-detail-page-message-timer {
    animation: none;
  }
}
:root {
  --admin-nav-accent-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --admin-nav-page-bg: #f4faf7;
  --admin-nav-card-bg: #ffffff;
  --admin-nav-title: #022c22;
  --admin-nav-heading: #064e3b;
  --admin-nav-text: #12372c;
  --admin-nav-text-strong: #0b2f24;
  --admin-nav-text-green: #047857;
  --admin-nav-border: #cce9da;
  --admin-nav-border-strong: #9dd5ba;
  --admin-nav-button-bg: linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fcfa 48%,
            #edf8f2 100%
        );
  --admin-nav-button-hover: linear-gradient(
            145deg,
            #ffffff 0%,
            #f2fcf6 45%,
            #e4f6eb 100%
        );
  --admin-nav-shadow: 0 10px 28px rgba(6, 78, 59, 0.07);
  --admin-nav-shadow-hover: 0 14px 32px rgba(6, 78, 59, 0.13);
  --admin-nav-radius: 20px;
  --admin-nav-button-radius: 14px;
}
.admin-page-buttons-wrapper {
  width: 100%;
  padding: 28px;
  background: linear-gradient( 180deg, #f8fcfa 0%, #f1f9f5 100% );
  box-sizing: border-box;
}
.admin-page-buttons-card {
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 32px;
  background: var(--admin-nav-card-bg);
  border: 1px solid var(--admin-nav-border);
  border-radius: var(--admin-nav-radius);
  box-shadow: var(--admin-nav-shadow);
  overflow: hidden;
  box-sizing: border-box;
}
.admin-page-buttons-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--admin-nav-accent-gradient);
}
.admin-page-buttons-card::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
.admin-page-buttons-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.admin-page-buttons-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-page-buttons-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: var(--admin-nav-accent-gradient);
  border-radius: 17px;
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.admin-page-buttons-icon svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.2;
}
.admin-page-buttons-heading-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.admin-page-buttons-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-bottom: 9px;
  padding: 6px 12px;
  border: 1px solid #a9ddc3;
  border-radius: 999px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #e4f7ec 100% );
  color: #047857;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.admin-page-buttons-title {
  margin: 0;
  color: var(--admin-nav-title);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
}
.admin-page-buttons-description {
  max-width: 680px;
  margin: 10px auto 0;
  color: var(--admin-nav-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.admin-page-buttons-divider {
  width: 100%;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient( 90deg, transparent 0%, #bfe4d1 18%, #82c7a7 50%, #bfe4d1 82%, transparent 100% );
}
.admin-page-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
.admin-page-buttons-link {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px 15px;
  background: var(--admin-nav-button-bg);
  border: 1px solid var(--admin-nav-border);
  border-radius: var(--admin-nav-button-radius);
  color: var(--admin-nav-text-strong);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 5px 16px rgba(6, 78, 59, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.admin-page-buttons-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 1), transparent );
  pointer-events: none;
}
.admin-page-buttons-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient( 90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) );
  pointer-events: none;
}
.admin-page-buttons-link svg {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #047857;
  stroke-width: 2.15;
  transition: color 180ms ease;
}
.admin-page-buttons-link span {
  position: relative;
  z-index: 2;
  color: inherit;
  text-align: center;
}
.admin-page-buttons-link:hover {
  background: var(--admin-nav-button-hover);
  border-color: #8bcdb0;
  color: #064e3b;
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: none;
}
.admin-page-buttons-link:hover svg {
  color: #064e3b;
  transform: none;
}
.admin-page-buttons-link:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 3px;
  border-color: #047857;
}
.admin-page-buttons-link:active {
  background: var(--admin-nav-button-bg);
  color: var(--admin-nav-text-strong);
  transform: none;
}
.admin-page-buttons-link:active svg {
  color: #047857;
  transform: none;
}
@media (max-width: 1450px) {
  .admin-page-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .admin-page-buttons-card {
    padding: 28px;
  }
  .admin-page-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .admin-page-buttons-wrapper {
    padding: 20px;
  }
  .admin-page-buttons-card {
    padding: 24px;
  }
  .admin-page-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .admin-page-buttons-link {
    min-height: 60px;
  }
}
@media (max-width: 560px) {
  .admin-page-buttons-wrapper {
    padding: 14px;
  }
  .admin-page-buttons-card {
    padding: 20px 16px;
    border-radius: 17px;
  }
  .admin-page-buttons-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  .admin-page-buttons-icon svg {
    width: 24px;
    height: 24px;
  }
  .admin-page-buttons-title {
    font-size: 24px;
  }
  .admin-page-buttons-description {
    font-size: 13px;
  }
  .admin-page-buttons-divider {
    margin: 22px 0;
  }
  .admin-page-buttons {
    grid-template-columns: 1fr;
  }
  .admin-page-buttons-link {
    min-height: 58px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-buttons-link, .admin-page-buttons-link svg {
    transition: none;
  }
}
:root {
  --admin-dashboard-page-header-forest-950: #062519;
  --admin-dashboard-page-header-forest-900: #083b27;
  --admin-dashboard-page-header-forest-800: #0b5638;
  --admin-dashboard-page-header-forest-700: #0c7048;
  --admin-dashboard-page-header-emerald-700: #087a4b;
  --admin-dashboard-page-header-emerald-600: #09965e;
  --admin-dashboard-page-header-emerald-500: #12aa6b;
  --admin-dashboard-page-header-emerald-400: #35c486;
  --admin-dashboard-page-header-sage-50: #f8fbf9;
  --admin-dashboard-page-header-sage-100: #f0f7f2;
  --admin-dashboard-page-header-sage-200: #e5efe7;
  --admin-dashboard-page-header-sage-300: #d2e2d6;
  --admin-dashboard-page-header-sage-400: #b7cfbe;
  --admin-dashboard-page-header-lime: #c8f36b;
  --admin-dashboard-page-header-lime-soft: #f1f8dc;
  --admin-dashboard-page-header-white: #ffffff;
  --admin-dashboard-page-header-background: #f5f8f6;
  --admin-dashboard-page-header-surface-soft: #fbfdfb;
  --admin-dashboard-page-header-text: #10261c;
  --admin-dashboard-page-header-text-strong: #071d13;
  --admin-dashboard-page-header-text-soft: #53685d;
  --admin-dashboard-page-header-text-muted: #7f9086;
  --admin-dashboard-page-header-border: #d9e5dc;
  --admin-dashboard-page-header-border-soft: #e8efe9;
  --admin-dashboard-page-header-shadow: 0 2px 10px rgba(7, 43, 27, 0.025),
        0 10px 30px rgba(7, 43, 27, 0.03);
  --admin-dashboard-page-header-radius: 22px;
}
.admin-dashboard-page-header {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 44px 34px;
  border: 1px solid var(--admin-dashboard-page-header-border);
  border-radius: var(--admin-dashboard-page-header-radius);
  background: linear-gradient( 135deg, var(--admin-dashboard-page-header-white) 0%, var(--admin-dashboard-page-header-surface-soft) 45%, #f2f8f4 100% );
  box-shadow: var(--admin-dashboard-page-header-shadow);
  text-align: center;
  isolation: isolate;
}
.admin-dashboard-page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(18, 170, 107, 0.09) 0%, rgba(18, 170, 107, 0.035) 38%, transparent 72% );
  pointer-events: none;
}
.admin-dashboard-page-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -90px;
  left: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(200, 243, 107, 0.13) 0%, rgba(200, 243, 107, 0.045) 40%, transparent 72% );
  pointer-events: none;
}
.admin-dashboard-page-header-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.admin-dashboard-page-header-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 15px;
  padding: 7px 13px;
  border: 1px solid var(--admin-dashboard-page-header-sage-200);
  border-radius: 999px;
  background: var(--admin-dashboard-page-header-sage-100);
  color: var(--admin-dashboard-page-header-emerald-700);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-dashboard-page-header-title {
  margin: 0;
  color: var(--admin-dashboard-page-header-forest-950);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.6px;
}
.admin-dashboard-page-header-description {
  width: 100%;
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--admin-dashboard-page-header-text-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
}
.admin-dashboard-page-header-content::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: var(--admin-dashboard-page-header-emerald-500);
}
@media (min-width: 1400px) {
  .admin-dashboard-page-header {
    padding: 50px 40px;
  }
  .admin-dashboard-page-header-title {
    font-size: 50px;
  }
  .admin-dashboard-page-header-description {
    font-size: 15px;
  }
}
@media (max-width: 1200px) {
  .admin-dashboard-page-header {
    padding: 40px 30px;
  }
}
@media (max-width: 900px) {
  .admin-dashboard-page-header {
    padding: 34px 26px;
    border-radius: 20px;
  }
  .admin-dashboard-page-header-title {
    font-size: 38px;
  }
  .admin-dashboard-page-header-description {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.7;
  }
}
@media (max-width: 640px) {
  .admin-dashboard-page-header {
    padding: 30px 20px;
    border-radius: 18px;
  }
  .admin-dashboard-page-header-kicker {
    margin-bottom: 13px;
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: 0.8px;
  }
  .admin-dashboard-page-header-title {
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.9px;
  }
  .admin-dashboard-page-header-description {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
  }
  .admin-dashboard-page-header-content::after {
    width: 36px;
    height: 3px;
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .admin-dashboard-page-header {
    padding: 25px 16px;
    border-radius: 16px;
  }
  .admin-dashboard-page-header-title {
    font-size: 27px;
  }
  .admin-dashboard-page-header-description {
    font-size: 12px;
    line-height: 1.65;
  }
  .admin-dashboard-page-header::before {
    width: 190px;
    height: 190px;
    top: -70px;
    right: -70px;
  }
  .admin-dashboard-page-header::after {
    width: 160px;
    height: 160px;
    bottom: -60px;
    left: -60px;
  }
}
@media (max-width: 360px) {
  .admin-dashboard-page-header {
    padding: 22px 14px;
  }
  .admin-dashboard-page-header-title {
    font-size: 25px;
  }
  .admin-dashboard-page-header-description {
    font-size: 11.5px;
  }
  .admin-dashboard-page-header-kicker {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-dashboard-page-header, .admin-dashboard-page-header::before, .admin-dashboard-page-header::after {
    transition: none;
  }
}
:root {
  --ss-green-950: #022c22;
  --ss-green-900: #064e3b;
  --ss-green-800: #065f46;
  --ss-green-700: #047857;
  --ss-green-600: #059669;
  --ss-accent-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --ss-green-50: #f0fdf4;
  --ss-green-100: #ecfdf5;
  --ss-green-200: #d1fae5;
  --ss-green-300: #a7f3d0;
  --ss-green-400: #6ee7b7;
  --ss-background: #f5faf7;
  --ss-background-deep: #edf7f1;
  --ss-white: #ffffff;
  --ss-text: #12372c;
  --ss-text-strong: #022c22;
  --ss-text-dark: #0b2f24;
  --ss-text-accent: #047857;
  --ss-text-white: #ffffff;
  --ss-border: #c5e3d2;
  --ss-border-strong: #6ee7b7;
  --ss-border-soft: #dceee3;
  --ss-success: #047857;
  --ss-success-background: #ecfdf5;
  --ss-success-border: #a7f3d0;
  --ss-danger: #b42335;
  --ss-danger-background: #fff1f2;
  --ss-danger-border: #fecdd3;
  --ss-shadow: 0 2px 5px rgba(6, 78, 59, 0.035),
        0 8px 20px rgba(6, 78, 59, 0.045);
  --ss-shadow-hover: 0 3px 8px rgba(6, 78, 59, 0.045),
        0 12px 28px rgba(6, 78, 59, 0.07);
  --ss-radius: 16px;
  --ss-radius-small: 10px;
}
.studentsquare-admin-dashboard {
  width: 100%;
  min-height: 100%;
  padding: 34px 34px 48px;
  box-sizing: border-box;
  background: linear-gradient( 180deg, #fbfdfb 0%, var(--ss-background) 55%, var(--ss-background-deep) 100% );
  color: var(--ss-text);
}
.studentsquare-admin-dashboard-heading {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.studentsquare-admin-dashboard-heading-inner {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.studentsquare-admin-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  padding: 7px 13px;
  border: 1px solid var(--ss-border-strong);
  border-radius: 999px;
  background: var(--ss-green-100);
  color: var(--ss-green-700);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 1.15px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.studentsquare-admin-dashboard-heading h2 {
  width: 100%;
  margin: 0;
  color: var(--ss-green-950);
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.1px;
  text-align: center;
}
.studentsquare-admin-dashboard-heading p {
  width: 100%;
  max-width: 680px;
  margin: 11px auto 0;
  color: var(--ss-text-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.studentsquare-admin-dashboard-grid {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.studentsquare-admin-dashboard-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  color: var(--ss-text-dark);
  box-shadow: var(--ss-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.studentsquare-admin-dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ss-accent-gradient);
  z-index: 5;
}
.studentsquare-admin-dashboard-card::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.98);
  pointer-events: none;
  z-index: 5;
}
.studentsquare-admin-dashboard-card:hover {
  transform: none;
  border-color: var(--ss-border-strong);
  box-shadow: var(--ss-shadow-hover);
  background: #ffffff;
}
.studentsquare-admin-dashboard-card-top {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}
.studentsquare-admin-dashboard-card-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--ss-border-strong);
  border-radius: 11px;
  background: linear-gradient( 145deg, #ffffff 0%, #f0fdf4 100% );
  color: var(--ss-green-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 2px 7px rgba(6, 78, 59, 0.045);
}
.studentsquare-admin-dashboard-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}
.studentsquare-admin-dashboard-growth {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.studentsquare-admin-dashboard-growth svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 2.5;
}
.studentsquare-admin-dashboard-growth-positive {
  color: var(--ss-success);
  background: var(--ss-success-background);
  border: 1px solid var(--ss-success-border);
}
.studentsquare-admin-dashboard-growth-negative {
  color: var(--ss-danger);
  background: var(--ss-danger-background);
  border: 1px solid var(--ss-danger-border);
}
.studentsquare-admin-dashboard-growth-neutral {
  color: var(--ss-green-800);
  background: var(--ss-green-100);
  border: 1px solid var(--ss-border-strong);
}
.studentsquare-admin-dashboard-card-main {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.studentsquare-admin-dashboard-card-title {
  width: 100%;
  margin: 0 0 10px;
  color: var(--ss-text-dark);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.studentsquare-admin-dashboard-card-value {
  width: 100%;
  margin: 0;
  color: var(--ss-green-700);
  font-size: clamp(30px, 2.25vw, 38px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.15px;
  text-align: center;
  overflow-wrap: anywhere;
}
.studentsquare-admin-dashboard-card-value {
  font-variant-numeric: tabular-nums;
}
.studentsquare-admin-dashboard-card-description {
  width: 100%;
  max-width: 320px;
  margin: 11px auto 0;
  color: var(--ss-text-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}
.studentsquare-admin-dashboard-card-context {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 20px;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  border-top: 1px solid var(--ss-border-soft);
  text-align: center;
}
.studentsquare-admin-dashboard-card-current {
  color: var(--ss-green-800);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
.studentsquare-admin-dashboard-card-comparison {
  color: var(--ss-text-dark);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}
.studentsquare-admin-dashboard-card-separator {
  color: var(--ss-green-600);
  font-size: 11px;
  font-weight: 900;
}
.studentsquare-admin-dashboard-card-meta {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--ss-border-soft);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.studentsquare-admin-dashboard-card-meta-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(197, 227, 210, 0.6);
}
.studentsquare-admin-dashboard-card-meta-item:last-child {
  border-bottom: none;
}
.studentsquare-admin-dashboard-card-meta-label {
  color: var(--ss-text-dark);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
.studentsquare-admin-dashboard-card-meta-value {
  color: var(--ss-green-700);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.studentsquare-admin-dashboard-empty {
  position: relative;
  width: 100%;
  max-width: 1640px;
  min-height: 220px;
  margin: 0 auto;
  padding: 38px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  text-align: center;
}
.studentsquare-admin-dashboard-empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ss-accent-gradient);
}
.studentsquare-admin-dashboard-empty::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(255, 255, 255, 0.98);
}
.studentsquare-admin-dashboard-empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ss-border-strong);
  border-radius: 13px;
  background: var(--ss-green-100);
  color: var(--ss-green-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.studentsquare-admin-dashboard-empty-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}
.studentsquare-admin-dashboard-empty-title {
  margin: 15px 0 0;
  color: var(--ss-green-950);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.studentsquare-admin-dashboard-empty-text {
  max-width: 520px;
  margin: 7px auto 0;
  color: var(--ss-text-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}
.studentsquare-admin-dashboard-card:focus-within {
  border-color: var(--ss-green-700);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10), var(--ss-shadow);
}
@media (max-width: 1440px) {
  .studentsquare-admin-dashboard {
    padding-left: 28px;
    padding-right: 28px;
  }
  .studentsquare-admin-dashboard-grid {
    gap: 16px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 22px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 35px;
  }
}
@media (max-width: 1200px) {
  .studentsquare-admin-dashboard {
    padding: 30px 22px 42px;
  }
  .studentsquare-admin-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .studentsquare-admin-dashboard-heading {
    margin-bottom: 28px;
  }
  .studentsquare-admin-dashboard-heading h2 {
    font-size: 32px;
  }
  .studentsquare-admin-dashboard-heading p {
    font-size: 13px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 22px;
  }
  .studentsquare-admin-dashboard-card-title {
    font-size: 15px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 34px;
  }
  .studentsquare-admin-dashboard-card-description {
    font-size: 12px;
  }
  .studentsquare-admin-dashboard-card-current, .studentsquare-admin-dashboard-card-comparison {
    font-size: 11px;
  }
  .studentsquare-admin-dashboard-card-meta-label, .studentsquare-admin-dashboard-card-meta-value {
    font-size: 11px;
  }
}
@media (max-width: 900px) {
  .studentsquare-admin-dashboard {
    padding: 26px 18px 38px;
  }
  .studentsquare-admin-dashboard-heading {
    margin-bottom: 25px;
  }
  .studentsquare-admin-dashboard-heading h2 {
    font-size: 30px;
  }
  .studentsquare-admin-dashboard-heading p {
    font-size: 13px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 21px;
  }
  .studentsquare-admin-dashboard-card-top {
    margin-bottom: 22px;
  }
  .studentsquare-admin-dashboard-card-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 32px;
  }
}
@media (max-width: 760px) {
  .studentsquare-admin-dashboard {
    padding: 24px 15px 34px;
  }
  .studentsquare-admin-dashboard-heading {
    margin-bottom: 23px;
  }
  .studentsquare-admin-dashboard-eyebrow {
    margin-bottom: 10px;
    padding: 7px 12px;
    font-size: 10px;
  }
  .studentsquare-admin-dashboard-heading h2 {
    font-size: 28px;
    letter-spacing: -0.9px;
  }
  .studentsquare-admin-dashboard-heading p {
    margin-top: 9px;
    font-size: 12px;
  }
  .studentsquare-admin-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 21px;
    border-radius: 15px;
  }
  .studentsquare-admin-dashboard-card-top {
    margin-bottom: 21px;
  }
  .studentsquare-admin-dashboard-card-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .studentsquare-admin-dashboard-card-icon svg {
    width: 21px;
    height: 21px;
  }
  .studentsquare-admin-dashboard-growth {
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
  }
  .studentsquare-admin-dashboard-growth svg {
    width: 13px;
    height: 13px;
  }
  .studentsquare-admin-dashboard-card-title {
    font-size: 15px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 32px;
  }
  .studentsquare-admin-dashboard-card-description {
    max-width: 340px;
    font-size: 12px;
  }
  .studentsquare-admin-dashboard-card-context {
    margin-top: 18px;
    padding-top: 13px;
  }
  .studentsquare-admin-dashboard-card-current, .studentsquare-admin-dashboard-card-comparison {
    font-size: 10px;
  }
  .studentsquare-admin-dashboard-card-meta {
    margin-top: 16px;
    padding-top: 13px;
  }
  .studentsquare-admin-dashboard-card-meta-item {
    min-height: 33px;
    padding: 7px 0;
  }
  .studentsquare-admin-dashboard-card-meta-label, .studentsquare-admin-dashboard-card-meta-value {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .studentsquare-admin-dashboard {
    padding: 21px 12px 30px;
  }
  .studentsquare-admin-dashboard-heading {
    margin-bottom: 21px;
  }
  .studentsquare-admin-dashboard-eyebrow {
    margin-bottom: 9px;
    padding: 6px 10px;
    font-size: 9px;
  }
  .studentsquare-admin-dashboard-heading h2 {
    font-size: 25px;
    line-height: 1.12;
  }
  .studentsquare-admin-dashboard-heading p {
    font-size: 11px;
    line-height: 1.55;
  }
  .studentsquare-admin-dashboard-grid {
    gap: 11px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 19px;
    border-radius: 14px;
  }
  .studentsquare-admin-dashboard-card-top {
    gap: 10px;
    margin-bottom: 20px;
  }
  .studentsquare-admin-dashboard-card-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 10px;
  }
  .studentsquare-admin-dashboard-card-icon svg {
    width: 20px;
    height: 20px;
  }
  .studentsquare-admin-dashboard-growth {
    min-height: 28px;
    padding: 0 9px;
    font-size: 9px;
  }
  .studentsquare-admin-dashboard-card-title {
    font-size: 14px;
    margin-bottom: 9px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 29px;
    letter-spacing: -0.9px;
  }
  .studentsquare-admin-dashboard-card-description {
    margin-top: 10px;
    font-size: 11px;
  }
  .studentsquare-admin-dashboard-card-context {
    margin-top: 16px;
    padding-top: 12px;
    gap: 6px;
  }
  .studentsquare-admin-dashboard-card-current, .studentsquare-admin-dashboard-card-comparison {
    font-size: 9px;
  }
  .studentsquare-admin-dashboard-card-separator {
    font-size: 9px;
  }
  .studentsquare-admin-dashboard-card-meta {
    margin-top: 14px;
    padding-top: 12px;
  }
  .studentsquare-admin-dashboard-card-meta-item {
    min-height: 31px;
    gap: 10px;
    padding: 6px 0;
  }
  .studentsquare-admin-dashboard-card-meta-label, .studentsquare-admin-dashboard-card-meta-value {
    font-size: 9px;
  }
  .studentsquare-admin-dashboard-empty {
    min-height: 185px;
    padding: 30px 18px;
    border-radius: 14px;
  }
  .studentsquare-admin-dashboard-empty-icon {
    width: 52px;
    height: 52px;
  }
  .studentsquare-admin-dashboard-empty-title {
    font-size: 15px;
  }
  .studentsquare-admin-dashboard-empty-text {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .studentsquare-admin-dashboard {
    padding-left: 10px;
    padding-right: 10px;
  }
  .studentsquare-admin-dashboard-heading h2 {
    font-size: 23px;
  }
  .studentsquare-admin-dashboard-heading p {
    font-size: 10px;
  }
  .studentsquare-admin-dashboard-card {
    padding: 17px;
  }
  .studentsquare-admin-dashboard-card-title {
    font-size: 13px;
  }
  .studentsquare-admin-dashboard-card-value {
    font-size: 27px;
  }
  .studentsquare-admin-dashboard-card-description {
    font-size: 10px;
  }
  .studentsquare-admin-dashboard-card-meta-item {
    gap: 8px;
  }
  .studentsquare-admin-dashboard-card-meta-label, .studentsquare-admin-dashboard-card-meta-value {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studentsquare-admin-dashboard-card {
    transition: none;
  }
}
.admin-vendor-shop-deal-detail-page {
  --deal-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --deal-green: #047857;
  --deal-green-dark: #065f46;
  --deal-green-deep: #064e3b;
  --deal-green-soft: #dcfce7;
  --deal-green-light: #f0fdf4;
  --deal-green-pale: #f7fdf9;
  --deal-text: #123c2b;
  --deal-text-dark: #072c1e;
  --deal-text-green: #286047;
  --deal-border: #bfe0ca;
  --deal-border-soft: #dceee1;
  --deal-amber: #a16207;
  --deal-amber-dark: #854d0e;
  --deal-amber-soft: #fef3c7;
  --deal-red: #b91c1c;
  --deal-red-dark: #991b1b;
  --deal-red-soft: #fee2e2;
  width: 100%;
  min-height: 100%;
  padding: 30px;
  background: radial-gradient( circle at 8% 5%, rgba(16, 185, 129, 0.08), transparent 30% ), radial-gradient( circle at 92% 20%, rgba(4, 120, 87, 0.06), transparent 28% ), #f4fbf6;
  color: var(--deal-text);
}
.admin-vendor-shop-deal-detail-page .detail-container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.admin-vendor-shop-deal-detail-page .detail-page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 42px 28px 38px;
  margin-bottom: 18px;
  text-align: center;
  background: var(--deal-gradient);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.admin-vendor-shop-deal-detail-page .detail-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0) 48% );
  pointer-events: none;
  z-index: -1;
}
.admin-vendor-shop-deal-detail-page .detail-page-header::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -105px;
  top: -155px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-page-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.admin-vendor-shop-deal-detail-page .detail-page-icon::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-page-icon svg {
  width: 31px;
  height: 31px;
  stroke: #ffffff;
  stroke-width: 2;
}
.admin-vendor-shop-deal-detail-page .detail-page-kicker {
  position: relative;
  z-index: 2;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.69rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-detail-page .detail-page-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
.admin-vendor-shop-deal-detail-page .detail-page-subtitle {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
}
.admin-vendor-shop-deal-detail-page .detail-page-subtitle strong {
  color: #ffffff;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-back-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
}
.admin-vendor-shop-deal-detail-page .detail-back-btn {
  position: relative;
  overflow: hidden;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  background: #ffffff;
  border: 1px solid var(--deal-border);
  border-radius: 11px;
  color: var(--deal-green-dark);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.admin-vendor-shop-deal-detail-page .detail-back-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-back-btn:hover {
  background: var(--deal-green-light);
  border-color: #8fc7a2;
  color: var(--deal-green-deep);
  box-shadow: 0 9px 22px rgba(6, 78, 59, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-vendor-shop-deal-detail-page .detail-back-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.admin-vendor-shop-deal-detail-page .detail-summary-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--deal-border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-vendor-shop-deal-detail-page .detail-summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--deal-gradient);
}
.admin-vendor-shop-deal-detail-page .detail-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 19px;
}
.admin-vendor-shop-deal-detail-page .detail-summary-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.admin-vendor-shop-deal-detail-page .detail-summary-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--deal-green);
  font-size: 0.65rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-detail-page .detail-summary-title {
  margin: 0;
  color: var(--deal-green-deep);
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-summary-header-icon {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
  border-radius: 12px;
  background: var(--deal-green-soft);
  border: 1px solid #b7ddc3;
  color: var(--deal-green-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-summary-header-icon svg {
  width: 20px;
  height: 20px;
}
.admin-vendor-shop-deal-detail-page .detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.admin-vendor-shop-deal-detail-page .detail-summary-item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 17px;
  background: linear-gradient( 145deg, #f4fcf6 0%, #edfaf1 100% );
  border: 1px solid var(--deal-border-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.admin-vendor-shop-deal-detail-page .detail-summary-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-summary-item-highlight {
  background: linear-gradient( 145deg, #e9faef 0%, #dcfce7 100% );
  border-color: #abd5b8;
}
.admin-vendor-shop-deal-detail-page .detail-summary-item-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.admin-vendor-shop-deal-detail-page .detail-summary-item-top > svg {
  width: 17px;
  height: 17px;
  color: var(--deal-green);
}
.admin-vendor-shop-deal-detail-page .detail-summary-label {
  color: var(--deal-text-green);
  font-size: 0.68rem;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-detail-page .detail-summary-value {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--deal-green-deep);
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-vendor-shop-deal-detail-page .detail-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.71rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.admin-vendor-shop-deal-detail-page .detail-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.admin-vendor-shop-deal-detail-page .detail-badge-status {
  background: var(--deal-green-soft);
  color: var(--deal-green-deep);
  border: 1px solid #abd5b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-badge-paid {
  background: var(--deal-green-soft);
  color: var(--deal-green-deep);
  border: 1px solid #abd5b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-badge-unpaid {
  background: var(--deal-amber-soft);
  color: var(--deal-amber-dark);
  border: 1px solid #efd58c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.admin-vendor-shop-deal-detail-page .detail-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: start;
}
.admin-vendor-shop-deal-detail-page .detail-main-grid > main, .admin-vendor-shop-deal-detail-page .detail-main-grid > aside {
  min-width: 0;
}
.admin-vendor-shop-deal-detail-page .detail-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid var(--deal-border);
  border-radius: 19px;
  box-shadow: 0 9px 28px rgba(6, 78, 59, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-vendor-shop-deal-detail-page .detail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--deal-gradient);
  opacity: 0.95;
}
.admin-vendor-shop-deal-detail-page .detail-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 19px 21px;
  background: linear-gradient( 180deg, #fbfefc 0%, #f4fbf6 100% );
  border-bottom: 1px solid var(--deal-border-soft);
}
.admin-vendor-shop-deal-detail-page .detail-card-header-icon {
  position: relative;
  overflow: hidden;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--deal-gradient);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(4, 120, 87, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.admin-vendor-shop-deal-detail-page .detail-card-header-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 62% );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-card-header-icon svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  stroke: #ffffff;
}
.admin-vendor-shop-deal-detail-page .detail-card-header-copy {
  min-width: 0;
}
.admin-vendor-shop-deal-detail-page .detail-card-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--deal-green);
  font-size: 0.61rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-detail-page .detail-card-title {
  margin: 0;
  color: var(--deal-green-deep);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-card-body {
  padding: 21px;
}
.admin-vendor-shop-deal-detail-page .detail-info-list {
  margin: 0;
}
.admin-vendor-shop-deal-detail-page .detail-info-row {
  display: grid;
  grid-template-columns: minmax(155px, 0.72fr) minmax(0, 1.7fr);
  gap: 25px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e1eee5;
}
.admin-vendor-shop-deal-detail-page .detail-info-row:first-child {
  padding-top: 1px;
}
.admin-vendor-shop-deal-detail-page .detail-info-row:last-child {
  padding-bottom: 1px;
  border-bottom: 0;
}
.admin-vendor-shop-deal-detail-page .detail-info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--deal-text-green);
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 800;
}
.admin-vendor-shop-deal-detail-page .detail-info-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--deal-green);
}
.admin-vendor-shop-deal-detail-page .detail-info-value {
  margin: 0;
  color: var(--deal-text-dark);
  font-size: 0.85rem;
  line-height: 1.55;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.admin-vendor-shop-deal-detail-page .detail-info-value-strong strong {
  color: var(--deal-green-deep);
  font-size: 0.96rem;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-code {
  display: inline-block;
  max-width: 100%;
  padding: 7px 10px;
  background: linear-gradient( 145deg, #effaf2, #e5f5e9 );
  border: 1px solid #c7e1ce;
  border-radius: 8px;
  color: var(--deal-green-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-payment-warning {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  background: linear-gradient( 145deg, #fff9e8, #fef3c7 );
  border: 1px solid #efd58c;
  border-radius: 13px;
  color: var(--deal-amber-dark);
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.admin-vendor-shop-deal-detail-page .detail-payment-warning-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(161, 98, 7, 0.15);
}
.admin-vendor-shop-deal-detail-page .detail-payment-warning-icon svg {
  width: 18px;
  height: 18px;
}
.admin-vendor-shop-deal-detail-page .detail-payment-warning strong {
  display: block;
  margin-bottom: 2px;
  color: var(--deal-amber-dark);
  font-size: 0.84rem;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-payment-warning span {
  display: block;
}
.admin-vendor-shop-deal-detail-page .detail-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px;
  background: linear-gradient( 145deg, #f1fbf4, #e9f8ee );
  border: 1px solid #cce5d3;
  border-left: 4px solid var(--deal-green);
  border-radius: 0 13px 13px 0;
  color: var(--deal-text);
  font-size: 0.85rem;
  line-height: 1.7;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-note-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--deal-green-soft);
  border: 1px solid #b9dec4;
  color: var(--deal-green-dark);
}
.admin-vendor-shop-deal-detail-page .detail-note-icon svg {
  width: 18px;
  height: 18px;
}
.admin-vendor-shop-deal-detail-page .detail-note-content {
  min-width: 0;
}
.admin-vendor-shop-deal-detail-page .detail-note-content p {
  margin: 0 0 7px;
}
.admin-vendor-shop-deal-detail-page .detail-note-content p:last-child {
  margin-bottom: 0;
}
.admin-vendor-shop-deal-detail-page .detail-actions-card {
  position: sticky;
  top: 20px;
}
.admin-vendor-shop-deal-detail-page .detail-actions-card::before {
  background: var(--deal-gradient);
}
.admin-vendor-shop-deal-detail-page .detail-actions-intro {
  margin: 0 0 19px;
  padding: 13px 14px;
  background: var(--deal-green-light);
  border: 1px solid var(--deal-border-soft);
  border-radius: 11px;
  color: var(--deal-text-green);
  font-size: 0.8rem;
  line-height: 1.6;
  font-weight: 600;
  text-align: center;
}
.admin-vendor-shop-deal-detail-page .detail-action-group {
  padding: 18px 0;
  border-top: 1px solid var(--deal-border-soft);
}
.admin-vendor-shop-deal-detail-page .detail-action-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.admin-vendor-shop-deal-detail-page .detail-action-group-last {
  padding-bottom: 0;
}
.admin-vendor-shop-deal-detail-page .detail-action-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin-bottom: 11px;
}
.admin-vendor-shop-deal-detail-page .detail-action-heading-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--deal-green-soft);
  border: 1px solid #b9dec4;
  color: var(--deal-green-dark);
}
.admin-vendor-shop-deal-detail-page .detail-action-heading-icon svg {
  width: 15px;
  height: 15px;
}
.admin-vendor-shop-deal-detail-page .detail-action-heading-danger {
  background: var(--deal-red-soft);
  border-color: #efc0c0;
  color: var(--deal-red);
}
.admin-vendor-shop-deal-detail-page .detail-action-heading-warning {
  background: var(--deal-amber-soft);
  border-color: #efd58c;
  color: var(--deal-amber-dark);
}
.admin-vendor-shop-deal-detail-page .detail-action-title {
  margin: 0;
  color: var(--deal-green-deep);
  font-size: 0.83rem;
  line-height: 1.4;
  font-weight: 900;
}
.admin-vendor-shop-deal-detail-page .detail-action-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.admin-vendor-shop-deal-detail-page .detail-action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.13) 24%, rgba(255, 255, 255, 0) 62% );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-action-btn svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.admin-vendor-shop-deal-detail-page .detail-action-btn span {
  position: relative;
  z-index: 1;
}
.admin-vendor-shop-deal-detail-page .detail-action-primary {
  background: var(--deal-gradient);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(4, 120, 87, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(6, 78, 59, 0.28);
}
.admin-vendor-shop-deal-detail-page .detail-action-primary:hover {
  background: linear-gradient( 135deg, #075b45 0%, #058563 45%, #076f55 72%, #075b45 100% );
  box-shadow: 0 10px 23px rgba(4, 120, 87, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(6, 78, 59, 0.3);
}
.admin-vendor-shop-deal-detail-page .detail-action-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-vendor-shop-deal-detail-page .detail-action-danger {
  background: linear-gradient( 145deg, #fff5f5, #fee2e2 );
  border-color: #efc0c0;
  color: var(--deal-red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-action-danger::before {
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) );
}
.admin-vendor-shop-deal-detail-page .detail-action-danger:hover {
  background: linear-gradient( 145deg, #fff0f0, #fecaca );
  border-color: #e7aaaa;
  color: var(--deal-red-dark);
  box-shadow: 0 7px 17px rgba(185, 28, 28, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.admin-vendor-shop-deal-detail-page .detail-action-secondary {
  background: linear-gradient( 145deg, #f3faf5, #e6f4e9 );
  border-color: #c5dfcc;
  color: var(--deal-green-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.admin-vendor-shop-deal-detail-page .detail-action-secondary:hover {
  background: linear-gradient( 145deg, #edf8f0, #dcf0e1 );
  border-color: #a9cfb3;
  color: var(--deal-green-deep);
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-vendor-shop-deal-detail-page .detail-action-warning {
  background: linear-gradient( 145deg, #fffaf0, #fef3c7 );
  border-color: #efd58c;
  color: var(--deal-amber-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-vendor-shop-deal-detail-page .detail-action-warning:hover {
  background: linear-gradient( 145deg, #fff7e1, #fde9ae );
  border-color: #e5c46e;
  color: #78350f;
  box-shadow: 0 7px 17px rgba(161, 98, 7, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.admin-vendor-shop-deal-detail-page .detail-help-text {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 9px;
  color: var(--deal-text-green);
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 700;
}
.admin-vendor-shop-deal-detail-page .detail-help-text svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 1px;
  color: var(--deal-green);
}
.admin-vendor-shop-deal-detail-page .detail-textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  margin-bottom: 10px;
  padding: 12px 13px;
  resize: vertical;
  background: #fbfefc;
  border: 1px solid #c6dfcd;
  border-radius: 11px;
  color: var(--deal-text-dark);
  font-family: inherit;
  font-size: 0.79rem;
  line-height: 1.55;
  font-weight: 600;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(6, 78, 59, 0.025);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.admin-vendor-shop-deal-detail-page .detail-textarea::placeholder {
  color: #3f7257;
  opacity: 1;
}
.admin-vendor-shop-deal-detail-page .detail-textarea:focus {
  background: #ffffff;
  border-color: var(--deal-green);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10), inset 0 1px 2px rgba(6, 78, 59, 0.025);
}
.admin-vendor-shop-deal-detail-page .detail-extend-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}
.admin-vendor-shop-deal-detail-page .detail-number-field {
  min-width: 0;
}
.admin-vendor-shop-deal-detail-page .detail-number-label {
  display: block;
  margin-bottom: 6px;
  color: var(--deal-text-green);
  font-size: 0.69rem;
  line-height: 1.3;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.admin-vendor-shop-deal-detail-page .detail-number-input {
  width: 100%;
  height: 45px;
  padding: 0 12px;
  background: #fbfefc;
  border: 1px solid #c6dfcd;
  border-radius: 10px;
  color: var(--deal-text-dark);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.admin-vendor-shop-deal-detail-page .detail-number-input:focus {
  background: #ffffff;
  border-color: var(--deal-green);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10);
}
.admin-vendor-shop-deal-detail-page .detail-extend-btn {
  position: relative;
  overflow: hidden;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 17px;
  background: var(--deal-gradient);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(6, 78, 59, 0.28);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.admin-vendor-shop-deal-detail-page .detail-extend-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0) 65% );
  pointer-events: none;
}
.admin-vendor-shop-deal-detail-page .detail-extend-btn svg, .admin-vendor-shop-deal-detail-page .detail-extend-btn span {
  position: relative;
  z-index: 1;
}
.admin-vendor-shop-deal-detail-page .detail-extend-btn svg {
  width: 15px;
  height: 15px;
}
.admin-vendor-shop-deal-detail-page .detail-extend-btn:hover {
  background: linear-gradient( 135deg, #075b45 0%, #058563 45%, #076f55 72%, #075b45 100% );
  box-shadow: 0 9px 21px rgba(4, 120, 87, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(6, 78, 59, 0.3);
}
.admin-vendor-shop-deal-detail-page .detail-back-btn, .admin-vendor-shop-deal-detail-page .detail-action-btn, .admin-vendor-shop-deal-detail-page .detail-extend-btn {
  transform: none !important;
}
.admin-vendor-shop-deal-detail-page .detail-back-btn:hover, .admin-vendor-shop-deal-detail-page .detail-action-btn:hover, .admin-vendor-shop-deal-detail-page .detail-extend-btn:hover {
  transform: none !important;
}
.admin-vendor-shop-deal-detail-page .detail-back-btn:focus-visible, .admin-vendor-shop-deal-detail-page .detail-action-btn:focus-visible, .admin-vendor-shop-deal-detail-page .detail-extend-btn:focus-visible, .admin-vendor-shop-deal-detail-page .detail-textarea:focus-visible, .admin-vendor-shop-deal-detail-page .detail-number-input:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.18);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .admin-vendor-shop-deal-detail-page {
    padding: 24px;
  }
  .admin-vendor-shop-deal-detail-page .detail-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .admin-vendor-shop-deal-detail-page .detail-actions-card {
    position: static;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .admin-vendor-shop-deal-detail-page .detail-page-header {
    min-height: 210px;
  }
  .admin-vendor-shop-deal-detail-page .detail-info-row {
    grid-template-columns: minmax(135px, 0.7fr) minmax(0, 1.3fr);
    gap: 18px;
  }
}
@media (max-width: 700px) {
  .admin-vendor-shop-deal-detail-page {
    padding: 16px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-header {
    min-height: 205px;
    padding: 32px 18px 29px;
    border-radius: 19px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 16px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-icon svg {
    width: 26px;
    height: 26px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-title {
    font-size: 1.5rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-subtitle {
    font-size: 0.83rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-card, .admin-vendor-shop-deal-detail-page .detail-card {
    border-radius: 16px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-card {
    padding: 18px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-header {
    align-items: center;
    margin-bottom: 15px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-item {
    padding: 14px 15px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-header-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-header-icon svg {
    width: 18px;
    height: 18px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-header {
    padding: 16px;
    gap: 10px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-header-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-header-icon svg {
    width: 18px;
    height: 18px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-body {
    padding: 17px 16px;
  }
  .admin-vendor-shop-deal-detail-page .detail-info-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 13px 0;
  }
  .admin-vendor-shop-deal-detail-page .detail-info-label {
    font-size: 0.73rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-info-value {
    font-size: 0.82rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-back-wrapper {
    margin-bottom: 15px;
  }
  .admin-vendor-shop-deal-detail-page .detail-back-btn {
    width: 100%;
  }
  .admin-vendor-shop-deal-detail-page .detail-actions-intro {
    font-size: 0.79rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-action-group {
    padding: 16px 0;
  }
  .admin-vendor-shop-deal-detail-page .detail-note {
    padding: 14px;
    gap: 10px;
  }
}
@media (max-width: 420px) {
  .admin-vendor-shop-deal-detail-page {
    padding: 11px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-header {
    min-height: 190px;
    padding: 27px 14px 24px;
    border-radius: 16px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-icon {
    width: 51px;
    height: 51px;
    border-radius: 14px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-icon svg {
    width: 24px;
    height: 24px;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-kicker {
    font-size: 0.6rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-title {
    font-size: 1.3rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-page-subtitle {
    font-size: 0.78rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-card {
    padding: 14px;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-heading {
    align-items: flex-start;
  }
  .admin-vendor-shop-deal-detail-page .detail-summary-title {
    font-size: 0.96rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-header {
    gap: 9px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-header-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-title {
    font-size: 0.91rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-card-kicker {
    font-size: 0.56rem;
  }
  .admin-vendor-shop-deal-detail-page .detail-extend-form {
    grid-template-columns: 1fr;
  }
  .admin-vendor-shop-deal-detail-page .detail-extend-btn {
    width: 100%;
  }
  .admin-vendor-shop-deal-detail-page .detail-number-input {
    height: 44px;
  }
  .admin-vendor-shop-deal-detail-page .detail-action-btn {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-vendor-shop-deal-detail-page *, .admin-vendor-shop-deal-detail-page *::before, .admin-vendor-shop-deal-detail-page *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.admin-vendor-shop-deal-list-page {
  --deal-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --deal-deep: #022c22;
  --deal-dark: #064e3b;
  --deal-green: #047857;
  --deal-mid: #065f46;
  --deal-soft: #ecfdf5;
  --deal-soft-2: #f0fdf4;
  --deal-pale: #f7fcf9;
  --deal-text: #022c22;
  --deal-text-soft: #14532d;
  --deal-text-mid: #166534;
  --deal-border: rgba(6, 78, 59, 0.13);
  --deal-border-strong: rgba(6, 78, 59, 0.21);
  --deal-amber: #92400e;
  --deal-amber-bg: #fffbeb;
  --deal-amber-border: #f3d18a;
  --deal-red: #991b1b;
  --deal-red-bg: #fef2f2;
  --deal-red-border: #efcaca;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 24px 55px;
  color: var(--deal-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.admin-vendor-shop-deal-list-page *, .admin-vendor-shop-deal-list-page *::before, .admin-vendor-shop-deal-list-page *::after {
  box-sizing: border-box;
}
.admin-vendor-shop-deal-list-page a {
  color: inherit;
  text-decoration: none;
}
.admin-vendor-shop-deal-list-page .deal-page-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 230px;
  padding: 34px 25px 31px;
  margin-bottom: 22px;
  text-align: center;
  background: var(--deal-gradient);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-vendor-shop-deal-list-page .deal-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient( 90deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0) );
}
.admin-vendor-shop-deal-list-page .deal-page-header::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.26);
}
.admin-vendor-shop-deal-list-page .deal-page-header-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  right: -110px;
  top: -150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.055);
  pointer-events: none;
}
.admin-vendor-shop-deal-list-page .deal-page-icon {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.27);
  border-radius: 17px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.34);
}
.admin-vendor-shop-deal-list-page .deal-page-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255,255,255,0.58);
}
.admin-vendor-shop-deal-list-page .deal-page-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.admin-vendor-shop-deal-list-page .deal-page-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.84);
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-list-page .deal-page-eyebrow svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.admin-vendor-shop-deal-list-page .deal-page-title {
  position: relative;
  margin: 0;
  color: #ffffff;
  font-size: 1.85rem;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.admin-vendor-shop-deal-list-page .deal-page-description {
  max-width: 620px;
  margin: 9px auto 0;
  color: rgba(255,255,255,0.86);
  font-size: 0.86rem;
  line-height: 1.55;
  font-weight: 500;
}
.admin-vendor-shop-deal-list-page .deal-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--deal-border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(6,78,59,0.075), 0 3px 10px rgba(6,78,59,0.035), inset 0 1px 0 rgba(255,255,255,0.95);
}
.admin-vendor-shop-deal-list-page .deal-card-topline {
  width: 100%;
  height: 3px;
  background: var(--deal-gradient);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.admin-vendor-shop-deal-list-page .deal-filter-card {
  margin-bottom: 22px;
}
.admin-vendor-shop-deal-list-page .deal-card-body {
  padding: 25px 27px 27px;
}
.admin-vendor-shop-deal-list-page .deal-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: left;
}
.admin-vendor-shop-deal-list-page .deal-section-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--deal-gradient);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  box-shadow: 0 7px 17px rgba(4,120,87,0.16), inset 0 1px 0 rgba(255,255,255,0.34);
}
.admin-vendor-shop-deal-list-page .deal-section-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
}
.admin-vendor-shop-deal-list-page .deal-section-heading-content {
  min-width: 0;
}
.admin-vendor-shop-deal-list-page .deal-section-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--deal-green);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-list-page .deal-section-title {
  margin: 0;
  color: var(--deal-deep);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
}
.admin-vendor-shop-deal-list-page .deal-section-description {
  margin: 4px 0 0;
  color: var(--deal-text-soft);
  font-size: 0.77rem;
  line-height: 1.45;
  font-weight: 500;
}
.admin-vendor-shop-deal-list-page .deal-filter-card form {
  width: 100%;
}
.admin-vendor-shop-deal-list-page .deal-filter-card form > .row {
  width: 100%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.admin-vendor-shop-deal-list-page .deal-form-label {
  display: block;
  margin: 0 0 7px;
  color: var(--deal-deep);
  font-size: 0.73rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.admin-vendor-shop-deal-list-page .deal-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.admin-vendor-shop-deal-list-page .deal-input-wrapper > svg {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--deal-green);
  pointer-events: none;
  z-index: 2;
  stroke-width: 2.1;
}
.admin-vendor-shop-deal-list-page .deal-form-control, .admin-vendor-shop-deal-list-page .deal-form-select {
  width: 100%;
  height: 45px;
  padding: 0 13px 0 40px;
  color: var(--deal-deep);
  background: #ffffff;
  border: 1px solid var(--deal-border-strong);
  border-radius: 11px;
  outline: none;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(6,78,59,0.025);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.admin-vendor-shop-deal-list-page .deal-form-control::placeholder {
  color: var(--deal-text-soft);
  opacity: 0.72;
}
.admin-vendor-shop-deal-list-page .deal-form-control:hover, .admin-vendor-shop-deal-list-page .deal-form-select:hover {
  border-color: rgba(4,120,87,0.42);
  background: var(--deal-pale);
}
.admin-vendor-shop-deal-list-page .deal-form-control:focus, .admin-vendor-shop-deal-list-page .deal-form-select:focus {
  background: #ffffff;
  border-color: var(--deal-green);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.10), 0 5px 14px rgba(6,78,59,0.05);
}
.admin-vendor-shop-deal-list-page .deal-form-select {
  appearance: auto;
  cursor: pointer;
}
.admin-vendor-shop-deal-list-page .deal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-top: 22px;
}
.admin-vendor-shop-deal-list-page .deal-btn {
  position: relative;
  overflow: hidden;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.admin-vendor-shop-deal-list-page .deal-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.admin-vendor-shop-deal-list-page .deal-btn-primary {
  color: #ffffff;
  background: var(--deal-gradient);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 18px rgba(4,120,87,0.18), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(2,44,34,0.22);
  isolation: isolate;
}
.admin-vendor-shop-deal-list-page .deal-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0.025) 48%, rgba(255,255,255,0) 70% );
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.admin-vendor-shop-deal-list-page .deal-btn-primary:hover {
  box-shadow: 0 9px 21px rgba(4,120,87,0.22), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(2,44,34,0.25);
}
.admin-vendor-shop-deal-list-page .deal-btn-primary, .admin-vendor-shop-deal-list-page .deal-btn-primary span, .admin-vendor-shop-deal-list-page .deal-btn-primary i, .admin-vendor-shop-deal-list-page .deal-btn-primary svg {
  color: #ffffff !important;
}
.admin-vendor-shop-deal-list-page .deal-btn-secondary {
  color: var(--deal-dark);
  background: var(--deal-soft-2);
  border: 1px solid var(--deal-border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
.admin-vendor-shop-deal-list-page .deal-btn-secondary:hover {
  color: var(--deal-deep);
  background: var(--deal-soft);
  border-color: rgba(4,120,87,0.34);
  box-shadow: 0 5px 14px rgba(6,78,59,0.06), inset 0 1px 0 rgba(255,255,255,0.95);
}
.admin-vendor-shop-deal-list-page .deal-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 23px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ffffff 62%, #f7fcf9 100% );
  border-bottom: 1px solid var(--deal-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
.admin-vendor-shop-deal-list-page .deal-table-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.admin-vendor-shop-deal-list-page .deal-table-icon {
  position: relative;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--deal-gradient);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  box-shadow: 0 7px 17px rgba(4,120,87,0.16), inset 0 1px 0 rgba(255,255,255,0.35);
}
.admin-vendor-shop-deal-list-page .deal-table-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(255,255,255,0.60);
}
.admin-vendor-shop-deal-list-page .deal-table-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.admin-vendor-shop-deal-list-page .deal-table-heading-content {
  min-width: 0;
}
.admin-vendor-shop-deal-list-page .deal-table-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--deal-green);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-list-page .deal-table-title {
  margin: 0;
  color: var(--deal-deep);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 820;
}
.admin-vendor-shop-deal-list-page .deal-table-description {
  margin: 4px 0 0;
  color: var(--deal-text-soft);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
}
.admin-vendor-shop-deal-list-page .deal-table-header-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  flex: 0 0 auto;
  color: var(--deal-green);
  background: var(--deal-soft);
  border: 1px solid var(--deal-border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}
.admin-vendor-shop-deal-list-page .deal-table-header-badge svg {
  width: 14px;
  height: 14px;
}
.admin-vendor-shop-deal-list-page .deal-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(6,78,59,0.25) var(--deal-soft-2);
}
.admin-vendor-shop-deal-list-page .deal-table-wrapper::-webkit-scrollbar {
  height: 7px;
}
.admin-vendor-shop-deal-list-page .deal-table-wrapper::-webkit-scrollbar-track {
  background: var(--deal-soft-2);
}
.admin-vendor-shop-deal-list-page .deal-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(6,78,59,0.25);
  border-radius: 20px;
}
.admin-vendor-shop-deal-list-page .deal-table {
  width: 100%;
  min-width: 1160px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--deal-text);
  font-size: 0.78rem;
}
.admin-vendor-shop-deal-list-page .deal-table thead {
  background: var(--deal-deep);
}
.admin-vendor-shop-deal-list-page .deal-table th {
  height: 49px;
  padding: 0 15px;
  color: #ffffff;
  background: linear-gradient( 180deg, #075d46 0%, #064e3b 100% );
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}
.admin-vendor-shop-deal-list-page .deal-table th:first-child {
  padding-left: 20px;
}
.admin-vendor-shop-deal-list-page .deal-table th:last-child {
  padding-right: 20px;
}
.admin-vendor-shop-deal-list-page .table-heading-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-vendor-shop-deal-list-page .table-heading-content svg {
  width: 14px;
  height: 14px;
  color: #a7f3d0;
  stroke-width: 2.2;
}
.admin-vendor-shop-deal-list-page .deal-table tbody tr {
  background: #ffffff;
  transition: background-color 140ms ease;
}
.admin-vendor-shop-deal-list-page .deal-table tbody tr:hover {
  background: #f5fcf8;
}
.admin-vendor-shop-deal-list-page .deal-table td {
  height: 76px;
  padding: 12px 15px;
  color: var(--deal-text);
  border-bottom: 1px solid rgba(6,78,59,0.09);
  vertical-align: middle;
}
.admin-vendor-shop-deal-list-page .deal-table td:first-child {
  padding-left: 20px;
}
.admin-vendor-shop-deal-list-page .deal-table td:last-child {
  padding-right: 20px;
}
.admin-vendor-shop-deal-list-page .deal-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-vendor-shop-deal-list-page .deal-id-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px 0 7px;
  color: var(--deal-green);
  background: var(--deal-soft-2);
  border: 1px solid var(--deal-border);
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.admin-vendor-shop-deal-list-page .deal-id-link:hover {
  color: #ffffff;
  background: var(--deal-gradient);
  border-color: transparent;
  box-shadow: 0 5px 13px rgba(4,120,87,0.15);
}
.admin-vendor-shop-deal-list-page .deal-id-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deal-green);
  background: #ffffff;
  border: 1px solid var(--deal-border);
  border-radius: 6px;
}
.admin-vendor-shop-deal-list-page .deal-id-icon svg {
  width: 12px;
  height: 12px;
}
.admin-vendor-shop-deal-list-page .deal-id-link:hover .deal-id-icon {
  color: var(--deal-green);
  background: rgba(255,255,255,0.92);
}
.admin-vendor-shop-deal-list-page .vendor-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 225px;
}
.admin-vendor-shop-deal-list-page .vendor-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deal-green);
  background: var(--deal-soft);
  border: 1px solid var(--deal-border);
  border-radius: 10px;
}
.admin-vendor-shop-deal-list-page .vendor-avatar svg {
  width: 17px;
  height: 17px;
}
.admin-vendor-shop-deal-list-page .vendor-info-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-vendor-shop-deal-list-page .vendor-name {
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--deal-deep);
  font-size: 0.79rem;
  line-height: 1.25;
  font-weight: 800;
}
.admin-vendor-shop-deal-list-page .vendor-email {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--deal-text-soft);
  font-size: 0.69rem;
  line-height: 1.25;
  font-weight: 550;
}
.admin-vendor-shop-deal-list-page .deal-amount-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-vendor-shop-deal-list-page .deal-amount-label {
  color: var(--deal-green);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-list-page .deal-amount {
  color: var(--deal-deep);
  font-size: 0.86rem;
  line-height: 1.25;
  font-weight: 850;
  white-space: nowrap;
}
.admin-vendor-shop-deal-list-page .deal-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}
.admin-vendor-shop-deal-list-page .deal-badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.admin-vendor-shop-deal-list-page .deal-badge-paid {
  color: #166534;
  background: #ecfdf5;
  border-color: #a7d9b7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.admin-vendor-shop-deal-list-page .deal-badge-unpaid {
  color: var(--deal-amber);
  background: var(--deal-amber-bg);
  border-color: var(--deal-amber-border);
}
.admin-vendor-shop-deal-list-page .deal-badge-status {
  color: #166534;
  background: #f0fdf4;
  border-color: #b7dbc1;
}
.admin-vendor-shop-deal-list-page .deal-badge-status.pending, .admin-vendor-shop-deal-list-page .deal-badge-status.pending-approval {
  color: #92400e;
  background: #fffbeb;
  border-color: #f3d18a;
}
.admin-vendor-shop-deal-list-page .deal-badge-status.approved, .admin-vendor-shop-deal-list-page .deal-badge-status.active {
  color: #166534;
  background: #ecfdf5;
  border-color: #a7d9b7;
}
.admin-vendor-shop-deal-list-page .deal-badge-status.payment-received {
  color: #14532d;
  background: #f0fdf4;
  border-color: #b7dbc1;
}
.admin-vendor-shop-deal-list-page .deal-badge-status.rejected, .admin-vendor-shop-deal-list-page .deal-badge-status.cancelled {
  color: var(--deal-red);
  background: var(--deal-red-bg);
  border-color: var(--deal-red-border);
}
.admin-vendor-shop-deal-list-page .deal-badge-status.expired {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}
.admin-vendor-shop-deal-list-page .deal-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--deal-text-soft);
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 650;
  white-space: nowrap;
}
.admin-vendor-shop-deal-list-page .deal-date-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deal-green);
  background: var(--deal-soft);
  border: 1px solid var(--deal-border);
  border-radius: 8px;
}
.admin-vendor-shop-deal-list-page .deal-date-icon svg {
  width: 13px;
  height: 13px;
}
.admin-vendor-shop-deal-list-page .deal-manage-btn {
  position: relative;
  overflow: hidden;
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px 0 8px;
  color: #ffffff;
  background: var(--deal-gradient);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  font-size: 0.69rem;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 7px 15px rgba(4,120,87,0.16), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(2,44,34,0.25);
  isolation: isolate;
  transition: box-shadow 140ms ease, background-color 140ms ease;
}
.admin-vendor-shop-deal-list-page .deal-manage-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0.12) 23%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0) 70% );
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.admin-vendor-shop-deal-list-page .deal-manage-btn:hover {
  box-shadow: 0 8px 18px rgba(4,120,87,0.21), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(2,44,34,0.28);
}
.admin-vendor-shop-deal-list-page .deal-manage-btn, .admin-vendor-shop-deal-list-page .deal-manage-btn span, .admin-vendor-shop-deal-list-page .deal-manage-btn i, .admin-vendor-shop-deal-list-page .deal-manage-btn svg {
  color: #ffffff !important;
}
.admin-vendor-shop-deal-list-page .deal-manage-btn-icon {
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px;
}
.admin-vendor-shop-deal-list-page .deal-manage-btn-icon svg {
  width: 12px;
  height: 12px;
}
.admin-vendor-shop-deal-list-page .deal-empty-state {
  padding: 72px 25px !important;
  text-align: center;
}
.admin-vendor-shop-deal-list-page .deal-empty-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 13px;
  color: #ffffff;
  background: var(--deal-gradient);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  box-shadow: 0 9px 20px rgba(4,120,87,0.15), inset 0 1px 0 rgba(255,255,255,0.34);
}
.admin-vendor-shop-deal-list-page .deal-empty-icon svg {
  width: 27px;
  height: 27px;
}
.admin-vendor-shop-deal-list-page .deal-empty-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--deal-green);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-vendor-shop-deal-list-page .deal-empty-state h3 {
  margin: 0;
  color: var(--deal-deep);
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 800;
}
.admin-vendor-shop-deal-list-page .deal-empty-state p {
  max-width: 500px;
  margin: 7px auto 0;
  color: var(--deal-text-soft);
  font-size: 0.77rem;
  line-height: 1.55;
  font-weight: 500;
}
.admin-vendor-shop-deal-list-page .deal-btn:focus-visible, .admin-vendor-shop-deal-list-page .deal-manage-btn:focus-visible, .admin-vendor-shop-deal-list-page .deal-id-link:focus-visible, .admin-vendor-shop-deal-list-page .deal-form-control:focus-visible, .admin-vendor-shop-deal-list-page .deal-form-select:focus-visible {
  outline: 3px solid rgba(4,120,87,0.20);
  outline-offset: 2px;
}
.admin-vendor-shop-deal-list-page .deal-btn, .admin-vendor-shop-deal-list-page .deal-manage-btn, .admin-vendor-shop-deal-list-page .deal-id-link {
  transform: none !important;
}
@media (max-width: 1150px) {
  .admin-vendor-shop-deal-list-page {
    padding: 23px 18px 48px;
  }
  .admin-vendor-shop-deal-list-page .deal-table {
    min-width: 1080px;
  }
  .admin-vendor-shop-deal-list-page .deal-filter-card form > .row {
    max-width: 900px;
  }
}
@media (max-width: 900px) {
  .admin-vendor-shop-deal-list-page {
    padding: 20px 16px 44px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-header {
    min-height: 215px;
  }
  .admin-vendor-shop-deal-list-page .deal-filter-card form > .row {
    max-width: 720px;
  }
  .admin-vendor-shop-deal-list-page .deal-actions {
    padding-top: 4px;
  }
  .admin-vendor-shop-deal-list-page .deal-btn {
    min-width: 120px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-header-badge {
    display: none;
  }
}
@media (max-width: 767px) {
  .admin-vendor-shop-deal-list-page {
    padding: 16px 12px 36px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-header {
    min-height: 205px;
    padding: 27px 17px 25px;
    margin-bottom: 17px;
    border-radius: 16px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-icon {
    width: 51px;
    height: 51px;
    margin-bottom: 11px;
    border-radius: 14px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-icon svg {
    width: 24px;
    height: 24px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-eyebrow {
    font-size: 0.59rem;
  }
  .admin-vendor-shop-deal-list-page .deal-page-title {
    font-size: 1.42rem;
  }
  .admin-vendor-shop-deal-list-page .deal-page-description {
    max-width: 420px;
    font-size: 0.76rem;
  }
  .admin-vendor-shop-deal-list-page .deal-card {
    border-radius: 14px;
  }
  .admin-vendor-shop-deal-list-page .deal-card-body {
    padding: 19px 15px 20px;
  }
  .admin-vendor-shop-deal-list-page .deal-section-heading {
    gap: 10px;
    margin-bottom: 18px;
  }
  .admin-vendor-shop-deal-list-page .deal-section-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
  }
  .admin-vendor-shop-deal-list-page .deal-section-icon svg {
    width: 17px;
    height: 17px;
  }
  .admin-vendor-shop-deal-list-page .deal-section-eyebrow {
    font-size: 0.57rem;
  }
  .admin-vendor-shop-deal-list-page .deal-section-title {
    font-size: 0.89rem;
  }
  .admin-vendor-shop-deal-list-page .deal-section-description {
    font-size: 0.69rem;
  }
  .admin-vendor-shop-deal-list-page .deal-form-control, .admin-vendor-shop-deal-list-page .deal-form-select {
    height: 43px;
    font-size: 0.75rem;
  }
  .admin-vendor-shop-deal-list-page .deal-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .admin-vendor-shop-deal-list-page .deal-btn {
    flex: 1;
    min-width: 0;
    height: 43px;
    padding: 0 11px;
    font-size: 0.71rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table-header {
    padding: 16px 14px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-heading {
    gap: 9px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-icon svg {
    width: 17px;
    height: 17px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-eyebrow {
    font-size: 0.55rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table-title {
    font-size: 0.88rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table-description {
    font-size: 0.67rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table {
    min-width: 1080px;
    font-size: 0.74rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table th {
    height: 45px;
    padding: 0 12px;
    font-size: 0.61rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table td {
    height: 70px;
    padding: 10px 12px;
  }
  .admin-vendor-shop-deal-list-page .deal-table th:first-child, .admin-vendor-shop-deal-list-page .deal-table td:first-child {
    padding-left: 15px;
  }
  .admin-vendor-shop-deal-list-page .deal-table th:last-child, .admin-vendor-shop-deal-list-page .deal-table td:last-child {
    padding-right: 15px;
  }
  .admin-vendor-shop-deal-list-page .vendor-info {
    min-width: 210px;
  }
}
@media (max-width: 480px) {
  .admin-vendor-shop-deal-list-page {
    padding: 12px 9px 30px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-header {
    min-height: 190px;
    padding: 23px 13px 21px;
    border-radius: 13px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-icon svg {
    width: 21px;
    height: 21px;
  }
  .admin-vendor-shop-deal-list-page .deal-page-eyebrow {
    font-size: 0.53rem;
    letter-spacing: 0.08em;
  }
  .admin-vendor-shop-deal-list-page .deal-page-title {
    font-size: 1.2rem;
  }
  .admin-vendor-shop-deal-list-page .deal-page-description {
    font-size: 0.69rem;
    line-height: 1.45;
  }
  .admin-vendor-shop-deal-list-page .deal-card-body {
    padding: 16px 12px 17px;
  }
  .admin-vendor-shop-deal-list-page .deal-section-title {
    font-size: 0.83rem;
  }
  .admin-vendor-shop-deal-list-page .deal-section-description {
    display: none;
  }
  .admin-vendor-shop-deal-list-page .deal-form-label {
    font-size: 0.69rem;
  }
  .admin-vendor-shop-deal-list-page .deal-table-header {
    padding: 13px;
  }
  .admin-vendor-shop-deal-list-page .deal-table-description {
    display: none;
  }
  .admin-vendor-shop-deal-list-page .deal-table {
    min-width: 1040px;
  }
  .admin-vendor-shop-deal-list-page .deal-empty-state {
    padding: 52px 15px !important;
  }
  .admin-vendor-shop-deal-list-page .deal-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }
  .admin-vendor-shop-deal-list-page .deal-empty-icon svg {
    width: 23px;
    height: 23px;
  }
  .admin-vendor-shop-deal-list-page .deal-empty-state h3 {
    font-size: 0.91rem;
  }
  .admin-vendor-shop-deal-list-page .deal-empty-state p {
    font-size: 0.7rem;
  }
}
@media (max-width: 360px) {
  .admin-vendor-shop-deal-list-page .deal-page-title {
    font-size: 1.1rem;
  }
  .admin-vendor-shop-deal-list-page .deal-page-description {
    font-size: 0.65rem;
  }
  .admin-vendor-shop-deal-list-page .deal-btn {
    padding: 0 8px;
    font-size: 0.67rem;
  }
  .admin-vendor-shop-deal-list-page .deal-btn svg {
    width: 14px;
    height: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-vendor-shop-deal-list-page *, .admin-vendor-shop-deal-list-page *::before, .admin-vendor-shop-deal-list-page *::after {
    transition: none !important;
    animation: none !important;
  }
}
.admin-page-order-detail-page-wrapper {
  --order-gradient: linear-gradient(
        135deg,
        #064e3b 0%,
        #047857 45%,
        #065f46 72%,
        #064e3b 100%
    );
  --order-green: #047857;
  --order-green-dark: #065f46;
  --order-green-deep: #064e3b;
  --order-green-mid: #166534;
  --order-green-light: #ecfdf5;
  --order-green-soft: #f0fdf4;
  --order-green-border: rgba(6, 95, 70, 0.18);
  --order-text: #14532d;
  --order-text-strong: #022c22;
  --order-text-soft: #166534;
  --order-border: rgba(6, 78, 59, 0.13);
  --order-border-dark: rgba(6, 78, 59, 0.2);
  --order-bg: #f3faf6;
  --order-white: #ffffff;
  --order-warning: #a16207;
  --order-warning-bg: #fffbeb;
  --order-warning-border: #f3d58a;
  --order-danger: #b42318;
  --order-danger-bg: #fff7f6;
  --order-danger-border: #efc4bd;
  --order-shadow: 0 16px 38px rgba(6, 78, 59, 0.07),
        0 3px 10px rgba(6, 78, 59, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
  width: 100%;
  max-width: 1560px;
  min-height: 100%;
  margin: 0 auto;
  padding: 32px;
  color: var(--order-text);
  background: var(--order-bg);
  box-sizing: border-box;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.admin-page-order-detail-page-wrapper *, .admin-page-order-detail-page-wrapper *::before, .admin-page-order-detail-page-wrapper *::after {
  box-sizing: border-box;
}
.admin-page-order-detail-page-wrapper h1, .admin-page-order-detail-page-wrapper h2, .admin-page-order-detail-page-wrapper h3, .admin-page-order-detail-page-wrapper h4, .admin-page-order-detail-page-wrapper p {
  margin-top: 0;
}
.admin-page-order-detail-page-wrapper a {
  color: inherit;
}
.admin-page-order-detail-page-wrapper [data-lucide], .admin-page-order-detail-page-wrapper svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
}
.admin-page-order-detail-page-wrapper section {
  width: 100%;
}
.admin-page-order-detail-page-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  margin-bottom: 28px;
  padding: 30px;
  overflow: hidden;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 22px;
  box-shadow: var(--order-shadow);
}
.admin-page-order-detail-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 4px;
  z-index: -1;
  background: var(--order-gradient);
  border-radius: 0 0 12px 12px;
}
.admin-page-order-detail-page-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  width: 32%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0.9;
}
.admin-page-order-detail-page-header-main {
  min-width: 0;
}
.admin-page-order-detail-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 20px;
  padding: 9px 14px;
  color: var(--order-green-dark);
  background: var(--order-green-light);
  border: 1px solid var(--order-green-border);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-page-order-detail-page-back:hover {
  color: var(--order-green-deep);
  background: #e2f8ed;
  border-color: rgba(6, 95, 70, 0.28);
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.07);
}
.admin-page-order-detail-page-title-block {
  text-align: left;
}
.admin-page-order-detail-page-eyebrow {
  display: block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 10px;
  color: var(--order-green-dark);
  background: var(--order-green-soft);
  border: 1px solid var(--order-green-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-title-block h1 {
  margin-bottom: 9px;
  color: var(--order-text-strong);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.7px;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-title-block p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 13px;
  font-weight: 650;
}
.admin-page-order-detail-page-title-block p svg {
  color: var(--order-green);
}
.admin-page-order-detail-page-header-status {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 245px;
  padding: 17px 19px;
  overflow: hidden;
  color: var(--order-green-deep);
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.4);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-page-order-detail-page-header-status::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.admin-page-order-detail-page-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  color: var(--order-green-deep);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 13px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.admin-page-order-detail-page-header-status > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.admin-page-order-detail-page-status-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-header-status strong {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 850;
}
.admin-page-order-detail-page-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.admin-page-order-detail-page-overview-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 180px;
  padding: 24px 20px;
  overflow: hidden;
  text-align: center;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 18px;
  box-shadow: var(--order-shadow);
}
.admin-page-order-detail-page-overview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 3px;
  background: var(--order-gradient);
  border-radius: 0 0 10px 10px;
}
.admin-page-order-detail-page-overview-card::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 23%;
  width: 54%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-overview-card-primary {
  background: linear-gradient( 180deg, #f2fdf7 0%, #ecfdf5 100% );
  border-color: var(--order-green-border);
}
.admin-page-order-detail-page-overview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 13px;
  flex: 0 0 50px;
  color: #ffffff;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.admin-page-order-detail-page-overview-icon svg {
  width: 22px;
  height: 22px;
}
.admin-page-order-detail-page-overview-card-primary .admin-page-order-detail-page-overview-icon {
  color: var(--order-green-deep);
  background: #ffffff;
  border-color: var(--order-green-border);
}
.admin-page-order-detail-page-overview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.admin-page-order-detail-page-overview-content > span {
  margin-bottom: 6px;
  color: var(--order-text-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-overview-content strong {
  color: var(--order-text-strong);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-overview-card-primary .admin-page-order-detail-page-overview-content strong {
  color: var(--order-green-deep);
  font-size: 22px;
}
.admin-page-order-detail-page-overview-content small {
  margin-top: 6px;
  color: var(--order-text-soft);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}
.admin-page-order-detail-page-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-bottom: 28px;
  padding: 30px;
  overflow: hidden;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 20px;
  box-shadow: var(--order-shadow);
}
.admin-page-order-detail-page-card::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 12%;
  width: 30%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.admin-page-order-detail-page-card-heading, .admin-page-order-detail-page-section-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
}
.admin-page-order-detail-page-section-icon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  color: #ffffff;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-order-detail-page-section-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(255, 255, 255, 0.62);
}
.admin-page-order-detail-page-section-icon svg {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
}
.admin-page-order-detail-page-card-heading > div, .admin-page-order-detail-page-section-heading > div {
  min-width: 0;
}
.admin-page-order-detail-page-card-header h2, .admin-page-order-detail-page-section-header h2 {
  margin-bottom: 5px;
  color: var(--order-text-strong);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.admin-page-order-detail-page-card-header p, .admin-page-order-detail-page-section-header p {
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
}
.admin-page-order-detail-page-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--order-border);
  border: 1px solid var(--order-border);
  border-radius: 15px;
}
.admin-page-order-detail-page-info-item {
  position: relative;
  min-width: 0;
  min-height: 96px;
  padding: 19px;
  background: #ffffff;
}
.admin-page-order-detail-page-info-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}
.admin-page-order-detail-page-info-item > span {
  display: block;
  margin-bottom: 7px;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-info-item > strong {
  display: block;
  color: var(--order-text-strong);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-info-full {
  grid-column: 1 / -1;
}
.admin-page-order-detail-page-value-success {
  color: var(--order-green-dark) !important;
}
.admin-page-order-detail-page-value-warning {
  color: var(--order-warning) !important;
}
.admin-page-order-detail-page-value-danger {
  color: var(--order-danger) !important;
}
.admin-page-order-detail-page-vendors {
  width: 100%;
  margin-bottom: 28px;
}
.admin-page-order-detail-page-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 0 3px;
}
.admin-page-order-detail-page-vendor-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 38px;
  padding: 8px 14px;
  color: #ffffff;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(6, 78, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 850;
}
.admin-page-order-detail-page-vendor-count svg {
  width: 15px;
  height: 15px;
}
.admin-page-order-detail-page-vendor-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-bottom: 22px;
  overflow: hidden;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 20px;
  box-shadow: var(--order-shadow);
}
.admin-page-order-detail-page-vendor-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 32%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-vendor-card:last-child {
  margin-bottom: 0;
}
.admin-page-order-detail-page-vendor-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px;
  overflow: hidden;
  background: linear-gradient( 135deg, #e9faf2 0%, #f5fdf9 48%, #ffffff 100% );
  border-bottom: 1px solid var(--order-green-border);
}
.admin-page-order-detail-page-vendor-header::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 18%;
  width: 40%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}
.admin-page-order-detail-page-vendor-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.admin-page-order-detail-page-vendor-icon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  overflow: hidden;
  color: #ffffff;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-order-detail-page-vendor-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.admin-page-order-detail-page-vendor-heading > div:last-child {
  min-width: 0;
}
.admin-page-order-detail-page-vendor-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--order-green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-vendor-heading h3 {
  margin-bottom: 0;
  color: var(--order-text-strong);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-vendor-total {
  flex-shrink: 0;
  min-width: 190px;
  padding: 12px 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--order-green-border);
  border-radius: 13px;
}
.admin-page-order-detail-page-vendor-total span {
  display: block;
  margin-bottom: 5px;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-vendor-total strong {
  color: var(--order-green-deep);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}
.admin-page-order-detail-page-vendor-details {
  padding: 26px;
}
.admin-page-order-detail-page-vendor-details .admin-page-order-detail-page-info-grid {
  margin-bottom: 20px;
}
.admin-page-order-detail-page-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 23px;
}
.admin-page-order-detail-page-status-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 88px;
  padding: 16px;
  overflow: hidden;
  background: #f5fcf8;
  border: 1px solid var(--order-border);
  border-radius: 14px;
}
.admin-page-order-detail-page-status-card::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-status-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: #ffffff;
  background: var(--order-gradient);
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(6, 78, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-page-order-detail-page-status-card-icon svg {
  width: 18px;
  height: 18px;
}
.admin-page-order-detail-page-status-card > div:last-child {
  min-width: 0;
}
.admin-page-order-detail-page-status-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-status-card strong {
  display: block;
  color: var(--order-text-strong);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-status-card small {
  display: block;
  margin-top: 4px;
  color: var(--order-text-soft);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
}
.admin-page-order-detail-page-success {
  color: var(--order-green-dark) !important;
}
.admin-page-order-detail-page-warning {
  color: var(--order-warning) !important;
}
.admin-page-order-detail-page-danger {
  color: var(--order-danger) !important;
}
.admin-page-order-detail-page-inner-card {
  position: relative;
  isolation: isolate;
  margin-bottom: 23px;
  padding: 23px;
  overflow: hidden;
  background: #f5fcf8;
  border: 1px solid var(--order-border);
  border-radius: 16px;
}
.admin-page-order-detail-page-inner-card::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  width: 34%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-inner-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.admin-page-order-detail-page-inner-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.admin-page-order-detail-page-inner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #ffffff;
  background: var(--order-gradient);
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(6, 78, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.23);
}
.admin-page-order-detail-page-inner-heading > div:last-child {
  min-width: 0;
}
.admin-page-order-detail-page-inner-heading h3 {
  margin-bottom: 4px;
  color: var(--order-text-strong);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 900;
}
.admin-page-order-detail-page-inner-heading p {
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}
.admin-page-order-detail-page-earning-status {
  flex-shrink: 0;
}
.admin-page-order-detail-page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 12px;
  color: var(--order-green-dark);
  background: var(--order-green-light);
  border: 1px solid var(--order-green-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}
.admin-page-order-detail-page-badge-success {
  color: var(--order-green-dark);
  background: var(--order-green-light);
  border-color: var(--order-green-border);
}
.admin-page-order-detail-page-badge-warning {
  color: var(--order-warning);
  background: var(--order-warning-bg);
  border-color: var(--order-warning-border);
}
.admin-page-order-detail-page-badge-danger {
  color: var(--order-danger);
  background: var(--order-danger-bg);
  border-color: var(--order-danger-border);
}
.admin-page-order-detail-page-earning-total {
  background: var(--order-green-light) !important;
  border-color: var(--order-green-border) !important;
}
.admin-page-order-detail-page-earning-total strong {
  color: var(--order-green-dark) !important;
  font-size: 18px;
}
.admin-page-order-detail-page-products {
  margin-top: 23px;
}
.admin-page-order-detail-page-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.admin-page-order-detail-page-products-header h4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--order-text-strong);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 900;
}
.admin-page-order-detail-page-products-header h4 svg {
  color: var(--order-green);
}
.admin-page-order-detail-page-products-header p {
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}
.admin-page-order-detail-page-products-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--order-border);
  border-radius: 15px;
  scrollbar-color: var(--order-green) var(--order-green-light);
  scrollbar-width: thin;
}
.admin-page-order-detail-page-products-table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.admin-page-order-detail-page-products-table-wrapper::-webkit-scrollbar-track {
  background: var(--order-green-light);
}
.admin-page-order-detail-page-products-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--order-green);
  border-radius: 999px;
}
.admin-page-order-detail-page-products-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--order-white);
}
.admin-page-order-detail-page-products-table thead th {
  padding: 15px 16px;
  color: #ffffff;
  background: var(--order-gradient);
  border-bottom: 1px solid var(--order-green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.065em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-page-order-detail-page-products-table thead th:first-child {
  padding-left: 19px;
}
.admin-page-order-detail-page-products-table tbody td {
  padding: 17px 16px;
  color: var(--order-text);
  background: #ffffff;
  border-bottom: 1px solid var(--order-border);
  font-size: 12px;
  font-weight: 650;
  vertical-align: middle;
}
.admin-page-order-detail-page-products-table tbody tr:nth-child(even) td {
  background: #f8fdf9;
}
.admin-page-order-detail-page-products-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-page-order-detail-page-products-table tbody td strong {
  color: var(--order-text-strong);
  font-weight: 850;
}
.admin-page-order-detail-page-products-table tfoot td {
  padding: 16px;
  color: var(--order-green-deep);
  background: var(--order-green-light);
  border-top: 1px solid var(--order-green-border);
  font-size: 12px;
  font-weight: 850;
}
.admin-page-order-detail-page-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}
.admin-page-order-detail-page-product-image {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: cover;
  background: var(--order-green-light);
  border: 1px solid var(--order-green-border);
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-page-order-detail-page-product > div {
  min-width: 0;
}
.admin-page-order-detail-page-product strong {
  display: block;
  color: var(--order-text-strong);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-product small {
  display: block;
  margin-top: 4px;
  color: var(--order-text-soft);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 650;
}
.admin-page-order-detail-page-table-empty {
  height: 130px;
  color: var(--order-text-soft) !important;
  text-align: center !important;
  font-size: 12px !important;
}
.admin-page-order-detail-page-table-empty svg {
  display: inline-block;
  margin-right: 7px;
  color: var(--order-green);
  vertical-align: middle;
}
.admin-page-order-detail-page-vendor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  background: var(--order-border);
  border: 1px solid var(--order-border);
  border-radius: 14px;
}
.admin-page-order-detail-page-vendor-meta > div {
  position: relative;
  padding: 16px 18px;
  background: #f5fcf8;
}
.admin-page-order-detail-page-vendor-meta > div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}
.admin-page-order-detail-page-vendor-meta span {
  display: block;
  margin-bottom: 5px;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-vendor-meta strong {
  color: var(--order-text-strong);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 45px 30px;
  text-align: center;
  background: var(--order-white);
  border: 1px solid var(--order-border);
  border-radius: 20px;
  box-shadow: var(--order-shadow);
}
.admin-page-order-detail-page-empty-card > svg {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  padding: 10px;
  color: #ffffff;
  background: var(--order-gradient);
  border-radius: 13px;
}
.admin-page-order-detail-page-empty-card h3 {
  margin-bottom: 7px;
  color: var(--order-text-strong);
  font-size: 18px;
  font-weight: 900;
}
.admin-page-order-detail-page-empty-card p {
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 12px;
  font-weight: 650;
}
.admin-page-order-detail-page-financial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-page-order-detail-page-financial-item {
  position: relative;
  isolation: isolate;
  min-height: 105px;
  padding: 19px;
  overflow: hidden;
  background: #f5fcf8;
  border: 1px solid var(--order-border);
  border-radius: 14px;
}
.admin-page-order-detail-page-financial-item::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-page-order-detail-page-financial-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-financial-item strong {
  display: block;
  color: var(--order-text-strong);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-page-order-detail-page-financial-final {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 90px;
  padding: 21px 24px;
  overflow: hidden;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.38);
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-page-order-detail-page-financial-final::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 16%;
  width: 38%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.admin-page-order-detail-page-financial-final span {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.admin-page-order-detail-page-financial-final strong {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 950;
}
.admin-page-order-detail-page-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  color: #ffffff;
  background: var(--order-gradient);
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 999px;
  box-shadow: 0 7px 15px rgba(6, 78, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 850;
}
.admin-page-order-detail-page-history {
  position: relative;
  padding-left: 12px;
}
.admin-page-order-detail-page-history::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 31px;
  width: 2px;
  background: var(--order-green-border);
}
.admin-page-order-detail-page-history-item {
  position: relative;
  display: flex;
  gap: 17px;
  margin-bottom: 18px;
}
.admin-page-order-detail-page-history-item:last-child {
  margin-bottom: 0;
}
.admin-page-order-detail-page-history-marker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: #ffffff;
  background: var(--order-gradient);
  border: 4px solid var(--order-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--order-green-border), 0 6px 14px rgba(6, 78, 59, 0.11);
}
.admin-page-order-detail-page-history-marker svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.admin-page-order-detail-page-history-content {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 17px 19px;
  background: #f5fcf8;
  border: 1px solid var(--order-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-page-order-detail-page-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
.admin-page-order-detail-page-history-header strong {
  color: var(--order-text-strong);
  font-size: 14px;
  font-weight: 900;
}
.admin-page-order-detail-page-history-header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--order-green-mid);
  font-size: 10px;
  font-weight: 750;
}
.admin-page-order-detail-page-history-header span svg {
  width: 13px;
  height: 13px;
}
.admin-page-order-detail-page-history-content p {
  margin-bottom: 9px;
  color: var(--order-text);
  font-size: 12px;
  line-height: 1.65;
  font-weight: 600;
}
.admin-page-order-detail-page-history-content small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--order-text-soft);
  font-size: 10px;
  font-weight: 700;
}
.admin-page-order-detail-page-history-content small svg {
  width: 13px;
  height: 13px;
}
.admin-page-order-detail-page-empty-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 40px 25px;
  text-align: center;
  background: var(--order-green-light);
  border: 1px dashed var(--order-green-border);
  border-radius: 15px;
}
.admin-page-order-detail-page-empty-history > svg {
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  padding: 9px;
  color: #ffffff;
  background: var(--order-gradient);
  border-radius: 12px;
}
.admin-page-order-detail-page-empty-history h3 {
  margin-bottom: 6px;
  color: var(--order-text-strong);
  font-size: 17px;
  font-weight: 900;
}
.admin-page-order-detail-page-empty-history p {
  margin-bottom: 0;
  color: var(--order-text-soft);
  font-size: 12px;
  font-weight: 650;
}
.admin-page-order-detail-page-wrapper a:focus-visible, .admin-page-order-detail-page-wrapper button:focus-visible, .admin-page-order-detail-page-wrapper input:focus-visible, .admin-page-order-detail-page-wrapper select:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.2);
  outline-offset: 3px;
}
@media (max-width: 1250px) {
  .admin-page-order-detail-page-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page-order-detail-page-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-page-order-detail-page-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page-order-detail-page-financial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .admin-page-order-detail-page-wrapper {
    padding: 22px;
  }
  .admin-page-order-detail-page-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-header-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .admin-page-order-detail-page-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .admin-page-order-detail-page-title-block p {
    justify-content: center;
  }
  .admin-page-order-detail-page-header-status {
    width: 100%;
    max-width: 420px;
  }
  .admin-page-order-detail-page-card {
    padding: 25px;
  }
  .admin-page-order-detail-page-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page-order-detail-page-vendor-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-vendor-heading {
    justify-content: center;
    text-align: center;
  }
  .admin-page-order-detail-page-vendor-total {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  .admin-page-order-detail-page-vendor-meta {
    grid-template-columns: 1fr;
  }
  .admin-page-order-detail-page-section-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-section-heading {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 650px) {
  .admin-page-order-detail-page-wrapper {
    padding: 15px;
  }
  .admin-page-order-detail-page-header {
    margin-bottom: 20px;
    padding: 21px;
    border-radius: 17px;
  }
  .admin-page-order-detail-page-back {
    margin-bottom: 17px;
  }
  .admin-page-order-detail-page-title-block h1 {
    font-size: 26px;
  }
  .admin-page-order-detail-page-title-block p {
    font-size: 12px;
  }
  .admin-page-order-detail-page-header-status {
    min-width: 0;
    max-width: none;
  }
  .admin-page-order-detail-page-overview {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
  }
  .admin-page-order-detail-page-overview-card {
    min-height: 165px;
  }
  .admin-page-order-detail-page-card {
    margin-bottom: 20px;
    padding: 19px;
    border-radius: 17px;
  }
  .admin-page-order-detail-page-card-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-card-heading {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .admin-page-order-detail-page-card-heading > div:last-child {
    text-align: center;
  }
  .admin-page-order-detail-page-section-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .admin-page-order-detail-page-info-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-order-detail-page-info-full {
    grid-column: auto;
  }
  .admin-page-order-detail-page-info-item {
    min-height: 88px;
    padding: 17px;
    text-align: center;
  }
  .admin-page-order-detail-page-info-item > span, .admin-page-order-detail-page-info-item > strong {
    text-align: center;
  }
  .admin-page-order-detail-page-section-header {
    align-items: center;
    flex-direction: column;
    margin-bottom: 17px;
  }
  .admin-page-order-detail-page-section-heading {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .admin-page-order-detail-page-section-heading > div {
    text-align: center;
  }
  .admin-page-order-detail-page-vendor-count {
    align-self: center;
  }
  .admin-page-order-detail-page-vendor-card {
    border-radius: 17px;
  }
  .admin-page-order-detail-page-vendor-header {
    padding: 20px;
  }
  .admin-page-order-detail-page-vendor-details {
    padding: 17px;
  }
  .admin-page-order-detail-page-vendor-heading {
    flex-direction: column;
  }
  .admin-page-order-detail-page-vendor-heading h3 {
    font-size: 19px;
  }
  .admin-page-order-detail-page-status-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-order-detail-page-status-card {
    justify-content: flex-start;
  }
  .admin-page-order-detail-page-inner-card {
    padding: 17px;
  }
  .admin-page-order-detail-page-inner-card-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-inner-heading {
    justify-content: center;
    text-align: center;
  }
  .admin-page-order-detail-page-inner-heading > div:last-child {
    text-align: center;
  }
  .admin-page-order-detail-page-earning-status {
    align-self: center;
  }
  .admin-page-order-detail-page-financial-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-order-detail-page-financial-final {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .admin-page-order-detail-page-financial-final strong {
    font-size: 23px;
  }
  .admin-page-order-detail-page-products-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .admin-page-order-detail-page-products-header h4 {
    justify-content: center;
  }
  .admin-page-order-detail-page-products-header p {
    text-align: center;
  }
  .admin-page-order-detail-page-products-table {
    min-width: 720px;
  }
  .admin-page-order-detail-page-history {
    padding-left: 0;
  }
  .admin-page-order-detail-page-history::before {
    left: 20px;
  }
  .admin-page-order-detail-page-history-item {
    gap: 12px;
  }
  .admin-page-order-detail-page-history-marker {
    width: 40px;
    flex-basis: 40px;
  }
  .admin-page-order-detail-page-history-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .admin-page-order-detail-page-history-header span {
    white-space: normal;
  }
}
@media (max-width: 420px) {
  .admin-page-order-detail-page-wrapper {
    padding: 10px;
  }
  .admin-page-order-detail-page-header {
    padding: 18px;
    border-radius: 15px;
  }
  .admin-page-order-detail-page-title-block h1 {
    font-size: 23px;
  }
  .admin-page-order-detail-page-title-block p {
    font-size: 11px;
  }
  .admin-page-order-detail-page-header-status {
    padding: 14px;
  }
  .admin-page-order-detail-page-overview-card {
    min-height: 155px;
    padding: 20px 16px;
  }
  .admin-page-order-detail-page-card {
    padding: 16px;
    border-radius: 15px;
  }
  .admin-page-order-detail-page-card-header h2, .admin-page-order-detail-page-section-header h2 {
    font-size: 19px;
  }
  .admin-page-order-detail-page-vendor-header {
    padding: 18px;
  }
  .admin-page-order-detail-page-vendor-total {
    min-width: 0;
    width: 100%;
  }
  .admin-page-order-detail-page-vendor-total strong {
    font-size: 20px;
  }
  .admin-page-order-detail-page-vendor-details {
    padding: 15px;
  }
  .admin-page-order-detail-page-status-card {
    padding: 14px;
  }
  .admin-page-order-detail-page-inner-card {
    padding: 15px;
  }
  .admin-page-order-detail-page-products-table {
    min-width: 680px;
  }
  .admin-page-order-detail-page-history-content {
    padding: 15px;
  }
  .admin-page-order-detail-page-financial-final {
    padding: 19px;
  }
  .admin-page-order-detail-page-financial-final strong {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-order-detail-page-wrapper *, .admin-page-order-detail-page-wrapper *::before, .admin-page-order-detail-page-wrapper *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.admin-order-list-page-wrapper {
  --admin-order-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --admin-order-green: #047857;
  --admin-order-green-dark: #065f46;
  --admin-order-green-deep: #064e3b;
  --admin-order-green-light: #ecfdf5;
  --admin-order-green-soft: #f4fbf7;
  --admin-order-green-border: #b7dfcc;
  --admin-order-bg: #f5faf7;
  --admin-order-white: #ffffff;
  --admin-order-border: #cfe3d8;
  --admin-order-text: #022c22;
  --admin-order-text-secondary: #14532d;
  width: 100%;
  min-height: 100%;
  padding: 32px;
  box-sizing: border-box;
  background: radial-gradient( circle at top center, rgba(4, 120, 87, 0.055), transparent 34% ), var(--admin-order-bg);
  color: var(--admin-order-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.admin-order-list-page-wrapper *, .admin-order-list-page-wrapper *::before, .admin-order-list-page-wrapper *::after {
  box-sizing: border-box;
}
.admin-order-list-page-wrapper [data-lucide] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke-width: 2;
}
.admin-order-list-page-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 34px;
  text-align: center;
}
.admin-order-list-page-header > div {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.admin-order-list-page-header h1 {
  position: relative;
  margin: 0 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--admin-order-green-deep);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.045em;
  text-align: center;
}
.admin-order-list-page-header h1::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -7px;
  height: 2px;
  background: linear-gradient( 90deg, transparent, #047857, transparent );
  border-radius: 999px;
  opacity: 0.65;
}
.admin-order-list-page-header h1 [data-lucide] {
  width: 29px;
  height: 29px;
  color: #047857;
  stroke-width: 2.25;
}
.admin-order-list-page-header p {
  max-width: 650px;
  margin: 5px auto 0;
  color: var(--admin-order-text-secondary);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 600;
  text-align: center;
}
.admin-order-list-page-wrapper > section {
  width: 100%;
  margin: 0 auto 30px;
}
.admin-order-list-page-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.admin-order-list-page-stat-card {
  position: relative;
  isolation: isolate;
  min-height: 158px;
  padding: 24px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient( 180deg, #ffffff 0%, #fbfffc 100% );
  border: 1px solid var(--admin-order-border);
  border-radius: 17px;
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  background: var(--admin-order-gradient);
  border-radius: 0 0 999px 999px;
  pointer-events: none;
}
.admin-order-list-page-stat-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 8%;
  width: 84%;
  height: 48px;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent );
  pointer-events: none;
}
.admin-order-list-page-stat-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 12px;
  color: var(--admin-order-green-dark);
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-order-list-page-stat-icon [data-lucide] {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}
.admin-order-list-page-stat-card > span {
  display: block;
  max-width: 190px;
  margin-bottom: 7px;
  color: var(--admin-order-text-secondary);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  text-align: center;
}
.admin-order-list-page-stat-card > strong {
  display: block;
  color: var(--admin-order-green-deep);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-align: center;
}
.admin-order-list-page-vendor-stats {
  width: 100%;
  padding: 30px;
  background: linear-gradient( 180deg, #ffffff 0%, #fbfffc 100% );
  border: 1px solid var(--admin-order-border);
  border-radius: 19px;
  box-shadow: 0 9px 25px rgba(6, 78, 59, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-section-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-order-list-page-section-title-icon {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 13px;
  color: var(--admin-order-green-dark);
  box-shadow: 0 6px 15px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-section-title-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
}
.admin-order-list-page-section-title-icon [data-lucide] {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}
.admin-order-list-page-section-title h2 {
  margin: 0 0 7px;
  color: var(--admin-order-green-deep);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-align: center;
}
.admin-order-list-page-section-title p {
  max-width: 650px;
  margin: 0;
  color: var(--admin-order-text-secondary);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
}
.admin-order-list-page-vendor-stats .admin-order-list-page-stats {
  margin-top: 27px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.admin-order-list-page-filters {
  width: 100%;
  padding: 30px;
  background: linear-gradient( 180deg, #ffffff 0%, #fbfffc 100% );
  border: 1px solid var(--admin-order-border);
  border-radius: 19px;
  box-shadow: 0 9px 25px rgba(6, 78, 59, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-filter-title {
  margin-bottom: 27px;
}
.admin-order-list-page-filters form {
  width: 100%;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr auto;
  align-items: end;
  gap: 14px;
}
.admin-order-list-page-filter-field {
  min-width: 0;
}
.admin-order-list-page-filter-field label {
  display: block;
  margin: 0 0 8px;
  color: var(--admin-order-green-deep);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.admin-order-list-page-input-wrapper, .admin-order-list-page-select-wrapper {
  position: relative;
  width: 100%;
}
.admin-order-list-page-input-wrapper > [data-lucide], .admin-order-list-page-select-wrapper > [data-lucide] {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--admin-order-green);
  pointer-events: none;
}
.admin-order-list-page-filters input[type="text"] {
  width: 100%;
  height: 47px;
  padding: 0 14px 0 41px;
  background: linear-gradient( 180deg, #ffffff 0%, #f9fdfb 100% );
  border: 1px solid var(--admin-order-border);
  border-radius: 11px;
  color: var(--admin-order-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-order-list-page-filters input[type="text"]::placeholder {
  color: var(--admin-order-text-secondary);
  opacity: 0.9;
}
.admin-order-list-page-filters input[type="text"]:focus {
  border-color: var(--admin-order-green);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.admin-order-list-page-filters select {
  width: 100%;
  height: 47px;
  padding: 0 37px 0 41px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient( 180deg, #ffffff 0%, #f9fdfb 100% );
  border: 1px solid var(--admin-order-border);
  border-radius: 11px;
  color: var(--admin-order-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-order-list-page-filters select:focus {
  border-color: var(--admin-order-green);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.admin-order-list-page-select-wrapper::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--admin-order-green-dark);
  border-bottom: 2px solid var(--admin-order-green-dark);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.admin-order-list-page-filter-actions {
  height: 47px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.admin-order-list-page-filter-actions button {
  position: relative;
  isolation: isolate;
  height: 47px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--admin-order-gradient);
  border: 1px solid #065f46;
  border-radius: 11px;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-order-list-page-filter-actions button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
  pointer-events: none;
}
.admin-order-list-page-filter-actions button:hover {
  border-color: #064e3b;
  box-shadow: 0 9px 20px rgba(6, 78, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.admin-order-list-page-filter-actions a {
  position: relative;
  height: 47px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 11px;
  color: var(--admin-order-green-dark);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-order-list-page-filter-actions a:hover {
  background: linear-gradient( 180deg, #dcfce7 0%, #bbf7d0 100% );
  border-color: var(--admin-order-green);
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.08);
}
.admin-order-list-page-table-wrapper {
  width: 100%;
  background: var(--admin-order-white);
  border: 1px solid var(--admin-order-border);
  border-radius: 19px;
  box-shadow: 0 9px 25px rgba(6, 78, 59, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-table-header {
  width: 100%;
  padding: 29px 25px 26px;
  background: linear-gradient( 180deg, #ffffff 0%, #fbfffc 100% );
  border-bottom: 1px solid var(--admin-order-border);
}
.admin-order-list-page-table-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #9acbb1 #edf8f1;
}
.admin-order-list-page-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--admin-order-text);
  font-size: 13px;
}
.admin-order-list-page-table thead {
  background: linear-gradient( 180deg, #ecfdf5 0%, #dcfce7 100% );
}
.admin-order-list-page-table thead th {
  padding: 16px 14px;
  border-bottom: 1px solid var(--admin-order-green-border);
  color: var(--admin-order-green-deep);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.admin-order-list-page-table thead th > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.admin-order-list-page-table thead th [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--admin-order-green);
}
.admin-order-list-page-table tbody td {
  padding: 18px 14px;
  border-bottom: 1px solid #dcebe3;
  color: var(--admin-order-text);
  vertical-align: middle;
  text-align: center;
  line-height: 1.45;
}
.admin-order-list-page-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-order-list-page-table tbody tr {
  background: #ffffff;
  transition: background-color 0.16s ease;
}
.admin-order-list-page-table tbody tr:hover {
  background: #f5fcf8;
}
.admin-order-list-page-order-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin-order-list-page-order-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 9px;
  color: var(--admin-order-green-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-order-list-page-order-icon [data-lucide] {
  width: 15px;
  height: 15px;
}
.admin-order-list-page-order-id strong {
  color: var(--admin-order-green-deep);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-order-list-page-customer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.admin-order-list-page-customer strong {
  color: var(--admin-order-text);
  font-size: 13px;
  font-weight: 800;
}
.admin-order-list-page-customer small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--admin-order-text-secondary);
  font-size: 11px;
  font-weight: 650;
}
.admin-order-list-page-customer small [data-lucide] {
  width: 12px;
  height: 12px;
  color: var(--admin-order-green);
}
.admin-order-list-page-vendors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.admin-order-list-page-vendor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--admin-order-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.admin-order-list-page-vendor-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 7px;
  color: var(--admin-order-green-dark);
}
.admin-order-list-page-vendor-icon [data-lucide] {
  width: 13px;
  height: 13px;
}
.admin-order-list-page-no-vendor {
  color: var(--admin-order-text-secondary);
  font-size: 12px;
  font-weight: 650;
}
.admin-order-list-page-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--admin-order-green-deep);
  background: var(--admin-order-green-light);
  border: 1px solid var(--admin-order-green-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.admin-order-list-page-count [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--admin-order-green);
}
.admin-order-list-page-total {
  color: var(--admin-order-green-deep);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-order-list-page-payment-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 7px 11px;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 999px;
  color: var(--admin-order-green-deep);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-order-list-page-payment-badge [data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--admin-order-green);
}
.admin-order-list-page-completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.admin-order-list-page-completion strong {
  color: var(--admin-order-green-deep);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.admin-order-list-page-completion small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--admin-order-text-secondary);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.admin-order-list-page-completion small [data-lucide] {
  width: 12px;
  height: 12px;
  color: var(--admin-order-green);
}
.admin-order-list-page-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--admin-order-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-order-list-page-date [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--admin-order-green);
}
.admin-order-list-page-view-button {
  position: relative;
  min-width: 72px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--admin-order-gradient);
  border: 1px solid #065f46;
  border-radius: 9px;
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 5px 13px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-order-list-page-view-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.85), transparent );
  pointer-events: none;
}
.admin-order-list-page-view-button:hover {
  border-color: #064e3b;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-order-list-page-view-button [data-lucide] {
  width: 14px;
  height: 14px;
}
.admin-order-list-page-empty-row td {
  height: 280px;
  padding: 45px;
}
.admin-order-list-page-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-order-list-page-empty-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #f0fdf4 0%, #dcfce7 100% );
  border: 1px solid var(--admin-order-green-border);
  border-radius: 17px;
  color: var(--admin-order-green-dark);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.admin-order-list-page-empty-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
}
.admin-order-list-page-empty-icon [data-lucide] {
  width: 29px;
  height: 29px;
}
.admin-order-list-page-empty strong {
  display: block;
  margin-bottom: 7px;
  color: var(--admin-order-green-deep);
  font-size: 17px;
  font-weight: 900;
}
.admin-order-list-page-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--admin-order-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}
.admin-order-list-page-wrapper button:focus-visible, .admin-order-list-page-wrapper a:focus-visible, .admin-order-list-page-wrapper input:focus-visible, .admin-order-list-page-wrapper select:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 3px;
}
@media (max-width: 1250px) {
  .admin-order-list-page-wrapper {
    padding: 26px;
  }
  .admin-order-list-page-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-order-list-page-vendor-stats .admin-order-list-page-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-order-list-page-filters form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-order-list-page-filter-field:first-child {
    grid-column: span 3;
  }
  .admin-order-list-page-filter-actions {
    grid-column: span 3;
    justify-content: center;
  }
}
@media (max-width: 900px) {
  .admin-order-list-page-wrapper {
    padding: 21px;
  }
  .admin-order-list-page-header {
    margin-bottom: 27px;
  }
  .admin-order-list-page-header h1 {
    font-size: 28px;
  }
  .admin-order-list-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-order-list-page-vendor-stats .admin-order-list-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-order-list-page-vendor-stats, .admin-order-list-page-filters {
    padding: 23px;
  }
  .admin-order-list-page-filters form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-order-list-page-filter-field:first-child {
    grid-column: span 2;
  }
  .admin-order-list-page-filter-actions {
    grid-column: span 2;
    justify-content: center;
  }
  .admin-order-list-page-table-header {
    padding: 25px 21px;
  }
}
@media (max-width: 600px) {
  .admin-order-list-page-wrapper {
    padding: 15px;
  }
  .admin-order-list-page-header {
    margin-bottom: 23px;
  }
  .admin-order-list-page-header h1 {
    font-size: 25px;
    gap: 8px;
  }
  .admin-order-list-page-header h1 [data-lucide] {
    width: 23px;
    height: 23px;
  }
  .admin-order-list-page-header p {
    max-width: 340px;
    font-size: 12px;
  }
  .admin-order-list-page-wrapper > section {
    margin-bottom: 20px;
  }
  .admin-order-list-page-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-order-list-page-vendor-stats .admin-order-list-page-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-order-list-page-stat-card {
    min-height: 142px;
    padding: 21px 17px;
  }
  .admin-order-list-page-vendor-stats, .admin-order-list-page-filters {
    padding: 19px;
  }
  .admin-order-list-page-section-title-icon {
    width: 43px;
    height: 43px;
  }
  .admin-order-list-page-section-title h2 {
    font-size: 19px;
  }
  .admin-order-list-page-section-title p {
    max-width: 320px;
    font-size: 12px;
  }
  .admin-order-list-page-filter-title {
    margin-bottom: 22px;
  }
  .admin-order-list-page-filters form {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .admin-order-list-page-filter-field:first-child {
    grid-column: auto;
  }
  .admin-order-list-page-filter-actions {
    grid-column: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-order-list-page-filter-actions button, .admin-order-list-page-filter-actions a {
    width: 100%;
  }
  .admin-order-list-page-table-header {
    padding: 23px 17px;
  }
  .admin-order-list-page-table {
    min-width: 1100px;
  }
  .admin-order-list-page-empty-row td {
    height: 250px;
    padding: 35px 20px;
  }
}
@media (max-width: 380px) {
  .admin-order-list-page-wrapper {
    padding: 12px;
  }
  .admin-order-list-page-header h1 {
    font-size: 23px;
  }
  .admin-order-list-page-header p {
    font-size: 11.5px;
  }
  .admin-order-list-page-stat-card {
    padding: 19px 15px;
  }
  .admin-order-list-page-stat-card > strong {
    font-size: 21px;
  }
  .admin-order-list-page-vendor-stats, .admin-order-list-page-filters {
    padding: 17px;
  }
  .admin-order-list-page-filter-actions {
    grid-template-columns: 1fr;
  }
  .admin-order-list-page-empty strong {
    font-size: 15px;
  }
  .admin-order-list-page-empty p {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-order-list-page-wrapper *, .admin-order-list-page-wrapper *::before, .admin-order-list-page-wrapper *::after {
    transition: none !important;
    animation: none !important;
  }
}
:root {
  --payment-detail-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --payment-detail-deep: #022c22;
  --payment-detail-dark: #064e3b;
  --payment-detail-green: #047857;
  --payment-detail-mid: #065f46;
  --payment-detail-soft: #ecfdf5;
  --payment-detail-soft-2: #f0fdf4;
  --payment-detail-text: #022c22;
  --payment-detail-text-soft: #14532d;
  --payment-detail-bg: #f3faf6;
  --payment-detail-white: #ffffff;
  --payment-detail-border: rgba(6, 78, 59, 0.14);
  --payment-detail-border-strong: rgba(6, 78, 59, 0.2);
  --payment-detail-shadow: 0 14px 34px rgba(6, 78, 59, 0.08),
        0 3px 10px rgba(6, 78, 59, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --payment-detail-shadow-small: 0 8px 22px rgba(6, 78, 59, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.admin-page-payment-detail-page-wrapper {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 32px;
  box-sizing: border-box;
  color: var(--payment-detail-text);
  background: var(--payment-detail-bg);
}
.admin-page-payment-detail-page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 34px 30px;
  margin-bottom: 28px;
  overflow: hidden;
  background: var(--payment-detail-gradient);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.admin-page-payment-detail-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.07) 18%, rgba(255, 255, 255, 0) 48% );
  pointer-events: none;
}
.admin-page-payment-detail-page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.admin-page-payment-detail-page-back {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 14px;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-page-payment-detail-page-back svg {
  width: 17px;
  height: 17px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.5;
}
.admin-page-payment-detail-page-header-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  text-align: center;
}
.admin-page-payment-detail-page-header-icon {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 19px;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.12);
}
.admin-page-payment-detail-page-header-icon svg {
  width: 32px;
  height: 32px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2;
}
.admin-page-payment-detail-page-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.admin-page-payment-detail-page-header h1 {
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.admin-page-payment-detail-page-header-main p {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.admin-page-payment-detail-page-header-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.admin-page-payment-detail-page-header-status svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}
.admin-page-payment-detail-page-header-status.is-success {
  color: #166534;
  background: #dcfce7;
  border-color: #a7f3c0;
}
.admin-page-payment-detail-page-header-status.is-pending {
  color: #92400e;
  background: #fef3c7;
  border-color: #f5d08a;
}
.admin-page-payment-detail-page-header-status.is-failed {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}
.admin-page-payment-detail-page-header-status.is-other {
  color: #14532d;
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.admin-page-payment-detail-page-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.admin-page-payment-detail-page-summary-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 170px;
  padding: 24px;
  overflow: hidden;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--payment-detail-border);
  border-radius: 20px;
  box-shadow: var(--payment-detail-shadow-small);
}
.admin-page-payment-detail-page-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, rgba(4, 120, 87, 0.55), transparent );
}
.admin-page-payment-detail-page-summary-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  color: #ffffff;
  background: var(--payment-detail-gradient);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.admin-page-payment-detail-page-summary-icon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.2;
}
.admin-page-payment-detail-page-summary-card > div:last-child {
  min-width: 0;
}
.admin-page-payment-detail-page-summary-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--payment-detail-text-soft);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-page-payment-detail-page-summary-card strong {
  display: block;
  color: var(--payment-detail-deep);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-page-payment-detail-page-card {
  position: relative;
  margin-bottom: 24px;
  padding: 30px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--payment-detail-border);
  border-radius: 22px;
  box-shadow: var(--payment-detail-shadow);
}
.admin-page-payment-detail-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient( 90deg, transparent, rgba(4, 120, 87, 0.45), transparent );
}
.admin-page-payment-detail-page-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 27px;
  text-align: center;
}
.admin-page-payment-detail-page-card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
}
.admin-page-payment-detail-page-section-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--payment-detail-gradient);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.admin-page-payment-detail-page-section-icon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.2;
}
.admin-page-payment-detail-page-card-header h2 {
  margin: 0;
  color: var(--payment-detail-deep);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}
.admin-page-payment-detail-page-card-header p {
  margin: 7px 0 0;
  color: var(--payment-detail-text-soft);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 650;
}
.admin-page-payment-detail-page-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--payment-detail-border-strong);
  border: 1px solid var(--payment-detail-border-strong);
  border-radius: 16px;
}
.admin-page-payment-detail-page-info-item {
  position: relative;
  min-width: 0;
  min-height: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px;
  text-align: center;
  background: #ffffff;
}
.admin-page-payment-detail-page-info-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  height: 1px;
  background: rgba(4, 120, 87, 0.14);
}
.admin-page-payment-detail-page-info-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--payment-detail-text-soft);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.admin-page-payment-detail-page-info-item span svg {
  width: 15px;
  height: 15px;
  color: var(--payment-detail-green);
  stroke: var(--payment-detail-green);
  stroke-width: 2.3;
}
.admin-page-payment-detail-page-info-item strong {
  display: block;
  max-width: 100%;
  color: var(--payment-detail-deep);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.admin-page-payment-detail-page-gateway-response {
  width: 100%;
  max-height: 520px;
  margin: 0;
  padding: 22px;
  box-sizing: border-box;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d1fae5;
  background: linear-gradient( 135deg, #022c22 0%, #064e3b 52%, #022c22 100% );
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.75;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(6, 78, 59, 0.08);
}
.admin-page-payment-detail-page-gateway-response::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.admin-page-payment-detail-page-gateway-response::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.admin-page-payment-detail-page-gateway-response::-webkit-scrollbar-thumb {
  background: rgba(167, 243, 208, 0.5);
  border-radius: 999px;
}
.admin-page-payment-detail-page-empty {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background: var(--payment-detail-soft-2);
  border: 1px dashed rgba(4, 120, 87, 0.3);
  border-radius: 16px;
}
.admin-page-payment-detail-page-empty svg {
  width: 38px;
  height: 38px;
  color: var(--payment-detail-green);
  stroke: var(--payment-detail-green);
  stroke-width: 1.9;
}
.admin-page-payment-detail-page-empty strong {
  color: var(--payment-detail-deep);
  font-size: 16px;
  font-weight: 900;
}
.admin-page-payment-detail-page-empty p {
  margin: 0;
  color: var(--payment-detail-text-soft);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 650;
}
.admin-page-payment-detail-page-total-list {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--payment-detail-border-strong);
  border-radius: 16px;
}
.admin-page-payment-detail-page-total-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  padding: 16px 21px;
  background: #ffffff;
  border-bottom: 1px solid var(--payment-detail-border);
}
.admin-page-payment-detail-page-total-list > div:last-child {
  border-bottom: 0;
}
.admin-page-payment-detail-page-total-list > div:nth-child(even) {
  background: #fbfefc;
}
.admin-page-payment-detail-page-total-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--payment-detail-text-soft);
  font-size: 13px;
  font-weight: 800;
}
.admin-page-payment-detail-page-total-list span svg {
  width: 16px;
  height: 16px;
  color: var(--payment-detail-green);
  stroke: var(--payment-detail-green);
  stroke-width: 2.3;
}
.admin-page-payment-detail-page-total-list strong {
  color: var(--payment-detail-deep);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}
.admin-page-payment-detail-page-total-list .admin-page-payment-detail-page-total-final {
  position: relative;
  padding: 22px 21px;
  background: var(--payment-detail-gradient);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.admin-page-payment-detail-page-total-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 65% );
  pointer-events: none;
}
.admin-page-payment-detail-page-total-final span {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}
.admin-page-payment-detail-page-total-final span svg {
  color: #ffffff;
  stroke: #ffffff;
}
.admin-page-payment-detail-page-total-final strong {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 25px;
  font-weight: 950;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.admin-page-payment-detail-page-wrapper a {
  transition: none;
}
.admin-page-payment-detail-page-wrapper a:hover {
  transform: none;
}
.admin-page-payment-detail-page-wrapper a:focus-visible, .admin-page-payment-detail-page-wrapper button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.28);
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .admin-page-payment-detail-page-wrapper {
    padding: 25px;
  }
  .admin-page-payment-detail-page-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .admin-page-payment-detail-page-wrapper {
    padding: 18px;
  }
  .admin-page-payment-detail-page-header {
    padding: 27px 20px;
    border-radius: 20px;
  }
  .admin-page-payment-detail-page-back {
    align-self: center;
  }
  .admin-page-payment-detail-page-header h1 {
    font-size: 28px;
  }
  .admin-page-payment-detail-page-summary-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-payment-detail-page-summary-card {
    min-height: 145px;
  }
  .admin-page-payment-detail-page-card {
    padding: 22px;
    border-radius: 19px;
  }
  .admin-page-payment-detail-page-info-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-payment-detail-page-info-item {
    min-height: 96px;
  }
  .admin-page-payment-detail-page-total-list > div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .admin-page-payment-detail-page-total-list strong {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .admin-page-payment-detail-page-wrapper {
    padding: 12px;
  }
  .admin-page-payment-detail-page-header {
    padding: 23px 16px;
    border-radius: 18px;
    gap: 20px;
  }
  .admin-page-payment-detail-page-header-icon {
    width: 58px;
    height: 58px;
  }
  .admin-page-payment-detail-page-header-icon svg {
    width: 27px;
    height: 27px;
  }
  .admin-page-payment-detail-page-header h1 {
    font-size: 24px;
  }
  .admin-page-payment-detail-page-header-main p {
    font-size: 12px;
  }
  .admin-page-payment-detail-page-eyebrow {
    font-size: 10px;
  }
  .admin-page-payment-detail-page-summary-card {
    padding: 20px;
    border-radius: 17px;
  }
  .admin-page-payment-detail-page-summary-card strong {
    font-size: 18px;
  }
  .admin-page-payment-detail-page-card {
    padding: 18px;
    border-radius: 17px;
  }
  .admin-page-payment-detail-page-card-header h2 {
    font-size: 19px;
  }
  .admin-page-payment-detail-page-card-header p {
    font-size: 12px;
  }
  .admin-page-payment-detail-page-section-icon {
    width: 44px;
    height: 44px;
  }
  .admin-page-payment-detail-page-info-item {
    padding: 17px 14px;
  }
  .admin-page-payment-detail-page-info-item strong {
    font-size: 14px;
  }
  .admin-page-payment-detail-page-gateway-response {
    padding: 16px;
    font-size: 12px;
    line-height: 1.65;
    border-radius: 13px;
  }
  .admin-page-payment-detail-page-empty {
    min-height: 180px;
    padding: 25px 18px;
  }
  .admin-page-payment-detail-page-total-final strong {
    font-size: 21px;
  }
}
@media (max-width: 380px) {
  .admin-page-payment-detail-page-wrapper {
    padding: 9px;
  }
  .admin-page-payment-detail-page-header {
    padding: 21px 13px;
  }
  .admin-page-payment-detail-page-header h1 {
    font-size: 22px;
  }
  .admin-page-payment-detail-page-card {
    padding: 15px;
  }
  .admin-page-payment-detail-page-summary-card {
    padding: 17px;
  }
  .admin-page-payment-detail-page-total-list > div {
    padding: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-payment-detail-page-wrapper *, .admin-page-payment-detail-page-wrapper *::before, .admin-page-payment-detail-page-wrapper *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.admin-page-payment-page-wrapper {
  --payment-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --payment-green: #047857;
  --payment-green-dark: #065f46;
  --payment-green-deep: #064e3b;
  --payment-green-mid: #166534;
  --payment-green-light: #ecfdf5;
  --payment-green-soft: #f0fdf4;
  --payment-green-border: rgba(6, 95, 70, 0.18);
  --payment-text: #022c22;
  --payment-text-strong: #022c22;
  --payment-text-soft: #14532d;
  --payment-border: rgba(6, 78, 59, 0.13);
  --payment-border-strong: rgba(6, 78, 59, 0.2);
  --payment-white: #ffffff;
  --payment-bg: #f3faf6;
  --payment-success: #166534;
  --payment-success-bg: #ecfdf3;
  --payment-success-border: #bbebcd;
  --payment-warning: #92400e;
  --payment-warning-bg: #fffbeb;
  --payment-warning-border: #f5d08a;
  --payment-danger: #991b1b;
  --payment-danger-bg: #fef2f2;
  --payment-danger-border: #fecaca;
  --payment-shadow: 0 14px 36px rgba(6, 78, 59, 0.08),
        0 3px 10px rgba(6, 78, 59, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 32px;
  color: var(--payment-text);
  background: var(--payment-bg);
  box-sizing: border-box;
}
.admin-page-payment-page-wrapper *, .admin-page-payment-page-wrapper *::before, .admin-page-payment-page-wrapper *::after {
  box-sizing: border-box;
}
.admin-page-payment-page-wrapper h1, .admin-page-payment-page-wrapper h2, .admin-page-payment-page-wrapper h3, .admin-page-payment-page-wrapper p {
  margin-top: 0;
}
.admin-page-payment-page-wrapper a {
  color: inherit;
}
.admin-page-payment-page-wrapper button, .admin-page-payment-page-wrapper input, .admin-page-payment-page-wrapper select {
  font: inherit;
}
.admin-page-payment-page-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 30px;
  margin-bottom: 30px;
  text-align: center;
  background: var(--payment-gradient);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-page-payment-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.admin-page-payment-page-header::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 55px;
  background: linear-gradient( to top, rgba(255, 255, 255, 0.07), transparent );
  pointer-events: none;
}
.admin-page-payment-page-header-icon {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.admin-page-payment-page-header-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 2;
}
.admin-page-payment-page-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-page-payment-page-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-page-payment-page-header h1 {
  margin-bottom: 9px;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.035em;
}
.admin-page-payment-page-header p {
  max-width: 700px;
  margin-bottom: 0;
  color: #dcfce7;
  font-size: 15px;
  line-height: 1.65;
}
.admin-page-payment-page-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.admin-page-payment-page-stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 158px;
  padding: 24px;
  text-align: center;
  background: var(--payment-white);
  border: 1px solid var(--payment-border);
  border-radius: 20px;
  box-shadow: var(--payment-shadow);
}
.admin-page-payment-page-stat-card::before, .admin-page-payment-page-breakdown-card::before, .admin-page-payment-page-filter-card::before, .admin-page-payment-page-table-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(4, 120, 87, 0.28), transparent );
}
.admin-page-payment-page-stat-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-payment-page-stat-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.admin-page-payment-page-stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-page-payment-page-stat-content span {
  margin-bottom: 5px;
  color: var(--payment-text-soft);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-page-payment-page-stat-content strong {
  color: var(--payment-text-strong);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 900;
}
.admin-page-payment-page-stat-content small {
  margin-top: 6px;
  color: var(--payment-green);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 900;
}
.admin-page-payment-page-stat-success .admin-page-payment-page-stat-icon {
  background: linear-gradient( 135deg, #166534, #15803d );
}
.admin-page-payment-page-stat-success .admin-page-payment-page-stat-content small {
  color: var(--payment-success);
}
.admin-page-payment-page-stat-pending .admin-page-payment-page-stat-icon {
  color: #ffffff;
  background: linear-gradient( 135deg, #92400e, #b45309 );
}
.admin-page-payment-page-stat-pending .admin-page-payment-page-stat-content small {
  color: var(--payment-warning);
}
.admin-page-payment-page-stat-danger .admin-page-payment-page-stat-icon {
  color: #ffffff;
  background: linear-gradient( 135deg, #991b1b, #b91c1c );
}
.admin-page-payment-page-stat-danger .admin-page-payment-page-stat-content small {
  color: var(--payment-danger);
}
.admin-page-payment-page-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22px;
  text-align: center;
}
.admin-page-payment-page-section-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-payment-page-section-icon svg {
  width: 23px;
  height: 23px;
}
.admin-page-payment-page-section-heading h2 {
  margin-bottom: 6px;
  color: var(--payment-text-strong);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 900;
}
.admin-page-payment-page-section-heading p {
  margin-bottom: 0;
  color: var(--payment-text-soft);
  font-size: 14px;
  line-height: 1.55;
}
.admin-page-payment-page-breakdown {
  margin-bottom: 32px;
}
.admin-page-payment-page-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.admin-page-payment-page-breakdown-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 25px;
  background: var(--payment-white);
  border: 1px solid var(--payment-border);
  border-radius: 20px;
  box-shadow: var(--payment-shadow);
}
.admin-page-payment-page-breakdown-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 15px;
}
.admin-page-payment-page-breakdown-icon svg {
  width: 24px;
  height: 24px;
}
.admin-page-payment-page-breakdown-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.admin-page-payment-page-breakdown-content span {
  margin-bottom: 4px;
  color: var(--payment-text-strong);
  font-size: 14px;
  font-weight: 900;
}
.admin-page-payment-page-breakdown-content strong {
  color: var(--payment-green);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 900;
}
.admin-page-payment-page-breakdown-content small {
  margin-top: 4px;
  color: var(--payment-text-soft);
  font-size: 12px;
  line-height: 1.4;
}
.admin-page-payment-page-breakdown-amount {
  min-width: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0 12px 20px;
  border-left: 1px solid var(--payment-border);
  text-align: center;
}
.admin-page-payment-page-breakdown-amount span {
  margin-bottom: 5px;
  color: var(--payment-text-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-page-payment-page-breakdown-amount strong {
  color: var(--payment-text-strong);
  font-size: 19px;
  font-weight: 900;
}
.admin-page-payment-page-filter-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 28px;
  background: var(--payment-white);
  border: 1px solid var(--payment-border);
  border-radius: 22px;
  box-shadow: var(--payment-shadow);
}
.admin-page-payment-page-filter-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
  text-align: center;
}
.admin-page-payment-page-filter-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 14px;
}
.admin-page-payment-page-filter-icon svg {
  width: 21px;
  height: 21px;
}
.admin-page-payment-page-filter-heading h2 {
  margin-bottom: 4px;
  color: var(--payment-text-strong);
  font-size: 19px;
  font-weight: 900;
}
.admin-page-payment-page-filter-heading p {
  margin-bottom: 0;
  color: var(--payment-text-soft);
  font-size: 13px;
}
.admin-page-payment-page-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(190px, 1fr)) auto;
  align-items: end;
  gap: 15px;
}
.admin-page-payment-page-form-field {
  min-width: 0;
}
.admin-page-payment-page-form-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--payment-text-strong);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-page-payment-page-input-wrap {
  position: relative;
  width: 100%;
}
.admin-page-payment-page-input-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: var(--payment-green);
  margin-top: -8px;
  pointer-events: none;
}
.admin-page-payment-page-input-wrap input, .admin-page-payment-page-input-wrap select {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 41px;
  color: var(--payment-text-strong);
  background: #ffffff;
  border: 1px solid var(--payment-border-strong);
  border-radius: 11px;
  outline: none;
}
.admin-page-payment-page-input-wrap input::placeholder {
  color: var(--payment-text-soft);
}
.admin-page-payment-page-input-wrap input:focus, .admin-page-payment-page-input-wrap select:focus {
  border-color: var(--payment-green);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.11);
}
.admin-page-payment-page-filter-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.admin-page-payment-page-filter-button, .admin-page-payment-page-clear-button {
  position: relative;
  overflow: hidden;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.admin-page-payment-page-filter-button::before, .admin-page-payment-page-clear-button::before, .admin-page-payment-page-view-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.admin-page-payment-page-filter-button {
  color: #ffffff;
  background: var(--payment-gradient);
  border: 1px solid rgba(6, 78, 59, 0.25);
  box-shadow: 0 7px 16px rgba(4, 120, 87, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-page-payment-page-filter-button svg, .admin-page-payment-page-clear-button svg {
  width: 16px;
  height: 16px;
}
.admin-page-payment-page-clear-button {
  color: var(--payment-green-deep);
  background: var(--payment-green-light);
  border: 1px solid var(--payment-green-border);
}
.admin-page-payment-page-table-card {
  position: relative;
  overflow: hidden;
  background: var(--payment-white);
  border: 1px solid var(--payment-border);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(6, 78, 59, 0.09), 0 3px 10px rgba(6, 78, 59, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.admin-page-payment-page-table-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 28px 26px;
  text-align: center;
  background: linear-gradient( 180deg, #ffffff 0%, #f7fcf9 100% );
  border-bottom: 1px solid var(--payment-border);
}
.admin-page-payment-page-table-header::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(4, 120, 87, 0.25), transparent );
}
.admin-page-payment-page-table-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-page-payment-page-table-title-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(4, 120, 87, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-payment-page-table-title-icon svg {
  width: 24px;
  height: 24px;
}
.admin-page-payment-page-table-title h2 {
  margin-bottom: 5px;
  color: var(--payment-text-strong);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}
.admin-page-payment-page-table-title p {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--payment-text-soft);
  font-size: 13px;
  line-height: 1.5;
}
.admin-page-payment-page-result-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  color: #ffffff;
  background: var(--payment-gradient);
  border: 1px solid rgba(6, 78, 59, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 15px rgba(4, 120, 87, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.admin-page-payment-page-result-count svg {
  width: 15px;
  height: 15px;
}
.admin-page-payment-page-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #86b8a3 #edf7f1;
}
.admin-page-payment-page-table-wrapper::-webkit-scrollbar {
  height: 9px;
}
.admin-page-payment-page-table-wrapper::-webkit-scrollbar-track {
  background: #edf7f1;
}
.admin-page-payment-page-table-wrapper::-webkit-scrollbar-thumb {
  background: #86b8a3;
  border-radius: 999px;
}
.admin-page-payment-page-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #047857;
}
.admin-page-payment-page-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}
.admin-page-payment-page-table thead {
  background: var(--payment-gradient);
}
.admin-page-payment-page-table thead tr {
  background: var(--payment-gradient);
}
.admin-page-payment-page-table th {
  position: relative;
  padding: 17px 16px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-page-payment-page-table th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.admin-page-payment-page-table th span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-page-payment-page-table tbody tr {
  background: #ffffff;
}
.admin-page-payment-page-table tbody tr:nth-child(even) {
  background: #fbfefc;
}
.admin-page-payment-page-table td {
  padding: 18px 16px;
  color: var(--payment-text-strong);
  border-bottom: 1px solid rgba(6, 78, 59, 0.09);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  vertical-align: middle;
}
.admin-page-payment-page-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-page-payment-page-reference {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 155px;
}
.admin-page-payment-page-reference-icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(4, 120, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-page-payment-page-reference-icon svg {
  width: 15px;
  height: 15px;
}
.admin-page-payment-page-reference strong {
  max-width: 175px;
  color: var(--payment-text-strong);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: left;
}
.admin-page-payment-page-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-page-payment-page-type-badge svg {
  width: 14px;
  height: 14px;
}
.admin-page-payment-page-type-subscription {
  color: var(--payment-green-deep);
  background: var(--payment-green-light);
  border: 1px solid var(--payment-green-border);
}
.admin-page-payment-page-type-deal {
  color: var(--payment-green-deep);
  background: #e8f7ef;
  border: 1px solid #bfe4cf;
}
.admin-page-payment-page-vendor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 145px;
}
.admin-page-payment-page-vendor-icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(4, 120, 87, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.admin-page-payment-page-vendor-icon svg {
  width: 15px;
  height: 15px;
}
.admin-page-payment-page-vendor strong {
  max-width: 150px;
  color: var(--payment-text-strong);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: left;
}
.admin-page-payment-page-description {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 170px;
  max-width: 260px;
  margin: 0 auto;
  color: var(--payment-text-soft);
  text-align: left;
}
.admin-page-payment-page-description svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--payment-green);
}
.admin-page-payment-page-description span {
  color: var(--payment-text-soft);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.admin-page-payment-page-amount {
  display: inline-block;
  color: var(--payment-green-deep);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-page-payment-page-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-page-payment-page-status svg {
  width: 14px;
  height: 14px;
}
.admin-page-payment-page-status-success {
  color: var(--payment-success);
  background: var(--payment-success-bg);
  border: 1px solid var(--payment-success-border);
}
.admin-page-payment-page-status-pending {
  color: var(--payment-warning);
  background: var(--payment-warning-bg);
  border: 1px solid var(--payment-warning-border);
}
.admin-page-payment-page-status-failed {
  color: var(--payment-danger);
  background: var(--payment-danger-bg);
  border: 1px solid var(--payment-danger-border);
}
.admin-page-payment-page-status-abandoned {
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.admin-page-payment-page-date-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 130px;
  color: var(--payment-text-soft);
  white-space: nowrap;
}
.admin-page-payment-page-date-cell svg {
  width: 15px;
  height: 15px;
  color: var(--payment-green);
}
.admin-page-payment-page-date-cell span {
  color: var(--payment-text-soft);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}
.admin-page-payment-page-view-button {
  position: relative;
  overflow: hidden;
  min-width: 82px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  color: #ffffff !important;
  background: var(--payment-gradient);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(6, 78, 59, 0.28);
  isolation: isolate;
}
.admin-page-payment-page-view-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 65% );
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.admin-page-payment-page-view-button, .admin-page-payment-page-view-button span, .admin-page-payment-page-view-button i, .admin-page-payment-page-view-button svg {
  color: #ffffff !important;
}
.admin-page-payment-page-view-button svg {
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  flex-shrink: 0;
}
.admin-page-payment-page-empty {
  height: 330px;
  padding: 40px 25px !important;
  text-align: center !important;
  vertical-align: middle !important;
  background: radial-gradient( circle at center, #f0fdf4 0%, #ffffff 62% ) !important;
}
.admin-page-payment-page-empty-icon {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: #ffffff;
  background: var(--payment-gradient);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-page-payment-page-empty-icon svg {
  width: 29px;
  height: 29px;
}
.admin-page-payment-page-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--payment-text-strong);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
}
.admin-page-payment-page-empty p {
  max-width: 440px;
  margin: 0 auto;
  color: var(--payment-text-soft);
  font-size: 13px;
  line-height: 1.55;
}
.admin-page-payment-page-wrapper button:focus-visible, .admin-page-payment-page-wrapper a:focus-visible, .admin-page-payment-page-wrapper input:focus-visible, .admin-page-payment-page-wrapper select:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 3px;
}
.admin-page-payment-page-wrapper *, .admin-page-payment-page-wrapper *::before, .admin-page-payment-page-wrapper *::after {
  transform: none;
}
@media (max-width: 1200px) {
  .admin-page-payment-page-wrapper {
    padding: 25px;
  }
  .admin-page-payment-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page-payment-page-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page-payment-page-filter-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .admin-page-payment-page-table-card {
    border-radius: 20px;
  }
}
@media (max-width: 900px) {
  .admin-page-payment-page-wrapper {
    padding: 20px;
  }
  .admin-page-payment-page-breakdown-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-payment-page-breakdown-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }
  .admin-page-payment-page-table-header {
    padding: 27px 22px 24px;
  }
  .admin-page-payment-page-table {
    min-width: 1080px;
  }
}
@media (max-width: 640px) {
  .admin-page-payment-page-wrapper {
    padding: 14px;
  }
  .admin-page-payment-page-header {
    padding: 30px 18px;
    border-radius: 19px;
  }
  .admin-page-payment-page-header-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
  }
  .admin-page-payment-page-header h1 {
    font-size: 29px;
  }
  .admin-page-payment-page-header p {
    font-size: 13px;
  }
  .admin-page-payment-page-stats {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .admin-page-payment-page-stat-card {
    min-height: 145px;
    padding: 20px;
  }
  .admin-page-payment-page-breakdown-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }
  .admin-page-payment-page-breakdown-icon {
    width: 52px;
    height: 52px;
  }
  .admin-page-payment-page-breakdown-amount {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    align-items: center;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--payment-border);
  }
  .admin-page-payment-page-filter-card {
    padding: 21px;
    border-radius: 19px;
  }
  .admin-page-payment-page-filter-form {
    grid-template-columns: 1fr;
  }
  .admin-page-payment-page-filter-actions {
    grid-column: auto;
    width: 100%;
    flex-direction: column;
  }
  .admin-page-payment-page-filter-button, .admin-page-payment-page-clear-button {
    width: 100%;
  }
  .admin-page-payment-page-table-card {
    border-radius: 19px;
  }
  .admin-page-payment-page-table-header {
    padding: 25px 18px 22px;
  }
  .admin-page-payment-page-table-title-icon {
    width: 50px;
    height: 50px;
  }
  .admin-page-payment-page-table-title h2 {
    font-size: 19px;
  }
  .admin-page-payment-page-table-title p {
    font-size: 12px;
  }
  .admin-page-payment-page-result-count {
    min-height: 36px;
  }
  .admin-page-payment-page-table {
    min-width: 1030px;
  }
  .admin-page-payment-page-table th {
    padding: 15px 13px;
  }
  .admin-page-payment-page-table td {
    padding: 16px 13px;
  }
}
@media (max-width: 420px) {
  .admin-page-payment-page-wrapper {
    padding: 10px;
  }
  .admin-page-payment-page-header {
    padding: 26px 15px;
    border-radius: 17px;
  }
  .admin-page-payment-page-header h1 {
    font-size: 26px;
  }
  .admin-page-payment-page-section-heading h2 {
    font-size: 19px;
  }
  .admin-page-payment-page-stat-card {
    padding: 19px;
  }
  .admin-page-payment-page-filter-card {
    padding: 18px;
  }
  .admin-page-payment-page-table-header {
    padding: 23px 14px 20px;
  }
  .admin-page-payment-page-table {
    min-width: 1000px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-payment-page-wrapper *, .admin-page-payment-page-wrapper *::before, .admin-page-payment-page-wrapper *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.admin-page-product-detail-page {
  --detail-green: #15803d;
  --detail-green-dark: #166534;
  --detail-green-deep: #14532d;
  --detail-green-soft: #dcfce7;
  --detail-green-light: #f0fdf4;
  --detail-text: #102a1d;
  --detail-text-dark: #081c11;
  --detail-text-green: #28563b;
  --detail-border: #c7e3cf;
  --detail-border-dark: #9bc9a9;
  --detail-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  color: var(--detail-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.admin-page-product-detail-page *, .admin-page-product-detail-page *::before, .admin-page-product-detail-page *::after {
  box-sizing: border-box;
}
.admin-page-product-detail-page-header {
  width: 100%;
  padding: 22px 24px 0;
}
.admin-page-product-detail-page-header-card {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1540px;
  min-height: 170px;
  margin: 0 auto;
  padding: 30px 32px;
  background: #ffffff;
  border: 1px solid var(--detail-border);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(20, 83, 45, 0.08), 0 4px 12px rgba(20, 83, 45, 0.04);
  overflow: hidden;
}
.admin-page-product-detail-page-header-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--detail-gradient);
}
.admin-page-product-detail-page-header-card::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.85), transparent );
  pointer-events: none;
}
.admin-page-product-detail-page-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.admin-page-product-detail-page-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 17px 7px 8px;
  color: #064e3b;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.96) );
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(6, 78, 59, 0.08), 0 2px 5px rgba(6, 78, 59, 0.04);
  overflow: hidden;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.admin-page-product-detail-page-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient( 90deg, transparent 5%, rgba(255, 255, 255, 0.95) 50%, transparent 95% );
  pointer-events: none;
}
.admin-page-product-detail-page-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 120deg, rgba(255, 255, 255, 0.28), transparent 42% );
  pointer-events: none;
}
.admin-page-product-detail-page-back:hover {
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border-color: #047857;
  box-shadow: 0 10px 26px rgba(6, 78, 59, 0.18);
}
.admin-page-product-detail-page-back-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  color: #047857;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 9px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(6, 78, 59, 0.08);
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.admin-page-product-detail-page-back:hover .admin-page-product-detail-page-back-icon {
  color: #064e3b;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.admin-page-product-detail-page-back-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}
.admin-page-product-detail-page-back > span {
  position: relative;
  z-index: 1;
}
.admin-page-product-detail-page-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.admin-page-product-detail-page-heading-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
}
.admin-page-product-detail-page-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 6px 11px;
  color: #ffffff;
  background: linear-gradient( 135deg, #064e3b 0%, #047857 45%, #065f46 72%, #064e3b 100% );
  border: 1px solid #065f46;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.14);
  overflow: hidden;
}
.admin-page-product-detail-page-eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.85), transparent );
  pointer-events: none;
}
.admin-page-product-detail-page-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 6px 10px;
  color: #166534;
  background: linear-gradient( 180deg, #f0fdf4, #dcfce7 );
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 4px 11px rgba(22, 101, 52, 0.06);
}
.admin-page-product-detail-page-title {
  display: block;
  width: min(100%, 900px);
  margin: 0 auto;
  color: var(--detail-text-dark);
  font-size: clamp( 1.65rem, 3vw, 2.5rem );
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-align: center;
}
.admin-page-product-detail-page-subtitle {
  display: block;
  width: min(100%, 740px);
  margin: 11px auto 0;
  color: var(--detail-text-green);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.65;
  text-align: center;
}
@media (max-width: 600px) {
  .admin-page-product-detail-page-back {
    min-height: 44px;
    padding: 6px 14px 6px 7px;
    font-size: 0.72rem;
    border-radius: 13px;
  }
  .admin-page-product-detail-page-back-icon {
    width: 30px;
    height: 30px;
  }
  .admin-page-product-detail-page-heading-meta {
    gap: 7px;
    margin-bottom: 10px;
  }
  .admin-page-product-detail-page-eyebrow, .admin-page-product-detail-page-id {
    min-height: 25px;
    padding: 5px 9px;
  }
  .admin-page-product-detail-page-title {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.1;
  }
  .admin-page-product-detail-page-subtitle {
    margin-top: 9px;
    font-size: 0.78rem;
    line-height: 1.55;
  }
}
@media (max-width: 400px) {
  .admin-page-product-detail-page-back {
    width: 100%;
    max-width: 260px;
  }
  .admin-page-product-detail-page-heading-meta {
    flex-direction: column;
  }
  .admin-page-product-detail-page-eyebrow, .admin-page-product-detail-page-id {
    width: fit-content;
  }
  .admin-page-product-detail-page-title {
    font-size: 1.4rem;
  }
  .admin-page-product-detail-page-subtitle {
    font-size: 0.75rem;
  }
}
.admin-page-product-detail-page-status-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.admin-page-product-detail-page-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 9px 13px;
  border: 1px solid;
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.admin-page-product-detail-page-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
}
.admin-page-product-detail-page-status svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.admin-page-product-detail-page-status.published {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}
.admin-page-product-detail-page-status.review {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.admin-page-product-detail-page-status.rejected {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}
.admin-page-product-detail-page-status.archived {
  color: #28563b;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.admin-page-product-detail-page-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 250px));
  justify-content: center;
  gap: 15px;
  width: 100%;
  margin-top: 22px;
}
.admin-page-product-detail-page-overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 125px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--detail-border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(20, 83, 45, 0.055);
  text-align: center;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.admin-page-product-detail-page-overview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
}
.admin-page-product-detail-page-overview-card:hover {
  border-color: var(--detail-border-dark);
  box-shadow: 0 12px 27px rgba(20, 83, 45, 0.09);
}
.admin-page-product-detail-page-overview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  color: #047857;
  background: #f0fdf4;
  border: 1px solid var(--detail-border);
  border-radius: 12px;
}
.admin-page-product-detail-page-overview-icon svg {
  width: 20px;
  height: 20px;
}
.admin-page-product-detail-page-overview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.admin-page-product-detail-page-overview-label {
  display: block;
  margin-bottom: 5px;
  color: var(--detail-text-green);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.admin-page-product-detail-page-overview-value {
  display: block;
  width: 100%;
  color: var(--detail-text-dark);
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}
.admin-page-product-detail-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, 0.85fr);
  align-items: start;
  gap: 22px;
  width: 100%;
  margin-top: 22px;
}
.admin-page-product-detail-page-left, .admin-page-product-detail-page-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.admin-page-product-detail-page-card, .admin-page-product-detail-page-actions-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--detail-border);
  border-radius: 18px;
  box-shadow: 0 9px 25px rgba(20, 83, 45, 0.055), 0 2px 5px rgba(20, 83, 45, 0.025);
  overflow: hidden;
}
.admin-page-product-detail-page-card::before, .admin-page-product-detail-page-actions-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
  pointer-events: none;
}
.admin-page-product-detail-page-card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 17px;
  margin-bottom: 19px;
  border-bottom: 1px solid var(--detail-border);
  text-align: center;
}
.admin-page-product-detail-page-card-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #047857;
  font-size: 0.67rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}
.admin-page-product-detail-page-card-heading h2 {
  margin: 0;
  color: var(--detail-text-dark);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-align: center;
}
.admin-page-product-detail-page-card-heading p {
  width: 100%;
  max-width: 650px;
  margin: 6px auto 0;
  color: var(--detail-text-green);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.55;
  text-align: center;
}
.admin-page-product-detail-page-gallery {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.admin-page-product-detail-page-main-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
  background: linear-gradient( 135deg, #f0fdf4 0%, #ffffff 52%, #ecfdf5 100% );
  border: 1px solid var(--detail-border);
  border-radius: 15px;
  overflow: hidden;
}
.admin-page-product-detail-page-main-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
  pointer-events: none;
}
.admin-page-product-detail-page-main-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: contain;
  background: #ffffff;
}
.admin-page-product-detail-page-main-image-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 7px 10px;
  color: #166534;
  background: rgba(240, 253, 244, 0.96);
  border: 1px solid #a7d8b4;
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(20, 83, 45, 0.08);
}
.admin-page-product-detail-page-main-image-label svg {
  width: 14px;
  height: 14px;
}
.admin-page-product-detail-page-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 35px;
  text-align: center;
}
.admin-page-product-detail-page-image-empty > svg {
  width: 44px;
  height: 44px;
  margin-bottom: 13px;
  color: #047857;
}
.admin-page-product-detail-page-image-empty strong {
  color: var(--detail-text-dark);
  font-size: 0.96rem;
  font-weight: 850;
}
.admin-page-product-detail-page-image-empty span {
  max-width: 320px;
  margin-top: 6px;
  color: var(--detail-text-green);
  font-size: 0.77rem;
  line-height: 1.55;
}
.admin-page-product-detail-page-gallery-bottom {
  padding-top: 2px;
}
.admin-page-product-detail-page-gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.admin-page-product-detail-page-gallery-heading > div {
  min-width: 0;
}
.admin-page-product-detail-page-gallery-heading span {
  display: block;
  color: var(--detail-text-green);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-page-product-detail-page-gallery-heading h3 {
  margin: 4px 0 0;
  color: var(--detail-text-dark);
  font-size: 0.94rem;
  font-weight: 850;
  text-align: left;
}
.admin-page-product-detail-page-gallery-heading > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #a7d8b4;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 850;
}
.admin-page-product-detail-page-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
}
.admin-page-product-detail-page-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #ffffff;
  border: 2px solid var(--detail-border);
  border-radius: 11px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.admin-page-product-detail-page-thumbnail:hover {
  border-color: var(--detail-green);
  background: var(--detail-green-light);
  box-shadow: 0 6px 15px rgba(20, 83, 45, 0.1);
}
.admin-page-product-detail-page-thumbnail.active {
  border-color: var(--detail-green);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.1), 0 6px 16px rgba(20, 83, 45, 0.1);
}
.admin-page-product-detail-page-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-page-product-detail-page-thumbnail span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  color: #ffffff;
  background: rgba(8, 28, 17, 0.86);
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 850;
}
.admin-page-product-detail-page-no-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  color: var(--detail-text-green);
  background: var(--detail-green-light);
  border: 1px solid var(--detail-border);
  border-radius: 11px;
  text-align: left;
}
.admin-page-product-detail-page-no-images > svg {
  width: 23px;
  height: 23px;
  color: var(--detail-green);
  flex-shrink: 0;
}
.admin-page-product-detail-page-no-images > div {
  min-width: 0;
}
.admin-page-product-detail-page-no-images strong {
  display: block;
  color: var(--detail-text-dark);
  font-size: 0.8rem;
  font-weight: 850;
}
.admin-page-product-detail-page-no-images span {
  display: block;
  margin-top: 3px;
  color: var(--detail-text-green);
  font-size: 0.73rem;
  line-height: 1.45;
}
.admin-page-product-detail-page-description {
  color: var(--detail-text);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.78;
}
.admin-page-product-detail-page-description p {
  margin: 0 0 12px;
}
.admin-page-product-detail-page-description p:last-child {
  margin-bottom: 0;
}
.admin-page-product-detail-page-description strong, .admin-page-product-detail-page-description b {
  color: var(--detail-text-dark);
  font-weight: 850;
}
.admin-page-product-detail-page-description ul, .admin-page-product-detail-page-description ol {
  padding-left: 20px;
  margin: 10px 0;
}
.admin-page-product-detail-page-description li {
  margin-bottom: 5px;
}
.admin-page-product-detail-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  color: var(--detail-text-green);
  background: var(--detail-green-light);
  border: 1px solid var(--detail-border);
  border-radius: 11px;
  font-size: 0.79rem;
  font-weight: 650;
  text-align: center;
}
.admin-page-product-detail-page-empty svg {
  width: 20px;
  height: 20px;
  color: var(--detail-green);
  flex-shrink: 0;
}
.admin-page-product-detail-page-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}
.admin-page-product-detail-page-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 11px;
  color: var(--detail-green-deep);
  background: var(--detail-green-light);
  border: 1px solid var(--detail-border);
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 750;
  overflow: hidden;
}
.admin-page-product-detail-page-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.9), transparent );
}
.admin-page-product-detail-page-tag svg {
  width: 13px;
  height: 13px;
  color: var(--detail-green);
}
.admin-page-product-detail-page-information {
  display: flex;
  flex-direction: column;
}
.admin-page-product-detail-page-information-row {
  display: grid;
  grid-template-columns: minmax(135px, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--detail-border);
}
.admin-page-product-detail-page-information-row:first-child {
  padding-top: 0;
}
.admin-page-product-detail-page-information-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.admin-page-product-detail-page-information-row > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.admin-page-product-detail-page-information-row > div svg {
  width: 16px;
  height: 16px;
  color: var(--detail-green);
  flex-shrink: 0;
}
.admin-page-product-detail-page-information-row > div span {
  color: var(--detail-text-green);
  font-size: 0.75rem;
  font-weight: 700;
}
.admin-page-product-detail-page-information-row > strong {
  min-width: 0;
  color: var(--detail-text-dark);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}
.admin-page-product-detail-page-information-row.price > strong {
  color: var(--detail-green-dark);
  font-size: 0.92rem;
}
.admin-page-product-detail-page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 5px 9px;
  border: 1px solid;
  border-radius: 7px;
  font-size: 0.67rem;
  font-weight: 850;
  line-height: 1;
}
.admin-page-product-detail-page-badge.success {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}
.admin-page-product-detail-page-badge.warning {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.admin-page-product-detail-page-badge.neutral {
  color: var(--detail-text-green);
  background: var(--detail-green-light);
  border-color: var(--detail-border);
}
.admin-page-product-detail-page-vendor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--detail-border);
  text-align: center;
}
.admin-page-product-detail-page-vendor-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: #ffffff;
  background: var(--detail-gradient);
  border: 3px solid var(--detail-green-soft);
  border-radius: 16px;
  font-size: 1.08rem;
  font-weight: 850;
  text-transform: uppercase;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.16);
}
.admin-page-product-detail-page-vendor-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.admin-page-product-detail-page-vendor-details strong {
  width: 100%;
  color: var(--detail-text-dark);
  font-size: 0.92rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.admin-page-product-detail-page-vendor-details span {
  width: 100%;
  color: var(--detail-text-green);
  font-size: 0.73rem;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.admin-page-product-detail-page-vendor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.admin-page-product-detail-page-vendor-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 75px;
  padding: 11px 12px;
  background: var(--detail-green-light);
  border: 1px solid var(--detail-border);
  border-radius: 10px;
  text-align: center;
}
.admin-page-product-detail-page-vendor-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--detail-text-green);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.admin-page-product-detail-page-vendor-grid strong {
  display: block;
  color: var(--detail-text-dark);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}
.admin-page-product-detail-page-actions-card {
  margin-top: 22px;
}
.admin-page-product-detail-page-actions-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 17px;
  margin-bottom: 19px;
  border-bottom: 1px solid var(--detail-border);
  text-align: center;
}
.admin-page-product-detail-page-actions-heading h2 {
  margin: 0;
  color: var(--detail-text-dark);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
}
.admin-page-product-detail-page-actions-heading p {
  width: 100%;
  max-width: 680px;
  margin: 6px auto 0;
  color: var(--detail-text-green);
  font-size: 0.79rem;
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
}
.admin-page-product-detail-page-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-page-product-detail-page-actions form {
  margin: 0;
}
.admin-page-product-detail-page-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.admin-page-product-detail-page-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.72), transparent );
  pointer-events: none;
}
.admin-page-product-detail-page-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.admin-page-product-detail-page-action.primary {
  color: #ffffff;
  background: var(--detail-gradient);
  border-color: #065f46;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.17);
}
.admin-page-product-detail-page-action.primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 9px 21px rgba(6, 78, 59, 0.22);
}
.admin-page-product-detail-page-action.success {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}
.admin-page-product-detail-page-action.success:hover {
  color: #ffffff;
  background: var(--detail-gradient);
  border-color: #065f46;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.17);
}
.admin-page-product-detail-page-action.secondary {
  color: var(--detail-green-deep);
  background: var(--detail-green-light);
  border-color: var(--detail-border);
}
.admin-page-product-detail-page-action.secondary:hover {
  color: #ffffff;
  background: var(--detail-gradient);
  border-color: #065f46;
  box-shadow: 0 7px 17px rgba(6, 78, 59, 0.16);
}
.admin-page-product-detail-page-action.danger {
  color: #991b1b;
  background: #fff1f2;
  border-color: #fecaca;
}
.admin-page-product-detail-page-action.danger:hover {
  color: #ffffff;
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 7px 17px rgba(185, 28, 28, 0.16);
}
.admin-page-product-detail-page-action.warning {
  color: #92400e;
  background: #fffbeb;
  border-color: #fcd34d;
}
.admin-page-product-detail-page-action.warning:hover {
  color: #ffffff;
  background: #b45309;
  border-color: #b45309;
  box-shadow: 0 7px 17px rgba(180, 83, 9, 0.16);
}
.admin-page-product-detail-page-action.delete {
  color: #991b1b;
  background: #ffffff;
  border-color: #fca5a5;
}
.admin-page-product-detail-page-action.delete:hover {
  color: #ffffff;
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 7px 17px rgba(185, 28, 28, 0.16);
}
.admin-page-product-detail-page-delete-form {
  margin-left: 0 !important;
}
.admin-page-product-detail-page-rejection-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin-bottom: 22px;
  padding: 22px 24px;
  background: linear-gradient( 135deg, #fff7ed 0%, #ffffff 100% );
  border: 1px solid #fed7aa;
  border-left: 5px solid #ea580c;
  border-radius: 17px;
  box-shadow: 0 9px 25px rgba(124, 45, 18, 0.07);
  overflow: hidden;
}
.admin-page-product-detail-page-rejection-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
}
.admin-page-product-detail-page-rejection-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #ffedd5;
  color: #c2410c;
}
.admin-page-product-detail-page-rejection-icon svg {
  width: 22px;
  height: 22px;
}
.admin-page-product-detail-page-rejection-content {
  min-width: 0;
  max-width: 900px;
}
.admin-page-product-detail-page-rejection-label {
  display: block;
  margin-bottom: 4px;
  color: #c2410c;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-page-product-detail-page-rejection-content h2 {
  margin: 0 0 8px;
  color: #7c2d12;
  font-size: 1.05rem;
  font-weight: 850;
}
.admin-page-product-detail-page-rejection-content p {
  margin: 0;
  color: #431407;
  font-size: 0.82rem;
  line-height: 1.7;
}
.admin-page-product-detail-page-rejection-note {
  display: block;
  margin-top: 10px;
  color: #9a3412;
  font-size: 0.69rem;
  line-height: 1.5;
}
.admin-page-product-detail-page-reject-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.admin-page-product-detail-page-reject-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.admin-page-product-detail-page-reject-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 78, 59, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.admin-page-product-detail-page-reject-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 590px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 21px;
  box-shadow: 0 28px 75px rgba(6, 78, 59, 0.23), 0 10px 32px rgba(22, 163, 74, 0.1);
}
.admin-page-product-detail-page-reject-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--detail-gradient);
  border-radius: 999px;
  pointer-events: none;
}
.admin-page-product-detail-page-reject-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 25px 24px 20px;
  border-bottom: 1px solid #dcfce7;
  text-align: center;
}
.admin-page-product-detail-page-reject-header-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #fef2f2;
  color: #dc2626;
}
.admin-page-product-detail-page-reject-header-icon svg {
  width: 22px;
  height: 22px;
}
.admin-page-product-detail-page-reject-header > div:nth-child(2) {
  min-width: 0;
  padding-right: 36px;
}
.admin-page-product-detail-page-reject-header > div:nth-child(2) > span {
  display: block;
  margin-bottom: 4px;
  color: #15803d;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.admin-page-product-detail-page-reject-header h2 {
  margin: 0;
  color: #17211b;
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.35;
}
.admin-page-product-detail-page-reject-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dcfce7;
  border-radius: 10px;
  background: #f7fdf8;
  color: #166534;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-page-product-detail-page-reject-close:hover {
  background: #ecfdf5;
  color: #14532d;
  border-color: #86efac;
  box-shadow: 0 5px 12px rgba(20, 83, 45, 0.08);
}
.admin-page-product-detail-page-reject-close svg {
  width: 17px;
  height: 17px;
}
.admin-page-product-detail-page-reject-form {
  padding: 22px 24px 24px;
}
.admin-page-product-detail-page-reject-product {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 15px;
  background: #f7fdf8;
  border: 1px solid #dcfce7;
  border-radius: 12px;
  text-align: center;
}
.admin-page-product-detail-page-reject-product > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: #15803d;
}
.admin-page-product-detail-page-reject-product div {
  min-width: 0;
}
.admin-page-product-detail-page-reject-product span {
  display: block;
  margin-bottom: 2px;
  color: #28563b;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-page-product-detail-page-reject-product strong {
  display: block;
  overflow: hidden;
  color: #17211b;
  font-size: 0.83rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page-product-detail-page-reject-field {
  margin-bottom: 20px;
}
.admin-page-product-detail-page-reject-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 800;
}
.admin-page-product-detail-page-reject-field label span {
  color: #dc2626;
  font-size: 0.65rem;
  font-weight: 800;
}
.admin-page-product-detail-page-reject-field textarea {
  width: 100%;
  min-height: 145px;
  box-sizing: border-box;
  resize: vertical;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  outline: none;
  background: #f7fdf8;
  color: #17211b;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.65;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.admin-page-product-detail-page-reject-field textarea::placeholder {
  color: #28563b;
  opacity: 0.65;
}
.admin-page-product-detail-page-reject-field textarea:focus {
  border-color: #22c55e;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.admin-page-product-detail-page-reject-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}
.admin-page-product-detail-page-reject-field-footer span {
  color: #28563b;
  font-size: 0.65rem;
}
.admin-page-product-detail-page-reject-field-footer strong {
  color: #28563b;
  font-size: 0.65rem;
  font-weight: 800;
}
.admin-page-product-detail-page-reject-field-footer strong .limit {
  color: #dc2626;
}
.admin-page-product-detail-page-reject-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-page-product-detail-page-reject-cancel, .admin-page-product-detail-page-reject-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 17px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.admin-page-product-detail-page-reject-cancel {
  border: 1px solid #d1fae5;
  background: #f7fdf8;
  color: #166534;
}
.admin-page-product-detail-page-reject-cancel:hover {
  background: #ecfdf5;
  border-color: #86efac;
  box-shadow: 0 5px 13px rgba(20, 83, 45, 0.08);
}
.admin-page-product-detail-page-reject-submit {
  border: 1px solid #dc2626;
  background: linear-gradient( 135deg, #ef4444, #dc2626 );
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(220, 38, 38, 0.2);
}
.admin-page-product-detail-page-reject-submit:hover {
  filter: brightness(1.07);
  box-shadow: 0 9px 24px rgba(220, 38, 38, 0.28);
}
.admin-page-product-detail-page-reject-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.65), transparent );
  pointer-events: none;
}
.admin-page-product-detail-page-reject-submit svg, .admin-page-product-detail-page-reject-cancel svg {
  position: relative;
  width: 17px;
  height: 17px;
}
.admin-page-product-detail-page-reject-submit.is-submitting {
  cursor: wait;
  opacity: 0.85;
}
.admin-product-reject-modal-open {
  overflow: hidden;
}
.admin-page-product-detail-page a:focus-visible, .admin-page-product-detail-page button:focus-visible, .admin-page-product-detail-page textarea:focus-visible {
  outline: 3px solid rgba(21, 128, 61, 0.25);
  outline-offset: 2px;
}
@media (max-width: 1200px) {
  .admin-page-product-detail-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  .admin-page-product-detail-page-header {
    padding-left: 20px;
    padding-right: 20px;
  }
  .admin-page-product-detail-page-header-card {
    grid-template-columns: 160px minmax(0, 1fr) 160px;
    gap: 18px;
    padding: 27px 25px;
  }
  .admin-page-product-detail-page-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  }
  .admin-page-product-detail-page-main-image-wrapper, .admin-page-product-detail-page-main-image {
    min-height: 350px;
  }
  .admin-page-product-detail-page-image-empty {
    min-height: 350px;
  }
}
@media (max-width: 980px) {
  .admin-page-product-detail-page {
    padding: 20px 18px 44px;
  }
  .admin-page-product-detail-page-header {
    padding: 18px 18px 0;
  }
  .admin-page-product-detail-page-header-card {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 25px 23px;
  }
  .admin-page-product-detail-page-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .admin-page-product-detail-page-header-back {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
  }
  .admin-page-product-detail-page-status-area {
    grid-column: 2;
    grid-row: 2;
    justify-content: center;
  }
  .admin-page-product-detail-page-overview {
    grid-template-columns: repeat(2, minmax(210px, 250px));
  }
  .admin-page-product-detail-page-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-product-detail-page-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .admin-page-product-detail-page-right .admin-page-product-detail-page-card {
    height: 100%;
  }
  .admin-page-product-detail-page-actions {
    justify-content: center;
  }
}
@media (max-width: 680px) {
  .admin-page-product-detail-page {
    padding: 16px 12px 36px;
  }
  .admin-page-product-detail-page-header {
    padding: 14px 12px 0;
  }
  .admin-page-product-detail-page-header-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 22px 17px;
    border-radius: 17px;
  }
  .admin-page-product-detail-page-heading {
    order: 1;
    width: 100%;
  }
  .admin-page-product-detail-page-header-back {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  .admin-page-product-detail-page-status-area {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .admin-page-product-detail-page-heading-meta {
    justify-content: center;
  }
  .admin-page-product-detail-page-title {
    font-size: 1.45rem;
    text-align: center;
  }
  .admin-page-product-detail-page-subtitle {
    font-size: 0.78rem;
    text-align: center;
  }
  .admin-page-product-detail-page-overview {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .admin-page-product-detail-page-overview-card {
    width: 100%;
    max-width: 340px;
    min-height: 105px;
    margin: 0 auto;
    padding: 14px;
  }
  .admin-page-product-detail-page-grid {
    gap: 15px;
    margin-top: 16px;
  }
  .admin-page-product-detail-page-left, .admin-page-product-detail-page-right {
    gap: 15px;
  }
  .admin-page-product-detail-page-right {
    display: flex;
  }
  .admin-page-product-detail-page-card, .admin-page-product-detail-page-actions-card {
    padding: 18px;
    border-radius: 15px;
  }
  .admin-page-product-detail-page-card-heading {
    margin-bottom: 15px;
    padding-bottom: 14px;
  }
  .admin-page-product-detail-page-card-heading h2, .admin-page-product-detail-page-actions-heading h2 {
    font-size: 1rem;
  }
  .admin-page-product-detail-page-main-image-wrapper {
    min-height: 275px;
  }
  .admin-page-product-detail-page-main-image {
    min-height: 275px;
  }
  .admin-page-product-detail-page-image-empty {
    min-height: 275px;
    padding: 24px;
  }
  .admin-page-product-detail-page-thumbnails {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .admin-page-product-detail-page-information-row {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }
  .admin-page-product-detail-page-information-row > div {
    justify-content: center;
  }
  .admin-page-product-detail-page-information-row > strong {
    padding-left: 0;
    text-align: center;
  }
  .admin-page-product-detail-page-vendor-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-page-product-detail-page-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .admin-page-product-detail-page-actions form {
    width: 100%;
  }
  .admin-page-product-detail-page-action {
    width: 100%;
    min-height: 43px;
  }
  .admin-page-product-detail-page-delete-form {
    margin-left: 0 !important;
  }
  .admin-page-product-detail-page-rejection-card {
    flex-direction: column;
    align-items: center;
    padding: 19px;
    text-align: center;
  }
  .admin-page-product-detail-page-rejection-content {
    width: 100%;
    text-align: center;
  }
  .admin-page-product-detail-page-rejection-label, .admin-page-product-detail-page-rejection-content h2, .admin-page-product-detail-page-rejection-content p, .admin-page-product-detail-page-rejection-note {
    text-align: center;
  }
}
@media (max-width: 420px) {
  .admin-page-product-detail-page-header-card {
    padding: 19px 14px;
  }
  .admin-page-product-detail-page-title {
    font-size: 1.3rem;
  }
  .admin-page-product-detail-page-heading-meta {
    align-items: center;
    flex-direction: column;
  }
  .admin-page-product-detail-page-overview-card {
    max-width: 100%;
  }
  .admin-page-product-detail-page-overview-icon {
    width: 40px;
    height: 40px;
  }
  .admin-page-product-detail-page-overview-icon svg {
    width: 18px;
    height: 18px;
  }
  .admin-page-product-detail-page-overview-value {
    font-size: 0.9rem;
  }
  .admin-page-product-detail-page-main-image-wrapper, .admin-page-product-detail-page-main-image {
    min-height: 225px;
  }
  .admin-page-product-detail-page-image-empty {
    min-height: 225px;
  }
  .admin-page-product-detail-page-thumbnails {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-page-product-detail-page-description {
    font-size: 0.81rem;
    line-height: 1.7;
  }
  .admin-page-product-detail-page-vendor-grid {
    grid-template-columns: 1fr;
  }
  .admin-page-product-detail-page-reject-header {
    flex-direction: column;
    align-items: center;
    padding: 21px 18px 17px;
  }
  .admin-page-product-detail-page-reject-header > div:nth-child(2) {
    padding-right: 0;
  }
  .admin-page-product-detail-page-reject-header h2 {
    text-align: center;
  }
  .admin-page-product-detail-page-reject-form {
    padding: 18px;
  }
  .admin-page-product-detail-page-reject-field-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-page-product-detail-page-reject-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .admin-page-product-detail-page-reject-cancel, .admin-page-product-detail-page-reject-submit {
    width: 100%;
  }
}
@media (max-width: 340px) {
  .admin-page-product-detail-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .admin-page-product-detail-page-header {
    padding-left: 8px;
    padding-right: 8px;
  }
  .admin-page-product-detail-page-header-card, .admin-page-product-detail-page-card, .admin-page-product-detail-page-actions-card {
    padding: 14px;
  }
  .admin-page-product-detail-page-thumbnail {
    border-radius: 8px;
  }
  .admin-page-product-detail-page-vendor-avatar {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }
  .admin-page-product-detail-page-reject-dialog {
    border-radius: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-product-detail-page *, .admin-page-product-detail-page *::before, .admin-page-product-detail-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.admin-page-product-page-wrapper {
  --product-accent-gradient: linear-gradient(
        135deg,
        #064e3b 0%,
        #047857 45%,
        #065f46 72%,
        #064e3b 100%
    );
  --product-green-deep: #064e3b;
  --product-green-dark: #065f46;
  --product-green: #047857;
  --product-green-mid: #059669;
  --product-green-soft: #e7f7ed;
  --product-green-light: #f2fbf5;
  --product-green-pale: #f7fcf8;
  --product-text: #123b2c;
  --product-text-dark: #052e24;
  --product-text-strong: #022c22;
  --product-border: #c6e2d1;
  --product-border-strong: #9bcab0;
  --product-white: #ffffff;
  --product-amber: #b45309;
  --product-amber-soft: #fff4d6;
  --product-amber-border: #f1d48d;
  --product-red: #b91c1c;
  --product-red-soft: #fee8e8;
  --product-red-border: #efb4b4;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 28px 24px 70px;
  color: var(--product-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.admin-page-product-page-wrapper *, .admin-page-product-page-wrapper *::before, .admin-page-product-page-wrapper *::after {
  box-sizing: border-box;
}
.admin-page-product-page-wrapper a {
  color: inherit;
  text-decoration: none;
}
.admin-page-product-page-wrapper button, .admin-page-product-page-wrapper a {
  -webkit-tap-highlight-color: transparent;
}
.admin-page-product-page-wrapper svg {
  display: block;
}
.admin-page-product-page-header {
  position: relative;
  width: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 28px;
  text-align: center;
  background: var(--product-white);
  border: 1px solid var(--product-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 78, 59, 0.08);
}
.admin-page-product-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--product-accent-gradient);
}
.admin-page-product-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( circle at 50% -20%, rgba(4, 120, 87, 0.10), transparent 42% );
  pointer-events: none;
}
.admin-page-product-page-header-glow {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0.9;
  pointer-events: none;
}
.admin-page-product-page-header-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #ffffff;
  background: var(--product-accent-gradient);
  border: 1px solid rgba(6, 78, 59, 0.25);
  border-radius: 17px;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.admin-page-product-page-header-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
}
.admin-page-product-page-header-icon svg {
  width: 29px;
  height: 29px;
  stroke-width: 2;
}
.admin-page-product-page-header-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-page-product-page-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--product-green-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.admin-page-product-page-header h1 {
  margin: 0;
  color: var(--product-text-strong);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-align: center;
}
.admin-page-product-page-header p {
  width: 100%;
  max-width: 680px;
  margin: 10px auto 0;
  color: var(--product-text);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.55;
  text-align: center;
}
.admin-page-product-page-stats {
  width: 100%;
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  justify-content: center;
  justify-items: stretch;
  gap: 16px;
  margin: 24px auto 0;
}
.admin-page-product-page-stat-card {
  position: relative;
  min-width: 0;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  text-align: center;
  background: var(--product-white);
  border: 1px solid var(--product-border);
  border-radius: 19px;
  box-shadow: 0 9px 24px rgba(5, 78, 59, 0.055);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.admin-page-product-page-stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--product-green-soft);
  opacity: 0.8;
  pointer-events: none;
}
.admin-page-product-page-stat-shine {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
.admin-page-product-page-stat-card:hover {
  border-color: var(--product-border-strong);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(5, 78, 59, 0.10);
}
.admin-page-product-page-stat-icon {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--product-green-dark);
  background: var(--product-green-soft);
  border: 1px solid var(--product-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-page-product-page-stat-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.15;
}
.admin-page-product-page-stat-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.admin-page-product-page-stat-content span {
  display: block;
  color: var(--product-text-dark);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.admin-page-product-page-stat-content strong {
  display: block;
  margin-top: 6px;
  color: var(--product-green-deep);
  font-size: 1.75rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
}
.admin-page-product-page-stat-content small {
  display: block;
  max-width: 150px;
  margin: 7px auto 0;
  color: var(--product-text);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.admin-page-product-page-stat-published .admin-page-product-page-stat-icon {
  color: var(--product-green-dark);
  background: #dcfce7;
  border-color: #a7d8b5;
}
.admin-page-product-page-stat-review .admin-page-product-page-stat-icon {
  color: var(--product-amber);
  background: var(--product-amber-soft);
  border-color: var(--product-amber-border);
}
.admin-page-product-page-stat-rejected .admin-page-product-page-stat-icon {
  color: var(--product-red);
  background: var(--product-red-soft);
  border-color: var(--product-red-border);
}
.admin-page-product-page-stat-archived .admin-page-product-page-stat-icon {
  color: var(--product-green-deep);
  background: #e7f5eb;
  border-color: var(--product-border);
}
.admin-page-product-page-stat-featured .admin-page-product-page-stat-icon {
  color: var(--product-green-dark);
  background: #ecfdf5;
  border-color: #b7e4c5;
}
.admin-page-product-page-sections {
  width: 100%;
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-page-product-page-section-heading {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  text-align: center;
}
.admin-page-product-page-section-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: #ffffff;
  background: var(--product-accent-gradient);
  border: 1px solid rgba(6, 78, 59, 0.25);
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.admin-page-product-page-section-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.admin-page-product-page-section-heading-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-page-product-page-section-heading span {
  display: block;
  color: var(--product-green-dark);
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
}
.admin-page-product-page-section-heading h2 {
  margin: 5px 0 5px;
  color: var(--product-text-strong);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
}
.admin-page-product-page-section-heading p {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  color: var(--product-text);
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.45;
  text-align: center;
}
.admin-page-product-page-section-grid {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  justify-content: center;
  justify-items: stretch;
  gap: 20px;
  margin: 0 auto;
}
.admin-page-product-page-section-card {
  position: relative;
  min-width: 0;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 22px;
  text-align: center;
  background: var(--product-white);
  border: 1px solid var(--product-border);
  border-radius: 20px;
  box-shadow: 0 9px 25px rgba(5, 78, 59, 0.055);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.admin-page-product-page-section-card-shine {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
.admin-page-product-page-section-card::after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--product-green-soft);
  opacity: 0.65;
  pointer-events: none;
}
.admin-page-product-page-section-card:hover {
  border-color: var(--product-green);
  background: var(--product-green-light);
  box-shadow: 0 15px 34px rgba(5, 78, 59, 0.11);
}
.admin-page-product-page-section-card:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 3px;
}
.admin-page-product-page-section-card-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--product-green-dark);
  background: var(--product-green-soft);
  border: 1px solid var(--product-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.admin-page-product-page-section-card-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
}
.admin-page-product-page-section-card:hover .admin-page-product-page-section-card-icon {
  color: #ffffff;
  background: var(--product-accent-gradient);
  border-color: var(--product-green);
}
.admin-page-product-page-section-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.admin-page-product-page-section-card-content span {
  display: block;
  color: var(--product-text-strong);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}
.admin-page-product-page-section-card-content strong {
  display: block;
  margin-top: 7px;
  color: var(--product-green-deep);
  font-size: 1.72rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
}
.admin-page-product-page-section-card-content small {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 8px auto 0;
  color: var(--product-text);
  font-size: 0.71rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.admin-page-product-page-section-card-arrow {
  position: relative;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  color: var(--product-green-dark);
  background: var(--product-green-light);
  border: 1px solid var(--product-border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.admin-page-product-page-section-card-arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.admin-page-product-page-section-card:hover .admin-page-product-page-section-card-arrow {
  color: #ffffff;
  background: var(--product-accent-gradient);
  border-color: var(--product-green);
}
.admin-page-product-page-section-card.published .admin-page-product-page-section-card-icon {
  color: var(--product-green-dark);
  background: #dcfce7;
  border-color: #a7d8b5;
}
.admin-page-product-page-section-card.review .admin-page-product-page-section-card-icon {
  color: var(--product-amber);
  background: var(--product-amber-soft);
  border-color: var(--product-amber-border);
}
.admin-page-product-page-section-card.review:hover .admin-page-product-page-section-card-icon {
  color: #ffffff;
  background: var(--product-amber);
  border-color: var(--product-amber);
}
.admin-page-product-page-section-card.rejected .admin-page-product-page-section-card-icon {
  color: var(--product-red);
  background: var(--product-red-soft);
  border-color: var(--product-red-border);
}
.admin-page-product-page-section-card.rejected:hover .admin-page-product-page-section-card-icon {
  color: #ffffff;
  background: var(--product-red);
  border-color: var(--product-red);
}
.admin-page-product-page-section-card.archived .admin-page-product-page-section-card-icon {
  color: var(--product-green-deep);
  background: #e7f5eb;
  border-color: var(--product-border);
}
.admin-page-product-page-section-card.featured .admin-page-product-page-section-card-icon {
  color: var(--product-green-dark);
  background: #ecfdf5;
  border-color: #b7e4c5;
}
.admin-page-product-page-note {
  position: relative;
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 28px auto 0;
  padding: 24px 28px;
  text-align: center;
  background: var(--product-green-light);
  border: 1px solid var(--product-border);
  border-top: 3px solid var(--product-green);
  border-radius: 17px;
  box-shadow: 0 9px 25px rgba(5, 78, 59, 0.05);
  overflow: hidden;
}
.admin-page-product-page-note-shine {
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
.admin-page-product-page-note-icon {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #ffffff;
  background: var(--product-accent-gradient);
  border: 1px solid rgba(6, 78, 59, 0.2);
  border-radius: 11px;
  box-shadow: 0 7px 16px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.admin-page-product-page-note-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.admin-page-product-page-note-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.admin-page-product-page-note strong {
  display: block;
  color: var(--product-text-strong);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
}
.admin-page-product-page-note p {
  width: 100%;
  max-width: 760px;
  margin: 6px auto 0;
  color: var(--product-text);
  font-size: 0.77rem;
  font-weight: 550;
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 1320px) {
  .admin-page-product-page-stats {
    grid-template-columns: repeat(3, minmax(220px, 280px));
    max-width: 900px;
  }
}
@media (max-width: 1050px) {
  .admin-page-product-page-wrapper {
    padding: 24px 20px 60px;
  }
  .admin-page-product-page-section-grid {
    grid-template-columns: repeat(2, minmax(250px, 360px));
    max-width: 760px;
  }
}
@media (max-width: 820px) {
  .admin-page-product-page-wrapper {
    padding: 20px 17px 48px;
  }
  .admin-page-product-page-header {
    min-height: 175px;
    padding: 30px 22px;
    border-radius: 20px;
  }
  .admin-page-product-page-header-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    border-radius: 15px;
  }
  .admin-page-product-page-header-icon svg {
    width: 26px;
    height: 26px;
  }
  .admin-page-product-page-stats {
    grid-template-columns: repeat(2, minmax(220px, 280px));
    max-width: 590px;
    gap: 14px;
    margin-top: 20px;
  }
  .admin-page-product-page-stat-card {
    min-height: 155px;
  }
  .admin-page-product-page-section-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    max-width: 650px;
  }
}
@media (max-width: 620px) {
  .admin-page-product-page-wrapper {
    padding: 16px 13px 36px;
  }
  .admin-page-product-page-header {
    min-height: 165px;
    padding: 26px 17px;
    border-radius: 17px;
  }
  .admin-page-product-page-header-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 11px;
    border-radius: 14px;
  }
  .admin-page-product-page-header-icon svg {
    width: 23px;
    height: 23px;
  }
  .admin-page-product-page-eyebrow {
    margin-bottom: 5px;
    font-size: 0.64rem;
  }
  .admin-page-product-page-header h1 {
    font-size: 1.7rem;
  }
  .admin-page-product-page-header p {
    max-width: 500px;
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.45;
  }
  .admin-page-product-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 500px;
    gap: 10px;
    margin-top: 14px;
  }
  .admin-page-product-page-stat-card {
    min-height: 142px;
    padding: 17px 10px;
    border-radius: 14px;
  }
  .admin-page-product-page-stat-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 9px;
    border-radius: 11px;
  }
  .admin-page-product-page-stat-icon svg {
    width: 18px;
    height: 18px;
  }
  .admin-page-product-page-stat-content span {
    font-size: 0.68rem;
  }
  .admin-page-product-page-stat-content strong {
    margin-top: 5px;
    font-size: 1.35rem;
  }
  .admin-page-product-page-stat-content small {
    max-width: 120px;
    margin-top: 5px;
    font-size: 0.6rem;
  }
  .admin-page-product-page-sections {
    margin-top: 27px;
  }
  .admin-page-product-page-section-heading {
    margin-bottom: 18px;
  }
  .admin-page-product-page-section-icon {
    width: 47px;
    height: 47px;
    margin-bottom: 10px;
    border-radius: 13px;
  }
  .admin-page-product-page-section-icon svg {
    width: 21px;
    height: 21px;
  }
  .admin-page-product-page-section-heading span {
    font-size: 0.62rem;
  }
  .admin-page-product-page-section-heading h2 {
    margin-top: 4px;
    font-size: 1.2rem;
  }
  .admin-page-product-page-section-heading p {
    font-size: 0.7rem;
  }
  .admin-page-product-page-section-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 430px;
    gap: 11px;
  }
  .admin-page-product-page-section-card {
    min-height: 185px;
    padding: 21px 17px;
    border-radius: 15px;
  }
  .admin-page-product-page-section-card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    border-radius: 12px;
  }
  .admin-page-product-page-section-card-icon svg {
    width: 20px;
    height: 20px;
  }
  .admin-page-product-page-section-card-content span {
    font-size: 0.84rem;
  }
  .admin-page-product-page-section-card-content strong {
    margin-top: 6px;
    font-size: 1.42rem;
  }
  .admin-page-product-page-section-card-content small {
    max-width: 250px;
    margin-top: 6px;
    font-size: 0.65rem;
  }
  .admin-page-product-page-section-card-arrow {
    width: 31px;
    height: 31px;
    margin-top: 13px;
    border-radius: 9px;
  }
  .admin-page-product-page-section-card-arrow svg {
    width: 15px;
    height: 15px;
  }
  .admin-page-product-page-note {
    max-width: 430px;
    margin-top: 19px;
    padding: 19px 16px;
    border-radius: 14px;
  }
  .admin-page-product-page-note-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  .admin-page-product-page-note-icon svg {
    width: 17px;
    height: 17px;
  }
  .admin-page-product-page-note strong {
    font-size: 0.8rem;
  }
  .admin-page-product-page-note p {
    font-size: 0.66rem;
    line-height: 1.5;
  }
}
@media (max-width: 390px) {
  .admin-page-product-page-wrapper {
    padding: 13px 10px 30px;
  }
  .admin-page-product-page-header {
    min-height: 155px;
    padding: 22px 13px;
    border-radius: 15px;
  }
  .admin-page-product-page-header-icon {
    width: 47px;
    height: 47px;
    margin-bottom: 9px;
    border-radius: 12px;
  }
  .admin-page-product-page-header-icon svg {
    width: 21px;
    height: 21px;
  }
  .admin-page-product-page-eyebrow {
    font-size: 0.58rem;
  }
  .admin-page-product-page-header h1 {
    font-size: 1.52rem;
  }
  .admin-page-product-page-header p {
    font-size: 0.69rem;
  }
  .admin-page-product-page-stats {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
  .admin-page-product-page-stat-card {
    min-height: 125px;
    padding: 15px;
  }
  .admin-page-product-page-stat-content small {
    max-width: 190px;
  }
  .admin-page-product-page-section-heading h2 {
    font-size: 1.1rem;
  }
  .admin-page-product-page-section-heading p {
    font-size: 0.66rem;
  }
  .admin-page-product-page-section-card {
    min-height: 175px;
  }
}
@media (max-width: 340px) {
  .admin-page-product-page-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }
  .admin-page-product-page-header {
    padding-left: 11px;
    padding-right: 11px;
  }
  .admin-page-product-page-stats {
    max-width: 270px;
  }
  .admin-page-product-page-section-grid {
    max-width: 290px;
  }
  .admin-page-product-page-section-card {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.admin-page-product-page-wrapper .admin-page-product-page-section-card:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.22);
  outline-offset: 3px;
}
.admin-page-product-page-wrapper .admin-page-product-page-section-card:focus:not(:focus-visible) {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-product-page-wrapper *, .admin-page-product-page-wrapper *::before, .admin-page-product-page-wrapper *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.admin-product-status-page {
  --status-accent-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --status-green-deep: #064e3b;
  --status-green: #047857;
  --status-green-mid: #065f46;
  --status-text: #123b2c;
  --status-text-dark: #052e24;
  --status-text-strong: #022c22;
  --status-border: #c9e3d4;
  --status-border-dark: #9bcab0;
  --status-soft: #eef9f3;
  --status-soft-strong: #e2f4e9;
  --status-white: #ffffff;
  --status-amber: #a16207;
  --status-amber-soft: #fff7d6;
  --status-amber-border: #e7cf91;
  --status-red: #b42318;
  --status-red-soft: #fff0ef;
  --status-red-border: #efb5b0;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  color: var(--status-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.admin-product-status-page *, .admin-product-status-page *::before, .admin-product-status-page *::after {
  box-sizing: border-box;
}
.admin-product-status-page a {
  color: inherit;
  text-decoration: none;
}
.admin-product-status-page button, .admin-product-status-page a {
  -webkit-tap-highlight-color: transparent;
}
.admin-product-status-page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 330px;
  padding: 34px 28px 32px;
  background: var(--status-accent-gradient);
  border: 1px solid rgba(155, 202, 176, 0.65);
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(6, 78, 59, 0.16), 0 4px 14px rgba(6, 78, 59, 0.08);
}
.admin-product-status-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( circle at 18% 20%, rgba(255, 255, 255, 0.13), transparent 29% ), radial-gradient( circle at 82% 78%, rgba(255, 255, 255, 0.09), transparent 30% );
  pointer-events: none;
}
.admin-product-status-page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
.admin-product-status-page-header-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.admin-product-status-page-back-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 5px 14px rgba(0, 0, 0, 0.08);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.admin-product-status-page-back-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 7px 18px rgba(0, 0, 0, 0.10);
}
.admin-product-status-page-back-icon {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 7px;
}
.admin-product-status-page-back-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.admin-product-status-page-header-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 9px 22px rgba(0, 0, 0, 0.10);
}
.admin-product-status-page-header-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  right: 10px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.admin-product-status-page-header-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.9;
}
.admin-product-status-page-eyebrow {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 6px;
  color: #d7f7e4;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.admin-product-status-page-header h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-align: center;
}
.admin-product-status-page-header p {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  margin: 10px auto 19px;
  color: #d8f5e4;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.admin-product-status-page-total {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 7px 18px rgba(0, 0, 0, 0.08);
}
.admin-product-status-page-total-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 8px;
}
.admin-product-status-page-total-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.admin-product-status-page-total strong {
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 850;
  line-height: 1;
}
.admin-product-status-page-total > span:last-child {
  color: #d8f5e4;
  font-size: 0.75rem;
  font-weight: 750;
}
.admin-product-status-page-results {
  width: 100%;
  margin-top: 32px;
}
.admin-product-status-page-results-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 24px;
  text-align: center;
}
.admin-product-status-page-results-heading-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  color: var(--status-green-deep);
  background: var(--status-soft);
  border: 1px solid var(--status-border);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-product-status-page-results-heading-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
}
.admin-product-status-page-results-heading span {
  display: block;
  color: var(--status-green);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-product-status-page-results-heading h2 {
  margin: 4px 0 4px;
  color: var(--status-text-strong);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
}
.admin-product-status-page-results-heading p {
  margin: 0 auto;
  color: var(--status-text-green);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
}
.admin-product-status-page-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 290px));
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  width: 100%;
  margin: 0 auto;
}
.admin-product-status-page-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 430px;
  color: var(--status-text);
  text-decoration: none;
  background: var(--status-white);
  border: 1px solid var(--status-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 9px 24px rgba(6, 78, 59, 0.055), 0 2px 5px rgba(6, 78, 59, 0.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.admin-product-status-page-product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--status-accent-gradient);
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 4;
}
.admin-product-status-page-product-card::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -30px;
  width: 170px;
  height: 95px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
  opacity: 0.42;
}
.admin-product-status-page-product-card:hover {
  background: #fbfffd;
  border-color: var(--status-border-dark);
  box-shadow: 0 15px 34px rgba(6, 78, 59, 0.11), 0 3px 8px rgba(6, 78, 59, 0.05);
}
.admin-product-status-page-product-card:hover::before {
  opacity: 1;
}
.admin-product-status-page-product-card:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.24);
  outline-offset: 3px;
}
.admin-product-status-page-product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--status-soft);
  border-bottom: 1px solid var(--status-border);
  overflow: hidden;
}
.admin-product-status-page-product-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.06), transparent 38%, rgba(6, 78, 59, 0.07) );
  pointer-events: none;
}
.admin-product-status-page-product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease;
}
.admin-product-status-page-product-card:hover .admin-product-status-page-product-card-image img {
  opacity: 0.94;
}
.admin-product-status-page-product-image-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient( 105deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) );
  pointer-events: none;
  z-index: 2;
}
.admin-product-status-page-product-card-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--status-green-deep);
  background: linear-gradient( 135deg, #eef9f3 0%, #e2f4e9 50%, #d8f0e1 100% );
}
.admin-product-status-page-product-card-no-image svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.admin-product-status-page-product-card-no-image span {
  color: var(--status-green-dark);
  font-size: 0.73rem;
  font-weight: 800;
}
.admin-product-status-page-product-card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 18px 17px 17px;
  text-align: center;
}
.admin-product-status-page-product-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}
.admin-product-status-page-product-id {
  display: block;
  max-width: 100%;
  color: var(--status-green);
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product-status-page-product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.61rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.admin-product-status-page-product-badge svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.admin-product-status-page-product-badge.published {
  color: #166534;
  background: #dcfce7;
  border-color: #9bd5ac;
}
.admin-product-status-page-product-badge.review {
  color: var(--status-amber);
  background: var(--status-amber-soft);
  border-color: var(--status-amber-border);
}
.admin-product-status-page-product-badge.rejected {
  color: var(--status-red);
  background: var(--status-red-soft);
  border-color: var(--status-red-border);
}
.admin-product-status-page-product-badge.archived {
  color: var(--status-green-deep);
  background: var(--status-soft-strong);
  border-color: var(--status-border-dark);
}
.admin-product-status-page-product-card-title {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  color: var(--status-text-strong);
  font-size: 1.03rem;
  font-weight: 850;
  line-height: 1.32;
  letter-spacing: -0.018em;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.admin-product-status-page-product-card-vendor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 7px 0 15px;
  color: var(--status-text-green);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
.admin-product-status-page-product-card-vendor svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--status-green);
  stroke-width: 2;
}
.admin-product-status-page-product-card-vendor span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product-status-page-product-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid var(--status-border);
  border-bottom: 1px solid var(--status-border);
}
.admin-product-status-page-product-card-meta > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 4px;
  text-align: center;
}
.admin-product-status-page-product-card-meta > div + div {
  border-left: 1px solid var(--status-border);
}
.admin-product-status-page-product-card-meta span {
  color: var(--status-green);
  font-size: 0.63rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-product-status-page-product-card-meta strong {
  color: var(--status-green-deep);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.1;
}
.admin-product-status-page-featured-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 11px;
  padding: 6px 10px;
  color: #087f5b;
  background: #d9f8ed;
  border: 1px solid #a0dac8;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.admin-product-status-page-featured-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke-width: 2;
}
.admin-product-status-page-product-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  color: var(--status-green-dark);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
  transition: color 180ms ease;
}
.admin-product-status-page-product-card:hover .admin-product-status-page-product-card-footer {
  color: var(--status-green);
}
.admin-product-status-page-product-card-footer-icon {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-green-deep);
  background: var(--status-soft);
  border: 1px solid var(--status-border);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.admin-product-status-page-product-card-footer-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.3;
}
.admin-product-status-page-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  margin-top: 34px;
  text-align: center;
}
.admin-product-status-page-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  color: var(--status-green-deep);
  background: var(--status-white);
  border: 1px solid var(--status-border);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: 0 5px 13px rgba(6, 78, 59, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.admin-product-status-page-pagination-link:hover {
  color: #ffffff;
  background: var(--status-accent-gradient);
  border-color: var(--status-green-deep);
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-product-status-page-pagination-link-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--status-soft);
  border: 1px solid var(--status-border);
}
.admin-product-status-page-pagination-link:hover .admin-product-status-page-pagination-link-icon {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.20);
}
.admin-product-status-page-pagination-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.admin-product-status-page-pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.admin-product-status-page-pagination-number {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-green-dark);
  background: var(--status-white);
  border: 1px solid var(--status-border);
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 4px 11px rgba(6, 78, 59, 0.04);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.admin-product-status-page-pagination-number:hover {
  color: var(--status-green-deep);
  background: var(--status-soft);
  border-color: var(--status-border-dark);
  box-shadow: 0 6px 14px rgba(6, 78, 59, 0.07);
}
.admin-product-status-page-pagination-number.active {
  color: #ffffff;
  background: var(--status-accent-gradient);
  border-color: var(--status-green-deep);
  box-shadow: 0 7px 16px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.admin-product-status-page-pagination-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 13px auto 0;
  color: var(--status-text-green);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.admin-product-status-page-pagination-info strong {
  color: var(--status-text-dark);
  font-weight: 850;
}
.admin-product-status-page-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  width: 100%;
  padding: 52px 24px;
  background: var(--status-white);
  border: 1px solid var(--status-border);
  border-radius: 21px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(6, 78, 59, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-product-status-page-empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--status-accent-gradient);
}
.admin-product-status-page-empty-decoration {
  position: absolute;
  width: 230px;
  height: 230px;
  top: -125px;
  right: -75px;
  border-radius: 50%;
  background: var(--status-soft);
  opacity: 0.75;
  pointer-events: none;
}
.admin-product-status-page-empty-icon {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  color: var(--status-green-deep);
  background: var(--status-accent-gradient);
  border: 1px solid var(--status-green-deep);
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.admin-product-status-page-empty-icon svg {
  width: 36px;
  height: 36px;
  color: #ffffff;
  stroke-width: 1.8;
}
.admin-product-status-page-empty-kicker {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 5px;
  color: var(--status-green);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-product-status-page-empty h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--status-text-strong);
  font-size: 1.42rem;
  font-weight: 850;
  line-height: 1.25;
}
.admin-product-status-page-empty p {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 8px auto 20px;
  color: var(--status-text-green);
  font-size: 0.84rem;
  font-weight: 550;
  line-height: 1.55;
  text-align: center;
}
.admin-product-status-page-empty-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 9px 16px;
  color: #ffffff;
  background: var(--status-accent-gradient);
  border: 1px solid var(--status-green-deep);
  border-radius: 11px;
  font-size: 0.77rem;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: 0 8px 20px rgba(6, 78, 59, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: box-shadow 160ms ease, filter 160ms ease;
}
.admin-product-status-page-empty-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.admin-product-status-page-empty-button:hover {
  color: #ffffff;
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.admin-product-status-page-empty-button-icon {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 7px;
}
.admin-product-status-page-empty-button-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.admin-product-status-page-product-card:focus-visible, .admin-product-status-page-back-link:focus-visible, .admin-product-status-page-pagination-link:focus-visible, .admin-product-status-page-pagination-number:focus-visible, .admin-product-status-page-empty-button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.25);
  outline-offset: 3px;
}
@media (max-width: 1240px) {
  .admin-product-status-page-product-grid {
    grid-template-columns: repeat(3, minmax(220px, 290px));
    gap: 20px;
  }
}
@media (max-width: 960px) {
  .admin-product-status-page {
    padding: 22px 18px 48px;
  }
  .admin-product-status-page-header {
    min-height: 310px;
    padding: 30px 22px;
  }
  .admin-product-status-page-product-grid {
    grid-template-columns: repeat(2, minmax(240px, 330px));
    gap: 17px;
  }
  .admin-product-status-page-product-card {
    min-height: 415px;
  }
}
@media (max-width: 720px) {
  .admin-product-status-page {
    padding: 19px 15px 42px;
  }
  .admin-product-status-page-header {
    min-height: 295px;
    padding: 28px 19px;
    border-radius: 20px;
  }
  .admin-product-status-page-header-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    border-radius: 16px;
  }
  .admin-product-status-page-header-icon svg {
    width: 27px;
    height: 27px;
  }
  .admin-product-status-page-header h1 {
    font-size: 2rem;
  }
  .admin-product-status-page-results {
    margin-top: 27px;
  }
  .admin-product-status-page-results-heading {
    margin-bottom: 20px;
  }
  .admin-product-status-page-product-grid {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 14px;
  }
  .admin-product-status-page-product-card {
    min-height: 400px;
    border-radius: 15px;
  }
  .admin-product-status-page-product-card-content {
    padding: 15px 14px 14px;
  }
}
@media (max-width: 600px) {
  .admin-product-status-page {
    padding: 16px 12px 34px;
  }
  .admin-product-status-page-header {
    min-height: 275px;
    padding: 24px 15px;
    border-radius: 17px;
  }
  .admin-product-status-page-back-link {
    margin-bottom: 17px;
    padding: 8px 11px;
    font-size: 0.72rem;
  }
  .admin-product-status-page-back-icon {
    width: 23px;
    height: 23px;
  }
  .admin-product-status-page-header-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .admin-product-status-page-header-icon svg {
    width: 24px;
    height: 24px;
  }
  .admin-product-status-page-eyebrow {
    font-size: 0.62rem;
  }
  .admin-product-status-page-header h1 {
    font-size: 1.68rem;
  }
  .admin-product-status-page-header p {
    margin-top: 8px;
    margin-bottom: 15px;
    font-size: 0.77rem;
  }
  .admin-product-status-page-total {
    padding: 8px 12px;
  }
  .admin-product-status-page-total-icon {
    width: 24px;
    height: 24px;
  }
  .admin-product-status-page-total-icon svg {
    width: 13px;
    height: 13px;
  }
  .admin-product-status-page-total strong {
    font-size: 1.12rem;
  }
  .admin-product-status-page-total > span:last-child {
    font-size: 0.68rem;
  }
  .admin-product-status-page-results {
    margin-top: 23px;
  }
  .admin-product-status-page-results-heading-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 9px;
    border-radius: 12px;
  }
  .admin-product-status-page-results-heading-icon svg {
    width: 20px;
    height: 20px;
  }
  .admin-product-status-page-results-heading span {
    font-size: 0.61rem;
  }
  .admin-product-status-page-results-heading h2 {
    font-size: 1.24rem;
  }
  .admin-product-status-page-results-heading p {
    font-size: 0.71rem;
  }
  .admin-product-status-page-product-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .admin-product-status-page-product-card {
    min-height: 0;
    width: min(100%, 390px);
    margin: 0 auto;
    border-radius: 15px;
  }
  .admin-product-status-page-product-card-image {
    aspect-ratio: 16 / 9;
  }
  .admin-product-status-page-product-card-content {
    padding: 16px 15px 15px;
  }
  .admin-product-status-page-product-card-title {
    font-size: 0.98rem;
  }
  .admin-product-status-page-pagination {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
  }
  .admin-product-status-page-pagination-pages {
    gap: 4px;
  }
  .admin-product-status-page-pagination-number {
    width: 35px;
    height: 35px;
    border-radius: 8px;
  }
  .admin-product-status-page-pagination-link {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 0.69rem;
  }
  .admin-product-status-page-pagination-link-icon {
    width: 22px;
    height: 22px;
  }
  .admin-product-status-page-pagination-info {
    margin-top: 10px;
    font-size: 0.69rem;
  }
  .admin-product-status-page-empty {
    min-height: 390px;
    padding: 42px 18px;
    border-radius: 17px;
  }
  .admin-product-status-page-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 17px;
  }
  .admin-product-status-page-empty-icon svg {
    width: 31px;
    height: 31px;
  }
  .admin-product-status-page-empty h2 {
    font-size: 1.22rem;
  }
  .admin-product-status-page-empty p {
    font-size: 0.76rem;
  }
}
@media (max-width: 420px) {
  .admin-product-status-page {
    padding: 14px 10px 30px;
  }
  .admin-product-status-page-header {
    min-height: 260px;
    padding: 22px 12px;
  }
  .admin-product-status-page-header h1 {
    font-size: 1.48rem;
  }
  .admin-product-status-page-header p {
    font-size: 0.72rem;
  }
  .admin-product-status-page-eyebrow {
    font-size: 0.58rem;
  }
  .admin-product-status-page-product-card-content {
    padding: 14px;
  }
  .admin-product-status-page-product-card-top {
    gap: 7px;
  }
  .admin-product-status-page-product-id {
    font-size: 0.61rem;
  }
  .admin-product-status-page-product-badge {
    padding: 4px 7px;
    font-size: 0.57rem;
  }
  .admin-product-status-page-product-card-title {
    font-size: 0.92rem;
  }
  .admin-product-status-page-product-card-vendor {
    font-size: 0.69rem;
  }
  .admin-product-status-page-product-card-meta {
    padding: 10px 0;
  }
  .admin-product-status-page-product-card-meta span {
    font-size: 0.57rem;
  }
  .admin-product-status-page-product-card-meta strong {
    font-size: 0.88rem;
  }
  .admin-product-status-page-product-card-footer {
    padding-top: 13px;
    font-size: 0.71rem;
  }
  .admin-product-status-page-product-card-footer-icon {
    width: 26px;
    height: 26px;
  }
  .admin-product-status-page-pagination {
    margin-top: 21px;
  }
  .admin-product-status-page-pagination-link {
    padding: 7px 9px;
  }
  .admin-product-status-page-pagination-number {
    width: 32px;
    height: 32px;
    font-size: 0.68rem;
  }
}
@media (max-width: 340px) {
  .admin-product-status-page-pagination-pages {
    gap: 3px;
  }
  .admin-product-status-page-pagination-number {
    width: 29px;
    height: 29px;
  }
  .admin-product-status-page-pagination-link span:not( .admin-product-status-page-pagination-link-icon ) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-product-status-page *, .admin-product-status-page *::before, .admin-product-status-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.vendor-detail-page {
  --vendor-accent-gradient: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --vendor-green-deep: #064e3b;
  --vendor-green: #047857;
  --vendor-green-mid: #065f46;
  --vendor-ink: #052e24;
  --vendor-ink-strong: #022c22;
  --vendor-text: #123b2c;
  --vendor-border: #c9e3d4;
  --vendor-border-strong: #9bcab0;
  --vendor-border-light: #dceee4;
  --vendor-soft: #eef9f3;
  --vendor-soft-strong: #e2f4e9;
  --vendor-white: #ffffff;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 30px 24px 75px;
  color: var(--vendor-text);
}
.vendor-detail-page, .vendor-detail-page *, .vendor-detail-page *::before, .vendor-detail-page *::after {
  box-sizing: border-box;
}
.vendor-detail-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.vendor-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 15px 7px 8px;
  border: 1px solid var(--vendor-border);
  border-radius: 13px;
  background: var(--vendor-white);
  color: var(--vendor-green-deep);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(6, 78, 59, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.vendor-back-link:hover {
  border-color: var(--vendor-border-strong);
  background: var(--vendor-soft);
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.vendor-back-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--vendor-soft-strong);
  color: var(--vendor-green-deep);
}
.vendor-back-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-page-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--vendor-green-deep);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-page-label svg {
  width: 16px;
  height: 16px;
}
.vendor-profile {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  border: 1px solid var(--vendor-border);
  border-radius: 26px;
  background: var(--vendor-white);
  box-shadow: 0 18px 50px rgba(6, 78, 59, 0.10), 0 3px 12px rgba(6, 78, 59, 0.05);
}
.vendor-profile-banner {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  background: var(--vendor-accent-gradient);
}
.vendor-profile-banner-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vendor-profile-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(2, 44, 34, 0.04) 0%, rgba(2, 44, 34, 0.13) 45%, rgba(2, 44, 34, 0.70) 100% );
}
.vendor-profile-banner-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  overflow: hidden;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  text-align: center;
}
.vendor-banner-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 25%, transparent 25% ), linear-gradient( 315deg, rgba(255, 255, 255, 0.13) 25%, transparent 25% );
  background-size: 80px 80px;
}
.vendor-banner-placeholder-icon {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 30px rgba(0, 0, 0, 0.12);
}
.vendor-banner-placeholder-icon svg {
  width: 35px;
  height: 35px;
}
.vendor-profile-banner-placeholder > span {
  position: relative;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.05em;
}
.vendor-banner-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--vendor-white);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 22px rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
}
.vendor-banner-badge svg {
  width: 15px;
  height: 15px;
}
.vendor-profile-logo-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -68px;
}
.vendor-profile-logo {
  width: 136px;
  height: 136px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vendor-border);
  border-radius: 34px;
  background: var(--vendor-white);
  box-shadow: 0 16px 36px rgba(6, 78, 59, 0.18), 0 0 0 7px rgba(255, 255, 255, 0.92);
}
.vendor-profile-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 27px;
}
.vendor-profile-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 27px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
}
.vendor-profile-logo-placeholder svg {
  width: 46px;
  height: 46px;
}
.vendor-profile-identity {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px 34px;
  text-align: center;
}
.vendor-profile-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--vendor-green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vendor-profile-name {
  max-width: 100%;
  margin: 0;
  color: var(--vendor-ink-strong);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.vendor-profile-description {
  width: min(690px, 100%);
  margin: 13px auto 0;
  color: var(--vendor-text);
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.vendor-profile-statuses {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 19px;
}
.vendor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.vendor-status svg {
  width: 14px;
  height: 14px;
}
.vendor-status-success {
  border-color: #9bcab0;
  background: #e2f4e9;
  color: #064e3b;
}
.vendor-status-warning {
  border-color: #f4cf69;
  background: #fff7db;
  color: #92400e;
}
.vendor-status-danger {
  border-color: #efb0b0;
  background: #fff0f0;
  color: #991b1b;
}
.vendor-status-neutral {
  border-color: var(--vendor-border);
  background: var(--vendor-soft);
  color: var(--vendor-green-deep);
}
.vendor-profile-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 25px;
  padding-top: 22px;
  border-top: 1px solid var(--vendor-border);
  text-align: center;
}
.vendor-profile-meta-item {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.vendor-profile-meta-item span {
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.vendor-profile-meta-item strong {
  color: var(--vendor-ink);
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.vendor-profile-meta-divider {
  width: 1px;
  height: 38px;
  background: var(--vendor-border);
}
.vendor-section-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 27px;
  text-align: center;
}
.vendor-section-heading-centered {
  text-align: center;
}
.vendor-section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--vendor-green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-section-heading h2 {
  margin: 0;
  color: var(--vendor-ink-strong);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
}
.vendor-section-heading p {
  width: min(650px, 100%);
  margin: 10px auto 0;
  color: var(--vendor-text);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.vendor-actions-panel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
  padding: 34px 30px;
  border: 1px solid var(--vendor-border);
  border-radius: 23px;
  background: linear-gradient( 180deg, #ffffff 0%, #f5fcf8 100% );
  box-shadow: 0 13px 36px rgba(6, 78, 59, 0.08);
  text-align: center;
}
.vendor-actions-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: var(--vendor-accent-gradient);
  transform: translateX(-50%);
}
.vendor-actions-grid {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.vendor-actions-grid form {
  margin: 0;
}
.vendor-action-button {
  position: relative;
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 17px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.vendor-action-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48%;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) );
}
.vendor-action-button > * {
  position: relative;
  z-index: 1;
}
.vendor-action-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.17);
}
.vendor-action-icon svg {
  width: 16px;
  height: 16px;
}
.vendor-action-primary {
  border-color: var(--vendor-green-deep);
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: 0 8px 21px rgba(6, 78, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.vendor-action-primary:hover {
  box-shadow: 0 11px 26px rgba(6, 78, 59, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.27);
}
.vendor-action-secondary {
  border-color: var(--vendor-border-strong);
  background: linear-gradient( 180deg, #ffffff 0%, #eef9f3 100% );
  color: var(--vendor-green-deep);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.vendor-action-secondary:hover {
  border-color: var(--vendor-green);
  box-shadow: 0 10px 23px rgba(6, 78, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.vendor-action-danger {
  border-color: #df9c9c;
  background: linear-gradient( 180deg, #fffafa 0%, #fff0f0 100% );
  color: #991b1b;
  box-shadow: 0 7px 18px rgba(153, 27, 27, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.vendor-action-danger:hover {
  border-color: #c97878;
  box-shadow: 0 10px 23px rgba(153, 27, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.vendor-overview-section {
  width: 100%;
  margin-bottom: 50px;
}
.vendor-overview-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.65fr);
  gap: 22px;
  align-items: stretch;
}
.vendor-card {
  min-width: 0;
  padding: 29px;
  border: 1px solid var(--vendor-border);
  border-radius: 23px;
  background: var(--vendor-white);
  box-shadow: 0 11px 31px rgba(6, 78, 59, 0.07);
}
.vendor-card-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
  text-align: center;
}
.vendor-card-heading-icon {
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.vendor-card-heading-icon svg {
  width: 22px;
  height: 22px;
}
.vendor-card-heading > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-card-heading span {
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.vendor-card-heading h3 {
  margin: 4px 0 0;
  color: var(--vendor-ink-strong);
  font-size: 21px;
  font-weight: 950;
  text-align: center;
}
.vendor-information-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--vendor-border);
  border-left: 1px solid var(--vendor-border);
  border-radius: 15px;
  overflow: hidden;
}
.vendor-information-item {
  min-width: 0;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 16px;
  border-right: 1px solid var(--vendor-border);
  border-bottom: 1px solid var(--vendor-border);
  background: var(--vendor-white);
  text-align: center;
}
.vendor-information-item:nth-child(4n + 1), .vendor-information-item:nth-child(4n + 2) {
  background: var(--vendor-soft);
}
.vendor-information-item span {
  margin-bottom: 6px;
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-information-item strong {
  color: var(--vendor-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-about-box {
  margin-top: 21px;
  padding: 22px;
  border: 1px solid var(--vendor-border);
  border-radius: 17px;
  background: var(--vendor-soft);
  text-align: center;
}
.vendor-about-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 13px;
  text-align: center;
}
.vendor-about-icon {
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--vendor-white);
  color: var(--vendor-green-deep);
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.08);
}
.vendor-about-icon svg {
  width: 18px;
  height: 18px;
}
.vendor-about-heading > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-about-heading span {
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vendor-about-heading h4 {
  margin: 3px 0 0;
  color: var(--vendor-ink-strong);
  font-size: 17px;
  font-weight: 900;
}
.vendor-about-box p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--vendor-text);
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}
.vendor-subscription-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vendor-plan-highlight {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 165px;
  padding: 25px;
  overflow: hidden;
  border-radius: 19px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: 0 13px 28px rgba(6, 78, 59, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  text-align: center;
}
.vendor-plan-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42%;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) );
}
.vendor-plan-highlight::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -65px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}
.vendor-plan-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 18px rgba(0, 0, 0, 0.10);
}
.vendor-plan-icon svg {
  width: 28px;
  height: 28px;
}
.vendor-plan-name {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-plan-name span {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.90;
}
.vendor-plan-name strong {
  margin-top: 5px;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.1;
}
.vendor-plan-details {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 18px;
  border: 1px solid var(--vendor-border);
  border-radius: 15px;
  overflow: hidden;
}
.vendor-plan-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 63px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--vendor-border);
  background: var(--vendor-white);
}
.vendor-plan-detail:last-child {
  border-bottom: 0;
}
.vendor-plan-detail:nth-child(even) {
  background: var(--vendor-soft);
}
.vendor-plan-detail span {
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vendor-plan-detail strong {
  color: var(--vendor-ink-strong);
  font-size: 16px;
  font-weight: 950;
  text-align: right;
}
.vendor-plan-footer {
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
}
.vendor-plan-footer > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--vendor-soft);
  color: var(--vendor-green-deep);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.vendor-plan-footer svg {
  width: 15px;
  height: 15px;
}
.vendor-statistics-section {
  width: 100%;
  margin-bottom: 50px;
}
.vendor-statistics-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  gap: 22px;
  align-items: stretch;
}
.vendor-stat-category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 27px;
  border: 1px solid var(--vendor-border);
  border-radius: 23px;
  background: var(--vendor-white);
  box-shadow: 0 10px 30px rgba(6, 78, 59, 0.07);
  text-align: center;
}
.vendor-stat-category-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 21px;
  text-align: center;
}
.vendor-stat-category-icon {
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--vendor-soft-strong);
  color: var(--vendor-green-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.vendor-stat-category-icon svg {
  width: 22px;
  height: 22px;
}
.vendor-stat-category-heading > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-stat-category-heading h3 {
  margin: 0;
  color: var(--vendor-ink-strong);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}
.vendor-stat-category-heading p {
  max-width: 580px;
  margin: 5px auto 0;
  color: var(--vendor-text);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.vendor-stat-grid {
  width: 100%;
  display: grid;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.vendor-stat-grid-five {
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  max-width: 900px;
  margin: 0 auto;
}
.vendor-stat-grid-two {
  grid-template-columns: repeat(2, minmax(150px, 220px));
  max-width: 480px;
  margin: 0 auto;
}
.vendor-stat-card {
  position: relative;
  min-width: 0;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 19px 13px;
  overflow: hidden;
  border: 1px solid var(--vendor-border);
  border-radius: 16px;
  background: linear-gradient( 180deg, #ffffff 0%, #f3faf6 100% );
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.vendor-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--vendor-accent-gradient);
}
.vendor-stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0) );
}
.vendor-stat-card:hover {
  border-color: var(--vendor-border-strong);
  background: var(--vendor-white);
  box-shadow: 0 9px 21px rgba(6, 78, 59, 0.10);
}
.vendor-stat-icon {
  position: relative;
  z-index: 1;
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  border-radius: 11px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: 0 6px 14px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.vendor-stat-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-stat-card > span {
  position: relative;
  z-index: 1;
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
}
.vendor-stat-card > strong {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: var(--vendor-ink-strong);
  font-size: 29px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}
.vendor-rating-card > strong {
  font-size: 32px;
}
.vendor-products-section {
  width: 100%;
  margin-bottom: 25px;
}
.vendor-products-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 27px;
  text-align: center;
}
.vendor-products-heading .vendor-section-heading {
  margin-bottom: 17px;
}
.vendor-products-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 9px 15px 9px 9px;
  border: 1px solid var(--vendor-border);
  border-radius: 14px;
  background: var(--vendor-soft);
  color: var(--vendor-green-deep);
  text-align: center;
}
.vendor-products-counter-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.vendor-products-counter-icon svg {
  width: 17px;
  height: 17px;
}
.vendor-products-counter > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vendor-products-counter strong {
  color: var(--vendor-ink-strong);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}
.vendor-products-counter span {
  margin-top: 4px;
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vendor-products-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 19px;
  justify-content: center;
}
.vendor-product-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vendor-border);
  border-radius: 20px;
  background: var(--vendor-white);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 9px 25px rgba(6, 78, 59, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.vendor-product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 3;
  background: var(--vendor-accent-gradient);
}
.vendor-product-card:hover {
  border-color: var(--vendor-border-strong);
  box-shadow: 0 15px 32px rgba(6, 78, 59, 0.12), 0 3px 8px rgba(6, 78, 59, 0.06);
}
.vendor-product-image {
  position: relative;
  width: 100%;
  height: 225px;
  overflow: hidden;
  background: var(--vendor-soft);
}
.vendor-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter 180ms ease;
}
.vendor-product-card:hover .vendor-product-image img {
  filter: brightness(1.03) saturate(1.04);
}
.vendor-product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
}
.vendor-product-image-placeholder svg {
  width: 50px;
  height: 50px;
}
.vendor-product-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.vendor-product-status .vendor-status {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 15px rgba(2, 44, 34, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.vendor-product-content {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.vendor-product-category {
  display: block;
  margin-bottom: 7px;
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-product-name {
  width: 100%;
  margin: 0;
  color: var(--vendor-ink-strong);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-product-id {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  color: var(--vendor-green);
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center;
}
.vendor-product-details {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.vendor-product-details > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--vendor-border);
  border-radius: 11px;
  background: var(--vendor-soft);
  text-align: center;
}
.vendor-product-details span {
  display: block;
  margin-bottom: 5px;
  color: var(--vendor-green);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.vendor-product-details strong {
  color: var(--vendor-ink-strong);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}
.vendor-product-details .vendor-product-price {
  color: var(--vendor-green-deep);
  font-size: 16px;
}
.vendor-product-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}
.vendor-product-availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.vendor-product-availability svg {
  width: 14px;
  height: 14px;
}
.vendor-product-available {
  color: var(--vendor-green-deep);
}
.vendor-product-archived {
  color: #92400e;
}
.vendor-product-open {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vendor-border);
  border-radius: 10px;
  background: var(--vendor-white);
  color: var(--vendor-green-deep);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.vendor-product-card:hover .vendor-product-open {
  border-color: var(--vendor-border-strong);
  background: var(--vendor-soft);
  box-shadow: 0 5px 12px rgba(6, 78, 59, 0.08);
}
.vendor-product-open svg {
  width: 16px;
  height: 16px;
}
.vendor-products-empty {
  grid-column: 1 / -1;
  width: min(720px, 100%);
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 42px;
  border: 1px dashed var(--vendor-border-strong);
  border-radius: 23px;
  background: linear-gradient( 180deg, #ffffff 0%, #f2faf5 100% );
  text-align: center;
}
.vendor-products-empty-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 21px;
  background: var(--vendor-accent-gradient);
  color: var(--vendor-white);
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.vendor-products-empty-icon svg {
  width: 32px;
  height: 32px;
}
.vendor-products-empty h3 {
  margin: 0;
  color: var(--vendor-ink-strong);
  font-size: 21px;
  font-weight: 950;
  text-align: center;
}
.vendor-products-empty p {
  max-width: 440px;
  margin: 9px auto 0;
  color: var(--vendor-text);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.vendor-detail-page a:focus-visible, .vendor-detail-page button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.28);
  outline-offset: 3px;
}
@media (max-width: 1350px) {
  .vendor-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vendor-stat-grid-five {
    grid-template-columns: repeat(3, minmax(120px, 190px));
    max-width: 650px;
  }
}
@media (max-width: 1150px) {
  .vendor-overview-grid {
    grid-template-columns: 1fr;
  }
  .vendor-statistics-layout {
    grid-template-columns: 1fr;
  }
  .vendor-stat-grid-five {
    grid-template-columns: repeat(5, minmax(100px, 150px));
    max-width: 850px;
  }
  .vendor-stat-category-feedback {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .vendor-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vendor-stat-grid-five {
    grid-template-columns: repeat(3, minmax(120px, 180px));
    max-width: 620px;
  }
  .vendor-stat-grid-two {
    grid-template-columns: repeat(2, minmax(150px, 210px));
    max-width: 450px;
  }
}
@media (max-width: 900px) {
  .vendor-profile-banner {
    height: 250px;
  }
  .vendor-profile-logo {
    width: 118px;
    height: 118px;
    border-radius: 29px;
  }
  .vendor-profile-logo img, .vendor-profile-logo-placeholder {
    border-radius: 22px;
  }
  .vendor-profile-logo-wrap {
    margin-top: -59px;
  }
  .vendor-profile-name {
    font-size: 34px;
  }
}
@media (max-width: 760px) {
  .vendor-detail-page {
    padding: 22px 16px 55px;
  }
  .vendor-detail-topbar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    text-align: center;
  }
  .vendor-profile-banner {
    height: 225px;
  }
  .vendor-actions-panel, .vendor-card, .vendor-stat-category {
    padding: 24px 19px;
  }
  .vendor-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 680px;
    margin: 0 auto;
  }
  .vendor-actions-grid form {
    width: 100%;
  }
  .vendor-action-button {
    width: 100%;
  }
  .vendor-stat-grid-five {
    grid-template-columns: repeat(2, minmax(140px, 190px));
    max-width: 410px;
  }
  .vendor-stat-grid-two {
    grid-template-columns: repeat(2, minmax(140px, 190px));
    max-width: 410px;
  }
}
@media (max-width: 620px) {
  .vendor-profile-banner {
    height: 205px;
  }
  .vendor-profile-identity {
    padding-left: 20px;
    padding-right: 20px;
  }
  .vendor-profile-name {
    font-size: 29px;
  }
  .vendor-profile-description {
    font-size: 14px;
  }
  .vendor-profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .vendor-profile-meta-divider {
    display: none;
  }
  .vendor-profile-meta-item {
    min-width: 0;
    width: 100%;
    padding: 12px 10px;
    border: 1px solid var(--vendor-border);
    border-radius: 12px;
    background: var(--vendor-soft);
  }
  .vendor-information-grid {
    grid-template-columns: 1fr;
  }
  .vendor-products-grid {
    grid-template-columns: 1fr;
  }
  .vendor-product-image {
    height: 245px;
  }
  .vendor-stat-grid-five, .vendor-stat-grid-two {
    grid-template-columns: repeat(2, minmax(125px, 180px));
    max-width: 380px;
  }
}
@media (max-width: 520px) {
  .vendor-detail-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .vendor-profile {
    border-radius: 21px;
  }
  .vendor-profile-banner {
    height: 185px;
    border-radius: 20px 20px 0 0;
  }
  .vendor-profile-logo {
    width: 104px;
    height: 104px;
    padding: 6px;
    border-radius: 27px;
  }
  .vendor-profile-logo img, .vendor-profile-logo-placeholder {
    border-radius: 20px;
  }
  .vendor-profile-logo-wrap {
    margin-top: -52px;
  }
  .vendor-profile-eyebrow {
    font-size: 10px;
  }
  .vendor-profile-name {
    font-size: 26px;
  }
  .vendor-profile-statuses {
    gap: 7px;
  }
  .vendor-profile-meta {
    grid-template-columns: 1fr;
  }
  .vendor-profile-meta-item {
    width: 100%;
  }
  .vendor-actions-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .vendor-stat-grid-five, .vendor-stat-grid-two {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .vendor-stat-card {
    min-height: 145px;
  }
  .vendor-plan-highlight {
    min-height: 155px;
  }
  .vendor-product-image {
    height: 230px;
  }
}
@media (max-width: 420px) {
  .vendor-detail-page {
    padding-left: 9px;
    padding-right: 9px;
  }
  .vendor-profile-banner {
    height: 165px;
  }
  .vendor-profile-name {
    font-size: 23px;
  }
  .vendor-profile-description {
    font-size: 13px;
  }
  .vendor-actions-panel, .vendor-card, .vendor-stat-category {
    padding-left: 14px;
    padding-right: 14px;
  }
  .vendor-stat-grid-five, .vendor-stat-grid-two {
    grid-template-columns: 1fr;
  }
  .vendor-stat-grid-five {
    max-width: 260px;
  }
  .vendor-stat-grid-two {
    max-width: 260px;
  }
  .vendor-stat-card {
    min-height: 135px;
  }
  .vendor-plan-detail {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
  }
  .vendor-plan-detail strong {
    text-align: center;
  }
  .vendor-product-details {
    grid-template-columns: 1fr;
  }
  .vendor-product-image {
    height: 220px;
  }
}
@media (max-width: 340px) {
  .vendor-detail-page {
    padding-left: 7px;
    padding-right: 7px;
  }
  .vendor-profile-description {
    font-size: 12.5px;
  }
  .vendor-profile-name {
    font-size: 21px;
  }
  .vendor-section-heading h2 {
    font-size: 23px;
  }
  .vendor-actions-panel, .vendor-card, .vendor-stat-category {
    padding-left: 12px;
    padding-right: 12px;
  }
}
:root {
  --admin-vendor-accent: linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 45%,
            #065f46 72%,
            #064e3b 100%
        );
  --admin-vendor-deep: #022c22;
  --admin-vendor-dark: #064e3b;
  --admin-vendor-green: #047857;
  --admin-vendor-mid: #065f46;
  --admin-vendor-text: #12372c;
  --admin-vendor-text-dark: #052e22;
  --admin-vendor-page: #f3fbf6;
  --admin-vendor-white: #ffffff;
  --admin-vendor-soft: #eef9f3;
  --admin-vendor-soft-strong: #e2f4e9;
  --admin-vendor-border: #c9e3d4;
  --admin-vendor-border-strong: #98cdb0;
  --admin-vendor-border-light: #dceee4;
  --admin-vendor-warning: #805300;
  --admin-vendor-warning-bg: #fff4d9;
  --admin-vendor-warning-border: #efd18a;
  --admin-vendor-danger: #a22e35;
  --admin-vendor-danger-bg: #ffebed;
  --admin-vendor-danger-border: #efb4ba;
  --admin-vendor-shadow: 0 18px 50px rgba(6, 78, 59, 0.10);
  --admin-vendor-shadow-soft: 0 10px 30px rgba(6, 78, 59, 0.08);
}
.admin-studentsquare-vendor-panel {
  width: 100%;
  min-height: 100%;
  padding: 36px 28px 70px;
  background: radial-gradient( circle at 50% 0%, rgba(4, 120, 87, 0.09), transparent 32% ), linear-gradient( 180deg, #f8fdf9 0%, #edf8f2 100% );
}
.admin-studentsquare-vendor-container {
  width: min(1500px, 100%);
  margin: 0 auto;
}
.admin-studentsquare-vendor-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 34px;
  padding: 58px 30px;
  border: 1px solid rgba(152, 205, 176, 0.72);
  border-radius: 30px;
  background: var(--admin-vendor-accent);
  box-shadow: 0 24px 60px rgba(6, 78, 59, 0.18);
  text-align: center;
}
.admin-studentsquare-vendor-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 115deg, rgba(255, 255, 255, 0.14), transparent 30%, transparent 68%, rgba(255, 255, 255, 0.08) );
  pointer-events: none;
}
.admin-studentsquare-vendor-header-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.admin-studentsquare-vendor-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-studentsquare-vendor-eyebrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.admin-studentsquare-vendor-eyebrow-icon svg {
  width: 15px;
  height: 15px;
}
.admin-studentsquare-vendor-title {
  width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.1rem, 4vw, 3.45rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
}
.admin-studentsquare-vendor-description {
  max-width: 700px;
  margin: 18px auto 0;
  color: #e6fff1;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
}
.admin-studentsquare-vendor-statistics {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 36px;
}
.admin-studentsquare-vendor-stat-category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 30px;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: var(--admin-vendor-shadow-soft);
  text-align: center;
}
.admin-studentsquare-vendor-stat-category-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 30px;
  text-align: center;
}
.admin-studentsquare-vendor-stat-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 18px;
  background: var(--admin-vendor-accent);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.18);
}
.admin-studentsquare-vendor-stat-category-icon svg {
  width: 25px;
  height: 25px;
}
.admin-studentsquare-vendor-stat-category-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.admin-studentsquare-vendor-stat-category-kicker {
  display: block;
  width: 100%;
  margin: 0 0 7px;
  color: var(--admin-vendor-green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.admin-studentsquare-vendor-stat-category-heading h2 {
  display: block;
  width: 100%;
  margin: 0 auto;
  color: var(--admin-vendor-deep);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-align: center;
}
.admin-studentsquare-vendor-stat-category-heading p {
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 8px auto 0;
  color: var(--admin-vendor-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}
.admin-studentsquare-vendor-stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: stretch;
  gap: 18px;
  margin: 0 auto;
}
.admin-studentsquare-vendor-stat-grid-two {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(2, 220px);
  justify-content: center;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}
.admin-studentsquare-vendor-subscription-category .admin-studentsquare-vendor-subscription-grid {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(3, 220px);
  justify-content: center;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}
.admin-studentsquare-vendor-promotion-category .admin-studentsquare-vendor-promotion-grid {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(3, 220px);
  justify-content: center;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}
.admin-studentsquare-vendor-stat-card {
  position: relative;
  overflow: hidden;
  width: 220px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 22px 18px;
  border: 1px solid var(--admin-vendor-border-light);
  border-radius: 20px;
  background: linear-gradient( 145deg, #ffffff 0%, #f7fcf9 100% );
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.07);
  text-align: center;
}
.admin-studentsquare-vendor-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent );
  pointer-events: none;
}
.admin-studentsquare-vendor-stat-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: rgba(4, 120, 87, 0.055);
  pointer-events: none;
}
.admin-studentsquare-vendor-stat-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 15px;
  background: var(--admin-vendor-soft-strong);
  color: var(--admin-vendor-green);
}
.admin-studentsquare-vendor-stat-icon svg {
  width: 21px;
  height: 21px;
}
.admin-studentsquare-vendor-stat-icon.success {
  background: #dff6e8;
  color: #087443;
}
.admin-studentsquare-vendor-stat-icon.warning {
  background: var(--admin-vendor-warning-bg);
  color: var(--admin-vendor-warning);
}
.admin-studentsquare-vendor-stat-icon.danger, .admin-studentsquare-vendor-stat-icon.rejected {
  background: var(--admin-vendor-danger-bg);
  color: var(--admin-vendor-danger);
}
.admin-studentsquare-vendor-stat-body {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-studentsquare-vendor-stat-label {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  color: var(--admin-vendor-text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.admin-studentsquare-vendor-stat-value {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--admin-vendor-deep);
  font-size: 1.75rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}
.admin-studentsquare-vendor-directory {
  width: 100%;
  padding: 32px;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: var(--admin-vendor-shadow);
}
.admin-studentsquare-vendor-directory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 28px;
}
.admin-studentsquare-vendor-directory-heading {
  flex: 1;
  text-align: center;
}
.admin-studentsquare-vendor-section-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--admin-vendor-green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}
.admin-studentsquare-vendor-section-title {
  margin: 0;
  color: var(--admin-vendor-deep);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-align: center;
}
.admin-studentsquare-vendor-section-description {
  max-width: 650px;
  margin: 8px auto 0;
  color: var(--admin-vendor-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.admin-studentsquare-vendor-directory-count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 105px;
  padding: 16px 20px;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 18px;
  background: var(--admin-vendor-soft);
  text-align: center;
}
.admin-studentsquare-vendor-directory-count strong {
  color: var(--admin-vendor-deep);
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
}
.admin-studentsquare-vendor-directory-count span {
  margin-top: 5px;
  color: var(--admin-vendor-green);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-studentsquare-vendor-filter-form {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(130px, 1fr)) auto;
  gap: 15px;
  align-items: end;
  padding: 23px;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 22px;
  background: var(--admin-vendor-soft);
}
.admin-studentsquare-vendor-filter-field {
  min-width: 0;
}
.admin-studentsquare-vendor-filter-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--admin-vendor-deep);
  font-size: 0.77rem;
  font-weight: 900;
}
.admin-studentsquare-vendor-search-box {
  position: relative;
}
.admin-studentsquare-vendor-search-box > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--admin-vendor-green);
  transform: translateY(-50%);
  pointer-events: none;
}
.admin-studentsquare-vendor-filter-form input, .admin-studentsquare-vendor-filter-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--admin-vendor-border-strong);
  border-radius: 13px;
  outline: none;
  background: #ffffff;
  color: var(--admin-vendor-deep);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.admin-studentsquare-vendor-filter-form input {
  padding: 0 14px 0 42px;
}
.admin-studentsquare-vendor-filter-form select {
  padding: 0 35px 0 13px;
  cursor: pointer;
}
.admin-studentsquare-vendor-filter-form input::placeholder {
  color: #24634e;
  opacity: 0.85;
}
.admin-studentsquare-vendor-filter-form input:focus, .admin-studentsquare-vendor-filter-form select:focus {
  border-color: var(--admin-vendor-green);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.10);
}
.admin-studentsquare-vendor-filter-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.admin-studentsquare-vendor-button-primary, .admin-studentsquare-vendor-button-secondary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.admin-studentsquare-vendor-button-primary::before, .admin-studentsquare-vendor-button-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
}
.admin-studentsquare-vendor-button-primary {
  border: 1px solid var(--admin-vendor-green);
  background: var(--admin-vendor-accent);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(6, 78, 59, 0.16);
}
.admin-studentsquare-vendor-button-secondary {
  border: 1px solid var(--admin-vendor-border-strong);
  background: #ffffff;
  color: var(--admin-vendor-deep);
}
.admin-studentsquare-vendor-button-primary:hover {
  box-shadow: 0 12px 25px rgba(6, 78, 59, 0.22);
}
.admin-studentsquare-vendor-button-secondary:hover {
  border-color: var(--admin-vendor-green);
  background: var(--admin-vendor-soft-strong);
}
.admin-studentsquare-vendor-button-primary svg, .admin-studentsquare-vendor-button-secondary svg {
  width: 16px;
  height: 16px;
}
.admin-studentsquare-vendor-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 4px;
}
.admin-studentsquare-vendor-results-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-studentsquare-vendor-results-title {
  color: var(--admin-vendor-deep);
  font-size: 0.9rem;
  font-weight: 900;
}
.admin-studentsquare-vendor-results-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--admin-vendor-soft-strong);
  color: var(--admin-vendor-green);
  font-size: 0.75rem;
  font-weight: 950;
}
.admin-studentsquare-vendor-results-right {
  color: var(--admin-vendor-text);
  font-size: 0.82rem;
  font-weight: 700;
}
.admin-studentsquare-vendor-results-right strong {
  color: var(--admin-vendor-deep);
  font-weight: 950;
}
.admin-studentsquare-vendor-table-container {
  overflow-x: auto;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(6, 78, 59, 0.07);
}
.admin-studentsquare-vendor-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-studentsquare-vendor-table thead {
  background: var(--admin-vendor-accent);
}
.admin-studentsquare-vendor-table th {
  padding: 17px 15px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-studentsquare-vendor-table th:first-child {
  padding-left: 22px;
}
.admin-studentsquare-vendor-table th:last-child {
  padding-right: 22px;
}
.admin-studentsquare-vendor-table th.subscription-column, .admin-studentsquare-vendor-table th.promo-column {
  min-width: 210px;
  text-align: center;
}
.admin-studentsquare-vendor-table tbody tr {
  background: #ffffff;
}
.admin-studentsquare-vendor-table tbody tr:nth-child(even) {
  background: #fbfefc;
}
.admin-studentsquare-vendor-table td {
  padding: 20px 15px;
  border-bottom: 1px solid var(--admin-vendor-border-light);
  color: var(--admin-vendor-text);
  font-size: 0.84rem;
  font-weight: 600;
  vertical-align: middle;
}
.admin-studentsquare-vendor-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-studentsquare-vendor-table td:first-child {
  padding-left: 22px;
}
.admin-studentsquare-vendor-table td:last-child {
  padding-right: 22px;
}
.admin-studentsquare-vendor-table td.subscription-column, .admin-studentsquare-vendor-table td.promo-column {
  min-width: 210px;
  text-align: center;
}
.admin-studentsquare-vendor-centered-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 78px;
  margin: 0 auto;
  text-align: center;
}
.admin-studentsquare-vendor-centered-cell small {
  display: block;
  width: 100%;
  color: var(--admin-vendor-text);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}
.admin-studentsquare-vendor-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #b5dec7;
  border-radius: 999px;
  background: #eaf8ef;
  color: var(--admin-vendor-deep);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.admin-studentsquare-vendor-plan svg {
  width: 14px;
  height: 14px;
}
.admin-studentsquare-vendor-plan.basic {
  border-color: #a9d8bf;
  background: #e5f6ec;
  color: #075b40;
}
.admin-studentsquare-vendor-plan.premium {
  border-color: #8cc9a9;
  background: linear-gradient( 135deg, #dff6e8, #ccefdc );
  color: #064e3b;
}
.admin-studentsquare-vendor-plan.promo {
  border-color: #e6c979;
  background: #fff5d8;
  color: #805300;
}
.admin-studentsquare-vendor-plan-free {
  border-color: #b9daca;
  background: #f0faf4;
  color: #176045;
}
.admin-studentsquare-vendor-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 245px;
}
.admin-studentsquare-vendor-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border: 2px solid #bce0cb;
  border-radius: 15px;
  background: var(--admin-vendor-accent);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.16);
}
.admin-studentsquare-vendor-identity-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-studentsquare-vendor-identity-content strong {
  overflow: hidden;
  color: var(--admin-vendor-deep);
  font-size: 0.91rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-studentsquare-vendor-id {
  margin-top: 3px;
  color: var(--admin-vendor-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 800;
}
.admin-studentsquare-vendor-identity-content small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--admin-vendor-text);
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-studentsquare-vendor-products {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.admin-studentsquare-vendor-products strong {
  color: var(--admin-vendor-deep);
  font-size: 1.2rem;
  font-weight: 950;
}
.admin-studentsquare-vendor-products span {
  color: var(--admin-vendor-green);
  font-size: 0.67rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.admin-studentsquare-vendor-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--admin-vendor-deep);
  font-size: 0.73rem;
  font-weight: 850;
  white-space: nowrap;
}
.admin-studentsquare-vendor-status > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-vendor-green);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.10);
}
.admin-studentsquare-vendor-status.success {
  color: #07623f;
}
.admin-studentsquare-vendor-status.success > span {
  background: #0a8a52;
}
.admin-studentsquare-vendor-status.warning {
  color: var(--admin-vendor-warning);
}
.admin-studentsquare-vendor-status.warning > span {
  background: #c58a12;
  box-shadow: 0 0 0 4px rgba(197, 138, 18, 0.10);
}
.admin-studentsquare-vendor-status.danger {
  color: var(--admin-vendor-danger);
}
.admin-studentsquare-vendor-status.danger > span {
  background: var(--admin-vendor-danger);
  box-shadow: 0 0 0 4px rgba(162, 46, 53, 0.10);
}
.admin-studentsquare-vendor-view-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid var(--admin-vendor-border-strong);
  border-radius: 11px;
  background: #ffffff;
  color: var(--admin-vendor-deep);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.admin-studentsquare-vendor-view-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-studentsquare-vendor-view-button:hover {
  border-color: var(--admin-vendor-green);
  background: var(--admin-vendor-soft-strong);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.10);
}
.admin-studentsquare-vendor-view-button svg {
  width: 15px;
  height: 15px;
  color: var(--admin-vendor-green);
}
.admin-studentsquare-vendor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 340px;
  padding: 45px 25px;
  text-align: center;
}
.admin-studentsquare-vendor-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  border: 1px solid var(--admin-vendor-border);
  border-radius: 21px;
  background: var(--admin-vendor-soft);
  color: var(--admin-vendor-green);
}
.admin-studentsquare-vendor-empty-icon svg {
  width: 30px;
  height: 30px;
}
.admin-studentsquare-vendor-empty h3 {
  margin: 0;
  color: var(--admin-vendor-deep);
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
}
.admin-studentsquare-vendor-empty p {
  max-width: 480px;
  margin: 8px auto 18px;
  color: var(--admin-vendor-text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.admin-studentsquare-vendor-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--admin-vendor-border-strong);
  border-radius: 11px;
  background: var(--admin-vendor-soft);
  color: var(--admin-vendor-green);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.admin-studentsquare-vendor-empty a:hover {
  border-color: var(--admin-vendor-green);
  background: var(--admin-vendor-soft-strong);
}
.admin-studentsquare-vendor-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 18px 4px 0;
}
.admin-studentsquare-vendor-pagination-info {
  color: var(--admin-vendor-text);
  font-size: 0.82rem;
  font-weight: 700;
}
.admin-studentsquare-vendor-pagination-info strong {
  color: var(--admin-vendor-deep);
  font-weight: 950;
}
.admin-studentsquare-vendor-pagination-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.admin-studentsquare-vendor-pagination-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--admin-vendor-border-strong);
  border-radius: 11px;
  background: #ffffff;
  color: var(--admin-vendor-deep);
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.admin-studentsquare-vendor-pagination-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
}
.admin-studentsquare-vendor-pagination-button:hover {
  border-color: var(--admin-vendor-green);
  background: var(--admin-vendor-soft-strong);
  box-shadow: 0 7px 18px rgba(6, 78, 59, 0.09);
}
.admin-studentsquare-vendor-pagination-button svg {
  width: 15px;
  height: 15px;
  color: var(--admin-vendor-green);
}
@media (max-width: 1250px) {
  .admin-studentsquare-vendor-stat-grid {
    grid-template-columns: repeat(3, minmax(160px, 220px));
    justify-content: center;
  }
  .admin-studentsquare-vendor-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-studentsquare-vendor-filter-search {
    grid-column: span 3;
  }
  .admin-studentsquare-vendor-filter-actions {
    grid-column: span 3;
  }
}
@media (max-width: 1000px) {
  .admin-studentsquare-vendor-subscription-category .admin-studentsquare-vendor-subscription-grid, .admin-studentsquare-vendor-promotion-category .admin-studentsquare-vendor-promotion-grid {
    grid-template-columns: repeat(3, 190px);
  }
  .admin-studentsquare-vendor-stat-card {
    width: 190px;
  }
}
@media (max-width: 900px) {
  .admin-studentsquare-vendor-panel {
    padding: 24px 17px 55px;
  }
  .admin-studentsquare-vendor-header {
    padding: 46px 22px;
    border-radius: 24px;
  }
  .admin-studentsquare-vendor-directory {
    padding: 24px;
  }
  .admin-studentsquare-vendor-directory-header {
    flex-direction: column;
    align-items: center;
  }
  .admin-studentsquare-vendor-directory-count {
    width: 150px;
  }
}
@media (max-width: 760px) {
  .admin-studentsquare-vendor-stat-category {
    padding: 28px 18px;
  }
  .admin-studentsquare-vendor-stat-category-header {
    gap: 12px;
  }
  .admin-studentsquare-vendor-stat-grid, .admin-studentsquare-vendor-stat-grid-two, .admin-studentsquare-vendor-subscription-category .admin-studentsquare-vendor-subscription-grid, .admin-studentsquare-vendor-promotion-category .admin-studentsquare-vendor-promotion-grid {
    width: 100%;
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
  }
  .admin-studentsquare-vendor-stat-card {
    width: 200px;
  }
  .admin-studentsquare-vendor-filter-form {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .admin-studentsquare-vendor-filter-search, .admin-studentsquare-vendor-filter-actions {
    grid-column: auto;
  }
  .admin-studentsquare-vendor-filter-actions {
    flex-direction: column;
  }
  .admin-studentsquare-vendor-button-primary, .admin-studentsquare-vendor-button-secondary {
    width: 100%;
  }
  .admin-studentsquare-vendor-results-bar {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .admin-studentsquare-vendor-pagination {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 500px) {
  .admin-studentsquare-vendor-panel {
    padding: 18px 12px 45px;
  }
  .admin-studentsquare-vendor-header {
    padding: 36px 15px;
  }
  .admin-studentsquare-vendor-title {
    font-size: 1.8rem;
  }
  .admin-studentsquare-vendor-description {
    font-size: 0.83rem;
    line-height: 1.6;
  }
  .admin-studentsquare-vendor-stat-category {
    padding: 25px 14px;
  }
  .admin-studentsquare-vendor-stat-category-heading h2 {
    font-size: 1.25rem;
  }
  .admin-studentsquare-vendor-stat-category-heading p {
    font-size: 0.82rem;
  }
  .admin-studentsquare-vendor-stat-grid, .admin-studentsquare-vendor-stat-grid-two, .admin-studentsquare-vendor-subscription-category .admin-studentsquare-vendor-subscription-grid, .admin-studentsquare-vendor-promotion-category .admin-studentsquare-vendor-promotion-grid {
    width: 100%;
    grid-template-columns: 220px;
    justify-content: center;
  }
  .admin-studentsquare-vendor-stat-card {
    width: 220px;
    min-height: 140px;
  }
  .admin-studentsquare-vendor-directory {
    padding: 19px;
    border-radius: 21px;
  }
  .admin-studentsquare-vendor-section-title {
    font-size: 1.5rem;
  }
  .admin-studentsquare-vendor-pagination-actions {
    width: 100%;
  }
  .admin-studentsquare-vendor-pagination-button {
    flex: 1;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}