/* stylelint-disable */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  margin: 0;
}
[tabindex='-1']:focus {
  outline: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}
address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5em;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1em;
}
dfn {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}
figure {
  margin: 0 0 1em;
}
img {
  vertical-align: middle;
  border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit;
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
mark {
  padding: 0.2em;
  background-color: #feffe6;
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: -webkit-fit-content;
  width: fit-content;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: 320px;
  width: var(--toastify-toast-width);
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 14px;
  padding: var(--toastify-toast-padding);
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: var(--toastify-toast-shadow);
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: 320px;
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: auto;
  right: initial;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.user-navbar {
    background-color: #ffffff;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    line-height: 72px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.user-navbar-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 0 4px;
}

/* Logo */
.user-navbar-logo {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-right: 0;
}

.user-navbar-logo:hover {
    color: #F4A300;
}

.user-navbar-logo-img {
    height: 36px;
    margin-right: 4px;
}

/* Search Bar */
.user-nav-search-form {
    display: flex;
    align-items: center;
}

.user-nav-search-input {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
    width: 250px;
    transition: border-color 0.3s ease;
}

.user-nav-search-input:focus {
    border-color: #ffd700;
}

.user-nav-search-button {
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    background-color: #2563eb; /* Light blue */
    color: #ffffff;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.3s ease;
}

.user-nav-search-button:hover {
    background-color: #1e40af; /* Darker blue */
}

/* Location Button */
.user-navbar-location-button {
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    background-color: #34d399; /* Teal green */
    color: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

.user-navbar-location-button:hover {
    background-color: #059669; /* Darker green */
}

/* Navigation Menu */
.user-nav-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
    align-items: center;
}

.user-nav-item {
    display: flex;
    margin: 0;
}

.user-nav-links {
    color: #666;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
}

.user-nav-links:hover {
    color: #F4A300;
    background-color: rgba(244, 163, 0, 0.1);
}

.user-logout-button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.user-logout-button:hover {
    background-color: #ef4444; /* Red */
    color: #ffffff;
}

.user-navbar-logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.user-navbar-logo-img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.user-nav-menu {
    display: flex;
    list-style: none;
    margin-left: auto;
    align-items: center;
}
.profile-image-logo {
    width: 50px; /* Try increasing the width */
    height: 50px; /* Maintain aspect ratio */
    border: 2px solid #bdc9cd;
    border-radius: 50%;
    object-fit: cover; /* Ensures image fits correctly */
}

/* Notification Button */
.user-notification-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

.user-notification-button:hover {
    background-color: rgba(244, 163, 0, 0.1);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: -6px;
    background: #F4A300;
    color: #000;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff;
}

/* Notification Dropdown */
.notification-dropdown {
    background: #fff;
    width: 360px;
    border-radius: 8px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 999;
    animation: dropdownFade 0.3s ease-in-out;
}

@keyframes dropdownFade {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.view-all {
    color: #F4A300;
    cursor: pointer;
    font-size: 13px;
}

.dropdown-divider {
    border: 0;
    height: 1px;
    background-color: #f0f0f0;
    margin: 8px 0;
}

.notifications-wrapper {
    max-height: 250px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: #f5f5f5;
}

.unread {
    background-color: #f6ffed;
}

.item-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.item-info {
    font-size: 12px;
    color: #666;
}

.mark-read-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.mark-read-button:hover {
    background-color: rgba(82, 196, 26, 0.1);
}

.notification-footer {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.show-more-button {
    background: none;
    border: none;
    color: #F4A300;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.show-more-button:hover {
    background-color: rgba(244, 163, 0, 0.1);
}

/* LocationSearch spacing */
.user-navbar-container > div:nth-child(2) {
    margin: 0 32px;
    flex: 1 1;
    max-width: 400px;
}

/* Responsive Design */
@media screen and (max-width: 992px) {
    .user-navbar-container {
        padding: 0 16px;
    }

    .user-nav-menu {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .user-navbar {
        padding: 0 12px;
    }

    .user-navbar-logo-img {
        height: 28px;
    }
}

/* Mobile Menu Styles */
.mobile-menu .ant-menu-item {
    height: 56px !important;
    line-height: 56px !important;
    margin: 8px 0 !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.mobile-menu .ant-menu-item:hover {
    background-color: rgba(244, 163, 0, 0.1) !important;
    transform: translateX(4px);
}

.mobile-menu .ant-menu-item-selected {
    background-color: rgba(244, 163, 0, 0.15) !important;
    color: #F4A300 !important;
}

.mobile-menu .ant-menu-item img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

.mobile-menu .ant-menu-item a {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: inherit !important;
    text-decoration: none !important;
    flex: 1 1;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
}

.mobile-menu .ant-menu-submenu {
    margin: 8px 0 !important;
}

.mobile-menu .ant-menu-submenu-title {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.mobile-menu .ant-menu-submenu-title:hover {
    background-color: rgba(244, 163, 0, 0.1) !important;
}

.mobile-menu .ant-menu-submenu-inline > .ant-menu {
    background: #fafafa !important;
    padding: 8px 0 !important;
}

.mobile-menu .ant-menu-submenu-inline .ant-menu-item {
    padding-left: 56px !important;
    height: 48px !important;
    line-height: 48px !important;
}

.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}
.SignUpForm_container__icHKM {
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    height: auto;
    max-width: 1800px;
    margin: 0 auto;
    padding-bottom: 250px;
}
  
  .SignUpForm_formSection__NtiNF {
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    padding: 40px;
    display: flex;
  }
  
  .SignUpForm_brandHeader__xbAJT {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
  }
  
  .SignUpForm_brandName__PDYHz {
    color: #061c3d;
    font-family: Lexend, sans-serif;
    font-size: 36px;
    font-weight: 500;
    margin: 0;
  }
  
  .SignUpForm_formHeading__8BDcG {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
  }
  
  .SignUpForm_title__avEEX {
    color: #100f14;
    font-family: Lexend, sans-serif;
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  
  .SignUpForm_welcomeText__oW2yD {
    color: #100f14;
    font-family: Lexend, sans-serif;
    font-size: 38px;
    font-weight: 700;
  }
  
  .SignUpForm_subtitle__8wdVq {
    color: #49475a;
    font-family: Lexend, sans-serif;
    font-size: 20px;
    margin: 0;
  }
  
  .SignUpForm_form__7KukF {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
  }
  
  .SignUpForm_inputContainer__SJToo {
    border: 1px solid #e6e8ec;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }
  
  .SignUpForm_inputIcon__eY6y4 {
    display: flex;
  }
  
  .SignUpForm_input__QCUcM {
    color: #838e9e;
    flex: 1 1;
    font-family: Lexend, sans-serif;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .SignUpForm_toggleIcon__Zjr-m {
    cursor: pointer;
  }
  
  .SignUpForm_submitButton__-oEM8 {
    color: #fff;
    background-color: #F4A300;
    border: none;
    border-radius: 8px;
    width: 100%;
    height: 70px;
    margin-bottom: 12px;
    font-family: Lexend, sans-serif;
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 24px;
}

.SignUpForm_disclaimer__68WyE {
    text-align: center;
    margin: 16px 0 20px 0;
    padding: 0 10px;
}

.SignUpForm_disclaimer__68WyE p {
    color: #49475a;
    font-family: Lexend, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.SignUpForm_disclaimerLink__m\+nAI {
    color: #F4A300;
    font-family: Lexend, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.SignUpForm_disclaimerLink__m\+nAI:hover {
    color: #d88c00;
    text-decoration: underline;
}

/* Make Ant Design buttons larger */
.SignUpForm_ant-btn__aEiPT, .SignUpForm_ant-btn-primary__C4o74, .SignUpForm_ant-btn-default__fi6jA {
    height: 60px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
    padding: 0 28px !important;
    font-family: Lexend, sans-serif;
    font-weight: 600;
}
  
  .SignUpForm_loginLink__tvRqj {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .SignUpForm_loginText__jndKt {
    color: #49475a;
    font-family: Lexend, sans-serif;
    font-size: 16px;
  }
  
  .SignUpForm_loginAnchor__1t472 {
    color: #F4A300;
    font-family: Lexend, sans-serif;
    font-size: 16px;
    font-weight: 600;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    margin-left: 5px;
  }
  
  .SignUpForm_dividerContainer__0KDvK {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: 30px;
  }
  
  .SignUpForm_dividerLine__XNpE3 {
    opacity: 0.8;
    background-color: #cbcad7;
    flex: 1 1;
    height: 1.5px;
  }
  
  .SignUpForm_dividerText__SeoRG {
    color: #686677;
    font-family: Lexend, sans-serif;
    font-size: 18px;
  }
  
  .SignUpForm_socialButtons__MwBap {
    display: flex;
    gap: 16px;
  }
  
  .SignUpForm_socialButton__5d96t {
    border: 1px solid #f05151;
    border-radius: 4px;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    background: transparent;
    cursor: pointer;
  }
  
  .SignUpForm_imageSection__jZb48 {
    background-color: #F4A300;
    border-radius: 30px 0 0 30px;
    flex: 1.3 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Make the section bigger */
    min-width: 700px;
    max-width: 900px;
}

.SignUpForm_promoImage__FiybK {
    position: relative;
    left: auto;
    left: initial;
    top: auto;
    top: initial;
    transform: none;
    width: 100%;
    max-width: 900px;
    height: 500px;
    max-height: 90vh;
    border-radius: 40px;
    box-shadow: 0px 10px 42.6px 0px rgba(0, 0, 0, 0.25);
    object-fit: cover;
    display: block;
    margin: 0 auto;
    z-index: 1;
}
  
  .SignUpForm_overlayContainer__CIJlS {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
  
  .SignUpForm_overlayStripe__braae {
    background-color: rgba(255, 255, 255, 0.2);
    width: 106px;
    height: 100%;
  }
  
  .SignUpForm_overlayStripe__braae:not(:first-child) {
    margin-left: 100px;
  }
  
  @media (max-width: 991px) {
    .SignUpForm_imageSection__jZb48 {
      display: none;
    }
  }
  
  .SignUpForm_modalOverlay__eOsGN {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .SignUpForm_modalContent__Spyi- {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
  }
  
  .SignUpForm_modalContent__Spyi- h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #061C3D;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF {
    padding: 1rem 0;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-form-item-label {
    padding-bottom: 0.5rem;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-form-item-label > label {
    color: #061C3D;
    font-weight: 500;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input,
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input-password {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid #e6e8ec;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input:hover,
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input-password:hover {
    border-color: #F4A300;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input:focus,
  .SignUpForm_forgotPasswordForm__vb6CF .ant-input-password:focus {
    border-color: #F4A300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-btn-primary {
    background-color: #F4A300;
    border-color: #F4A300;
    height: 48px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-btn-primary:hover {
    background-color: #d88c00;
    border-color: #d88c00;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .ant-modal-title {
    color: #061C3D;
    font-size: 1.5rem;
    font-weight: 600;
  }
  
  .SignUpForm_errorMessage__5XzCX {
    color: #ff4d4f;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
  }
  
  .SignUpForm_successMessage__ti1p1 {
    color: #52c41a;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
  }
  
  .SignUpForm_closeButton__IGF9h {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
  }
  
  .SignUpForm_closeButton__IGF9h:hover {
    color: #333;
  }
  
  /* Forgot Password Styles */
  .SignUpForm_forgotPasswordLink__x1HD9 {
    text-align: center;
    margin-top: 0;
  }
  
  .SignUpForm_forgotPasswordButton__4Q84g {
    color: #F4A300 !important;
    font-size: 0.9rem;
    padding: 0 !important;
    height: auto !important;
  }
  
  .SignUpForm_forgotPasswordButton__4Q84g:hover {
    color: #d88c00 !important;
  }
  
  /* Custom styles for the country code dropdown in the modal */
  .SignUpForm_forgotPasswordForm__vb6CF .SignUpForm_inputContainer__SJToo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .SignUpForm_inputIcon__eY6y4 {
    display: flex;
    align-items: center;
  }
  
  .SignUpForm_forgotPasswordForm__vb6CF .SignUpForm_input__QCUcM {
    flex: 1 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
  }
  
  
  
/* VendorNavbar.css */

/* Modern Ant Design Theme Overrides */
.ant-layout-header {
  transition: all 0.3s ease;
}

.ant-menu-horizontal {
  line-height: 72px;
}

.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
  padding: 0 12px;
  margin: 0 2px;
}

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover {
  color: #F4A300;
}

.ant-menu-horizontal > .ant-menu-item-selected {
  color: #F4A300;
  border-bottom: 2px solid #F4A300;
}

/* Menu Icons */
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  font-size: 16px;
  margin-right: 4px;
}

.ant-menu-submenu-title .anticon-down {
  margin-left: 2px;
  font-size: 10px;
  transition: transform 0.3s ease;
}

.ant-menu-submenu-open .anticon-down {
  transform: rotate(180deg);
}

/* Truck Management Menu Item */
.ant-menu-submenu-title .anticon-car {
  color: #F4A300;
  font-size: 18px;
  display: inline-block !important;
}

.ant-menu-submenu-title:hover .anticon-car {
  color: #ffb733;
}

/* Text Links */
.nav-text-link {
  color: #666;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 13px;
}

.nav-text-link:hover {
  color: #F4A300;
  background-color: rgba(244, 163, 0, 0.1);
}

/* Location Search Component */
.location-search-container {
  min-width: 200px;
  max-width: 250px;
}

/* Right Menu */
.right-menu {
  display: flex;
  align-items: center;
  margin: 0 4px;
}

/* Notification Badge */
.ant-badge-count {
  box-shadow: 0 0 0 1px #fff;
  background: #F4A300;
  color: #000;
}

.ant-badge-dot {
  background: #F4A300;
}

/* Notification Button */
.ant-btn-text:hover {
  background-color: rgba(244, 163, 0, 0.1) !important;
}

/* Profile Avatar */
.ant-avatar {
  transition: all 0.3s ease;
}

.ant-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #F4A300;
}

/* Drawer Styles */
.ant-drawer-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.ant-drawer-body {
  padding: 24px;
}

/* Mobile Menu */
.ant-drawer .ant-menu {
  border-right: none;
}

.ant-drawer .ant-menu-item {
  margin: 4px 0;
  border-radius: 4px;
}

.ant-drawer .ant-menu-item:hover {
  background-color: rgba(255, 215, 0, 0.1);
}

.ant-drawer .ant-menu-item-selected {
  background-color: rgba(255, 215, 0, 0.1);
  color: #ffd700;
}

/* Notification Menu */
.ant-dropdown-menu {
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ant-dropdown-menu-item {
  border-radius: 4px;
  margin: 2px 0;
}

.ant-dropdown-menu-item:hover {
  background-color: rgba(255, 215, 0, 0.1);
}

/* Icon Buttons */
.ant-btn-text {
  color: #666;
  transition: all 0.3s ease;
}

.ant-btn-text:hover {
  color: #ffd700;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .location-search-container {
    min-width: 250px;
  }
  
  .nav-text-link {
    padding: 8px;
  }
}

@media screen and (max-width: 992px) {
  .ant-menu-horizontal {
    display: none;
  }
  
  .location-search-container {
    display: none;
  }
  
  .right-menu {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .ant-layout-header {
    padding: 0 16px;
  }
  
  .ant-avatar {
    width: 28px;
    height: 28px;
  }
  
  .ant-typography {
    font-size: 13px !important;
  }
}

/* Animation for notifications */
@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ant-dropdown-menu {
  animation: slideIn 0.2s ease-out;
}

/* Custom scrollbar for notification menu */
.ant-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.ant-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.ant-dropdown-menu::-webkit-scrollbar-thumb {
  background: #ffd700;
  border-radius: 3px;
}

.ant-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #ffb733;
}

/* Mobile Menu Styles */
.mobile-menu .ant-menu-item {
  height: 56px !important;
  line-height: 56px !important;
  margin: 8px 0 !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.mobile-menu .ant-menu-item:hover {
  background-color: rgba(244, 163, 0, 0.1) !important;
  transform: translateX(4px);
}

.mobile-menu .ant-menu-item-selected {
  background-color: rgba(244, 163, 0, 0.15) !important;
  color: #F4A300 !important;
}

.mobile-menu .ant-menu-item img {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
}

.mobile-menu .ant-menu-item a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  text-decoration: none !important;
  flex: 1 1;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
}

.mobile-menu .ant-menu-submenu {
  margin: 8px 0 !important;
}

.mobile-menu .ant-menu-submenu-title {
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.mobile-menu .ant-menu-submenu-title:hover {
  background-color: rgba(244, 163, 0, 0.1) !important;
}

.mobile-menu .ant-menu-submenu-inline > .ant-menu {
  background: #fafafa !important;
  padding: 8px 0 !important;
}

.mobile-menu .ant-menu-submenu-inline .ant-menu-item {
  padding-left: 56px !important;
  height: 48px !important;
  line-height: 48px !important;
}
.user-navbar {
    background-color: #ffffff;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    line-height: 72px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.user-navbar-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 0 4px;
}

/* Logo */
.user-navbar-logo {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-right: 0px;
}

.user-navbar-logo:hover {
    color: #F4A300;
}

.user-navbar-logo-img {
    height: 36px;
    margin-right: 4px;
}

/* Search Bar */
.user-nav-search-form {
    display: flex;
    align-items: center;
}

.user-nav-search-input {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
    width: 250px;
    transition: border-color 0.3s ease;
}

.user-nav-search-input:focus {
    border-color: #ffd700;
}

.user-nav-search-button {
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    background-color: #2563eb; /* Light blue */
    color: #ffffff;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.3s ease;
}

.user-nav-search-button:hover {
    background-color: #1e40af; /* Darker blue */
}

/* Location Button */
.user-navbar-location-button {
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    background-color: #34d399; /* Teal green */
    color: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

.user-navbar-location-button:hover {
    background-color: #059669; /* Darker green */
}

/* Navigation Menu */
.user-nav-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
    align-items: center;
}

.user-nav-item {
    display: flex;
    margin: 0;
}

.user-nav-links {
    color: #666;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
}

.user-nav-links:hover {
    color: #F4A300;
    background-color: rgba(244, 163, 0, 0.1);
}

.user-logout-button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.user-logout-button:hover {
    background-color: #ef4444; /* Red */
    color: #ffffff;
}

.user-notification-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

.user-notification-button:hover {
    background-color: rgba(244, 163, 0, 0.1);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: -6px;
    background: #F4A300;
    color: #000;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff;
}

/* Sign Up and Login Buttons */
.user-signup-button {
    background: none;
    border: 1px solid #F4A300;
    color: #F4A300;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 32px;
}

.user-signup-button:hover {
    background-color: #F4A300;
    color: #fff;
}

/* Button container */
.user-nav-menu li:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* LocationSearch spacing */
.user-navbar-container > div:nth-child(2) {
    margin: 0 32px;
    flex: 1 1;
    max-width: 400px;
}

/* Notification Dropdown */
.notification-dropdown {
    background: #fff;
    width: 360px;
    border-radius: 8px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 999;
    animation: dropdownFade 0.3s ease-in-out;
}

@keyframes dropdownFade {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.view-all {
    color: #F4A300;
    cursor: pointer;
    font-size: 13px;
}

.dropdown-divider {
    border: 0;
    height: 1px;
    background-color: #f0f0f0;
    margin: 8px 0;
}

.notifications-wrapper {
    max-height: 250px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: #f5f5f5;
}

.unread {
    background-color: #f6ffed;
}

.item-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.item-info {
    font-size: 12px;
    color: #666;
}

.mark-read-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.mark-read-button:hover {
    background-color: rgba(82, 196, 26, 0.1);
}

.notification-footer {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.show-more-button {
    background: none;
    border: none;
    color: #F4A300;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.show-more-button:hover {
    background-color: rgba(244, 163, 0, 0.1);
}

/* Responsive Design */
@media screen and (max-width: 992px) {
    .user-navbar-container {
        padding: 0 16px;
    }

    .user-nav-menu {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .user-navbar {
        padding: 0 12px;
    }

    .user-navbar-logo-img {
        height: 28px;
    }
}

.user-nav-item {
    margin: 0 15px;
}

.user-nav-links {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.user-logout-button {
    background-color: red;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 5px;
}

.user-notification-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: -6px;
    background: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}

.notification-dropdown {
    background: linear-gradient(135deg, #f4a300, #f7ba44);
    color: #fff;
    width: 360px;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 999;
    animation: dropdownFade 0.3s ease-in-out;
    font-family: 'Segoe UI', sans-serif;
  }
  
  @keyframes dropdownFade {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .menu-title {
    font-size: 1rem;
    font-weight: bold;
  }
  
  .view-all {
    cursor: pointer;
    font-size: 0.95rem;
    color: #fff;
    display: flex;
    align-items: center;
  }
  
  .dropdown-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0.75rem 0;
  }
  
  .notifications-wrapper {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .notification-item {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .notification-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .item-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  
  .item-info {
    font-size: 0.85rem;
    color: #fefefe;
  }
  
  .unread {
    border-left: 4px solid #fff;
  }
  
  .mark-read-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  
  .notification-footer {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  .show-more-button {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  .show-more-button:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  


.food-truck-promotion-modal .ant-modal-content {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.food-truck-promotion-modal .ant-modal-body {
  padding: 0;
}

.food-truck-promotion-modal .ant-modal-close {
  color: #fff;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10;
}

.food-truck-promotion-modal .ant-modal-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
  transform: rotate(90deg);
}

.modal-layout {
  min-height: auto;
  background: #fff;
}

.modal-left {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 0 !important;
}

.image-overlay {
  position: relative;
  height: 100%;
  min-height: 550px;
  overflow: hidden;
}

.modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 550px;
  transition: transform 0.5s ease;
}

.image-overlay:hover .modal-image {
  transform: scale(1.05);
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4), transparent);
  padding: 60px 25px 25px;
  color: white;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.caption-text {
  color: white;
  font-size: 18px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  font-weight: 600 !important;
}

.modal-content-wrapper {
  padding: 0 !important;
  background-color: #fff;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
}

.content-card {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

.content-card .ant-card-body {
  padding: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal-headers {
  padding:0px;
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  justify-content: center;
  margin-top: -5px;
}

.header-icon-wrapper {
  background: linear-gradient(135deg, #FF8C00, #F4A300);
  padding: 14px;
  border-radius: 16px;
  margin-right: 15px;
  box-shadow: 0 8px 20px rgba(255, 140, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.header-icon-wrapper::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

.header-icon {
  font-size: 28px;
  color: #ffffff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.modal-title {
  background: linear-gradient(135deg, #FF8C00, #F4A300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(255, 140, 0, 0.15);
  text-align: center;
}

.modal-description {
  font-size: 16px;
  margin: 5px 0 0 0 !important;
  color: #444;
  line-height: 1.5;
  letter-spacing: 0.2px;
  text-align: center;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-divider {
  margin: 2px 0 !important;
  background: linear-gradient(to right, rgba(255, 140, 0, 0.5), rgba(255, 140, 0, 0.1));
  height: 1px;
}

.benefits-title {
  margin: 0 0 12px 0 !important;
  color: #333;
  font-weight: 600 !important;
  position: relative;
  display: block;
  text-align: center;
}

.benefits-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #FF8C00, #F4A300);
  border-radius: 3px;
}

.benefits-container {
  width: 100%;
  margin-bottom: 15px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.benefit-card {
  background-color: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  border-left: 3px solid #FF8C00;
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 140, 0, 0.05), transparent);
  pointer-events: none;
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.benefit-card .ant-card-body {
  padding: 16px;
}

.benefit-icon-container {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF8C00, #F4A300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 6px 12px rgba(255, 140, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.benefit-icon-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 30%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 14px 14px 0 0;
}

.benefit-icon {
  color: #fff;
  font-size: 20px;
}

.benefit-text {
  font-size: 16px;
  color: #333;
  letter-spacing: 0.2px;
  position: relative;
  padding-right: 20px;
}

.benefit-text::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.benefit-card:hover .benefit-text::after {
  opacity: 1;
  right: -5px;
}

.modal-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  background: linear-gradient(135deg, #FF8C00, #F4A300) !important;
  border-color: #FF8C00 !important;
  width: 100%;
  height: 46px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 140, 0, 0.45);
  background: linear-gradient(135deg, #F4A300, #FF8C00) !important;
}

.cta-button:hover::before {
  left: 100%;
}

.dismiss-link {
  color: #777 !important;
  font-size: 16px;
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}

.dismiss-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 50%;
  background-color: #777;
  transition: all 0.3s ease;
}

.dismiss-link:hover {
  color: #555 !important;
}

.dismiss-link:hover::after {
  width: 100%;
  left: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .food-truck-promotion-modal .ant-modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .image-overlay {
    min-height: 220px;
  }
  
  .modal-image {
    min-height: 220px;
  }
  
  .content-card .ant-card-body {
    padding: 25px;
  }
  
  .modal-title {
    font-size: 28px !important;
  }
  
  .header-icon-wrapper {
    padding: 12px;
  }
  
  .header-icon {
    font-size: 24px;
  }
  
  .benefit-icon-container {
    width: 40px;
    height: 40px;
  }
  
  .benefit-icon {
    font-size: 18px;
  }
  
  .caption-text {
    font-size: 16px;
  }
  
  .modal-description {
    font-size: 16px;
  }
  
  .cta-button {
    height: 48px !important;
  }
}

/* Animation keyframes */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animations */
.modal-header, .modal-description, .benefits-title, .benefits-container, .modal-actions {
  animation: fadeIn 0.6s ease-out forwards;
}

.modal-header {
  animation-delay: 0.1s;
}

.modal-description {
  animation-delay: 0.2s;
}

.benefits-title {
  animation-delay: 0.3s;
}

.benefits-container {
  animation-delay: 0.4s;
}

.modal-actions {
  animation-delay: 0.5s;
}

.header-icon-wrapper {
  animation: pulse 2s infinite;
}

/* Image badge styles */
.image-badge {
  position: absolute;
  top: 20px;
  left: 0;
  background: linear-gradient(135deg, #FF8C00, #F4A300);
  padding: 8px 16px;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.badge-text {
  color: white;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Benefit details styles */
.benefit-details {
  margin-top: 5px;
  padding-left: 60px;
  animation: fadeIn 0.3s ease-out forwards;
}

.benefit-card.active {
  background-color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* Trust indicators */
.trust-indicators {
  margin-top: 5px;
  text-align: center;
  width: 100%;
}

.trust-text {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  color: #52c41a;
  margin-right: 6px;
  font-size: 14px;
}

.order-btn{
    background-color: #F4A300;
}

.catering-btn{
    background-color: #EBEDFF;
}

 .expanded-view-tabs .ant-tabs-tab{
    padding: 8px 20px;
 }
 
 /* Reduce padding on mobile */
 @media (max-width: 768px) {
    .expanded-view-tabs .ant-tabs-tab{
        padding: 6px 12px;
    }
 }
 
 .expanded-view-tabs.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
    color: #F4A300!important;
 }

 .expanded-view-tabs .ant-tabs-ink-bar{
    background-color:#F4A300!important;
 }

 .expanded-view-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
    color: #ffc107;
  }

/* Google-Style Image Gallery */
.google-style-gallery {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    background: #fff;
}

.gallery-main-container {
    display: flex;
    gap: 8px;
    height: 200px;
    position: relative;
}

/* Responsive image heights */
@media (min-width: 1200px) {
    .gallery-main-container {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .gallery-main-container {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .gallery-main-container {
        height: 160px;
    }
}

/* Primary Image Container */
.primary-image-container {
    flex: 1 1;
    position: relative;
    background: #f8f9fa;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}

.primary-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.primary-image:hover {
    transform: scale(1.02);
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.95) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nav-arrow:hover {
    background: rgba(255,255,255,1) !important;
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow-left {
    left: 12px;
}

.nav-arrow-right {
    right: 12px;
}

/* Image Counter */
.image-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* Primary Badge */
.primary-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #F4A300, #ff8c00);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
}

.primary-star {
    font-size: 10px;
}

/* Side Thumbnails */
.side-thumbnails {
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #F4A300 #f0f0f0;
}

.side-thumbnails::-webkit-scrollbar {
    width: 4px;
}

.side-thumbnails::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
}

.side-thumbnails::-webkit-scrollbar-thumb {
    background: #F4A300;
    border-radius: 2px;
}

.side-thumbnail {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.7;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.side-thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.side-thumbnail.active {
    border: 3px solid #F4A300;
    opacity: 1;
    transform: scale(1.05);
}

.side-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.side-thumbnail:hover .thumbnail-overlay {
    opacity: 1;
}

.thumbnail-number {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.thumbnail-primary-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #F4A300;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.thumbnail-primary-indicator .anticon {
    font-size: 8px;
    color: white;
}

.more-images-indicator {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    border: 2px dashed #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.more-images-indicator:hover {
    background: linear-gradient(135deg, #F4A300, #ff8c00);
    color: white;
    border-color: #F4A300;
}

/* Mobile Thumbnail Strip */
.mobile-thumbnail-strip {
    display: none;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
    background: #f8f9fa;
    scrollbar-width: thin;
    scrollbar-color: #F4A300 #f0f0f0;
}

.mobile-thumbnail-strip::-webkit-scrollbar {
    height: 4px;
}

.mobile-thumbnail-strip::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
}

.mobile-thumbnail-strip::-webkit-scrollbar-thumb {
    background: #F4A300;
    border-radius: 2px;
}

.mobile-thumbnail {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.7;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mobile-thumbnail.active {
    border: 3px solid #F4A300;
    opacity: 1;
}

.mobile-thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
}

.mobile-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mobile-primary-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #F4A300;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mobile-primary-indicator .anticon {
    font-size: 8px;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gallery-main-container {
        flex-direction: column;
        height: auto;
    }
    
    .primary-image-container {
        height: 300px;
        border-radius: 8px 8px 0 0;
    }
    
    .side-thumbnails {
        display: none;
    }
    
    .mobile-thumbnail-strip {
        display: flex;
    }
    
    .nav-arrow {
        width: 36px;
        height: 36px;
    }
    
    .nav-arrow-left {
        left: 8px;
    }
    
    .nav-arrow-right {
        right: 8px;
    }
}

@media (max-width: 480px) {
    .primary-image-container {
        height: 250px;
    }
    
    .mobile-thumbnail {
        width: 50px;
        height: 50px;
    }
}


/* ===================== BASE PANEL ===================== */
.ostats-panel {
  background: #fff;
  border: 1px solid #e8e8e8;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 12px;
  border-radius: var(--radius-lg, 12px);
  /* margin-top: 16px; */
  padding: 20px 20px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: 'Inter', sans-serif;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* Full-page mode: covers viewport above order list */
.ostats-panel--fullpage {
  position: fixed;
  inset: 0;
  z-index: 1200;
  margin: 0;
  border-radius: 0;
  border: none;
  overflow-y: auto;
  padding: 24px 32px 32px;
  box-shadow: none;
}

/* ===================== HEADER ===================== */
.ostats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ostats-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ostats-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ostats-title {
  font-size: 16px;
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  color: #1a1a1a;
  color: var(--text-primary, #1a1a1a);
  font-family: 'Lexend', sans-serif;
  font-family: var(--font-heading, 'Lexend', sans-serif);
}

.ostats-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #F4A300;
  color: var(--color-primary, #F4A300);
  background: #FFEEDB;
  background: var(--color-primary-light, #FFEEDB);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  padding: 5px 12px;
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--transition-fast, 0.2s ease);
  border: none;
}
.ostats-back:hover {
  background: #ffe0a0;
  color: #DB9200;
  color: var(--color-primary-hover, #DB9200);
}

.ostats-expand {
  font-size: 16px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  padding: 3px 7px;
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--transition-fast, 0.2s ease);
  line-height: 1;
}
.ostats-expand:hover { background: #F9FAFB; background: var(--color-bg-light, #F9FAFB); color: #1a1a1a; color: var(--text-primary, #1a1a1a); }

.ostats-close {
  font-size: 15px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  padding: 3px 7px;
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--transition-fast, 0.2s ease);
  line-height: 1;
}
.ostats-close:hover { background: #fde8e8; color: #FE0004; color: var(--color-negative, #FE0004); }

/* ===================== FILTERS ===================== */
.ostats-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ostats-month-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ostats-select {
  appearance: none;
  -webkit-appearance: none;
  background: white;
  border: 1px solid #D7D7D7;
  border: 1px solid var(--border-light, #D7D7D7);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  padding: 7px 32px 7px 12px;
  font-size: 13px;
  font-weight: 500;
  font-weight: var(--weight-medium, 500);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-family: var(--font-body, 'Inter', sans-serif);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 fill=%27%23666%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M8 11L3 6h10l-5 5z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
  transition: border-color var(--transition-fast, 0.2s);
}
.ostats-select:hover { border-color: #F4A300; border-color: var(--color-primary, #F4A300); }
.ostats-select:focus {
  outline: none;
  border-color: #F4A300;
  border-color: var(--color-primary, #F4A300);
  box-shadow: 0 0 0 2px rgba(244,163,0,0.15);
}

.ostats-period-label {
  font-size: 13px;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #F4A300;
  color: var(--color-primary, #F4A300);
  padding: 5px 12px;
  background: #FFEEDB;
  background: var(--color-primary-light, #FFEEDB);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
}

/* ===================== SUMMARY CARDS ===================== */
.ostats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}

.ostats-card {
  background: #F9FAFB;
  background: var(--color-bg-light, #F9FAFB);
  border: 1px solid #e8e8e8;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  padding: 14px 16px;
  transition: box-shadow 0.2s;
  transition: box-shadow var(--transition-fast, 0.2s);
}
.ostats-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.ostats-card--revenue { background: #fffbeb; border-color: #fde68a; }
.ostats-card--completed { background: #f0fdf4; border-color: #bbf7d0; }
.ostats-card--avg { background: #eff6ff; border-color: #bfdbfe; }

.ostats-card-label {
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ostats-card-value {
  font-size: 22px;
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  line-height: 1.2;
  margin-bottom: 4px;
  font-family: 'Lexend', sans-serif;
  font-family: var(--font-heading, 'Lexend', sans-serif);
}

.ostats-card-sub {
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  line-height: 1.4;
}

/* ===================== SECTIONS ===================== */
.ostats-section {
  margin-bottom: 20px;
}

.ostats-section-title {
  font-size: 12px;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #5B5B5B;
  color: var(--text-secondary, #5B5B5B);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ostats-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.ostats-section-header .ostats-section-title { margin-bottom: 0; }

.ostats-section-badge {
  font-size: 11px;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  padding: 3px 10px;
  border-radius: 50px;
  border-radius: var(--radius-pill, 50px);
  background: #eff6ff;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
}
.ostats-section-badge--green {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

/* ===================== BADGE VARIANTS ===================== */
.ostats-section-badge--warn {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

/* ===================== LOYALTY GRID ===================== */
.ostats-loyalty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.ostats-loyalty-stat {
  background: #F9FAFB;
  background: var(--color-bg-light, #F9FAFB);
  border: 1px solid #e8e8e8;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  text-align: center;
}

.ostats-loyalty-stat--main {
  border-width: 2px;
}

.ostats-loyalty-stat--good {
  background: #f0fdf4;
  border-color: #22c55e;
}

.ostats-loyalty-stat--low {
  background: #fff7ed;
  border-color: #f97316;
}

.ostats-loyalty-stat-value {
  font-size: 26px;
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  font-family: 'Lexend', sans-serif;
  font-family: var(--font-heading, 'Lexend', sans-serif);
  line-height: 1.1;
  margin-bottom: 3px;
}

.ostats-loyalty-stat--good .ostats-loyalty-stat-value { color: #16a34a; }
.ostats-loyalty-stat--low .ostats-loyalty-stat-value  { color: #ea580c; }

.ostats-loyalty-stat-label {
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.ostats-loyalty-stat-hint {
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
}

.ostats-info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  color: #93c5fd;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
  transition: color 0.15s ease;
}

.ostats-info-btn:hover { color: #3b82f6; }

.ostats-info-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  transform: none;
  width: 220px;
  white-space: normal;
  background: #eff6ff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 400;
  font-weight: var(--weight-regular, 400);
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid #bfdbfe;
  box-shadow: 0 4px 16px rgba(59,130,246,0.15);
  pointer-events: none;
  z-index: 200;
  text-transform: none;
  letter-spacing: 0;
}

.ostats-info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 12px;
  transform: none;
  border: 6px solid transparent;
  border-top-color: #bfdbfe;
}

.ostats-info-btn:hover .ostats-info-tooltip {
  display: block;
}

@media (max-width: 600px) {
  .ostats-loyalty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================== CHART WRAPPER ===================== */
.ostats-chart-wrap {
  background: #F9FAFB;
  background: var(--color-bg-light, #F9FAFB);
  border: 1px solid #e8e8e8;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  padding: 12px 8px 4px;
}

/* ===================== SoS GRID ===================== */
.ostats-sos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.ostats-sos-stat {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  text-align: center;
}

.ostats-sos-stat--peak {
  background: #eff6ff;
  border-color: #3b82f6;
}

.ostats-sos-stat-value {
  font-size: 26px;
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  color: #1d4ed8;
  font-family: 'Lexend', sans-serif;
  font-family: var(--font-heading, 'Lexend', sans-serif);
  line-height: 1.1;
  margin-bottom: 4px;
}

.ostats-sos-stat--peak .ostats-sos-stat-value {
  color: #1d4ed8;
}

.ostats-sos-stat-label {
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

@media (max-width: 600px) {
  .ostats-sos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================== TOOLTIP ===================== */
.ostats-tooltip {
  background: #061C3D;
  background: var(--color-navy, #061C3D);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  pointer-events: none;
}
.ostats-tooltip-label {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 5px;
}
.ostats-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ostats-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===================== TWO-COL ===================== */
.ostats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

/* ===================== STATUS BREAKDOWN ===================== */
.ostats-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ostats-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.ostats-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ostats-status-name {
  flex: 0 0 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5B5B5B;
  color: var(--text-secondary, #5B5B5B);
}

.ostats-status-bar-wrap {
  flex: 1 1;
  height: 6px;
  background: #D7D7D7;
  background: var(--color-gray-300, #D7D7D7);
  border-radius: 3px;
  overflow: hidden;
}

.ostats-status-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.ostats-status-count {
  flex: 0 0 26px;
  text-align: right;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  font-size: 12px;
}

/* ===================== TOP ITEMS ===================== */
.ostats-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ostats-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.ostats-item-rank {
  flex: 0 0 18px;
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  text-align: center;
}

.ostats-item-name {
  flex: 0 0 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5B5B5B;
  color: var(--text-secondary, #5B5B5B);
}

.ostats-item-bar-wrap {
  flex: 1 1;
  height: 6px;
  background: #D7D7D7;
  background: var(--color-gray-300, #D7D7D7);
  border-radius: 3px;
  overflow: hidden;
}

.ostats-item-bar {
  height: 100%;
  background: #F4A300;
  background: var(--color-primary, #F4A300);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.ostats-item-count {
  flex: 0 0 36px;
  text-align: right;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #5B5B5B;
  color: var(--text-secondary, #5B5B5B);
  font-size: 12px;
}

/* ===================== DAILY ITEM SALES ===================== */
.ostats-daily-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ostats-daily-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.ostats-daily-item-rank {
  flex: 0 0 20px;
  font-size: 11px;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-weight: 700;
  font-weight: var(--weight-bold, 700);
  text-align: center;
}

.ostats-daily-item-name {
  flex: 0 0 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5B5B5B;
  color: var(--text-secondary, #5B5B5B);
  font-weight: 500;
  font-weight: var(--weight-medium, 500);
}

.ostats-daily-item-bar-wrap {
  flex: 1 1;
  height: 8px;
  background: #D7D7D7;
  background: var(--color-gray-300, #D7D7D7);
  border-radius: 4px;
  overflow: hidden;
}

.ostats-daily-item-bar {
  height: 100%;
  background: #22c55e;
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.ostats-daily-item-qty {
  flex: 0 0 36px;
  text-align: right;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  font-size: 12px;
}

.ostats-daily-item-rev {
  flex: 0 0 56px;
  text-align: right;
  font-weight: 500;
  font-weight: var(--weight-medium, 500);
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-size: 11px;
}

/* ===================== EMPTY / ERROR ===================== */
.ostats-empty {
  text-align: center;
  color: #9C9B9B;
  color: var(--text-muted, #9C9B9B);
  font-size: 14px;
  padding: 28px 0;
}

.ostats-error {
  text-align: center;
  color: #FE0004;
  color: var(--color-negative, #FE0004);
  font-size: 13px;
  padding: 16px 0;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .ostats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ostats-two-col {
    grid-template-columns: 1fr;
  }
  .ostats-status-name {
    flex: 0 0 130px;
  }
  .ostats-item-name {
    flex: 0 0 110px;
  }
  .ostats-daily-item-name {
    flex: 0 0 120px;
  }
}

@media (max-width: 600px) {
  .ostats-panel {
    padding: 14px 12px;
  }
  .ostats-panel--fullpage {
    padding: 16px 14px 24px;
  }
  .ostats-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ostats-card-value {
    font-size: 18px;
  }
  .ostats-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  .ostats-daily-item-rev {
    display: none;
  }
}

/* =====================================================
   ORDER MANAGEMENT PAGE — aligned with theme.css
===================================================== */

.omp-page {
  font-family: var(--font-body);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ===== HEADER ===== */
.omp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.omp-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.omp-title {
  margin: 0 !important;
  font-family: var(--font-heading) !important;
  color: var(--color-primary) !important;
  font-weight: var(--weight-bold) !important;
}

.omp-truck-select .ant-select-selector {
  border-color: var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
}

.omp-header-actions {
  display: flex;
  gap: 8px;
}

.omp-stats-toggle {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
  transition: all var(--transition-fast) !important;
}

.omp-stats-toggle--active {
  background: var(--color-primary) !important;
  color: var(--text-inverse) !important;
}

.omp-refresh-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
}

/* ===== STATS PANEL ===== */
.omp-stats-panel {
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

/* ===== SUMMARY CARDS ===== */
.omp-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}

.omp-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  background: white;
  border: 1px solid var(--border-light);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.omp-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.omp-summary-count {
  font-size: 28px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.omp-summary-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  margin-top: 4px;
}

.omp-summary--pending .omp-summary-count { color: #fa8c16; }
.omp-summary--making .omp-summary-count { color: #1890ff; }
.omp-summary--ready .omp-summary-count { color: #52c41a; }
.omp-summary--total .omp-summary-count { color: var(--color-primary); }

.omp-summary--pending { border-top: 3px solid #fa8c16; }
.omp-summary--making { border-top: 3px solid #1890ff; }
.omp-summary--ready { border-top: 3px solid #52c41a; }
.omp-summary--total { border-top: 3px solid var(--color-primary); }

/* ===== TABS ===== */
.omp-tabs .ant-tabs-nav {
  margin-bottom: 20px !important;
}

.omp-tab-label {
  font-size: 15px;
  font-weight: var(--weight-medium);
}

.omp-tabs .ant-badge-count {
  background: var(--color-primary);
}

/* ===== ORDERS GRID ===== */
.omp-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* ===== ORDER CARD ===== */
.omp-order-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.omp-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Card accent */
.omp-card-accent {
  height: 4px;
  width: 100%;
}

.omp-accent--pending { background: #fa8c16; }
.omp-accent--making { background: #1890ff; }
.omp-accent--ready { background: #52c41a; }
.omp-accent--default { background: var(--color-gray-300); }

/* Card header */
.omp-card-header {
  padding: 16px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.omp-card-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.omp-order-number {
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.omp-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.omp-card-date {
  font-size: 13px;
  color: var(--text-muted);
}

.omp-card-total {
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Expiry bar */
.omp-expiry-bar {
  padding: 8px 16px;
  background: var(--color-primary-light);
  border-top: 1px solid var(--color-gray-300-50);
  border-bottom: 1px solid var(--color-gray-300-50);
}

.omp-expiry-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d46b08;
  font-weight: var(--weight-medium);
  margin-bottom: 4px;
}

/* Customer info */
.omp-customer-info {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-300-50);
  background: var(--color-bg-light);
}

.omp-customer-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-size: 14px;
}

.omp-customer-contact {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Items section */
.omp-items-section {
  padding: 12px 16px;
}

.omp-items-title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.omp-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.omp-item-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-gray-300-50);
}

.omp-item-row:last-child {
  border-bottom: none;
}

.omp-item-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.omp-item-qty {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  min-width: 24px;
}

.omp-item-name {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.omp-item-price {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.omp-item-addons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 30px;
}

.omp-addon-tag {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--color-bg-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Payment info */
.omp-payment-info {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-gray-300-50);
}

.omp-payment-method {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

/* Expired / Cancel messages */
.omp-expired-msg {
  padding: 8px 16px;
  background: #fff2e8;
  color: #d46b08;
  font-size: 13px;
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: 6px;
}

.omp-cancel-msg {
  padding: 8px 16px;
  background: #fff2f0;
  color: var(--color-negative);
  font-size: 13px;
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Card actions */
.omp-card-actions {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--border-light);
  background: var(--color-bg-light);
}

.omp-est-input {
  width: 160px !important;
  border-radius: var(--radius-sm) !important;
}

.omp-action-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
  font-size: 13px !important;
  height: 32px !important;
}

.omp-btn-accept {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.omp-btn-accept:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.omp-btn-ready {
  background: #52c41a !important;
  border-color: #52c41a !important;
}

.omp-btn-ready:hover {
  background: #389e0d !important;
  border-color: #389e0d !important;
}

.omp-btn-complete {
  background: #722ed1 !important;
  border-color: #722ed1 !important;
}

.omp-btn-complete:hover {
  background: #531dab !important;
  border-color: #531dab !important;
}

/* Loading & Empty */
.omp-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

.omp-empty {
  padding: 60px 0;
}

/* Modal */
.omp-modal-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-negative);
}

.omp-cancel-modal-body {
  padding: 8px 0;
}

/* ===== FULL PAGE LOADING ===== */
.omp-page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
}

.omp-page-loading-text {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .omp-page {
    padding: 16px 12px;
  }

  .omp-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .omp-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .omp-orders-grid {
    grid-template-columns: 1fr;
  }

  .omp-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .omp-card-meta {
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .omp-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .omp-summary-card {
    padding: 12px 8px;
  }

  .omp-summary-count {
    font-size: 22px;
  }

  .omp-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .omp-est-input {
    width: 100% !important;
  }
}

/* General Page Styles */
.login-page {
    padding: 60px;
    background-color: #f7f7f7;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Sections */
.login-section, .register-section {
    margin-bottom: 40px;
}

h1, h2 {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* Form and Inputs */
.form-section {
    font-size: 16px;
    width: 100%;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
    width: 100%; /* Ensure inputs and buttons take full width */
    text-align: center; /* Center the input fields */
}

/* Make input fields smaller and centered */
.input-group input {
    padding: 12px;
    width: 80%; /* Adjust width to make the input centered inside its parent container */
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 0 auto; /* Center the input */
    display: block; /* Ensure the input field is centered */
}

/* Input focus effects */
input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

/* Center and make the button full-width */
.input-group button {
    padding: 12px 0;
    width: 80%; /* Make sure the button takes the same width as the input */
    max-width: 300px; /* Control max width of button */
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 20px auto 0 auto; /* Center the button and add margin at the top */
    display: block; /* Ensure the button is centered within its container */
}

button:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 10px rgba(0, 91, 187, 0.2);
}

/* Error Message */
.error-message {
    color: red;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Forgot Password Link */
.forgot-password-link {
    margin-top: 15px;
}

.forgot-password-link a {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 480px) {
    .login-page {
        padding: 20px;
        max-width: 100%;
    }

    button, .input-group button {
        padding: 10px 20px;
    }

    .input-group input, .input-group button {
        width: 90%; /* Ensure the inputs are wider on smaller screens */
    }
}

/* Join as Operator - matches Live2Eat theme */
.join-operator-page {
  min-height: calc(100vh - 120px);
  background: linear-gradient(135deg, #f9f9f9 0%, #f4f7fc 100%);
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.join-operator-container {
  max-width: 480px;
  width: 100%;
}

.join-operator-header {
  text-align: center;
  margin-bottom: 32px;
}

.join-operator-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a2b49;
  margin: 0 0 12px 0;
}

.join-operator-header p {
  font-size: 16px;
  color: #6c757d;
  line-height: 1.6;
  margin: 0;
}

.join-operator-card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
}

.join-operator-card .ant-card-body {
  padding: 32px;
}

.join-operator-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.join-operator-error {
  padding: 12px 16px;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 8px;
  color: #cf1322;
  font-size: 14px;
}

.join-operator-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 8px;
}

.join-operator-input {
  height: 48px !important;
  border-radius: 8px !important;
  border: 1px solid #e9ecef !important;
  font-size: 16px !important;
}

.join-operator-input:focus,
.join-operator-input:hover {
  border-color: #F4A300 !important;
  box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2) !important;
}

.join-operator-code-input input {
  letter-spacing: 2px !important;
  font-family: 'Monaco', 'Menlo', monospace !important;
}

.join-operator-icon {
  color: #F4A300 !important;
  font-size: 18px !important;
}

.join-operator-submit {
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: #F4A300 !important;
  border-color: #F4A300 !important;
  margin-top: 8px;
}

.join-operator-submit:hover {
  background: #d98f00 !important;
  border-color: #d98f00 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.35);
}

.join-operator-footer {
  margin-top: 32px;
  text-align: center;
}

.join-operator-help {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 16px;
  line-height: 1.5;
}

.join-operator-links {
  font-size: 14px;
  color: #6c757d;
}

.join-operator-links a {
  color: #F4A300;
  font-weight: 600;
  text-decoration: none;
}

.join-operator-links a:hover {
  color: #d98f00;
  text-decoration: underline;
}

.join-operator-links .separator {
  margin: 0 12px;
  color: #dee2e6;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    text-align: center;
}

.popup-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.popup-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.popup-button {
    min-width: 100px;
}

/* =====================================================
   ORDER PAGE — aligned with theme.css design tokens
===================================================== */

/* Overall Order Page Container */
.order-page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-body);
}

/* Menu Container */
.menu-container {
  width: 100%;
  overflow: hidden;
}

.menu-tabs {
  width: 100%;
}

.menu-tabs .ant-tabs-nav {
  margin-bottom: 24px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu-tabs .ant-tabs-nav::-webkit-scrollbar {
  display: none;
}

.menu-tabs .ant-tabs-tab {
  padding: 12px 24px;
  transition: all var(--transition-medium);
}

.category-tab-label {
  font-size: 16px;
  font-weight: var(--weight-regular) !important;
  color: var(--text-secondary);
}

.menu-tabs .ant-tabs-tab:hover .category-tab-label {
  color: var(--color-primary);
}

.menu-tabs .ant-tabs-tab-active {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
}

.menu-tabs .ant-tabs-tab-active .category-tab-label {
  color: var(--color-primary);
  font-weight: var(--weight-medium) !important;
}

.menu-items-carousel {
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  position: relative;
}

.menu-items-carousel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.menu-scroll-btn-side {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 16px;
  transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.menu-scroll-btn-side:hover:not(:disabled) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.2);
}

.menu-scroll-btn-side:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.menu-scroll-btn-side:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.menu-items-scroll {
  display: flex;
  flex: 1 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  align-items: flex-start;
}

.menu-items-scroll::-webkit-scrollbar {
  display: none;
}

.menu-item-card {
  flex: 0 0 auto;
  transition: all var(--transition-medium);
  scroll-snap-align: start;
  margin: 0 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* No fixed height — let content dictate size so the Add to Cart button is never clipped */
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.menu-item-card .ant-card-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  /* Allow body to grow naturally; no overflow hidden so nothing is cut off */
  overflow: visible;
}

.menu-item-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.menu-item-details {
  position: relative;
  margin-bottom: 12px;
}

.menu-item-details .ant-typography {
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

/* .menu-item-details .ant-typography.expanded {
  -webkit-line-clamp: unset;
} */

.menu-item-image-container {
  height: 180px;
  overflow: hidden;
  background-color: var(--color-bg-light);
}

.menu-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.menu-item-card:hover .menu-item-image {
  transform: scale(1.05);
}

.menu-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.menu-item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-top: auto;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.quantity-controls .ant-btn {
  padding: 4px 8px;
  height: auto;
  border-radius: var(--radius-sm);
}

.quantity-controls .ant-typography {
  min-width: 24px;
  text-align: center;
}

.add-ons-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-300-50);
  /* Scroll add-ons if the list is very long instead of pushing the button off-screen */
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.add-ons-section::-webkit-scrollbar {
  width: 4px;
}

.add-ons-section::-webkit-scrollbar-track {
  background: transparent;
}

.add-ons-section::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 4px;
}

.add-ons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-on-item {
  display: flex;
  align-items: center;
}

.add-on-item .ant-checkbox-wrapper {
  margin: 0;
  width: 100%;
}

.add-on-item .ant-checkbox-wrapper .ant-checkbox {
  margin-right: 8px;
}

.add-on-item .ant-typography {
  color: var(--text-secondary);
  font-size: 14px;
}

.price {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 8px 0;
  display: block;
}

.see-more-btn {
  padding: 0;
  height: auto;
  font-size: 14px;
  color: var(--color-primary);
  margin: 4px 0;
  display: inline-block;
}

.see-more-btn:hover {
  color: var(--color-primary-hover);
}

/* Category Tile */
.category-tile {
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Category Title */
.category-title {
  font-size: var(--h3-size);
  text-align: center;
  margin-bottom: 10px;
  color: var(--text-primary);
}

/* Items Grid */
.items-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  gap: 10px;
}

/* Item Tile */
.item-tile {
  background-color: white;
  border-radius: var(--radius-md);
  padding: 10px;
  border: 1px solid var(--border-light);
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.item-tile h4 {
  font-size: var(--h4-size);
  margin: 5px 0;
}

.item-tile p {
  margin: 5px 0;
  font-size: 1rem;
  color: var(--text-secondary);
}

/* Add to Cart Button */
.add-to-cart-btn {
  background-color: var(--color-primary);
  border: none;
  color: var(--text-inverse);
  padding: 8px 12px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.add-to-cart-btn:hover {
  background-color: var(--color-primary-hover);
}

/* Cart Container (legacy) */
.cart-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
}

.cart-list {
  list-style-type: none;
  padding: 0;
}

/* Cart Item */
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.cart-item:nth-child(even) {
  background-color: var(--color-bg-light);
}

.cart-item div:first-child {
  flex-grow: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quantity-dropdown {
  width: 50px;
  margin-right: 10px;
  padding: 5px;
}

.remove-from-cart-btn {
  background-color: var(--color-negative);
  color: var(--text-inverse);
  border: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.remove-from-cart-btn:hover {
  background-color: var(--color-negative-hover);
}

.item-total {
  font-weight: var(--weight-bold);
  margin-left: 10px;
  flex-shrink: 0;
}

/* Cart Subtotal */
.cart-subtotal {
  text-align: right;
  font-size: 1.5rem;
  margin-top: 20px;
}

/* Checkout Button */
.checkout-btn {
  background-color: var(--color-primary);
  border: none;
  color: var(--text-inverse);
  padding: 10px 15px;
  font-size: 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 20px;
}

.checkout-btn:hover {
  background-color: var(--color-primary-hover);
}

.add-on-option {
  margin: 5px 0;
}

.cart-add-ons {
  margin-top: 5px;
  font-size: 0.9em;
  color: var(--text-secondary);
}

/* Vendor Info Card */
.vendor-info-card {
  margin-bottom: 30px;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
}

.vendor-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.vendor-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vendor-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

.vendor-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vendor-location {
  margin-top: 16px;
}

.operating-hours {
  background-color: var(--color-bg-light);
  padding: 16px;
  border-radius: var(--radius-md);
}

.operating-hours pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-body);
}

.menu-category {
  margin-bottom: 32px;
}

/* Cart Section */
.cart-section {
  background-color: var(--color-bg-light);
  padding: 24px;
  border-radius: var(--radius-lg);
  margin-top: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border-light);
}

.cart-section .ant-list-item {
  padding: 16px;
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cart-section .ant-list-item-meta {
  flex: 1 1;
  min-width: 0;
}

.cart-section .ant-space-vertical {
  width: 100%;
}

.cart-section .ant-typography {
  margin: 0;
}

.cart-section .ant-list-item-action {
  margin-left: 16px;
  display: flex;
  align-items: center;
}

.cart-section .ant-btn {
  padding: 4px 8px;
  height: auto;
  line-height: 1;
}

.cart-section .ant-list-item-action .ant-space {
  gap: 8px !important;
}

.cart-section .ant-list-item-action .ant-space .ant-space {
  gap: 4px !important;
}

.cart-section .ant-divider {
  margin: 16px 0;
}

.cart-section .ant-typography.ant-typography-secondary {
  font-size: 13px;
}

.cart-section .ant-list-item:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  transition: all var(--transition-fast);
}

/* Cart Item Layout */
.cart-item-container {
  width: 100%;
}

.cart-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cart-item-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-item-name .each-price {
  color: var(--text-muted);
  font-size: 14px;
}

.cart-item-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cart-item-content {
  width: 100%;
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cart-addons {
  margin: 8px 0;
  padding-left: 16px;
}

.cart-addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.cart-item-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-gray-300-50);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 0;
  border-top: 2px solid var(--color-primary);
}

.cart-total .ant-typography {
  margin: 0 !important;
}

/* Right-aligned prices */
.cart-item-header .ant-typography:last-child,
.cart-addon-item .ant-typography:last-child,
.cart-item-subtotal .ant-typography:last-child,
.cart-total .ant-typography:last-child {
  min-width: 80px;
  text-align: right;
}

/* Quantity controls in cart */
.cart-item-controls .ant-btn {
  padding: 2px 8px;
  height: 24px;
  line-height: 1;
}

.cart-item-controls .ant-space {
  background: var(--color-bg-light);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.cart-item-controls .ant-typography {
  min-width: 24px;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .order-page-container {
    padding: 16px 12px;
  }

  .vendor-logo-container {
    height: 150px;
  }

  .menu-item-image {
    height: 150px;
  }

  .vendor-links {
    justify-content: center;
  }

  .menu-tabs .ant-tabs-tab {
    padding: 8px 16px;
  }

  .menu-item-card {
    width: 280px !important;
  }

  .category-tab-label {
    font-size: 14px;
  }

  .menu-item-image-container {
    height: 160px;
  }

  .menu-item-details .ant-typography {
    font-size: 14px;
  }

  .add-on-item .ant-typography {
    font-size: 13px;
  }

  .cart-section {
    padding: 16px;
  }
}

/* Smooth transition for tab changes */
.ant-tabs-tabpane {
  transition: opacity var(--transition-medium);
}

.ant-tabs-tabpane-active {
  opacity: 1;
}

.ant-tabs-tabpane-inactive {
  opacity: 0;
}
/* Main container */
.catering-page-container {
    padding: 2rem;
    background-color: #ffffff;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
}

/* Flex container for side-by-side layout */
.side-by-side-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Catering form styling */
.catering-form-container {
    flex: 1 1 500px;
    max-width: 550px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border-left: 6px solid #F4A300;
}

.catering-form-container h2 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
    color: #333;
}

.catering-form-container h6 {
    font-size: 1rem;
    color: #777;
    margin-bottom: 1.5rem;
}

/* Form styling */
.catering-form .form-group {
    margin-bottom: 1rem;
}

.catering-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #555;
}

.catering-form input,
.catering-form select,
.catering-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    font-size: 1rem;
    background-color: #fafafa;
}

.catering-form textarea {
    resize: vertical;
    min-height: 80px;
}

.multi-select {
    margin-top: 0.25rem;
}

.submit-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background-color: #F4A300;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 1rem;
}

.submit-button:hover {
    background-color: #e59400;
    transform: translateY(-2px);
}

/* Food truck list styling */
.food-truck-list {
    flex: 1 1 500px;
    max-width: 550px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    overflow-y: auto;
    max-height: 900px;
    border-left: 6px solid #F4A300; 
}

.food-truck-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.full-width-truck-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.full-width-truck-item {
    width: 100%;
}

.enhanced-truck-card {
    transition: all 0.3s ease;
}

.enhanced-truck-card:hover {
    transform: translateY(-2px);
}

.enhanced-truck-card.selected {
    border-color: #F4A300;
    background: #fff8e1;
}

.truck-card-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.truck-logo-section {
    flex: 0 0 33.33%;
    max-width: 140px;
}

.truck-logo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    background: #f5f5f5;
}

.truck-info-section {
    flex: 1 1;
    min-width: 0;
}

.truck-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.truck-header .ant-typography {
    flex: 1 1;
    margin-right: 8px;
}

.select-button-top {
    flex-shrink: 0;
    margin-top: -2px;
}

.enhanced-truck-card .ant-card-actions {
    background-color: #fafafa;
    border-top: 1px solid #f0f0f0;
    padding: 6px 12px;
}

.enhanced-truck-card.selected .ant-card-actions {
    background-color: #fff8e1;
}

.empty-state-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    min-height: 300px;
}

/* Responsive layout */
@media (max-width: 768px) {
    .side-by-side-container {
        flex-direction: column;
        align-items: center;
    }

    .catering-form-container,
    .food-truck-list {
        max-width: 100%;
        width: 100%;
    }
}

.order-status-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: var(--font-body);
}

.osp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-primary-hover);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.osp-back-btn:hover {
  color: var(--color-primary);
}

.order-status-page .page-title {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0 0 24px 0;
}

/* ---- Vertical Train / Timeline ---- */
.order-train {
  position: relative;
  padding-left: 32px;
  margin: 24px 0 32px;
}

.order-train::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-300);
  border-radius: 2px;
}

.train-stop {
  position: relative;
  padding: 0 0 28px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.train-stop:last-child {
  padding-bottom: 0;
}

.train-dot {
  position: absolute;
  left: -32px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: var(--transition-fast);
  z-index: 1;
}

.train-stop.completed .train-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.train-stop.active .train-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.train-stop.pending .train-dot {
  background: #fff;
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

.train-stop.expired .train-dot,
.train-stop.cancelled .train-dot {
  background: var(--color-negative);
  border-color: var(--color-negative);
  color: #fff;
}

.train-label {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: 22px;
}

.train-stop.completed .train-label,
.train-stop.active .train-label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.train-stop.active .train-label {
  color: var(--color-primary-hover);
}

/* ---- Cards ---- */
.osp-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ---- Truck Header ---- */
.osp-truck-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.osp-truck-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.osp-truck-name {
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.osp-order-id {
  font-size: 13px;
  color: var(--text-muted);
  font-family: monospace;
}

/* ---- Receipt / Items ---- */
.osp-receipt {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
}

.osp-receipt-title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.osp-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-300-50);
}

.osp-item-row:last-child {
  border-bottom: none;
}

.osp-item-name {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osp-item-qty {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 12px;
  flex-shrink: 0;
}

.osp-item-price {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ---- Financial Summary ---- */
.osp-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.osp-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.osp-summary-row.total {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 2px solid var(--color-primary);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* ---- Expiry / ETA Bar ---- */
.osp-expiry-bar {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
}

.osp-expiry-label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-primary-hover);
  margin-bottom: 8px;
  display: block;
}

/* ---- Alert Boxes ---- */
.osp-alert {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 14px;
}

.osp-alert.expired {
  background: #fff2e8;
  border: 1px solid #ffbb96;
  color: var(--color-negative);
}

.osp-alert.cancelled {
  background: #fff1f0;
  border: 1px solid #ffa39e;
  color: var(--color-negative);
}

.osp-alert.success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #389e0d;
}

.osp-alert.info {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-hover);
}

/* ---- Payment Section ---- */
.osp-payment-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.osp-payment-title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .order-status-page {
    padding: 16px 12px;
  }

  .osp-card {
    padding: 14px;
  }

  .osp-truck-logo {
    width: 44px;
    height: 44px;
  }

  .osp-truck-name {
    font-size: 16px;
  }

  .order-train {
    padding-left: 28px;
  }

  .train-dot {
    left: -28px;
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .order-train::before {
    left: 9px;
  }
}
.profile-image{
    width:100px;
    height:100px;
    padding:5px;
    border:2px solid #bdc9cd;
    border-radius: 50%;
}

.upload-button {
    margin:20px;
    padding:10px;
    border-radius: 5px;
    background-color: #bdc9cd;
}

.file-upload-section {
    display:flex;
    flex-direction:column;
    align-items: center;
}
.user-settings-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content horizontally */
}

/* Main page heading - clear, prominent, title case */
.user-settings-container .page-heading {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem 0;
    text-transform: none;
    width: 100%;
    max-width: 600px;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #FFA500;
}

/* Section headings inside cards */
.user-settings-container .card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    text-transform: none;
    letter-spacing: 0.01em;
}

.card {
    position: relative; /* Set position to relative */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px; /* Limit the width of each card */
}

.user-settings-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.edit-button {
    position: absolute; /* Position the button absolutely */
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px; /* Optional: Add padding */
}

.save-button {
    background-color: #007BFF;
    color: white;
    margin-right: 10px;
}

.verify-button {
    margin-right:10px;
    border-radius:5px;
}

.cancel-button {
    background-color: #f44336;
    color: white;
}

.error-message {
    color: red;
    margin-top: 10px;
}

.success-message {
    color: green;
    margin-top: 10px;
}

.note {
    font-size: 14px; /* Increased font size */
    color: #555; /* Keep color for subtlety */
    margin-top: 5px; /* Space above */
    margin-bottom: 15px; /* Add space below for better separation */
    line-height: 1.5; /* Improve readability */
}

label:has(+ input:required):after {
    content: ' *';
    color: red;
}

.form-text-input-field {
    position:relative;
}

.form-icon-span {
    position: absolute;
    top: 70%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #555;
  }

  .text-fields {
    width:100%!important;
    border:1px solid #ddd;
    border-radius: 5px;
    padding: 12px!important;
  }

/* Ensure Google Places dropdown appears above modals and cards and is clickable */
.pac-container {
    z-index: 10000 !important;
}

.pac-item {
    cursor: pointer;
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .user-settings-container {
        padding: 12px;
    }

    .user-settings-container .page-heading {
        font-size: 1.4rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .card {
        padding: 15px;
        margin-bottom: 15px;
        max-width: 100%;
    }

    .user-settings-container .card h3 {
        font-size: 1rem;
    }

    .form-group input {
        padding: 10px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    button {
        padding: 12px 16px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 8px;
    }

    .edit-button {
        position: static;
        width: 100%;
        margin-bottom: 15px;
    }

    .save-button {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .cancel-button {
        width: 100%;
    }

    .note {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .user-settings-container {
        padding: 8px;
    }

    .user-settings-container .page-heading {
        font-size: 1.2rem;
    }

    .card {
        padding: 12px;
    }

    button {
        padding: 10px 14px;
        font-size: 13px;
    }
}


/* User Account Deactivation Modal Styles */

.deactivate-modal .ant-modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width:-webkit-max-content;
  width:max-content;
}

.deactivate-modal .ant-modal-body {
  padding: 0;
}

.modal-header-deactivate-user {
  text-align: center;
  padding: 30px 25px 20px;
  background: linear-gradient(135deg, #1a2b49 0%, #2c3e50 100%);
  position: relative;
}

.modal-header-deactivate-user::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #F4A300;
  border-radius: 2px;
}

.modal-icon-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 163, 0, 0.2);
  border: 2px solid #F4A300;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.modal-icon-wrapper.warning {
  background: rgba(255, 77, 79, 0.2);
  border-color: #ff4d4f;
  box-shadow: 0 8px 24px rgba(255, 77, 79, 0.3);
}

.modal-icon-wrapper.google {
  background: rgba(66, 133, 244, 0.2);
  border-color: #4285f4;
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3);
}

.modal-icon-wrapper.otp {
  background: rgba(244, 163, 0, 0.2);
  border-color: #F4A300;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.modal-icon {
  font-size: 28px;
  color: #ffffff;
}

.modal-icon-wrapper.warning .modal-icon {
  color: #ff4d4f;
}

.modal-icon-wrapper.google .modal-icon {
  color: #F4A300;
}

.modal-title {
  margin: 0 0 8px 0 !important;
  color: white;
  font-weight: 600;
  font-size: 20px;
}

.modal-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  display: block;
  line-height: 1.5;
}

.modal-content-deactivate-user {
  padding: 20px;
  background: white;
  align-items: center;
  justify-content: center;
}

.ant-modal-close {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.527);
  display: none;
}

.cancel-button-deactivation-user {
  height: 42px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #dee2e6;
  background: #F4A300;
  color: #ffffff;
  transition: all 0.3s ease;
  margin-top: 12px;
  align-self: center;
  width: 100%;
}

.cancel-button-deactivation-user:hover {
  border-color: #1a2b49;
  color: #1a2b49;
  background-color: #f8f9fa;
}

.verify-button-deactivation-user-password {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  background: white;
  transition: all 0.3s ease;
  border-color: #F4A300;
  border-width: 2px;
  width: 100%;
}

.cancel-button-deactivation-user-password {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  background: white;
  transition: all 0.3s ease;
  border-color: #F4A300;
  border-width: 2px;
  width: 100%;
}

.verify-button-deactivation-user-password:hover:not(:disabled) {
  background-color: #ffffff;
  transform: translateY(-2px);
  color: #F4A300;
  border-color: #F4A300;
}

.verify-button-deactivation-user-password:disabled {
  background: #ffc04d;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Google Auth Specific Styles */
.google-auth-info {
  text-align: center;
  padding: 20px;
  background-color: #f0f5ff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.google-login-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.google-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* OTP Verification Specific Styles */
.otp-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.otp-sent-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.otp-sent-to .anticon {
  color: #F4A300;
  font-size: 18px;
}

.otp-input-container {
  display: flex;
  justify-content: center;
  margin: 20px 0 18px;
}

.otp-input {
  width: 45px !important;
  height: 50px !important;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: white;
  color: #1a2b49;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.otp-input:hover {
  border-color: #F4A300;
}

.otp-input:focus {
  border-color: #F4A300;
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.12);
  outline: none;
}

.otp-input:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}

.otp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 10px 0;
}

/* Deactivate Button in Settings */
.deactivate-account-section {
  margin-top: 50px;
  padding: 35px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border: 2px solid #ff4d4f;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(255, 77, 79, 0.1);
  transition: all 0.3s ease;
}

.deactivate-account-section:hover {
  box-shadow: 0 8px 30px rgba(255, 77, 79, 0.15);
}

.deactivate-account-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 77, 79, 0.2);
}

.deactivate-account-header .anticon {
  font-size: 28px;
  color: #ff4d4f;
}

.deactivate-account-title {
  margin: 0 !important;
  color: #1a2b49;
  font-weight: 700;
  font-size: 24px;
}

.deactivate-account-description {
  color: #495057;
  margin-bottom: 25px;
  line-height: 1.7;
  font-size: 15px;
}

.deactivate-account-warning {
  background-color: white;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffe5e5;
}

.deactivate-account-warning ul {
  margin: 15px 0 0 0;
  padding-left: 25px;
}

.deactivate-account-warning li {
  margin: 10px 0;
  color: #495057;
  line-height: 1.6;
  font-size: 14px;
}

.deactivate-account-button {
  width: 100%;
  height: 52px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 77, 79, 0.3);
}

.deactivate-account-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7875 0%, #ffa39e 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 77, 79, 0.4);
}

.deactivate-account-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.modal-actions .cancel-button,
.modal-actions .verify-button {
  flex: 1 1;
}

/* Responsive Design */
@media (max-width: 576px) {
  .modal-header {
    padding: 25px 20px 18px;
  }

  .modal-content-deactivate-user {
    padding: 20px;
  }

  .modal-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .modal-icon {
    font-size: 24px;
  }

  .modal-title {
    font-size: 18px !important;
  }

  .modal-subtitle {
    font-size: 12px;
  }

  .otp-input {
    width: 38px !important;
    height: 45px !important;
    font-size: 18px;
  }

  .verify-button,
  .cancel-button {
    height: 40px;
    font-size: 14px;
  }

  .deactivate-account-section {
    padding: 20px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions .cancel-button,
  .modal-actions .verify-button {
    width: 100%;
  }
}

/* =====================================================
   USER ORDERS — aligned with theme.css design tokens
===================================================== */

.user-orders-page {
  font-family: var(--font-body);
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

.order-list {
  list-style: none;
  padding: 0;
}

.order-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.order-item h3 {
  margin-top: 0;
}

.order-item .status {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.order-item.completed-order .status {
  color: #52c41a;
}

.order-item .button-group {
  margin-top: 10px;
}

.completed-orders-section {
  margin-top: 20px;
}

.toggle-button {
  background-color: var(--color-primary);
  color: var(--text-inverse);
  border: none;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  transition: background-color var(--transition-fast);
}

.toggle-button:hover {
  background-color: var(--color-primary-hover);
}

.completed-orders {
  margin-top: 10px;
}

/* Card base styles */
.user-orders-page .ant-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-medium);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.user-orders-page .ant-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Order Card */
.order-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light);
  background: #ffffff;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.order-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}

.order-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.order-card .ant-card-body {
  padding: 16px;
  transition: all var(--transition-medium);
}

.order-card .ant-avatar {
  border: 2px solid var(--color-gray-300-50);
  transition: transform var(--transition-medium);
}

.order-card .ant-avatar:hover {
  transform: scale(1.05);
}

.order-card .ant-tag {
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  padding: 4px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card .ant-descriptions {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.order-card .ant-descriptions-item-label {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.order-card .ant-descriptions-item-content {
  font-weight: var(--weight-medium);
}

.order-card .ant-list-item {
  border-bottom: 1px solid var(--color-gray-300-50);
  padding: 6px 0;
  transition: background-color var(--transition-fast);
  overflow: hidden;
}

.order-card .ant-list-item:hover {
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.order-card .ant-list-item:last-child {
  border-bottom: none;
}

/* Statistics */
.user-orders-page .ant-statistic-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.user-orders-page .ant-statistic-content {
  font-size: 24px;
  font-weight: var(--weight-semibold);
}

.user-orders-page .ant-progress-text {
  font-weight: var(--weight-semibold);
}

.user-orders-page .ant-empty {
  padding: 40px 0;
}

.user-orders-page .ant-btn-primary {
  border-radius: var(--radius-sm);
  height: 32px;
  font-weight: var(--weight-medium);
}

.user-orders-page .ant-divider {
  margin: 12px 0;
  border-color: var(--color-gray-300-50);
}

/* Responsive */
@media (max-width: 768px) {
  .user-orders-page {
    padding: 16px;
  }

  .order-card .ant-card-body {
    padding: 16px;
  }

  .user-orders-page .ant-row {
    margin-bottom: 16px;
  }

  .user-orders-page .ant-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 576px) {
  .user-orders-page .ant-statistic-content {
    font-size: 20px;
  }

  .order-card .ant-descriptions-item {
    padding: 8px 12px;
  }

  .order-card .ant-avatar {
    width: 50px;
    height: 50px;
  }
}

.user-orders-page .ant-spin {
  color: var(--color-primary);
}

/* Scrollbar */
.order-card .ant-list {
  max-height: 300px;
  overflow-y: auto;
}

.order-card .ant-list::-webkit-scrollbar {
  width: 6px;
}

.order-card .ant-list::-webkit-scrollbar-track {
  background: var(--color-bg-light);
  border-radius: 3px;
}

.order-card .ant-list::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: 3px;
}

.order-card .ant-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-600);
}

/* Typography */
.user-orders-page .ant-typography {
  margin-bottom: 0;
}

.user-orders-page h2.ant-typography {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  margin-bottom: 24px;
}

.user-orders-page .ant-typography strong {
  color: var(--text-primary);
}

.user-orders-page .ant-typography-secondary {
  color: var(--text-muted);
}

/* Badge */
.user-orders-page .ant-badge-count {
  background: var(--color-primary);
  box-shadow: 0 0 0 1px #fff;
}

/* Buttons */
.user-orders-page .ant-btn {
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}

.user-orders-page .ant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Progress */
.user-orders-page .ant-progress-bg {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

/* Empty */
.user-orders-page .ant-empty-description {
  color: var(--text-muted);
  font-size: 16px;
}

/* Hover effects */
.user-orders-page .ant-card:hover .ant-card-body {
  background: var(--color-bg-light);
}

.order-card .ant-card-danger {
  border-left: 4px solid var(--color-negative);
}

/* Prevent text wrapping and ensure clean lines */
.order-card .ant-typography {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card .ant-statistic-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card .ant-list-item .ant-typography {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flex behavior */
.order-card .ant-row {
  align-items: flex-start;
}

.order-card .ant-col {
  overflow: hidden;
}

/* Receipt container styling */
.receipt-container {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-300-50);
  transition: background-color var(--transition-fast);
}

.receipt-row:hover {
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.receipt-row:last-child {
  border-bottom: none;
}

.receipt-total {
  border-top: 2px solid var(--color-primary);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: var(--weight-semibold);
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
}

.receipt-total .ant-typography {
  font-size: 18px;
  color: var(--color-primary-hover);
}

/* Invoice-style price breakdown */
.order-card .invoice-breakdown {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.order-card .invoice-header {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.order-card .invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-300-50);
  transition: background-color var(--transition-fast);
}

.order-card .invoice-row:hover {
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.order-card .invoice-row:last-child {
  border-bottom: none;
}

.order-card .invoice-total {
  border-top: 2px solid var(--color-primary);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: var(--weight-semibold);
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
}

.order-card .invoice-total .ant-typography {
  font-size: 18px;
  color: var(--color-primary-hover);
}
.vendor-settings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1a2b49;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f7fc;
}
/* Loading State */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
.card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 800px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.settings-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a2b49;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.settings-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #F4A300, #F7B733);
    border-radius: 2px;
}

h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #1a2b49;
    position: relative;
    padding-bottom: 10px;
}

/* h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #F4A300;
} */

.subscription-heading:after {
    background: linear-gradient(90deg, #F4A300, #F7B733);
    width: 60px;
}

.password-heading:after {
    background-color: #2563eb;
}

.contact-heading:after {
    background-color: #10b981;
}

.location-heading:after {
    background-color: #8b5cf6;
}

.deactivate-heading {
    color: #ef4444;
}

.deactivate-heading:after {
    background-color: #ef4444;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    outline: none;
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.edit-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #F4A300;
    color: white;
    padding: 12px 20px;
    box-shadow: 0 4px 10px rgba(244, 163, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.edit-button:hover {
    background-color: #e59700;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(244, 163, 0, 0.3);
}

.edit-button:before {
    content: '✏️';
    font-size: 14px;
}

.save-button {
    background-color: #F4A300;
    color: white;
    margin-right: 15px;
    box-shadow: 0 4px 10px rgba(244, 163, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.save-button:hover {
    background-color: #e59700;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(244, 163, 0, 0.3);
}

.save-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(244, 163, 0, 0.2);
}

.cancel-button {
    background-color: #4b5563;
    color: white;
    box-shadow: 0 4px 10px rgba(75, 85, 99, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cancel-button:hover {
    background-color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(75, 85, 99, 0.3);
}

.cancel-subscription-button {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cancel-subscription-button:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);
}

.error-message {
    background-color: #ffe5e5;
    color: #d32f2f;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: 500;
    text-align: center;
}

.successs-message {
    background-color: #c4f3c4;
    color: rgb(62, 61, 61);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: 500;
    text-align: center;
}

.note {
    font-size: 14px;
    color: #6c757d;
    margin-top: 5px;
    margin-bottom: 15px;
    line-height: 1.5;
    font-style: italic;
}

/* Subscription Card Styling */
.subscription-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #0066ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.subscription-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 102, 255, 0.2);
    padding: 15px 20px;
}

.subscription-card .card-body {
    padding: 20px;
}

.subscription-details {
    padding: 10px 0;
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.subscription-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.subscription-price-display {
    display: flex;
    align-items: baseline;
}

.price-amount {
    font-size: 28px;
    font-weight: 700;
    color: #F4A300;
}

.price-period {
    font-size: 16px;
    color: #4b5563;
    margin-left: 4px;
}

.plan-badge {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plan-badge:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
}

.free-trial {
    background: linear-gradient(135deg, #34a853 0%, #28a745 100%);
}

.basic {
    background: linear-gradient(135deg, #4285f4 0%, #0066ff 100%);
}

.standard {
    background: linear-gradient(135deg, #fbbc05 0%, #f59e0b 100%);
}

.premium, .premier {
    background: linear-gradient(135deg, #F4A300 0%, #F7B733 100%);
}

.free-trial {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cancelled-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.upgrade-plans-list {
    max-height: 300px;
    overflow-y: auto;
}

.upgrade-plan-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.upgrade-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.upgrade-plan-card.selected {
    border-color: #0066ff;
    background-color: rgba(0, 102, 255, 0.05);
}

/* Progress bar styling */
.progress {
    height: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.progress-bar {
    background-color: #0066ff;
}

.progress-bar-danger {
    background-color: #dc3545;
}

/* Badge styling */
.badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
}

.badge-info {
    background-color: #17a2b8;
}

.badge-danger {
    background-color: #dc3545;
}

/* Payment Page Styling */
.payment-card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.payment-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
}

.payment-card .card-body {
    padding: 30px;
}

.payment-card .card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
}

.plan-summary {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.payment-options {
    margin-top: 20px;
}

.paypal-button-container {
    margin-top: 15px;
}

.payment-success-card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
}

.subscription-action-indicator {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #6c757d;
}

.subscription-action-indicator .spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 50%;
    border-top-color: #0066ff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 5px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Trial expiry alert */
.trial-expiry-alert {
    background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.alert-icon {
    font-size: 24px;
    margin-right: 15px;
    margin-top: 2px;
}

.alert-content {
    flex: 1 1;
}

.alert-content h4 {
    margin: 0 0 10px 0;
    color: #f57c00;
    font-size: 18px;
}

.alert-content p {
    margin: 0 0 15px 0;
    color: #5f4b32;
    font-size: 14px;
    line-height: 1.5;
}

.upgrade-now-button {
    background-color: #f57c00;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upgrade-now-button:hover {
    background-color: #ef6c00;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(239, 108, 0, 0.3);
}

/* Upgrade options */
.upgrade-options {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.upgrade-options h4 {
    margin: 0 0 10px 0;
    color: #1a2b49;
    font-size: 20px;
    text-align: center;
}

.upgrade-options p {
    margin: 0 0 20px 0;
    color: #495057;
    font-size: 16px;
    text-align: center;
}

.upgrade-plans-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}

.upgrade-plan-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 220px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.upgrade-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.upgrade-plan-card h5 {
    margin: 0 0 10px 0;
    color: #1a2b49;
    font-size: 18px;
}

.upgrade-plan-price {
    font-size: 24px;
    font-weight: 700;
    color: #0066ff;
    margin: 0 0 15px 0;
}

.upgrade-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.upgrade-plan-features li {
    margin-bottom: 8px;
    color: #495057;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
}

.upgrade-plan-features .checkmark {
    color: #0066ff;
    margin-right: 8px;
}

.select-upgrade-button {
    background-color: #0066ff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.select-upgrade-button:hover {
    background-color: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
}

.upgrade-cancel {
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.manage-button {
    background-color: #2563eb;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.manage-button:hover {
    background-color: #1d4ed8;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.manage-button svg {
    transition: transform 0.3s ease;
}

.manage-button:hover svg {
    transform: translateX(3px);
}

.manage-button:disabled {
    background-color: #a4c2f4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Map section */
#map {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#address-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 15px;
}

#address-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    outline: none;
}

.subscription-status {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.subscription-status:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active {
    background-color: #e6f7e6;
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.status-active:before {
    background-color: #2e7d32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
    animation: pulse 2s infinite;
}

.status-cancelled {
    background-color: #ffe5e5;
    color: #d32f2f;
    border: 1px solid rgba(211, 47, 47, 0.2);
}

.status-cancelled:before {
    background-color: #d32f2f;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(46, 125, 50, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

.status-expired {
    background-color: #fff8e1;
    color: #ff8f00;
}

.subscription-info {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.info-row:hover {
    background-color: rgba(244, 163, 0, 0.03);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #495057;
}

.info-value {
    color: #F4A300;
    font-weight: 600;
    transition: all 0.2s ease;
}

.info-row:hover .info-value {
    transform: translateX(-5px);
}

.subscription-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.subscription-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.upgrade-button, .subscribe-button {
    background-color: #0066ff;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}

.upgrade-button:hover, .subscribe-button:hover {
    background-color: #0052cc;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}

.cancel-confirm {
    background-color: white;
    border: 1px solid #ffebee;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.cancel-confirm p {
    margin-bottom: 15px;
    color: #495057;
    font-weight: 500;
}

.cancel-confirm textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

.cancel-confirm textarea:focus {
    border-color: #ea4335;
    box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.1);
    outline: none;
}

.cancel-confirm button {
    margin-right: 10px;
    margin-bottom: 5px;
}

.no-subscription {
    text-align: center;
    padding: 30px 20px;
}

.no-subscription p {
    margin-bottom: 20px;
    color: #6c757d;
    font-size: 18px;
}

.cancelled-subscription {
    padding: 30px 20px;
    text-align: center;
    background-color: #fff8f8;
    border-radius: 12px;
}

.cancelled-subscription .subscription-header {
    justify-content: center;
    margin-bottom: 20px;
    flex-direction: column;
    gap: 15px;
}

.cancelled-subscription h4 {
    margin: 0;
    color: #d32f2f;
    font-size: 20px;
}

.cancelled-subscription p {
    margin-bottom: 25px;
    color: #6c757d;
    font-size: 16px;
}

.loading-spinner {
    text-align: center;
    padding: 30px;
    color: #0066ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 102, 255, 0.2);
    border-radius: 50%;
    border-top-color: #0066ff;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 15px;
}

/* New card styles for sections */
.password-change-card,
.location-update-card,
.deactivate-account-card,
.subscription-card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 800px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.password-change-card:hover,
.location-update-card:hover,
.subscription-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.deactivate-account-card {
    border: 1px solid #ffccc7;
    background-color: #fff8f8;
}

.deactivate-account-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 77, 79, 0.15);
}

.deactivate-account-card h3 {
    color: #ff4d4f;
}

.deactivate-account-card h3:after {
    background-color: #ff4d4f;
}

.deactivate-account-card p {
    color: #6c757d;
    margin-bottom: 20px;
    font-style: italic;
}

/* Password change section */
.password-change-card .form-group {
    margin-bottom: 20px;
}

/* Location update section */
.location-section {
    margin-top: 20px;
}

.map-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.address-input-container {
    display: flex;
    margin: 20px 0;
    gap: 10px;
}

.address-input {
    flex: 1 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.address-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    outline: none;
}

.geocode-button {
    background-color: #0066ff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.geocode-button:hover {
    background-color: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
}

.location-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.current-location-button,
.update-location-button {
    flex: 1 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.current-location-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #ddd;
}

.current-location-button:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.update-location-button {
    background-color: #0066ff;
    color: white;
}

.update-location-button:hover {
    background-color: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
}

.location-info {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.location-info p {
    margin: 0;
    color: #495057;
}

/* Spinner for loading states */
.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 5px;
    vertical-align: middle;
}

/* Disabled button styles */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Food Truck Modal Modern UI Styles */
.modern-foodtruck-modal .ant-modal-content {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: none;
}

.modern-foodtruck-modal .ant-modal-body {
    padding: 0;
}

.modern-foodtruck-modal-content {
    padding: 0;
}

.modern-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 24px;
    background: linear-gradient(to right, #F4A300, #F7B733);
    color: white;
    position: relative;
}

.modern-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    color: white;
}

.modern-error-message {
    background-color: #fff1f0;
    color: #ff4d4f;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px;
    font-size: 14px;
    border-left: 4px solid #ff4d4f;
}

.modern-modal-section {
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.modern-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a2b49;
    margin-top: 0;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
}

.modern-section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #F4A300;
    border-radius: 1.5px;
}

.modern-subscription-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modern-subscription-details span {
    color: #333;
    font-size: 15px;
}

.modern-section-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 15px;
}

.modern-input-group {
    margin-bottom: 20px;
}

.modern-input-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.modern-select.ant-select {
    width: 100%;
}

.modern-select.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: #F4A300;
}

.modern-select.ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
    border-color: #F4A300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
}

.modern-summary-box {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.modern-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
}

.modern-summary-total {
    font-weight: 700;
    color: #1a2b49;
    border-top: 1px solid #e8e8e8;
    padding-top: 12px;
    margin-top: 12px;
    margin-bottom: 0;
}

.modern-modal-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.modern-modal-processing .spinner {
    margin-bottom: 16px;
}

.modern-modal-actions {
    padding: 24px;
    text-align: center;
}

.modern-add-btn {
    background: linear-gradient(to right, #F4A300, #F7B733) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3) !important;
    height: 48px !important;
    padding: 0 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
}

.modern-add-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4) !important;
}

.modern-add-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .location-buttons {
        flex-direction: column;
    }
    
    .address-input-container {
        flex-direction: column;
    }
    
    .subscription-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .subscription-price {
        margin-top: 10px;
    }
    
    .modern-modal-header {
        padding: 24px 16px 16px;
    }
    
    .modern-modal-section {
        padding: 16px;
    }
}

/* Deactivate Account Modal Styles */

.deactivate-modal .ant-modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: -webkit-fit-content;
  width: fit-content;
}

.deactivate-modal .ant-modal-body {
  padding: 0;
}

.modal-header-deactivation-vendor {
  text-align: center;
  padding: 30px 25px 20px;
  background: linear-gradient(135deg, #1a2b49 0%, #2c3e50 100%);
  position: relative;
}

.modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #F4A300;
  border-radius: 2px;
}

.modal-icon-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 163, 0, 0.2);
  border: 2px solid #F4A300;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.modal-icon {
  font-size: 28px;
  color: #F4A300;
}

.modal-title {
  margin: 0 0 8px 0 !important;
  color: white;
  font-weight: 600;
  font-size: 20px;
}

.modal-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  display: block;
  line-height: 1.5;
}

.modal-content-deactivation-vendor {
  padding: 20px;
  background: white;
  align-items: center;
  justify-content: center;
}

.cancel-button-deactivation-vendor {
  height: 42px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #dee2e6;
  background: #F4A300;
  color: #ffffff;
  transition: all 0.3s ease;
  margin-top: 12px;
  align-self: center;
  width: 100%;
}

.cancel-button-deactivation-vendor :hover {
  border-color: #1a2b49;
  color: #1a2b49;
  background-color: #f8f9fa;
}

.verify-button {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  background: linear-gradient(135deg, #F4A300 0%, #d38800 100%);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(244, 163, 0, 0.25);
}

.verify-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #d38800 0%, #b87700 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(244, 163, 0, 0.35);
}

.verify-button:disabled {
  background: #ffc04d;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Google Auth Specific Styles */
.google-auth-info {
  text-align: center;
  padding: 20px;
  background-color: #f0f5ff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.google-login-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.google-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* OTP Verification Specific Styles */
.otp-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.otp-sent-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.otp-sent-to .anticon {
  color: #F4A300;
  font-size: 18px;
}

.otp-input-container {
  display: flex;
  justify-content: center;
  margin: 20px 0 18px;
}

.otp-input {
  width: 45px !important;
  height: 50px !important;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: white;
  color: #1a2b49;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.otp-input:hover {
  border-color: #F4A300;
}

.otp-input:focus {
  border-color: #F4A300;
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.12);
  outline: none;
}

.otp-input:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}

.otp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 10px 0;
}

/* Deactivate Button in Settings */
.deactivate-account-section {
  margin-top: 50px;
  padding: 35px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border: 2px solid #ff4d4f;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(255, 77, 79, 0.1);
  transition: all 0.3s ease;
}

.deactivate-account-section:hover {
  box-shadow: 0 8px 30px rgba(255, 77, 79, 0.15);
}

.deactivate-account-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 77, 79, 0.2);
}

.deactivate-account-header .anticon {
  font-size: 28px;
  color: #ff4d4f;
}

.deactivate-account-title {
  margin: 0 !important;
  color: #1a2b49;
  font-weight: 700;
  font-size: 24px;
}

.deactivate-account-description {
  color: #495057;
  margin-bottom: 25px;
  line-height: 1.7;
  font-size: 15px;
}

.deactivate-account-warning {
  background-color: white;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffe5e5;
}

.deactivate-account-warning ul {
  margin: 15px 0 0 0;
  padding-left: 25px;
}

.deactivate-account-warning li {
  margin: 10px 0;
  color: #495057;
  line-height: 1.6;
  font-size: 14px;
}

.deactivate-account-button {
  width: 100%;
  height: 52px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 77, 79, 0.3);
}

.deactivate-account-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7875 0%, #ffa39e 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 77, 79, 0.4);
}

.deactivate-account-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive Design */
@media (max-width: 576px) {
  .modal-header {
    padding: 25px 20px 18px;
  }

  .modal-content-deactivation-vendor {
    padding: 20px;
  }

  .modal-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .modal-icon {
    font-size: 24px;
  }

  .modal-title {
    font-size: 18px !important;
  }

  .modal-subtitle {
    font-size: 12px;
  }

  .otp-input {
    width: 38px !important;
    height: 45px !important;
    font-size: 18px;
  }

  .verify-button,
  .cancel-button {
    height: 40px;
    font-size: 14px;
  }

  .deactivate-account-section {
    padding: 20px;
  }
}

/* Animation for success state */
@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.success-icon {
  animation: successPulse 0.6s ease-in-out;
}

/* ============================================
   OPEN ITEMS MODAL - PROFESSIONAL STYLING
   ============================================ */

/* Modal Container */
.open-items-modal .ant-modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 100%;
}

.open-items-modal .ant-modal-body {
  padding: 0;
}

/* ============================================
   MODAL HEADER
   ============================================ */
.open-items-modal-header {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe7ba 100%);
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid #f4a300;
  position: relative;
}

.open-items-modal-icon-wrapper {
  width: 36px;
  height: 36px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #faad14 0%, #f4a300 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.3);
  animation: pulseWarning 2s ease-in-out infinite;
}

.open-items-modal-icon-wrapper .anticon {
  font-size: 36px;
  color: #fff;
}

@keyframes pulseWarning {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(244, 163, 0, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(244, 163, 0, 0.5);
  }
}

.open-items-modal-title {
  margin: 0 0 8px 0 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #262626;
}

.open-items-modal-subtitle {
  display: block;
  font-size: 14px;
  color: #595959;
  line-height: 1.6;
}

/* ============================================
   MODAL CONTENT
   ============================================ */
.open-items-modal-content {
  padding: 24px 0px 24px 0px;
}

/* Loading State */
.open-items-loading-container {
  text-align: center;
  padding: 60px 0;
}

.open-items-loading-container .ant-spin {
  margin-bottom: 16px;
}

.open-items-loading-text {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  color: #595959;
}

/* ============================================
   OPEN ITEMS LIST
   ============================================ */
.open-items-scroll-container {
  max-height: 450px;
  overflow-y: auto;
  /* Make scroll bar hidden*/
  scrollbar-width: none;
  padding-right: 8px;
  margin-bottom: 20px;
}

/* Custom Scrollbar */
.open-items-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.open-items-scroll-container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.open-items-scroll-container::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.open-items-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

/* ============================================
   ITEM CARDS
   ============================================ */
.open-item-card {
  margin-bottom: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.open-item-card:last-child {
  margin-bottom: 0;
}

/* Status-based borders */
.open-item-card.status-clear {
  border: 2px solid #52c41a;
  background: #f6ffed;
}

.open-item-card.status-warning {
  border: 2px solid #1890ff;
  background: #e6f7ff;
}

.open-item-card.status-blocking {
  border: 2px solid #ff4d4f;
  background: #fff1f0;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.15);
}

.open-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Item Number Badge */
.open-item-number {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f4a300 0%, #faad14 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
  z-index: 1;
}

/* Item Content */
.open-item-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px;
}

.open-item-icon-container {
  flex-shrink: 0;
  margin-top: 4px;
}

.open-item-icon-container .anticon {
  font-size: 28px;
}

.open-item-text-container {
  flex: 1 1;
  min-width: 0;
}

.open-item-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #262626;
  margin-bottom: 6px;
  display: block;
  line-height: 1.4;
}

.open-item-message {
  font-size: 14px;
  color: #595959;
  line-height: 1.6;
  display: block;
}

.open-item-details {
  margin-top: 12px;
}

/* ============================================
   DETAIL CARDS (Nested)
   ============================================ */
.open-item-detail-card {
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.open-item-detail-card .ant-space {
  width: 100%;
}

.open-item-detail-card .ant-typography {
  margin-bottom: 8px;
}

.open-item-detail-card .ant-typography:last-child {
  margin-bottom: 0;
}

.open-item-detail-card .ant-divider {
  margin: 12px 0;
}

.open-item-detail-card .ant-alert {
  margin-top: 12px;
}

/* Detail Card Variants */
.detail-card-warning {
  background: #fffbe6;
  border: 1px solid #ffe58f;
}

.detail-card-info {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
}

.detail-card-success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

/* ============================================
   TAGS & BADGES
   ============================================ */
.open-item-detail-card .ant-tag {
  margin: 2px 4px 2px 0;
  padding: 2px 10px;
  font-size: 13px;
  border-radius: 4px;
  font-weight: 500;
}

/* ============================================
   ALERTS
   ============================================ */
.open-items-notice-alert {
  margin-bottom: 20px;
  border-radius: 8px;
}

.open-items-error-alert {
  margin-bottom: 16px;
  border-radius: 8px;
}

.open-items-blocking-alert {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ff4d4f;
}

/* ============================================
   FOOTER ACTIONS
   ============================================ */
.open-items-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.open-items-footer .ant-btn {
  min-width: 120px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.open-items-footer .ant-btn-default {
  border: 2px solid #d9d9d9;
}

.open-items-footer .ant-btn-default:hover {
  border-color: #f4a300;
  color: #f4a300;
}

.open-items-footer .ant-btn-primary {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.open-items-footer .ant-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
  box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
  transform: translateY(-2px);
}

.open-items-footer .ant-btn-primary:disabled {
  background: #d9d9d9;
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================
   SUMMARY SECTION
   ============================================ */
.open-items-summary {
  background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.summary-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.summary-stat-icon.clear {
  background: #f6ffed;
  color: #52c41a;
}

.summary-stat-icon.warning {
  background: #e6f7ff;
  color: #1890ff;
}

.summary-stat-icon.blocking {
  background: #fff1f0;
  color: #ff4d4f;
}

.summary-stat-text {
  display: flex;
  flex-direction: column;
}

.summary-stat-number {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #262626;
}

.summary-stat-label {
  font-size: 12px;
  color: #8c8c8c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .open-items-modal .ant-modal {
    max-width: 90%;
  }

  .open-items-modal-header {
    padding: 28px 0px 24px 0px;
  }

  .open-items-modal-content {
    padding: 28px 0px 24px 0px;
  }

  .open-items-scroll-container {
    max-height: 380px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .open-items-modal .ant-modal {
    max-width: 95%;
    margin: 16px auto;
  }

  .open-items-modal-header {
    padding: 24px 20px 16px;
  }

  .open-items-modal-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }

  .open-items-modal-icon-wrapper .anticon {
    font-size: 30px;
  }

  .open-items-modal-title {
    font-size: 20px !important;
  }

  .open-items-modal-subtitle {
    font-size: 13px;
  }

  .open-items-modal-content {
    padding: 16px 20px 24px;
  }

  .open-items-scroll-container {
    max-height: 320px;
    padding-right: 4px;
  }

  /* Item Cards - Mobile */
  .open-item-card {
    margin-bottom: 12px;
  }

  .open-item-content {
    padding: 16px;
    gap: 12px;
  }

  .open-item-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
    top: 10px;
    right: 10px;
  }

  .open-item-icon-container .anticon {
    font-size: 24px;
  }

  .open-item-title {
    font-size: 15px !important;
  }

  .open-item-message {
    font-size: 13px;
  }

  /* Detail Cards - Mobile */
  .open-item-detail-card {
    padding: 12px;
  }

  .open-item-detail-card .ant-tag {
    font-size: 12px;
    padding: 1px 8px;
  }

  /* Summary - Mobile */
  .open-items-summary {
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .summary-stat {
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  .summary-stat:last-child {
    border-bottom: none;
  }

  .summary-stat-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .summary-stat-number {
    font-size: 18px;
  }

  /* Footer - Mobile */
  .open-items-footer {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .open-items-footer .ant-btn {
    width: 100%;
    min-width: 0;
    min-width: initial;
    height: 42px;
    font-size: 14px;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .open-items-modal .ant-modal {
    max-width: 100%;
    margin: 8px;
  }

  .open-items-modal-header {
    padding: 20px 16px 14px;
  }

  .open-items-modal-content {
    padding: 14px 16px 20px;
  }

  .open-items-scroll-container {
    max-height: 280px;
  }

  .open-item-content {
    padding: 14px;
    gap: 10px;
    flex-direction: column;
  }

  .open-item-icon-container {
    margin-top: 0;
    align-self: flex-start;
  }

  .open-item-number {
    position: static;
    margin-bottom: 8px;
  }

  .open-item-detail-card {
    padding: 10px;
  }

  .open-items-footer .ant-btn {
    height: 40px;
    font-size: 13px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.open-items-modal .ant-btn:focus-visible {
  outline: 2px solid #f4a300;
  outline-offset: 2px;
}

.open-item-card:focus-within {
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.2);
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .open-items-modal-header {
    background: #fff;
    border-bottom: 2px solid #000;
  }

  .open-items-modal-icon-wrapper {
    background: #fff;
    border: 2px solid #000;
  }

  .open-item-card {
    page-break-inside: avoid;
    border: 1px solid #000 !important;
    background: #fff !important;
  }

  .open-items-footer {
    display: none;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.open-item-card {
  animation: slideInUp 0.3s ease-out;
  animation-fill-mode: both;
}

.open-item-card:nth-child(1) { animation-delay: 0.05s; }
.open-item-card:nth-child(2) { animation-delay: 0.1s; }
.open-item-card:nth-child(3) { animation-delay: 0.15s; }
.open-item-card:nth-child(4) { animation-delay: 0.2s; }
.open-item-card:nth-child(5) { animation-delay: 0.25s; }

/* ============================================
   TRAIN PROGRESS BAR
   ============================================ */
.train-progress-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 24px 20px;
  margin: 24px 0;
  border: 2px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  animation: slideInProgress 0.4s ease-out;
}

@keyframes slideInProgress {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.train-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 0 10px;
}

.train-station {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.station-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #d9d9d9;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.station-node.active {
  border-color: #f4a300;
  background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.4);
  animation: pulseNode 1.5s ease-in-out infinite;
}

.station-node.completed {
  border-color: #52c41a;
  background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
  animation: completePop 0.5s ease-out;
}

@keyframes pulseNode {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(244, 163, 0, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(244, 163, 0, 0.6);
  }
}

@keyframes completePop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.station-node .anticon {
  font-size: 24px;
  color: #52c41a;
  animation: checkmarkAppear 0.4s ease-out;
}

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.station-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9d9;
  transition: all 0.3s ease;
}

.station-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #595959;
  text-align: center;
  max-width: 120px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.station-node.active ~ .station-label {
  color: #f4a300;
}

.station-node.completed ~ .station-label {
  color: #52c41a;
}

/* Train Rail (connecting line between stations) */
.train-rail {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 4px;
  background: #e8e8e8;
  z-index: 1;
  overflow: hidden;
  border-radius: 2px;
}

.train-rail::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f4a300 0%, #faad14 100%);
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.train-rail.filled::before {
  left: 0;
}

/* Train Locomotive (moving train icon) */
.train-locomotive {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #f4a300 0%, #faad14 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.5);
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.train-locomotive::before {
  content: '🚂';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

.train-rail.filled .train-locomotive {
  left: calc(100% - 12px);
  animation: trainSmoke 0.8s ease-out;
}

@keyframes trainSmoke {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

/* Responsive adjustments for train progress */
@media (max-width: 767px) {
  .train-progress-container {
    padding: 20px 12px;
  }

  .train-track {
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  .train-station {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
  }

  .station-node {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .station-node .anticon {
    font-size: 20px;
  }

  .station-label {
    margin-top: 0;
    text-align: left;
    max-width: none;
    flex: 1 1;
    font-size: 14px;
  }

  .train-rail {
    display: none;
  }

  /* Vertical rail for mobile */
  .train-station::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 48px;
    width: 3px;
    height: 24px;
    background: #e8e8e8;
    border-radius: 2px;
  }

  .train-station:last-child::after {
    display: none;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
  text-align: center;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.text-muted {
  color: #8c8c8c !important;
}

/* VendorAbout.css - Matching VendorSettings styling */

.vendor-about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1a2b49;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f7fc;
}

/* Loading State */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

.card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 800px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Form styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: #F4A300;
    box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.1);
    outline: none;
}

/* Image upload section */
.image-upload-section {
    margin-bottom: 24px;
}

.image-preview-container {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

.image-preview {
    max-width: 300px;
    max-height: 300px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.delete-image-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-image-btn:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

/* Button styling */
button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.edit-button {
    background-color: #F4A300;
    color: white;
    box-shadow: 0 4px 10px rgba(244, 163, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.edit-button:hover {
    background-color: #e59700;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(244, 163, 0, 0.3);
}

.save-button {
    background-color: #F4A300;
    color: white;
    margin-right: 15px;
    box-shadow: 0 4px 10px rgba(244, 163, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-button:hover {
    background-color: #e59700;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(244, 163, 0, 0.3);
}

.cancel-button {
    background-color: #4b5563;
    color: white;
    box-shadow: 0 4px 10px rgba(75, 85, 99, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cancel-button:hover {
    background-color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(75, 85, 99, 0.3);
}

/* Alert messages */
.success-message {
    background-color: #c4f3c4;
    color: rgb(62, 61, 61);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: center;
}

.error-message {
    background-color: #ffe5e5;
    color: #d32f2f;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: center;
}

/* Premium feature alert */
.premium-feature-alert {
    background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
    border-left: 4px solid #F4A300;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Prevent ResizeObserver errors */
.ant-typography {
    contain: layout style;
}

.ant-typography-expand,
.ant-typography-edit-content,
.ant-typography-copy,
.ant-typography-copy-success {
    will-change: auto !important;
}

/* Rich Text Editor (Quill) Styling */
.quill {
    border-radius: 8px;
    overflow: hidden;
}

.quill .ql-toolbar.ql-snow {
    border: 1px solid #d9d9d9;
    border-radius: 8px 8px 0 0;
    background: #fafafa;
    padding: 8px 12px;
}

.quill .ql-container.ql-snow {
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 15px;
    min-height: 180px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.quill .ql-editor {
    min-height: 180px;
    line-height: 1.7;
    color: #333;
}

.quill .ql-editor.ql-blank::before {
    color: #bbb;
    font-style: italic;
}

.quill .ql-snow .ql-picker.ql-header .ql-picker-label::before {
    font-size: 13px;
}

.quill .ql-toolbar .ql-formats button:hover,
.quill .ql-toolbar .ql-formats .ql-picker-label:hover {
    color: #F4A300;
}

.quill .ql-toolbar .ql-formats button.ql-active,
.quill .ql-toolbar .ql-formats .ql-picker-label.ql-active {
    color: #F4A300;
}

.quill .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.quill .ql-snow.ql-toolbar button:hover .ql-stroke {
    stroke: #F4A300;
}

.quill .ql-snow.ql-toolbar button.ql-active .ql-fill,
.quill .ql-snow.ql-toolbar button:hover .ql-fill {
    fill: #F4A300;
}

/* Font Size Dropdown - show numeric labels */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: 'Size';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { content: '36'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48'; }

.ql-snow .ql-picker.ql-size {
    width: 65px;
}

/* View mode preview for rich text */
.vendor-about-preview {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}

.vendor-about-preview h1,
.vendor-about-preview h2,
.vendor-about-preview h3 {
    margin: 8px 0 4px;
    color: #1a2b49;
}

.vendor-about-preview p {
    margin: 0 0 8px;
}

.vendor-about-preview ul,
.vendor-about-preview ol {
    padding-left: 20px;
    margin: 4px 0;
}

.vendor-about-preview blockquote {
    border-left: 3px solid #F4A300;
    padding-left: 12px;
    margin: 8px 0;
    color: #555;
    font-style: italic;
}

.vendor-about-preview a {
    color: #F4A300;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vendor-about-container {
        padding: 20px 10px;
    }
    
    .card {
        padding: 20px;
    }
    
    .image-preview {
        max-width: 100%;
    }
}

/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}

.subscription-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
}

.subscription-header {
  text-align: center;
  margin-bottom: 30px;
}

.subscription-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #1a2b49;
  margin-bottom: 10px;
}

.subscription-header p {
  font-size: 16px;
  color: #6c757d;
  margin-top: 0;
  max-width: 600px;
  margin: 0 auto;
}

/* Loading and Error States */
.loading-spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  min-height: 400px;
}

.loading-spinner .ant-spin-text {
  color: var(--color-navy);
  font-size: 16px;
  margin-top: 16px;
  font-weight: 500;
}

.error-message {
  background-color: #ffe5e5;
  color: #d32f2f;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
}

/* Free Trial Section Styles */
.free-trial-section {
  margin: 60px 0;
  position: relative;
}

.free-trial-heading {
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  color: #1a2b49;
  position: relative;
}

.free-trial-heading:after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background-color: #F4A300;
  margin: 15px auto 0;
  border-radius: 2px;
}

.free-trial-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid #F4A300;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.free-trial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.free-trial-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
}

.free-trial-info {
  flex: 2 1;
}

.free-trial-card h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #1a2b49;
}

.free-trial-description {
  font-size: 18px;
  color: #495057;
  margin-bottom: 30px;
  max-width: 80%;
  line-height: 1.6;
}

.free-trial-features {
  margin-bottom: 30px;
}

.free-trial-features ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  list-style: none;
  padding: 0;
}

.free-trial-features li {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #495057;
}

.free-trial-features .checkmark {
  color: #F4A300;
  margin-right: 10px;
  font-size: 18px;
}

.free-trial-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
}

.free-trial-button {
  background-color: #F4A300;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px 45px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 250px;
  box-shadow: 0 4px 10px rgba(244, 163, 0, 0.3);
}

.free-trial-button:hover {
  background-color: #d38800;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(244, 163, 0, 0.4);
}

.free-trial-button:disabled {
  background-color: #ffc04d;
  cursor: not-allowed;
  transform: none;
}

.trial-note-text {
  font-size: 14px;
  color: #6c757d;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}

/* Billing Toggle Container */
.billing-toggle-container {
  text-align: center;
  margin-bottom: 40px;
}

/* Billing Toggle Styles */
.billing-toggle {
  display: inline-flex;
  background-color: #f0f4f9;
  border-radius: 30px;
  padding: 5px;
  margin: 0 auto 30px;
}

.toggle-option {
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #495057;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.toggle-option.active {
  background-color: #F4A300;
  color: white;
  font-weight: bold;
}

/* Subscription Plans Styles */
.subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 60px;
}

.plan-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.plan-card.popular {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  color: white;
  border: none;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}

.plan-name {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #1a2b49;
}

.plan-card.popular .plan-name {
  color: white;
}

.plan-card.popular .plan-features li,
.plan-card.popular .checkmark {
  color: white;
}

.plan-price {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1a2b49;
  display: flex;
  align-items: flex-start;
}
.plan-price .period {
  font-size: 18px;
  color: #1a2b49;
  align-self: center;
  display: flex;
  align-items: flex-start;
}

.plan-card.popular .plan-price {
  color: white;
}

.plan-card.popular .period {
  color: rgba(255, 255, 255, 0.8);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
}

.checkmark {
  color: #F4A300;
  margin-right: 10px;
  font-weight: bold;
}

.select-plan-button {
  background-color: white;
  color: #F4A300;
  border: 2px solid #F4A300;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-plan-button:hover {
  background-color: #F4A300;
  color: white;
}

.popular-button {
  background-color: white;
  color: #2563EB;
  border-color: white;
}

.popular-button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #2563EB;
}



/* Footer section */
.subscription-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  background-color: #F4A300;
  margin-top: 60px;
  border-radius: 8px;
  color: white;
}

.footer-section {
  padding: 0 20px;
  flex: 1 1;
  text-align: center;
}

.footer-section a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.footer-section a:hover {
  text-decoration: underline;
}

/* Enterprise Plan Styles */
.enterprise-plan {
  background: linear-gradient(135deg, #1a2b49 0%, #2c3e50 100%);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 60px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.enterprise-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.enterprise-plan h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: white;
}

.enterprise-plan p {
  font-size: 18px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.contact-sales-button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  border-radius: 8px;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-sales-button:hover {
  background-color: white;
  color: #1a2b49;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* FAQ Section Styles */
.faq-section {
  margin-bottom: 40px;
}

.faq-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
  color: #1a2b49;
}

.faq-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 25px;
  gap: 25px;
}

.faq-item {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border: 1px solid #e9ecef;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.faq-item h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #1a2b49;
}

.faq-item p {
  font-size: 16px;
  color: #495057;
  line-height: 1.6;
}

/* Payment UI Styles */
.payment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.payment-header h2 {
  font-size: 28px;
  color: #1a2b49;
  margin: 0;
}

.back-button {
  background: none;
  border: none;
  color: #0066ff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #f0f7ff;
}

.payment-summary {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
}

.payment-summary h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1a2b49;
  font-size: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 16px;
}

.summary-item.total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
  font-weight: bold;
  font-size: 18px;
}

.payment-methods {
  margin-bottom: 30px;
}

.payment-methods h3 {
  margin-bottom: 20px;
  color: #1a2b49;
  font-size: 20px;
}

.paypal-container {
  max-width: 500px;
  margin: 0 auto;
}

/* New styles for free trial UI */
.trial-note {
  margin-top: 20px;
  padding: 15px;
  background-color: #e6f7ff;
  border-radius: 8px;
  border-left: 4px solid #0066ff;
}

.trial-note p {
  margin: 8px 0;
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
}

.free-trial-confirmation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.confirm-trial-button {
  background-color: #0066ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 300px;
}

.confirm-trial-button:hover {
  background-color: #0052cc;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}
.discount-badge {
  font-size: 14px;
  padding: 3px 8px;
  border: 1px solid #00008B; /* Dark blue border */
  background-color: #00008B; /* Dark blue background */
  color: white; /* White text */
  border-radius: 15px;
  margin-left: 2px; /* Rounds all corners */
}

/* Responsive Styles */
@media (max-width: 992px) {
  .subscription-plans {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .free-trial-description {
    max-width: 100%;
  }
  
  .free-trial-content {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .subscription-container {
    padding: 30px 15px;
  }
  
  .subscription-header h1 {
    font-size: 28px;
  }
  
  .free-trial-card {
    padding: 30px 20px;
  }
  
  .free-trial-features ul {
    grid-template-columns: 1fr;
  }
  
  .free-trial-heading {
    font-size: 24px;
  }
  
  .plan-price {
    font-size: 36px;
  }
  
  .currency {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .subscription-header h1 {
    font-size: 24px;
  }
  
  .toggle-option {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* AssignOperatorsPage - Operator Management UI */
/* Uses theme.css variables for consistency */

/* Container & Layout */
.AssignOperatorsPage_assign-page-container__6QUGQ {
  padding: 32px 24px;
  max-width: 960px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg-light);
}

/* Breadcrumb Navigation */
.AssignOperatorsPage_assign-breadcrumb__Xgh8V {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-family: var(--font-body);
}

.AssignOperatorsPage_assign-breadcrumb-link__ReMke {
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
  font-weight: var(--weight-medium);
}

.AssignOperatorsPage_assign-breadcrumb-link__ReMke:hover {
  color: var(--color-primary);
}

.AssignOperatorsPage_assign-breadcrumb-separator__IQTCA {
  color: var(--color-gray-400);
}

.AssignOperatorsPage_assign-breadcrumb-current__7M-F0 {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* Page Header */
.AssignOperatorsPage_assign-page-header__JCY9q {
  margin-bottom: 32px;
}

.AssignOperatorsPage_assign-page-title__O-PV1 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 8px;
}

.AssignOperatorsPage_assign-page-title-icon__0N77v {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.25);
}

.AssignOperatorsPage_assign-page-description__pTNGf {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
  font-family: var(--font-body);
}

/* Section Cards */
.AssignOperatorsPage_assign-section-card__qP6gr {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.AssignOperatorsPage_assign-section-header__MdWok {
  padding: 20px 24px;
  background: linear-gradient(to right, #fafafa, #ffffff);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
}

.AssignOperatorsPage_assign-section-icon__Wstia {
  width: 40px;
  height: 40px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 20px;
}

.AssignOperatorsPage_assign-section-title__pko85 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.AssignOperatorsPage_assign-section-body__ivbye {
  padding: 24px;
}

.AssignOperatorsPage_assign-section-label__GBQzT {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 12px;
  display: block;
}

/* Truck Selection Grid */
.AssignOperatorsPage_assign-truck-grid__1arw9 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 20px;
}

.AssignOperatorsPage_assign-truck-item__TY35G {
  display: flex;
  align-items: center;
  padding: 14px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.AssignOperatorsPage_assign-truck-item__TY35G:hover {
  background: #f1f5f9;
  border-color: var(--color-gray-300);
}

.AssignOperatorsPage_assign-truck-item-selected__LdrLu {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.AssignOperatorsPage_assign-truck-checkbox-content__dvRIx {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}

.AssignOperatorsPage_assign-truck-logo__S16zO {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-gray-300);
  border: 1px solid var(--border-light);
}

.AssignOperatorsPage_assign-truck-logo-placeholder__E-TH1 {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-300);
  display: inline-block;
}

.AssignOperatorsPage_assign-truck-name__-LKV8 {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
}

/* Email Input Section */
.AssignOperatorsPage_assign-email-section__cXPv\+ {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.AssignOperatorsPage_assign-email-input__Qx-TD {
  flex: 1 1;
  min-width: 280px;
}

.AssignOperatorsPage_assign-email-input__Qx-TD .ant-input {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-light);
  padding: 12px 16px;
  font-size: 15px;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.AssignOperatorsPage_assign-email-input__Qx-TD .ant-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.12);
}

.AssignOperatorsPage_assign-send-btn__muRcW {
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 28px;
  font-weight: var(--weight-semibold);
  height: auto;
  font-family: var(--font-body);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
  transition: all var(--transition-fast);
}

.AssignOperatorsPage_assign-send-btn__muRcW:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(244, 163, 0, 0.35);
}

/* Operators List Section */
.AssignOperatorsPage_assign-operators-section__XytkK {
  margin-top: 8px;
}

.AssignOperatorsPage_assign-section-subheader__LzKnd {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 20px;
}

.AssignOperatorsPage_assign-operators-list__k3HCB {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Operator Card */
.AssignOperatorsPage_assign-operator-card__BxIt6 {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.AssignOperatorsPage_assign-operator-card__BxIt6:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-gray-300);
}

.AssignOperatorsPage_assign-operator-card-accepted__JT6iT {
  border-left: 4px solid #22c55e;
}

.AssignOperatorsPage_assign-operator-card-pending__Mri92 {
  border-left: 4px solid var(--color-primary);
}

.AssignOperatorsPage_assign-operator-card-revoked__nc1gZ {
  border-left: 4px solid var(--color-gray-400);
}

.AssignOperatorsPage_assign-operator-content__LGhZA {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.AssignOperatorsPage_assign-operator-icon__RbV6c {
  width: 44px;
  height: 44px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  font-size: 20px;
  flex-shrink: 0;
}

.AssignOperatorsPage_assign-operator-info__96lZ9 {
  flex: 1 1;
  min-width: 200px;
}

.AssignOperatorsPage_assign-operator-header__qj9Ec {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.AssignOperatorsPage_assign-operator-email__JyRcj {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.AssignOperatorsPage_assign-operator-status__NyQlU {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AssignOperatorsPage_assign-operator-status-accepted__IJdcd {
  background: #dcfce7;
  color: #15803d;
}

.AssignOperatorsPage_assign-operator-status-pending__K7--4 {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.AssignOperatorsPage_assign-operator-status-revoked__8J6j4 {
  background: var(--color-gray-300-50);
  color: var(--color-gray-800);
}

/* Trucks Tags */
.AssignOperatorsPage_assign-operator-trucks__4sZJW {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.AssignOperatorsPage_assign-truck-tag__d3W7s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  color: var(--text-secondary);
}

.AssignOperatorsPage_assign-truck-tag-logo__WlHkf {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--color-gray-300);
}

.AssignOperatorsPage_assign-truck-tag-logo-placeholder__2Qzf8 {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--color-gray-300);
  display: inline-block;
}

.AssignOperatorsPage_assign-truck-tag-name__wYEDW {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AssignOperatorsPage_assign-truck-tag-remove__t5p3c {
  margin-left: 4px;
  padding: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.AssignOperatorsPage_assign-truck-tag-remove__t5p3c:hover {
  background: #fee2e2;
  color: var(--color-negative);
}

/* Operator Actions */
.AssignOperatorsPage_assign-operator-actions__PGE\+K {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.AssignOperatorsPage_assign-btn__x2Nek {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.AssignOperatorsPage_assign-btn-primary__ef3Zd {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
}

.AssignOperatorsPage_assign-btn-primary__ef3Zd:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.AssignOperatorsPage_assign-btn-danger__EtgdD {
  color: var(--color-negative);
  border-color: var(--color-negative);
}

.AssignOperatorsPage_assign-btn-danger__EtgdD:hover {
  background: #fee2e2;
  border-color: var(--color-negative);
  color: var(--color-negative-hover);
}

.AssignOperatorsPage_assign-btn-ghost__w7zKC {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.AssignOperatorsPage_assign-btn-ghost__w7zKC:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* Empty State */
.AssignOperatorsPage_assign-empty-state__tSaDN {
  text-align: center;
  padding: 48px 24px;
}

.AssignOperatorsPage_assign-empty-icon__34EpH {
  width: 80px;
  height: 80px;
  background: var(--color-bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--color-gray-400);
  font-size: 36px;
}

.AssignOperatorsPage_assign-empty-text__1U7BU {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
}

/* Loading State */
.AssignOperatorsPage_assign-loading__XXZJ4 {
  text-align: center;
  padding: 64px 24px;
}

/* Modal Styles */
.AssignOperatorsPage_assign-modal-content__UtXIh {
  padding: 8px 0;
}

.AssignOperatorsPage_assign-modal-list__brDHF {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.AssignOperatorsPage_assign-modal-item__QwdOs {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.AssignOperatorsPage_assign-modal-item__QwdOs:hover {
  border-color: var(--color-gray-300);
}

/* Responsive */
@media (max-width: 768px) {
  .AssignOperatorsPage_assign-page-container__6QUGQ {
    padding: 20px 16px;
  }
  
  .AssignOperatorsPage_assign-page-title__O-PV1 {
    font-size: 24px;
  }
  
  .AssignOperatorsPage_assign-truck-grid__1arw9 {
    grid-template-columns: 1fr;
  }
  
  .AssignOperatorsPage_assign-operator-content__LGhZA {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .AssignOperatorsPage_assign-operator-actions__PGE\+K {
    width: 100%;
    justify-content: flex-end;
  }
}

.favorites-page {
    padding: 20px;
    background-color: #f9f9f9;
}

.favorites-list {
    display: flex;
    flex-direction: column;    /* Stack tiles vertically */
    gap: 20px;                 /* Space between each tile */
    max-width: 500px;         /* Optional: limit the width of the list */
    margin: 0 auto;            /* Optional: center the list horizontally */
}

.food-truck-tile {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 100%;               /* Make tiles fill the container width */
    max-width: 600px;          /* Optional: set a max width */
    margin: 0 auto;            /* Optional: center the tile horizontally */
    box-sizing: border-box;    /* Ensures padding and border are included in width */
}

.food-truck-tile h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.food-truck-tile p {
    font-size: 1rem;
    color: #555;
    overflow-wrap: break-word; /* Ensure long words wrap */
}

.food-truck-tile .price-range {
    font-weight: bold;
    color: #888;
}

.food-truck-tile .open-status {
    color: green;
}

.food-truck-tile .cuisine {
    color: #777;
}

.favorites-list {
    display: grid; /* Use grid to layout tiles */
    grid-template-columns: 1fr; /* Single column */
    grid-gap: 20px;
    gap: 20px;
}

/* Global Styles */
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: #ffffff;
  color: #1a2b49;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: #ffffff;
  color: #1a2b49;
}

/* Main Container */
.business-page {
  padding: 0px 16px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .business-page {
    padding: 16px;
  }
}

/* Sticky Header Container */
.sticky-header-container {
  position: -webkit-sticky;
  position: sticky;
  top: 72px;
  z-index: 100;
  background-color: #ffffff;
  padding:15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* Below right and left rounded corners of 10px */
  border-radius: 0 0 10px 10px;
}

@media (max-width: 768px) {
  .sticky-header-container {
    position: relative;
    top: auto;
    padding: 10px 12px;
  }
}

/* Header */
.business-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 8px; */
  /* padding-bottom: 15px; */
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
}

.business-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a2b49;
  position: relative;
}

.business-header h1:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #F4A300;
  border-radius: 2px;
  font-size: 28px;
  font-weight: 700;
  color: #1a2b49;
  position: relative;
}

.business-header h1:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #F4A300;
  border-radius: 2px;
}

/* Search Input */
.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-container input {
  width: 240px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 15px;
  margin: 22px;
  flex-wrap: wrap;
  /* padding-bottom: 10px; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tabs button {
  padding: 11px 17px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  color: #4b5563;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tabs button:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  color: #4b5563;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tabs button:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tabs button.active {
  background-color: #F4A300;
  background-color: #F4A300;
  color: white;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.25);
  font-weight: 600;
}

.tabs button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.tabs button:active:after {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
  transition: 0s;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.25);
  font-weight: 600;
}

.tabs button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.tabs button:active:after {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
  transition: 0s;
}

/* Business Toggle */
.business-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* Order Summary */
.order-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.order-summary .card {
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

/* Table Container */
.order-table {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

/* Table Headers */
.order-table th {
  background-color: #f4f4f4;
  font-weight: bold;
  text-align: center;
  padding: 12px;
  width: 25%;
  /* Ensures equal width */
  white-space: nowrap;
  /* Prevents text wrapping */
}

/* Table Data Cells */
.order-table td {
  padding: 12px;
  text-align: center;
  /* Centers all content for uniform alignment */
  border-bottom: 1px solid #ddd;
  word-wrap: break-word;
  /* Ensures text does not overflow */
}

/* Ensure Text Columns are Left-Aligned */
.order-table td:first-child,
/* Consumer Name */
.order-table td:nth-child(2) {
  /* Event Type */
  text-align: center;
}

/* Alternate Row Colors */
.order-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Hover Effect */
.order-table tbody tr:hover {
  background-color: #f1f1f1;
}

.text-green {
  color: green;
  font-weight: bold;
}

.text-yellow {
  color: orange;
  font-weight: bold;
}

.text-red {
  color: red;
  font-weight: bold;
}


/* Calendar container wrapper */
.calendar-container-wrapper {
  width: 100%;
  padding: 0;
  margin-bottom: 40px;
}

/* Other tab containers */
.catering-container,
.profile-container,
.settings-container {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
}

.catering-container h2,
.profile-container h2,
.settings-container h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #F4A300;
}

.order-management-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.order-management-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #F4A300;
  border-radius: 2px;
}

/* Mobile Header Styles */
.business-header.mobile-header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.business-header.mobile-header > * {
  width: 100%;
}

/* Mobile Tabs */
.tabs.mobile-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 15px;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tabs.mobile-tabs::-webkit-scrollbar {
  height: 4px;
}

.tabs.mobile-tabs::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.tabs.mobile-tabs::-webkit-scrollbar-thumb {
  background: #F4A300;
  border-radius: 10px;
}

.tabs.mobile-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
  touch-action: manipulation;
}

/* Mobile Order Cards */
.order-cards-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Today tab – full width so header and content stay in same spot with or without orders */
.today-tab-orders {
  margin-top: 0;
  width: 100%;
}

.today-back-to-today-row {
  margin-bottom: 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
  width: 100%;
}

.today-tab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  min-height: 48px;
  width: 100%;
}

.today-tab-content {
  min-height: 120px;
  width: 100%;
}

.today-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.today-pill {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.today-pill.total { background: #e3f2fd; color: #1565c0; }
.today-pill.pending { background: #fff3e0; color: #e65100; }
.today-pill.fulfilled { background: #e8f5e9; color: #2e7d32; }
.today-pill.canceled { background: #ffebee; color: #c62828; }

.today-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
}

.order-buckets {
  margin-top: 8px;
}

.order-bucket {
  margin-bottom: 12px;
}

.order-bucket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.order-bucket-cards {
  gap: 8px !important;
}

.order-bucket-card {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  font-size: 14px;
}

/* Table: one line per cell; table grows to fit content */
.order-bucket-table {
  margin-bottom: 0 !important;
  width: 100%;
  table-layout: auto;
}

.order-bucket-table th,
.order-bucket-table td {
  padding: 8px 10px !important;
  font-size: 14px;
  white-space: nowrap;
}

.order-bucket-table th {
  font-size: 13px;
  font-weight: 600;
}

.order-bucket-table .MuiSelect-root { font-size: 13px !important; }

.order-bucket-table th:nth-child(7),
.order-bucket-table td.order-status-cell {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  box-sizing: border-box;
}

.order-bucket-table td.order-status-cell .MuiSelect-root {
  width: 100% !important;
  max-width: 100%;
}

.today-empty-state {
  margin-top: 8px !important;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .today-tab-orders {
    width: 100%;
  }
  .today-tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .today-date-row {
    justify-content: flex-start;
  }
  .order-bucket-table {
    min-width: 700px;
  }
}

/* Filter Container Mobile */
.filter-container {
  margin-bottom: 20px;
}

.filter-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .business-page {
    padding: 10px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .order-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .order-summary .card {
    padding: 12px;
    font-size: 16px;
  }

  .business-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .business-header h1 {
    font-size: 24px;
  }

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 13px;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    touch-action: manipulation;
  }
/* <<<<<<< HEAD */
  
  .order-table {
    display: none;
  }
  
  .order-management-title {
    font-size: 20px;
  }
  
  .catering-container,
  .profile-container,
  .settings-container {
    padding: 20px 16px;
  }
  
  .catering-container h2,
  .profile-container h2,
  .settings-container h2 {
    font-size: 20px;
  }
  
  .filter-container label {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .business-page {
    padding: 12px;
  }
  
  .order-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .order-summary .card {
    padding: 10px;
    font-size: 14px;
  }
  
  .business-header h1 {
    font-size: 22px;
  }
  
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 15px;
    gap: 10px;
  }

  .tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .catering-container,
  .profile-container,
  .settings-container {
    padding: 16px 12px;
  }
}

/* ============================================
   Calendar.css — Vendor Calendar Styles
   Ant Design handles most component styling.
   This file covers: layout, event cards,
   image overlays, and a few form helpers.
   ============================================ */

/* ── Base Layout ─────────────────────────────── */

.calendar-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1a2b49;
  min-height: auto;
  border: 1px solid rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calendar-header {
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}

/* ── Form Helpers ────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #1a2b49;
  font-size: 16px;
  position: relative;
  padding-left: 4px;
}

.selected-date-info {
  padding: 8px 10px;
  background-color: #fff8e6;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #1a2b49;
  text-align: center;
  border-left: 4px solid #F4A300;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.15);
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;
}

.selected-date-info:before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.selected-date-info p {
  margin: 0;
  position: relative;
  font-weight: 500;
}

/* ── Selected Dates / Time Slots (Step 2) ────── */

.selected-dates {
  margin-top: 15px;
}

.time-inputs-container {
  margin-top: 10px;
  position: relative;
}

.time-slot-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 15px;
  background-color: white;
  padding: 1px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(220, 223, 230, 0.5);
}

/* ── Event Image Upload ──────────────────────── */

.image-upload-container {
  position: relative;
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 0px;
  text-align: center;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-upload-container:hover {
  border-color: #FF8C00;
  background-color: #fff5e6;
}

.image-upload-container input[type="file"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #666;
  font-weight: 500;
}

.calender-event-image-preview-container {
  position: relative;
  display: inline-block;
}

.calender-event-image-preview {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
}

/* ── Events List Grid ────────────────────────── */

.events-list,
.upcoming-events-list,
.past-events-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-top: 12px;
}

/* Responsive grid for different screen sizes */
@media (max-width: 1200px) {
  .events-list,
  .upcoming-events-list,
  .past-events-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .events-list,
  .upcoming-events-list,
  .past-events-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Event Card ──────────────────────────────── */

.event-card {
  background-color: rgb(245, 242, 242);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 0;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: visible;
  min-height: 180px;
  height: auto;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.event-card.upcoming-event {
  border-left: 4px solid #FF8C00;
  background: linear-gradient(to right, rgba(255, 140, 0, 0.05), transparent 20%);
}

.event-card.past-event {
  border-left: 4px solid #9e9e9e;
  background: linear-gradient(to right, rgba(158, 158, 158, 0.05), transparent 20%);
}

/* ── Event Card — Image Variant ──────────────── */

.event-card.with-image {
  background-position: 50% 50%;
  background-size: cover;
  height: 250px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.event-card.with-image .event-image-background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  transition: transform 0.3s ease;
}

.event-card:hover .event-image-background {
  transform: none;
}

.event-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.event-image img,
.event-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}

/* Gradient overlay for text readability */
.event-card .event-content-overlay {
  background: linear-gradient(0deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.4) 70%,
    rgba(0,0,0,0) 100%);
  border-radius: 0 0 10px 10px;
  height: 100%;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

.event-card .overlap-group {
  height: 180px;
  position: relative;
  top: 79px;
}

/* ── Event Card — Text Elements ──────────────── */

.event-title {
  font-weight: bold;
  margin-right: 10px;
  flex: 1 1;
  text-align: left;
  font-size: 16px;
  color: #333;
  line-height: 1.3;
}

.event-card.with-image .event-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
  width: 212.26px;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.event-description {
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
  line-height: 1.4;
  color: #666;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  display: block;
  width: 100%;
}

.event-card.with-image .event-description {
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: transparent;
  padding: 4px 0;
}

/* ── Event Card — Heading / Badge Block ──────── */

.heading {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  left: 0;
  padding: 8px;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100%;
}

.heading-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.frame {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  position: relative;
}

.event-date-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  z-index: 3;
}

.event-date-badge .event-label {
  background-color: #F4A300;
  color: white;
  border-radius: 30px;
  padding: 4px 8px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  display: inline-block;
}

.like {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3.5px;
  position: relative;
}

.element-sep {
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content;
}

.event-card.with-image .event-location {
  color: white;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  text-align: left;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Event Card — Details ────────────────────── */

.event-card.with-image .event-details {
  margin-bottom: 15px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
}

.event-card:not(.with-image) .event-details {
  margin-bottom: 15px;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
}

.event-card.with-image .event-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.event-card:not(.with-image) .event-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.event-card .event-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}

.event-card .event-status.upcoming {
  background-color: rgba(255, 140, 0, 0.1);
  color: #FF8C00;
}

.event-card .event-status.past {
  background-color: rgba(158, 158, 158, 0.1);
  color: #757575;
}

/* ── Event Card — Action Buttons ─────────────── */

.event-action-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.event-card.with-image .event-action-buttons {
  top: 15px;
  right: 15px;
}

.event-card:not(.with-image) .event-action-buttons {
  top: 10px;
  right: 10px;
}

.edit-icon-btn,
.delete-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: 16px;
}

.edit-icon-btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1890ff;
}

.edit-icon-btn:hover {
  background-color: #1890ff;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.delete-icon-btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #ff4d4f;
}

.delete-icon-btn:hover {
  background-color: #ff4d4f;
  color: red;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.event-card.with-image .delete-icon-btn,
.event-card.with-image .copy-icon-btn {
  background-color: rgba(255, 255, 255, 0.9);
}

.copy-icon-btn {
  color: #0275d8;
}

.copy-icon-btn:hover {
  background-color: #0275d8;
  color: white;
  transform: scale(1.1);
}

/* ── Event Card — Action bar (non-image) ─────── */

.event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 15px;
  z-index: 5;
  position: relative;
}

.event-card.with-image .event-actions {
  border-top: none;
  padding-top: 0;
}

/* ── Event Thumbnail ─────────────────────────── */

.event-thumbnail {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.event-thumbnail:hover {
  transform: scale(1.02);
}

/* ── Read-more link on image cards ───────────── */

.read-more-btn {
  background-color: transparent !important;
  background-color: initial !important;
  flex: 0 0 auto !important;
  gap: 4.72px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  color: white !important;
  margin-top: 8px !important;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  font-weight: 600;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.read-more-btn:hover {
  transform: translateX(5px);
}

/* ── Bulk Delete Button ──────────────────────── */

.bulk-delete-btn {
  background: #ff4d4f;
  border: none;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.bulk-delete-btn:hover {
  background: #ff7875;
  opacity: 1;
  transform: scale(1.05);
}

.bulk-delete-btn:active {
  transform: scale(0.95);
}

/* ── Misc helpers ────────────────────────────── */

.icon-instance-node {
  height: 14.15px !important;
  position: relative !important;
  width: 14.15px !important;
}

.word-count {
  color: #6c757d;
  font-size: 0.8rem;
  text-align: right;
  margin-top: 2px;
}

.single-day-event {
  font-style: italic;
  color: #FF8C00;
}

.no-events-message {
  text-align: center;
  padding: 30px;
  color: #757575;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  margin: 20px 0;
  font-style: italic;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .calendar-container {
    padding: 10px;
  }

  .event-action-buttons {
    top: 8px;
    right: 8px;
    gap: 6px;
  }

  .edit-icon-btn,
  .delete-icon-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .selected-date-info {
    padding: 0;
    background-color: #fff8e6;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #1a2b49;
    text-align: center;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.15);
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s ease-out;
  }
}

/* ===== REUSABLE CALENDAR EVENT LOADING SPINNER STYLES ===== */
.calender-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26, 43, 73, 0.95), rgba(244, 163, 0, 0.1));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
}

.calender-loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  animation: slideInUp 0.5s ease-out 0.2s both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.calender-loading-spinner-svg {
  width: 120px;
  height: 120px;
  margin-bottom: 30px;
  filter: drop-shadow(0 8px 16px rgba(244, 163, 0, 0.3));
}

.calender-spinner-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 8;
  stroke-linecap: round;
}

.calender-spinner-progress {
  fill: none;
  stroke: #F4A300;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transform-origin: 50% 50%;
  animation: spinnerRotate 2s linear infinite, spinnerDash 1.5s ease-in-out infinite;
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 283;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 283;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 283;
    stroke-dashoffset: -124;
  }
}

.calender-loading-content {
  color: white;
  max-width: 400px;
  padding: 0 20px;
}

.calender-loading-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  color: #F4A300;
  animation: pulse 2s ease-in-out infinite;
}

.calender-loading-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.calender-loading-content h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.calender-loading-content p {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .calender-loading-spinner-svg {
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
  }
  
  .calender-loading-content h3 {
    font-size: 24px;
  }
  
  .calender-loading-content p {
    font-size: 14px;
  }
  
  .calender-loading-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
  }
}

/* Add floating particles effect */
.calender-loading-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(244, 163, 0, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(244, 163, 0, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(244, 163, 0, 0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: floatingParticles 20s linear infinite;
  pointer-events: none;
}

@keyframes floatingParticles {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-100px);
  }
}

/**
 * FacebookConnectModal Styles
 * Uses CSS variables from theme.css for consistency
 */

.facebook-connect-modal .ant-modal-content {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fb-modal-container {
  padding: 0;
}

/* =====================================================
   HEADER
===================================================== */

.fb-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--border-light);
}

.fb-header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
}

.fb-modal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* =====================================================
   EVENT SUMMARY
===================================================== */

.fb-event-summary {
  padding: 20px 24px;
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--border-light);
}

.fb-event-name {
  margin: 0 0 8px 0;
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.fb-event-details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-secondary);
}

.fb-event-date,
.fb-event-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =====================================================
   MESSAGES
===================================================== */

.fb-error-message {
  margin: 16px 24px;
  padding: 12px 16px;
  background-color: #FEE2E2;
  border: 1px solid var(--border-negative);
  border-radius: var(--radius-md);
  color: var(--color-negative);
  font-size: 14px;
}

.fb-success-message {
  margin: 16px 24px;
  padding: 12px 16px;
  background-color: #D1FAE5;
  border: 1px solid #10B981;
  border-radius: var(--radius-md);
  color: #065F46;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

/* =====================================================
   LOADING STATE
===================================================== */

.fb-loading {
  padding: 40px 24px;
  text-align: center;
}

.fb-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: fb-spin 0.8s linear infinite;
}

@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

.fb-loading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* =====================================================
   CONNECT SECTION
===================================================== */

.fb-connect-section {
  padding: 32px 24px;
  text-align: center;
}

.fb-connect-description {
  margin: 0 0 24px 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
}

.fb-connect-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fb-connect-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.fb-connect-button:active {
  transform: translateY(0);
}

.fb-feature-note {
  margin: 16px 0 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* =====================================================
   POST SECTION
===================================================== */

.fb-post-section {
  padding: 24px;
}

.fb-form-group {
  margin-bottom: 20px;
}

.fb-form-group:last-child {
  margin-bottom: 0;
}

.fb-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.fb-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.fb-select {
  width: 100%;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.fb-select:hover {
  border-color: var(--color-primary);
}

.fb-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.1);
}

.fb-textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.fb-textarea:hover {
  border-color: var(--color-primary);
}

.fb-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.1);
}

.fb-char-count {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: right;
}

.fb-generate-button {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fb-generate-button:hover {
  background-color: var(--color-primary-light);
}

.fb-generate-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fb-post-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background-color: var(--color-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.fb-post-button:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.fb-post-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fb-button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: fb-spin 0.6s linear infinite;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 640px) {
  .facebook-connect-modal {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fb-modal-header {
    padding: 20px 16px 12px 16px;
  }

  .fb-event-summary {
    padding: 16px;
  }

  .fb-event-details {
    flex-direction: column;
    gap: 8px;
  }

  .fb-connect-section,
  .fb-post-section {
    padding: 24px 16px;
  }

  .fb-modal-title {
    font-size: 20px;
  }

  .fb-event-name {
    font-size: 18px;
  }
}

/* Social Media Post History Component */
.social-media-post-history {
  padding: 24px;
  background: #f5f5f5;
  background: var(--background-color, #f5f5f5);
  min-height: 100vh;
}

/* Header */
.smph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ff6b35;
  border-bottom: 2px solid var(--primary-color, #ff6b35);
}

.smph-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.smph-title .anticon {
  color: #ff6b35;
  color: var(--primary-color, #ff6b35);
}

.smph-refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ff6b35;
  background: var(--primary-color, #ff6b35);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.smph-refresh-btn:hover {
  background: #ff5722;
  background: var(--primary-hover-color, #ff5722);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Filters Section */
.smph-filters {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.smph-filters-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.smph-filters-row:last-child {
  margin-bottom: 0;
}

.smph-search-input {
  flex: 1 1;
  min-width: 250px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}

.smph-search-input:hover,
.smph-search-input:focus {
  border-color: #ff6b35;
  border-color: var(--primary-color, #ff6b35);
}

.smph-date-select,
.smph-status-select,
.smph-platform-select {
  height: 40px;
  border-radius: 8px;
}

.smph-date-range {
  height: 40px;
  border-radius: 8px;
}

.smph-clear-btn {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: white;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  font-weight: 500;
  transition: all 0.3s ease;
}

.smph-clear-btn:hover {
  border-color: #ff6b35;
  border-color: var(--primary-color, #ff6b35);
  color: #ff6b35;
  color: var(--primary-color, #ff6b35);
}

.smph-results-count {
  margin-left: auto;
  font-size: 14px;
  color: #8c8c8c;
  font-weight: 500;
  padding: 0 12px;
}

/* Loading State */
.smph-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
}

.smph-loading p {
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  font-size: 16px;
  margin: 0;
}

/* Empty State */
.smph-empty {
  background: white;
  border-radius: 12px;
  padding: 60px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Posts Grid */
.smph-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* Post Card */
.smph-post-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.smph-post-card.selected {
  border: 2px solid #ff6b35;
  border: 2px solid var(--primary-color, #ff6b35);
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}

.smph-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Selection Checkbox */
.smph-post-checkbox {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: white;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.smph-post-checkbox .ant-checkbox-wrapper {
  margin: 0;
}

/* Delete Button */
.smph-delete-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: white;
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.smph-delete-btn:hover {
  background: #ff4d4f;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* Select All Section */
.smph-select-all {
  padding: 16px 24px;
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.smph-select-all .ant-checkbox-wrapper {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
}

/* Bulk Delete Button */
.smph-bulk-delete-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
}

/* Post Image */
.smph-post-image {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #f0f0f0;
}

.smph-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smph-ai-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Post Content */
.smph-post-content {
  padding: 12px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.smph-post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.smph-post-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  margin: 0 0 6px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status Badge */
.smph-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.05);
}

/* Post Meta */
.smph-post-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.smph-post-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #8c8c8c;
}

.smph-post-date .anticon {
  color: #ff6b35;
  color: var(--primary-color, #ff6b35);
}

/* Platform Badges */
.smph-post-platforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.smph-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.smph-platform-badge.facebook {
  background: #1877f2;
}

.smph-platform-badge.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* Caption Collapse */
.smph-caption-collapse {
  margin-top: 8px;
}

.smph-caption-collapse .ant-collapse-header {
  padding: 8px 12px !important;
  font-size: 13px;
  font-weight: 500;
  color: #ff6b35;
  color: var(--primary-color, #ff6b35);
  background: rgba(255, 107, 53, 0.05);
  border-radius: 8px;
}

.smph-caption-collapse .ant-collapse-content-box {
  padding: 12px !important;
}

.smph-caption-text {
  font-size: 14px;
  line-height: 1.6;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Continue Post Button */
.smph-continue-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: #F4A300;
  background: var(--color-primary, #F4A300);
  color: white;
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.smph-continue-btn:hover {
  background: #DB9200;
  background: var(--color-primary-hover, #DB9200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.smph-continue-btn:active {
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .social-media-post-history {
    padding: 16px;
  }

  .smph-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .smph-filters {
    padding: 16px;
  }

  .smph-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .smph-search-input,
  .smph-date-select,
  .smph-status-select,
  .smph-platform-select {
    width: 100% !important;
  }

  .smph-results-count {
    margin-left: 0;
    text-align: center;
  }

  .smph-posts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .smph-post-image {
    height: 150px;
  }
  
  .smph-post-checkbox,
  .smph-delete-btn {
    top: 8px;
  }
  
  .smph-post-checkbox {
    left: 8px;
  }
  
  .smph-delete-btn {
    right: 8px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .smph-title {
    font-size: 24px;
  }
}

/* Continue Post Button - Updated */
.smph-continue-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Platform-specific post links - Inline with badge */
.smph-post-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid;
  margin-left: 6px;
}

.smph-post-link.instagram {
  color: #E4405F;
  border-color: #E4405F;
  background: #fff;
}

.smph-post-link.instagram:hover {
  background: #E4405F;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(228, 64, 95, 0.2);
}

.smph-post-link.facebook {
  color: #1877F2;
  border-color: #1877F2;
  background: #fff;
}

.smph-post-link.facebook:hover {
  background: #1877F2;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(24, 119, 242, 0.2);
}

@media (max-width: 480px) {
  .smph-post-title {
    font-size: 16px;
  }

  .smph-refresh-btn {
    width: 100%;
    justify-content: center;
  }
  
  .smph-post-links {
    flex-direction: column;
  }
  
  .smph-post-link {
    width: 100%;
    justify-content: center;
  }
  
  .smph-bulk-delete-btn {
    width: 100%;
    justify-content: center;
  }
  
  .smph-select-all {
    padding: 12px 16px;
  }
}

/* General Page Styling */
.vendor-page {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    background-color: #fff7eb; /* clean white background */
    border: 1px solid #f4a300; /* border with your theme color */
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* soft shadow for depth */
    box-sizing: border-box;
}

h1 {
    text-align: center;
    color: #333;
}


.vendor-page .tile-button {
    background-color: #016129;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
}

.vendor-page .tile-button:hover {
    background-color: #083301;
}

.vendor-page .plus-icon {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 8px;
}


.vendor-page .form-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box; 
    width: 100%;
}

/* Section Headings */
.vendor-page .form-section h2 {
    margin-bottom: 15px;
    color: #444;
    font-size: 18px;
    border-bottom: 2px solid #28a745;
    padding-bottom: 5px;
}

/* Input Group Styling */
.vendor-page .input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.vendor-page .input-group input, .input-group textarea {
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vendor-page .input-group textarea {
    height: 80px;
    resize: vertical;
}

/* Map Section */
.vendor-page .map-section {
    background-color: #e6f7ff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #bddff0;
    margin-bottom: 20px;
    width: 100%;
}

.vendor-page .map-section h2 {
    margin-bottom: 15px;
    color: #007bff;
    font-size: 18px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}


#map {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.vendor-page .submit-button {
    text-align: center;
}

.vendor-page .submit-button button {
    padding: 12px;
    width: 100%;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.vendor-page .submit-button button:hover {
    background-color: #0056b3;
}

/* Success and Error Messages */
.vendor-page .success-message {
    color: green;
    margin-top: 10px;
    text-align: center;
}

.vendor-page .error-message {
    color: red;
    margin-top: 10px;
    text-align: center;
}

/* Debugging Info */
.vendor-page .debug-info {
    margin-top: 20px;
    font-size: 14px;
}
.vendor-page  .tag-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vendor-page  .tag {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 4px 10px; 
    margin: 5px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.5; 
    color: #333; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

.vendor-page .tag-button {
    background: none;
    border: none;
    color: #999; 
    font-size: 14px; 
    /* margin-left: 8px; */
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

.tag button:hover {
    color: #f00; 
}

.tag button:focus {
    outline: none; 
}

.vendor-page .menu-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.vendor-page .menu-item input {
    padding: 8px;
    font-size: 14px;
}

.vendor-page .details-input {
    width: 300px; 
}

.vendor-page .price-input {
    width: 60px; 
}

button {
    padding: 6px 6px;
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vendor-page {
        padding: 15px;
    }

    .form-section {
        padding: 15px;
    }
}

/* CSS for the Hours of Operation Section */
.hours-of-operation {
    display: flex;
    flex-direction: column;
}

.operation-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px; /* Space between items */
}

.day-label {
    flex: 0 0 100px; /* Adjust the width as needed */
    font-weight: bold;
    margin-right: 10px;
}

.time-inputs {
    display: flex;
    gap: 10px; /* Space between open and close inputs */
}

.operation-row input {
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.operation-row button {
    padding: 6px 12px;
    font-size: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.operation-row button.closed {
    background-color: #dc3545;
}

.operation-row button:hover {
    background-color: #0056b3;
}

.price-range-options {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping of items to the next line */
    gap: 30px; /* Adds space between the radio buttons */
    margin: 10px 0; /* Adds margin for spacing above and below */
}

.price-range-options label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    white-space: nowrap; /* Prevents text from wrapping to the next line */
}

.price-range-options input {
    margin-right: 5px;
}

.price-range-heading {
    text-align: left; 
    margin-bottom: 10px;
}

/* Menu Group Styling */
.vendor-page .menu-group {
    margin-bottom: 30px; 
    padding: 20px;
    background-color: #c2cfdb;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}


.vendor-page .group-name-input {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 15px;
    color: #444;
    border: 1px solid #ddd; 
    padding: 8px 30px; 
    border-radius: 4px; 
    text-align: center; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); 
    background-color: #f9f9f9; 
    
}

.vendor-page .menu-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.vendor-page .details-input, .vendor-page .price-input {
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vendor-page .details-input {
    width: 60%; 
}

.vendor-page .price-input {
    width: 20%; 
}

/* Remove Group Button Styling */
.vendor-page .remove-group-button {
    margin-left: 10px;
    color: white;
    background-color: #a8444e; /* Strong red background for delete button */
    border: none;
    border-radius: 4px; /* Rounded corners */
    padding: 6px 12px; /* Add padding to give it a button-like appearance */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.vendor-page .remove-group-button:hover {
    background-color: #a71d2a; /* Darker red on hover */
    color: white; /* Keep text white on hover for consistency */
}

.vendor-page .remove-group-button:focus {
    outline: none; /* Remove the default button outline on focus */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.4); /* Add a subtle red focus ring */
}


.add-item-button {
    background-color: #007bff; /* Use your existing background color */
    color: white;
    padding: 10px 10px; /* Adjust padding to match other buttons */
    border: none;
    border-radius: 4px; /* Similar border-radius as other buttons */
    cursor: pointer;
    font-size: 14px; /* Adjust font size */
    margin: 10px 0;
    transition: background-color 0.3s ease;
}

.add-item-button:hover {
    background-color: #0056b3; /* Lighter green on hover (if similar effect is used) */
}

.food-truck-tile-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.food-truck-tile {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    transition: all 0.3s ease;
    position: relative;
}

.food-truck-tile:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.tile-expanded {
    margin-top: 16px;
}

.edit-button {
    background-color: #4c4eaf; /* Green */
    color: white;
    margin-right: 10px;
}

.edit-button:hover {
    background-color: #0056b3;
}

/* General Button Styling */
button {
    /* padding: 10px 10px; */
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Publish Button Styling */
.publish-button {
    background-color: #4CAF50; /* Green */
    color: white;
    margin-right: 10px;
}

.publish-button:hover {
    background-color: #45a049; /* Darker Green on Hover */
    transform: scale(1.05); /* Slight scale-up on hover */
}

/* Delete Button Styling */
.delete-button {
    background-color: #f44336; /* Red */
    color: white;
}

.delete-button:hover {
    background-color: #e53935; /* Darker Red on Hover */
    transform: scale(1.05); /* Slight scale-up on hover */
}

/* Button Focus Effect */
button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Disabled Button Styling */
button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure it sits above other content */
}

.overlay.active {
    display: block; /* Show overlay when active */
}


.input-group {
    margin: 10px 0;
    display: flex;
    gap: 20px; /* Increase the space between input elements */
  }
  
  input[type="text"] {
    padding: 5px;
    width: 200px;
  }
  
/* Calendar Button Styling */
.calendar-button-container {
    margin-top: 20px;
    text-align: center;
}

.calendar-button {
    background-color: #3498db;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.calendar-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Calendar Modal Styling */
.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.calendar-modal {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.calendar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.calendar-modal-header h2 {
    margin: 0;
    color: #333;
    font-size: 20px;
}

.calendar-modal .close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}

.calendar-modal .close-button:hover {
    color: #333;
}

.ant-form-item-label > label {
    color: #F4A300 !important;
    font-weight: 600;
  }
  .ant-select-selector, .ant-input, .ant-input:focus, .ant-input:hover {
    border-color: #F4A300 !important;
  }

  .ant-radio-button-wrapper {
    color: #F4A300 !important;
    border: 1px solid #F4A300 !important;
  }
  .ant-radio-button-wrapper-checked {
    background-color: #F4A300 !important;
    color: white !important;
  }
  .ant-tag {
    font-weight: 500;
  }
  
/* General container spacing */
.tile-expanded {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tags styling */
.tags-container {
    margin-bottom: 10px;
}

.tag-badge {
    background-color: #e0f7fa;
    color: #006064;
    border-radius: 12px;
    padding: 5px 10px;
    margin-right: 5px;
    display: inline-block;
    font-size: 0.9em;
}

/* Hours table */
.hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.hours-table th, .hours-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Menu section styling */
.menu-section {
    margin-top: 15px;
}

.menu-group {
    margin-bottom: 20px;
}

.menu-group-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #00796b;
}

.menu-items-list {
    list-style: none;
    padding-left: 0;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.menu-item:last-child {
    border-bottom: none;
}

.item-name {
    font-weight: bold;
}

.item-details {
    color: #757575;
    font-size: 0.9em;
}

.item-price {
    color: #004d40;
    font-weight: bold;
}

/* Container for the toggle */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

/* Label for the checkbox */
.toggle-label {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    gap: 10px;
}

/* Hide the default checkbox */
.toggle-checkbox {
    display: none;
}

/* Toggle slider style */
.toggle-slider {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 34px;
    transition: background-color 0.3s;
}

/* Circle inside the toggle */
.toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

/* When checkbox is checked, move the circle and change background */
.toggle-checkbox:checked + .toggle-slider {
    background-color: #09660c; /* Green background when checked */
}

/* Move the circle to the right when checked */
.toggle-checkbox:checked + .toggle-slider::before {
    transform: translateX(26px);
}

.preview-image {
    width: 50px; 
    height: 50px; 
    object-fit: cover; 
    border: 2px solid #ddd; 
    display: block; 
    margin-top: 10px;
}

/* Overlay styling */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Content Box */
.popup-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto; /* Enables scrolling */
    position: relative;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow for depth */
}

/* Responsive adjustments for different screen sizes */
@media (min-width: 1200px) {
    .popup-content {
        max-width: 750px;
    }
}

@media (max-width: 768px) {
    .popup-content {
        width: 95%;
        padding: 15px;
    }
}

/* Close button */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
}

/* Header styling */
.popup-content h2 {
    margin-top: 0;
    font-size: 1.8rem;
    text-align: center;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Map styling */
.popup-map {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

/* Section styling */
.popup-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Section titles */
.popup-details p strong {
    font-size: 1.1rem;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

/* General text formatting */
.popup-details p {
    font-size: 1rem;
    line-height: 1.5;
    color: #444;
}

/* Operating Hours list */
.popup-details ul {
    list-style: none; /* Removes bullet points */
    padding: 0;
}

.popup-details li {
    font-size: 1rem;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* Menu Section */
.menu-section {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.menu-group-title {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

.menu-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.menu-item span {
    font-size: 1rem;
}

/* Action buttons */
.action-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.action-buttons button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.action-buttons button:hover {
    background-color: #45a049;
}

/* Mini tile view button size adjustment */
.mini-tile-view .action-buttons button {
    padding: 8px 10px; /* Smaller padding for mini tile */
    font-size: 0.85rem; /* Reduce font size for mini tile */
}

/* Social Links */
.social-links {
    margin-top: 20px;
    text-align: center;
}

.social-links a {
    margin: 0 10px;
    font-size: 2rem; /* Increase the size of the icons */
    color: #007BFF; /* You can change this color if desired */
    text-decoration: none;
    display: inline-block;
    padding: 10px; /* Add some padding around the icons */
}

.social-links a:hover {
    color: #0056b3; /* Darker shade of the blue for hover effect */
}

.social-links a i {
    display: inline-block;
    transition: transform 0.3s ease; /* Adds a hover animation */
}

/* Hover effect to slightly scale the icons */
.social-links a:hover i {
    transform: scale(1.2); /* Increases the size on hover */
}

/* Section Separation */
.section-divider {
    border-top: 1px solid #ccc;
    margin: 15px 0;
    padding-top: 10px;
}

/* Truck Image Gallery */
.truck-image-gallery {
    margin: 15px 0;
}

.main-image-container {
    position: relative;
    width: 100%;
    max-height: 250px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 10px;
}

.main-truck-image {
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-fit: cover;
    display: block;
}

/* Image navigation buttons */
.image-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.image-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Image counter */
.image-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10;
}

/* Thumbnail strip */
.thumbnail-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: thin;
}

.thumbnail-strip::-webkit-scrollbar {
    height: 6px;
}

.thumbnail-strip::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.thumbnail:hover {
    transform: scale(1.05);
}

.thumbnail.active {
    border-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

/* Menu item improvements */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    gap: 15px;
}

.item-info {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-weight: 500;
    color: #333;
}

.item-details {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.item-price {
    font-weight: 600;
    color: #4CAF50;
    white-space: nowrap;
    align-self: flex-start;
}

/* Responsive adjustments for images */
@media (min-width: 1200px) {
    .main-image-container {
        max-height: 280px;
    }
    
    .main-truck-image {
        max-height: 280px;
    }
    
    .thumbnail {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {
    .main-image-container {
        max-height: 200px;
    }
    
    .main-truck-image {
        max-height: 200px;
    }
    
    .thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .image-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .main-image-container {
        max-height: 180px;
    }
    
    .main-truck-image {
        max-height: 180px;
    }
}

/* Scoped container class */
.foodtruck-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: space-between; /* Distribute tiles evenly */
}

/* Unique tile class */
.foodtruck-tile {
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1 1 30%; /* Allow tiles to expand and fill the available space, with a minimum width of 30% */
    max-width: 100%; /* Ensure tiles don't exceed container width */
    box-sizing: border-box; /* Include padding and border in width calculation */
    min-width: 500px; /* Prevent the tile from shrinking too much */
}

.foodtruck-tile:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Favorite button specific to food truck */
.foodtruck-tile .favorite-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #837023;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.foodtruck-tile .favorite-button:hover {
    background-color: #ffaa00;
}

/* Header for food truck tile */
.foodtruck-tile .foodtruck-header {
    background-color: #4c63af;
    color: white;
    padding: 10px;
    font-size: 1em;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

/* Details section specific to tile */
.foodtruck-tile .foodtruck-details {
    padding: 10px 0;
}

.foodtruck-tile .foodtruck-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Map and directions specific container */
.foodtruck-tile .map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
}

.foodtruck-tile .mini-map {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 5px;
}

.foodtruck-tile .directions-button {
    background-color: #4CAF50;
    color: white;
    padding: 6px;
    font-size: 12px;
    width: 100px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.foodtruck-tile .directions-button:hover {
    background-color: #45a049;
}

/* Action buttons styling */
.foodtruck-tile .action-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

.foodtruck-tile .price-range {
    font-size: 1em;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 40px;
}

/* Order Online and Catering buttons */
.foodtruck-tile .order-online-button,
.foodtruck-tile .catering-button {
    padding: 6px;
    width: 100px;
    border-radius: 5px;
    font-size: 12px;
}

/* Social media links scoped within tile */
.foodtruck-tile .social-links a {
    margin-left: 10px;
    font-size: 1.5em;
    color: #000;
    text-decoration: none;
}

.foodtruck-tile .social-links a:hover {
    color: #007bff;
}

.foodtruck-tile .foodtruck-text {
    padding-top: 5px;
    text-align: center;
    margin: 0;
}

/* Expand button specific to tile */
.foodtruck-tile .expand-button {
    padding: 8px;
    font-size: 14px;
    margin-top: 5px;
}

/* Hours table unique styles */
.foodtruck-tile .hours-table {
    font-size: 0.8em;
    margin-top: 5px;
}

.foodtruck-tile .hours-table th,
.foodtruck-tile .hours-table td {
    padding: 4px 8px;
}

.foodtruck-tile .hours-table th {
    background-color: #165f32;
    font-weight: bold;
}

.foodtruck-tile .hours-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Add this CSS to your stylesheet */
.LoadingSpinner_spinner-border__rkhNG {
  animation-duration: 1.25s; /* Adjust the speed here */
}

.LoadingSpinner_svg__xqQ4g{
  justify-content: center;
  align-items: center;
  width: 100%;
  /* height: 100px; */
  margin-top: 10%;
}

.LoadingSpinner_pleasewait__i-PFf{
  justify-self: center;
  margin-bottom: 10%;
  font-size: 20px;
}

@media (max-width: 480px) {
  .LoadingSpinner_svg__xqQ4g{
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 60px;
      margin-top: 10%;
  }
  .LoadingSpinner_pleasewait__i-PFf{
    justify-self: center;
    margin-bottom: 10%;
    font-size: 12px;
  }
}

.modal-overlay-custom {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-container-custom {
  background: white;
  padding: 24px;
  border-radius: 12px;
  max-width: 600px;
  margin: auto;
}

.modal-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-content-custom {
  text-align: center;
  margin-top: 16px;
}

.modal-icon-section {
  margin-bottom: 16px;
}

.modal-warning-text {
  color: #F4A300;
  font-size: 1.1rem;
}

.modal-highlight-title {
  color: #F4A300;
  margin-bottom: 8px;
}

.modal-description-text {
  color: #1a2b49;
}

.modal-card-box {
  background: #fff7e6;
  border-radius: 10px;
  padding: 24px;
  margin-top: 16px;
}

.modal-button-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.modal-primary-button {
  background-color: #F4A300 !important;
  border-color: #F4A300 !important;
}

.modal-plan-summary {
  margin-bottom: 24px;
}

/* Premium plan specific styles */
.premium-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-top: 16px;
}

.premium-info {
  background-color: #e8f5e9;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  border-left: 4px solid #4CAF50;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  text-align: left;
}

.premium-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.upgrade-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.upgrade-button:hover {
  background-color: #45a049;
}

.cancel-button {
  background-color: #f1f1f1;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.cancel-button:hover {
  background-color: #e4e4e4;
}

/* ============================================
   TRAIN PROGRESS BAR - Exact match to OpenItemsModal
   ============================================ */
.train-progress-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 24px 20px;
  margin: 24px 0;
  border: 2px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  animation: slideInProgress 0.4s ease-out;
}

@keyframes slideInProgress {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.train-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 0 10px;
}

.train-station {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.station-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #d9d9d9;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.station-node.active {
  border-color: #f4a300;
  background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.4);
  animation: pulseNode 1.5s ease-in-out infinite;
}

.station-node.completed {
  border-color: #52c41a;
  background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
  animation: completePop 0.5s ease-out;
}

@keyframes pulseNode {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(244, 163, 0, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(244, 163, 0, 0.6);
  }
}

@keyframes completePop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.station-node .anticon {
  font-size: 24px;
  color: #52c41a;
  animation: checkmarkAppear 0.4s ease-out;
}

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.station-node .ant-spin {
  color: #f4a300;
}

.station-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9d9;
}

.station-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #595959;
  text-align: center;
  max-width: 140px;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.train-rail {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 4px;
  background: #e8e8e8;
  z-index: 1;
  border-radius: 2px;
  overflow: hidden;
}

.train-rail.filled {
  background: linear-gradient(to right, #52c41a 0%, #73d13d 100%);
  animation: railFill 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes railFill {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.train-locomotive {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #f4a300;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.6);
  z-index: 3;
  animation: locomotiveMove 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes locomotiveMove {
  0% {
    right: calc(100% + 12px);
  }
  100% {
    right: -12px;
  }
}

.train-locomotive::before {
  content: '🚂';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

/* Responsive adjustments for train progress */
@media (max-width: 767px) {
  .train-progress-container {
    padding: 20px 12px;
  }

  .train-track {
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .train-station {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }

  .station-node {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .station-node .anticon {
    font-size: 20px;
  }

  .station-dot {
    width: 10px;
    height: 10px;
  }

  .station-label {
    margin-top: 0;
    text-align: left;
    max-width: none;
    flex: 1 1;
    font-size: 14px;
  }

  .train-rail {
    display: none;
  }
}

/* Google Business Profile Management Page - Theme-based Styles */

.gbp-page {
    min-height: 100vh;
    background-color: var(--color-bg-light);
    padding: 24px;
    font-family: var(--font-body);
}

/* Header */
.gbp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.gbp-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.gbp-back-button:hover {
    background-color: var(--color-gray-300-50);
    color: var(--text-primary);
    border-color: var(--color-gray-600);
}

.gbp-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1;
}

.gbp-header-icon {
    font-size: 48px;
    color: #4285F4;
}

.gbp-header h1 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.gbp-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.gbp-status-badge {
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: var(--weight-semibold);
}

.gbp-status-badge.active {
    background-color: #52c41a;
    color: white;
}

.gbp-status-badge.pending {
    background-color: var(--color-primary);
    color: white;
}

/* Content */
.gbp-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Cards */
.gbp-card {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.gbp-card h2 {
    font-family: var(--font-body);
    font-size: var(--h3-size);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 24px 0 16px 0;
}

.gbp-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 32px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gbp-large-icon {
    font-size: 80px;
    color: var(--color-primary);
}

.gbp-large-icon.success {
    color: #52c41a;
}

/* Features List */
.gbp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    margin: 32px 0;
    text-align: left;
}

.gbp-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.gbp-feature span {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

.gbp-feature .anticon {
    font-size: 20px;
    color: #52c41a;
    flex-shrink: 0;
}

/* Buttons */
.gbp-button-primary,
.gbp-button-secondary,
.gbp-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
}

.gbp-button-primary {
    background-color: var(--color-primary);
    color: white;
}

.gbp-button-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.gbp-button-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gbp-button-large {
    padding: 16px 32px;
    font-size: 18px;
    margin-top: 16px;
}

.gbp-button-secondary {
    background-color: white;
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.gbp-button-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.gbp-button-danger {
    background-color: white;
    color: var(--color-negative);
    border: 2px solid var(--border-negative);
}

.gbp-button-danger:hover {
    background-color: var(--color-negative);
    color: white;
}

/* Info Box */
.gbp-info-box {
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin: 24px 0;
    text-align: left;
}

.gbp-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.gbp-info-row:last-child {
    border-bottom: none;
}

.gbp-info-row strong {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.gbp-info-row span {
    color: var(--text-secondary);
}

/* Active State */
.gbp-active-header {
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    margin-bottom: 24px;
}

.gbp-active-header h2 {
    margin: 0 0 8px 0;
}

.gbp-active-header p {
    margin: 0;
    color: var(--text-secondary);
}

/* Actions */
.gbp-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Note */
.gbp-note {
    margin-top: 32px;
    padding: 16px;
    background-color: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-align: left;
}

.gbp-note p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.gbp-note strong {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

/* Modal */
.gbp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.gbp-modal {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.gbp-modal h3 {
    font-size: var(--h4-size);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.gbp-modal p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.gbp-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Loading */
.gbp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.gbp-loading p {
    font-size: 16px;
    color: var(--text-secondary);
}

/* Upgrade Container */
.gbp-upgrade-container {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 64px 48px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gbp-upgrade-container h2 {
    font-size: var(--h3-size);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 24px 0 16px 0;
}

.gbp-upgrade-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 32px 0;
}

/* Choice Cards (Create New vs Connect Existing) */
.gbp-choice-cards {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 32px;
    text-align: left;
}

.gbp-choice-card {
    flex: 1 1;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gbp-choice-card h3 {
    font-size: 18px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.gbp-choice-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1 1;
}

.gbp-choice-card button {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

.gbp-choice-icon {
    font-size: 32px;
    color: var(--color-primary);
}

.gbp-choice-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Locations List */
.gbp-locations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.gbp-location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    text-align: left;
}

.gbp-location-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1;
    min-width: 0;
}

.gbp-location-info strong {
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.gbp-location-info span {
    font-size: 14px;
    color: var(--text-secondary);
}

.gbp-location-info a {
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gbp-location-item button {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .gbp-page {
        padding: 16px;
    }

    .gbp-card {
        padding: 32px 24px;
    }

    .gbp-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .gbp-header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .gbp-header-icon {
        font-size: 40px;
    }

    .gbp-header h1 {
        font-size: 24px;
    }

    .gbp-features {
        grid-template-columns: 1fr;
    }

    .gbp-actions {
        flex-direction: column;
        width: 100%;
    }

    .gbp-actions button {
        width: 100%;
    }

    .gbp-active-header {
        flex-direction: column;
        text-align: center;
    }

    .gbp-modal {
        padding: 24px;
    }

    .gbp-modal-actions {
        flex-direction: column;
    }

    .gbp-modal-actions button {
        width: 100%;
    }

    .gbp-choice-cards {
        flex-direction: column;
    }

    .gbp-choice-divider {
        padding: 12px 0;
    }

    .gbp-location-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .gbp-location-item button {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   SOCIAL MEDIA DASHBOARD - LAYOUT
   ======================================== */

.smp-dashboard-layout {
  min-height: 100vh;
  background: #f5f5f5;
  background: var(--color-bg-light, #f5f5f5);
  padding-top: 60px;
}

/* ========================================
   TOP NAVIGATION BAR
   ======================================== */

.smp-top-nav {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.smp-back-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: var(--h5-size);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.smp-back-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.smp-page-title {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
}

/* ========================================
   TABS CONTAINER
   ======================================== */

.smp-tabs-container {
  padding: 2rem;
  margin-top: 60px;
}

.smp-tabs .ant-tabs-nav {
  margin-bottom: 1.5rem;
}

.smp-tabs .ant-tabs-tab {
  font-size: 16px;
  font-weight: var(--weight-medium);
  padding: 12px 24px;
  font-family: var(--font-body);
}

.smp-tabs .ant-tabs-tab-active {
  color: var(--color-primary) !important;
}

.smp-tabs-container .ant-tabs-ink-bar {
  background: var(--color-primary) !important;
}

/* ========================================
   CREATE POST LAYOUT
   ======================================== */

.smp-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.smp-section-title {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ========================================
   EVENT PREVIEW CARD
   ======================================== */

.smp-event-preview {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition-fast);
}

.smp-event-preview:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.smp-event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: start;
}

.smp-event-image {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
}

.smp-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smp-ai-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #f4a300 0%, #e89b00 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smp-event-info {
  flex: 1 1;
}

.smp-event-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1rem;
}

.smp-event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.smp-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.smp-meta-icon {
  font-size: 1.25rem;
}

.smp-meta-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  color: #555;
}

.smp-event-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* ========================================
   CAPTION EDITOR
   ======================================== */

.smp-caption-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition-fast);
}

.smp-caption-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.smp-caption-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.smp-caption-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.smp-generate-btn {
  background: linear-gradient(135deg, #f4a300 0%, #e89b00 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.smp-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 163, 0, 0.3);
}

.smp-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.smp-generate-btn.image-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.smp-generate-btn.image-btn:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

.smp-caption-textarea {
  width: 100%;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  transition: var(--transition-fast);
  min-height: 100px;
}

.smp-caption-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.1);
}

.smp-caption-count {
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #999;
  margin-top: 0.5rem;
}

/* ========================================
   PLATFORMS SECTION
   ======================================== */

.smp-platforms-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition-fast);
}

.smp-platforms-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.smp-error-message {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

.smp-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ========================================
   PLATFORM CARDS
   ======================================== */

.smp-platform-card {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.smp-platform-card:hover {
  border-color: #f4a300;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.smp-platform-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.smp-refresh-btn {
  background: white;
  color: #f4a300;
  border: 2px solid #f4a300;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.smp-refresh-btn:hover {
  background: #f4a300;
  color: white;
}

.smp-platform-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
}

.smp-platform-icon.facebook-icon {
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
}

.smp-platform-icon.instagram-icon {
  background: linear-gradient(135deg, #E4405F 0%, #C13584 50%, #833AB4 100%);
}

.smp-platform-info {
  flex: 1 1;
}

.smp-platform-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
}

.smp-platform-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Loading State */
.smp-loading {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

/* Connect Section */
.smp-connect-section {
  text-align: center;
  padding: 1.5rem 0;
}

.smp-connect-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0 0 1.5rem;
}

.smp-connect-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
}

.smp-connect-btn.facebook-btn {
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
}

.smp-connect-btn.facebook-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.3);
}

/* Post Section */
.smp-post-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.smp-page-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.smp-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.smp-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: #333;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.smp-select:focus {
  outline: none;
  border-color: #f4a300;
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.1);
}

.smp-post-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.smp-post-btn.facebook-btn {
  background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
}

.smp-post-btn.facebook-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.3);
}

.smp-post-btn.instagram-btn {
  background: linear-gradient(135deg, #E4405F 0%, #C13584 50%, #833AB4 100%);
}

.smp-post-btn.instagram-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(228, 64, 95, 0.3);
}

.smp-post-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Success Message */
.smp-success-message {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

/* Coming Soon */
.smp-coming-soon {
  text-align: center;
  padding: 1.5rem 0;
}

.smp-coming-soon-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #999;
  margin: 0 0 1.5rem;
  font-style: italic;
}

/* ========================================
   DASHBOARD SECTION
   ======================================== */

.smp-dashboard {
  padding: 1.5rem 0;
}

.smp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.smp-stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.smp-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.smp-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.smp-stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.smp-stat-icon.posted {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.smp-stat-icon.draft {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.smp-stat-icon.ai {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.smp-stat-info {
  flex: 1 1;
}

.smp-stat-value {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
}

.smp-stat-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* History Section */
.smp-history-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.smp-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.smp-refresh-btn {
  background: white;
  color: #f4a300;
  border: 2px solid #f4a300;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.smp-refresh-btn:hover {
  background: #f4a300;
  color: white;
}

.smp-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.smp-history-card {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.smp-history-card:hover {
  border-color: #f4a300;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.smp-history-header-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

.smp-history-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  flex: 1 1;
}

.smp-status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smp-status-badge.draft {
  background: #fff3cd;
  color: #856404;
}

.smp-status-badge.posted {
  background: #d4edda;
  color: #155724;
}

.smp-status-badge.scheduled {
  background: #d1ecf1;
  color: #0c5460;
}

.smp-status-badge.failed {
  background: #f8d7da;
  color: #721c24;
}

.smp-history-caption {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.smp-history-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.smp-history-date {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #999;
}

.smp-history-platforms {
  display: flex;
  gap: 0.5rem;
}

.smp-platform-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.smp-platform-badge.facebook {
  background: #e7f3ff;
  color: #1877F2;
}

.smp-platform-badge.instagram {
  background: #fce4ec;
  color: #E4405F;
}

.smp-history-actions {
  display: flex;
  gap: 0.5rem;
}

.smp-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.smp-action-btn.edit:hover {
  background: #e7f3ff;
  border-color: #1877F2;
  color: #1877F2;
}

.smp-action-btn.delete:hover {
  background: #fee;
  border-color: #c33;
  color: #c33;
}

.smp-loading-center {
  text-align: center;
  padding: 3rem;
}

.smp-loading-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #f5f5f5;
  background: var(--color-bg-light, #f5f5f5);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
  .smp-container {
    grid-template-columns: 1fr;
  }

  .smp-sidebar {
    width: 240px;
  }

  .smp-generate-btn {
    width: 100%;
  }

  .smp-platforms-grid {
    grid-template-columns: 1fr;
  }

  .smp-image-source-selector .ant-radio-button-wrapper {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .smp-dashboard-layout {
    flex-direction: column;
  }

  .smp-sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    z-index: 1000;
  }

  .smp-sidebar-header {
    padding: 1rem;
  }

  .smp-sidebar-nav {
    display: flex;
    overflow-x: auto;
    padding: 0;
    flex: none;
  }

  .smp-nav-item {
    flex-direction: column;
    padding: 0.75rem;
    min-width: 90px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .smp-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--color-primary);
  }

  .smp-nav-content {
    align-items: center;
    text-align: center;
  }

  .smp-nav-subtitle {
    display: none;
  }

  .smp-sidebar-footer {
    display: none;
  }

  .smp-main-content {
    margin-left: 0;
    margin-top: 180px;
    padding: 1rem;
  }

  .smp-content-wrapper {
    padding: 1rem;
  }

  .smp-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .smp-event-preview,
  .smp-caption-section,
  .smp-platforms-section {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .smp-event-preview,
  .smp-caption-section,
  .smp-platforms-section {
    padding: 1rem;
  }

  .smp-platform-card {
    padding: 1rem;
  }

  .smp-tabs-container {
    padding: 1rem;
  }
}

/* ========================================
   DASHBOARD CONTENT OVERRIDES
   ======================================== */

.smp-content-wrapper .social-media-dashboard {
  padding: 0;
  background: transparent;
  min-height: auto;
}

.smp-content-wrapper .smd-header {
  margin-bottom: 1.5rem;
}

.smp-content-wrapper .smd-title {
  font-size: 1.75rem;
}

/* ========================================
   IMAGE SELECTION SECTION
   ======================================== */

.smp-image-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--color-gray-300);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.smp-image-title {
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.smp-image-option-cards {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 1rem;
}

.smp-image-option-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-user-select: none;
          user-select: none;
  flex: 1 1;
  box-sizing: border-box;
  min-width: 0;
}

.smp-image-option-card:hover {
  border-color: var(--color-primary);
  background: #fffbf0;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.1);
}

.smp-image-option-card.active {
  border-color: var(--color-primary);
  background: #fffbf0;
  box-shadow: 0 2px 10px rgba(244, 163, 0, 0.15);
}

.smp-image-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.smp-image-option-icon.event-icon {
  background: #e6f4ff;
  color: #1677ff;
}

.smp-image-option-icon.upload-icon {
  background: #f6ffed;
  color: #52c41a;
}

.smp-image-option-icon.ai-icon {
  background: #fff7e6;
  color: var(--color-primary);
}

.smp-image-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
}

.smp-image-option-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smp-image-option-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smp-image-option-check {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.smp-image-option-arrow {
  font-size: 13px;
  color: #52c41a;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .smp-image-option-cards {
    flex-direction: column;
  }
  .smp-image-option-desc {
    display: none;
  }
}

.smp-image-preview-container {
  margin-bottom: 1.5rem;
}

.smp-image-preview {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.smp-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smp-image-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.smp-image-badge.ai-badge {
  background: linear-gradient(135deg, var(--color-primary) 0%, #e89b00 100%);
  color: white;
}

.smp-image-badge.upload-badge {
  background: rgba(24, 119, 242, 0.9);
  color: white;
}

.smp-image-badge.event-badge {
  background: rgba(22, 119, 255, 0.85);
  color: white;
}

.smp-image-placeholder {
  width: 100%;
  max-width: 500px;
  height: 300px;
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--color-bg-light);
  color: var(--text-muted);
}

.smp-image-placeholder .anticon {
  font-size: 48px;
  opacity: 0.5;
}

.smp-image-placeholder p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
}

.smp-image-actions {
  display: flex;
  gap: 1rem;
}

.smp-image-action-btn {
  flex: 1 1;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.smp-image-action-btn.upload-btn {
  background: var(--color-primary);
  color: white;
}

.smp-image-action-btn.upload-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.smp-image-action-btn.ai-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, #e89b00 100%);
  color: white;
  margin-bottom: 1rem;
}

.smp-image-action-btn.ai-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.4);
}

.smp-image-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ========================================
   CAPTION SECTION IMPROVEMENTS
   ======================================== */

.smp-caption-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.smp-caption-tip {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.smp-generate-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, #e89b00 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.smp-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.4);
}

.smp-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Update event card layout */
.smp-event-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.smp-event-name {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 1rem;
}

.smp-meta-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
}

.smp-event-description {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Container */
.vendor-messages-container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Header */
  .vendor-messages-header {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
  }
  
  /* Messages Wrapper */
  .messages-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Message Card */
  .message-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
  }
  
  .message-card:hover {
    transform: translateY(-3px);
  }
  
  /* Sender Name */
  .sender-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Timestamp */
  .timestamp {
    font-size: 12px;
    color: #888;
    text-align: right;
  }
  
  /* Message Text */
  .message-text {
    font-size: 14px;
    color: #444;
    line-height: 1.4;
    margin-top: 8px;
  }
  
  /* Food Truck Info */
  .food-truck-name {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    font-style: italic;
  }
  
  /* Viewed or Not Viewed Tag */
  .status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    margin-top: 10px;
    text-align: center;
    width: -webkit-fit-content;
    width: fit-content;
  }
  
  .viewed {
    background-color: #daf5d6;
    color: #256029;
  }
  
  .not-viewed {
    background-color: #ffccd5;
    color: #d32f2f;
  }
  
/* OrderDetails.css */

.order-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-family: "Arial", sans-serif;
  }
  
  .order-header {
    text-align: center;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .order-card {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .order-info {
    font-size: 16px;
    color: #555;
    margin: 8px 0;
  }
  
  .order-info strong {
    color: #000;
  }
  
  .items-header {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #444;
  }
  
  .items-list {
    list-style: none;
    padding: 0;
  }
  
  .item {
    background: #e3e3e3;
    margin: 10px 0;
    padding: 12px;
    border-radius: 6px;
    transition: transform 0.2s ease-in-out;
  }
  
  .item:hover {
    transform: scale(1.02);
  }
  
  .item p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
  }
  
  .loading-text {
    text-align: center;
    font-size: 16px;
    color: #888;
  }
  
  .error-text {
    text-align: center;
    font-size: 16px;
    color: red;
  }
/* Status Color Styling */
.status-cancelled {
    color: red;
    font-weight: bold;
  }
  
  .status-completed {
    color: green;
    font-weight: bold;
  }
  
  .status-pending {
    color: orange; /* Yellow is often hard to read, so using orange for better contrast */
    font-weight: bold;
  }

.order-details-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.order-details-card {
  margin-top: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-details-card .ant-descriptions {
  margin-bottom: 24px;
}

.order-details-card .ant-descriptions-title {
  color: #F4A300;
  font-size: 18px;
  margin-bottom: 16px;
}

.order-details-card .ant-list-item {
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #fafafa;
}

.order-details-card .ant-list-item:hover {
  background-color: #f5f5f5;
}

.action-buttons {
  margin-top: 24px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
}

.ant-modal-content {
  border-radius: 8px;
}

.ant-modal-header {
  border-radius: 8px 8px 0 0;
}

.ant-modal-title {
  color: #F4A300;
}

.ant-btn-primary {
  background-color: #F4A300;
  border-color: #F4A300;
}

.ant-btn-primary:hover {
  background-color: #e69500;
  border-color: #e69500;
}

.ant-tag {
  border-radius: 4px;
  padding: 4px 8px;
}

.ant-divider {
  margin: 10px 0;
}

.ant-list-item-meta-title {
  color: #333;
}

.ant-list-item-meta-description {
  color: #666;
}

.ant-input {
  border-radius: 4px;
}

.ant-input:focus,
.ant-input-focused {
  border-color: #F4A300;
  box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
}

.ant-textarea {
  border-radius: 4px;
}

.ant-textarea:focus,
.ant-textarea-focused {
  border-color: #F4A300;
  box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
}
    
/* AdminAuthPage.css */

/* 🌟 Background Styling */
.admin-auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #333, #00f2fe);
    font-family: "Arial", sans-serif;
}

/* 📌 Admin Panel Card */
.admin-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    width: 350px;
    transition: transform 0.3s ease-in-out;
}

.admin-card:hover {
    transform: scale(1.05);
}

/* 🎯 Heading */
.admin-card h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 📝 Description */
.admin-card p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* 🔘 Buttons */
.admin-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

.admin-btn:hover {
    transform: translateY(-3px);
}

/* 🚀 Register Button */
.admin-btn.register {
    background: #007bff;
    color: white;
}

.admin-btn.register:hover {
    background: #0056b3;
}

/* ✅ Login Button */
.admin-btn.login {
    background: #28a745;
    color: white;
}

.admin-btn.login:hover {
    background: #1d7c32;
}

/* Background styling */
.admin-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #333, #00f2fe);
    font-family: "Arial", sans-serif;
}

/* Glassmorphic Login Card */
.admin-login-card {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 40px;
    width: 400px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Input fields */
.admin-login-card input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

/* Button styling */
.admin-login-card button {
    width: 100%;
    background: #007bff;
    color: white;
    padding: 10px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.admin-login-card button:hover {
    background: #0056b3;
}

/* Error Message */
.error-message {
    color: red;
    font-size: 14px;
}

.admin-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e1e2f;
    color: white;
    padding: 15px 30px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.admin-title {
    font-size: 1.2rem;
}

.navbar-adminEmail {
    color: #f0a500;
    font-weight: bold;
}

.admin-role-badge {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-left: 10px;
}

.new-events-adminProfile-section {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.new-events-adminProfile-section a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
    white-space: nowrap;
}

.new-events-adminProfile-section a:hover {
    color: #f0a500;
}

.admin-initial {
    width: 40px;
    height: 40px;
    background-color: #f0a500;
    color: #1e1e2f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.admin-initial:hover {
    transform: scale(1.1);
}

/* Sidebar Styles */
.admin-sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
}

.admin-sidebar.open {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h5 {
    margin: 0;
    color: #f0a500;
    font-weight: bold;
}

.close-sidebar-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.close-sidebar-btn:hover {
    transform: rotate(90deg);
    color: #f0a500;
    background-color: white;
    border-radius: 50%;
}

.sidebar-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-content a {
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.sidebar-content a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f0a500;
}

.sidebar-logout-btn {
    background: #f0a500;
    color: #1e1e2f;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.sidebar-logout-btn:hover {
    background: #d48f00;
    transform: translateY(-2px);
}

/* Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Admin Dashboard Layout */
.admin-dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: Arial, sans-serif;
}

/* Sidebar Styling */
.sidebar {
    width: 250px;
    background: #222;
    color: white;
    padding: 20px;
    height: 100%;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 20px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 15px 0;
}

.sidebar ul li a, .logout-btn {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px;
    background: #333;
    border: none;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.sidebar ul li a:hover, .logout-btn:hover {
    background: #555;
}

/* Main Content */
.dashboard-content {
    flex-grow: 1;
    padding: 20px;
    background: #f4f4f4;
}

/* Navbar */
.navbar {
    background: #FFF;
    color: white;
    padding: 15px;
    text-align: center;
}

.content {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-container {
    max-width: 90%;
    margin: 50px auto;
    padding: 1.5rem;
    font-family: 'Arial', sans-serif;
    background-color: #f9fafb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 5px;
/* border: 1px solid #f4a300; */
}

.news-title {
    /* font-size: 2.75rem; */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0;
    text-align: left;
    position: relative;
    padding-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

/* .news-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background: linear-gradient(to right, #3b82f6, #10b981);
    border-radius: 3px;
} */

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 2rem;
    padding-left: 1.5rem;
    border-left: 5px solid #3b82f6;
    letter-spacing: -0.5px;
}

.news-form {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.news-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.form-group.title-group,
.form-group.description-group {
    width: 100%;
}

.form-group.country-state-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.form-group.audience-group {
    width: 100%;
}

.form-group.expiry-proximity-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.form-group.address-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid; */
}

.form-group.address-group .form-input {
    margin-bottom: 0;
}

.form-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-input,
.form-textarea,
.form-file {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    color: #1f2937;
    transition: all 0.3s ease;
    background-color: #ffffff;
    width: 100%;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

.form-file {
    padding: 1rem;
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-file:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.geocode-button {
    padding: 0.75rem 1.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 42px;
    align-self: flex-start;
}

.geocode-button:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

.location-display {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.875rem;
}

.preview-image {
    max-width: 100%;
    height: auto;
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.submit-button {
    padding: 1.25rem 2.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    grid-column: span 2;
    justify-self: center;
    min-width: 250px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submit-create {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
}

.submit-create:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.submit-update {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.submit-update:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.disabled-button {
    background: #e5e7eb;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.message-text {
    text-align: center;
    padding: 1.25rem;
    border-radius: 12px;
    margin: 1rem 0;
    font-weight: 500;
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.message-text.success {
    background-color: #d1fae5;
    color: #065f46;
    border: 2px solid #a7f3d0;
}

.message-text.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 2px solid #fecaca;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 0 0.5rem;
}

.news-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.news-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.news-card-description {
    font-size: 1rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

.news-card-expiry,
.news-card-state {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 4px;
}

.news-card-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.edit-button,
.delete-button {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1 1;
}

.edit-button {
    background: #3b82f6;
    color: #ffffff;
}

.edit-button:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.delete-button {
    background: #ef4444;
    color: #ffffff;
}

.delete-button:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.no-data-text {
    font-size: 1rem;
    color: #6b7280;
    text-align: center;
    grid-column: span 2;
}

.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.confirm-box {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.confirm-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.confirm-text {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

.confirm-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.news-container .cancel-button,
.confirm-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.news-container .cancel-button {
    background: #e5e7eb;
    color: #374151;
}

.news-container .cancel-button:hover {
    background: #d1d5db;
    transform: translateY(-2px);
}

.confirm-button {
    background: #10b981;
    color: #ffffff;
}

.confirm-button:hover {
    background: #059669;
    transform: translateY(-2px);
}

@keyframes checkmark {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 1200px) {
    .news-container {
        padding: 2rem 1.5rem;
    }

    .news-form {
        padding: 2rem;
        gap: 2rem;
    }

    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .news-container {
        padding: 1rem;
        gap: 1rem;
    }

    .news-title {
        font-size: 2rem;
    }

    .news-form {
        padding: 1rem;
        gap: 1rem;
    }

    .form-group.country-state-group,
    .form-group.expiry-proximity-group,
    .form-group.file-inputs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-group.address-group {
        grid-template-columns: 1fr;
    }

    .geocode-button {
        width: 100%;
        height: auto;
    }

    .location-display {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .news-card {
        padding: 1.25rem;
    }

    .news-card-actions {
        flex-direction: column;
    }

    .edit-button,
    .delete-button {
        width: 100%;
    }
}

.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.audience-group {
    grid-column: span 2;
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.audience-options {
    display: flex;
    gap: 2rem;
    margin: 0.75rem 0;
}

.audience-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.5rem 0;
}

.audience-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
    margin-right: 10px;
}

.audience-label {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    font-weight: 500;
}

.audience-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.75rem;
    padding-left: 2px;
}

/* Location group styling to display country, state, and address in one row */
.location-group {
    display: flex;
    gap: 15px;
    align-items: flex-start;
  }
  
  .location-group .form-group {
    flex: 1 1;
    margin-bottom: 0;
  }
  
  .location-group .form-label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
  }
  
  .location-group .form-input {
    width: 100%;
  }
  
  /* Responsive behavior for smaller screens */
  @media (max-width: 768px) {
    .location-group {
      flex-direction: column;
      gap: 10px;
    }
    
    .location-group .form-group {
      margin-bottom: 15px;
    }
  }
.all-news {
    padding: 15px 30px;
    border: 1px solid #eee;
    max-width: 100%;
}

.all-news-title {
    color: #2c3e50;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}

.all-news-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    padding: 1rem;
}

.news-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
    border: 1px solid #eee;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.news-card-header {
    padding: 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.news-title {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-date {
    font-size: 0.875rem;
    color: #666;
}

.news-content {
    padding: 1.5rem;
}

.news-description {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.95rem;
}

.news-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.news-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.location-icon {
    color: #dc3545;
}

.news-dates {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.date-item:last-child {
    margin-bottom: 0;
}

.date-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.75rem;
    font-size: 0.8rem;
}

.date-item.created i {
    background-color: #e3f2fd;
    color: #1976d2;
}

.date-item.expires i {
    background-color: #fff3e0;
    color: #f57c00;
}

.date-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-right: 0.5rem;
}

.date-value {
    font-size: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-size: 1.1rem;
}

.error-message {
    text-align: center;
    padding: 1rem;
    color: #dc3545;
    background: #f8d7da;
    border-radius: 4px;
    margin: 1rem 0;
}

.all-news .card {
    transition: all 0.3s ease;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.all-news .card-img-top {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.all-news .card-body {
    padding: 1rem;
}

.all-news .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.all-news .card-text {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.badge {
    padding: 0.4em 0.6em;
    font-weight: 500;
    font-size: 0.7rem;
}

.location-info {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.location-item {
    display: flex;
    align-items: center;
    padding: 0.3rem 0;
    transition: all 0.2s ease;
}

.location-item:hover {
    transform: translateX(3px);
}

.location-icon {
    width: 20px;
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.location-item.address .location-icon {
    color: #2e7d32;
}

.location-item.range .location-icon {
    color: #ef6c00;
}

.location-text {
    font-size: 0.85rem;
    color: #495057;
}

.location-value {
    font-weight: 500;
}

.date-info {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border: 1px solid #e9ecef;
}

.card-footer {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.btn-outline-primary,
.btn-outline-secondary {
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    transform: translateY(-2px);
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.action-button {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.action-button.edit {
    background-color: #e3f2fd;
    color: #1976d2;
}

.action-button.delete {
    background-color: #ffebee;
    color: #d32f2f;
}

.action-button.notify {
    background-color: #fff8e1;
    color: #f59e0b;
}

.action-button:hover {
    transform: scale(1.1);
}

.action-button.edit:hover {
    background-color: #bbdefb;
}

.action-button.delete:hover {
    background-color: #ffcdd2;
}

.action-button.notify:hover {
    background-color: #ffecb3;
}

/* Custom tooltip for notify button */
.action-button.notify {
    position: relative;
}

.action-button.notify::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    pointer-events: none;
}

.action-button.notify::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    pointer-events: none;
}

.action-button.notify:hover::after,
.action-button.notify:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Loading spinner styles */
.spinner-border {
    width: 2.5rem;
    height: 2.5rem;
}

/* Alert styles */
.alert {
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: linear-gradient(to right, #e3f2fd, #bbdefb);
    border: 1px solid #90caf9;
    color: #1976d2;
    text-decoration: none;
    white-space: nowrap;
}

.pdf-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.15);
    background: linear-gradient(to right, #bbdefb, #90caf9);
    color: #1565c0;
    text-decoration: none;
}

.pdf-button i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.no-pdf-text {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.no-pdf-text i {
    margin-right: 0.5rem;
    font-size: 1rem;
    color: #adb5bd;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eef0f2;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: #2c3e50;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.close-button:hover {
    color: #475569;
    background-color: #f1f5f9;
}

/* Form Styles */
.news-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #334155;
    transition: all 0.2s ease;
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-control:hover {
    border-color: #cbd5e1;
    background-color: #fff;
}

.form-control:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #fff;
}

/* Fixed Form Row Styling for Better Alignment */
.form-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1 1;
    margin-bottom: 0;
}

/* Ensure labels are aligned */
.form-row .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    min-height: 20px;
}

/* File input styling improvements */
.form-row input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 42px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-row input[type="file"]:hover {
    border-color: #007bff;
    background-color: #e3f2fd;
}

.form-row input[type="file"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* File input placeholder styling */
.form-row input[type="file"]::-webkit-file-upload-button {
    padding: 6px 12px;
    margin-right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.form-row input[type="file"]::file-selector-button {
    padding: 6px 12px;
    margin-right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-row input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #0056b3;
}

.form-row input[type="file"]::file-selector-button:hover {
    background-color: #0056b3;
}

/* Image preview container in form row */
.form-row .image-preview-container {
    margin-top: 10px;
    text-align: left;
}

.form-row .preview-image {
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Help text styling */
.form-row small.text-muted {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

/* Simple Audience Selection Styles */
.audience-selection-container {
    padding: 10px 0;
}

.audience-checkboxes {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.audience-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audience-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.audience-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 400;
    color: #495057;
    font-size: 14px;
    -webkit-user-select: none;
            user-select: none;
}

.audience-icon {
    font-size: 16px;
}

.audience-text {
    font-size: 14px;
}

.audience-info {
    margin-top: 8px;
    padding-left: 2px;
}

/* Audience Options (Legacy - keeping for backward compatibility) */
.audience-options {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.25rem;
}

.audience-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.audience-option:hover {
    background-color: #f1f5f9;
}

.audience-option input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

/* Preview Image (General) */
.preview-image {
    max-width: 150px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    margin-top: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.image-preview-container {
    margin-top: 10px;
    text-align: center;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f2;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
    background-color: #e2e8f0;
    color: #334155;
}

/* File Input Styling (General) */
input[type="file"] {
    padding: 0.35rem;
    font-size: 0.875rem;
    color: #475569;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="file"]:hover {
    border-color: #94a3b8;
    background-color: #f1f5f9;
}

/* Scrollbar Styling */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .all-news-cards {
        grid-template-columns: 1fr;
    }
    
    .news-card {
        margin: 0 1rem;
    }

    .all-news {
        padding: 0 0.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 0.75rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-text {
        font-size: 0.85rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-row .form-group {
        margin-bottom: 20px;
    }
    
    .form-row .form-group:last-child {
        margin-bottom: 0;
    }
    
    .audience-checkboxes {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .audience-checkbox-item {
        gap: 10px;
    }

    .modal-content {
        width: 95%;
        margin: 0.5rem;
        padding: 1rem;
    }

    .audience-options {
        flex-direction: column;
        gap: 0.5rem;
    }

    .audience-option {
        width: 100%;
    }
}
@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: normal;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  -webkit-clip-path: circle(0);
          clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.archived-news-container {
  padding: 15px 30px;
  max-width: 100%;
  margin: 0 auto;
  /* background-color: #f8fafc; */
}

.archived-news-title {
  /* font-size: 2.25rem; */
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2.5rem;
  text-align: center;
  letter-spacing: -0.025em;
}

.archived-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  padding: 1rem;
}

.archived-news-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.archived-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.archived-news-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.archived-news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.archived-news-card:hover .archived-news-image {
  transform: scale(1.1);
}

.archived-news-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.archived-news-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.archived-news-description {
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.archived-news-meta {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.archived-news-badge {
  display: flex;
  align-items: center;
  background-color: #f1f5f9;
  color: #374151;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1;
}

.archived-news-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  color: #6b7280;
}

.archived-news-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archived-news-date-picker-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.archived-news-date-input {
  flex-grow: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #374151;
  background-color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.archived-news-date-input:hover {
  border-color: #9ca3af;
}

.archived-news-date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.archived-news-update-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #3b82f6;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.archived-news-update-button:hover {
  background-color: #2563eb;
}

.archived-news-update-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.archived-news-delete-button {
  padding: 0.5rem;
  background: none!important;
  background-color: none!important;
  /* color: #dc2626!important; */
  /* border: 1px solid #fecaca; */
  /* border-radius: 6px; */
  cursor: pointer;
  /* transition: background-color 0.2s ease; */
}

.archived-news-delete-button:hover {
  background: none!important;
  box-shadow: none!important;
  scale: 1.1;
}

.archived-news-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.archived-news-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin  뭓

  1s linear infinite;
}

.archived-news-empty {
  text-align: center;
  padding: 4rem;
  color: #6b7280;
  font-size: 1.25rem;
  font-weight: 500;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .archived-news-container {
    padding: 1.5rem;
  }

  .archived-news-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .archived-news-title {
    /* font-size: 1.75rem; */
    margin-bottom: 2rem;
  }
}

/* DatePicker custom styles */
.react-datepicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #ffffff;
}

.react-datepicker__header {
  background-color: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0.75rem;
}

.react-datepicker__day--selected {
  background-color: #3b82f6 !important;
  color: white !important;
  border-radius: 4px;
}

.react-datepicker__day:hover {
  background-color: #dbeafe !important;
  border-radius: 4px;
}

.react-datepicker__day--disabled {
  color: #d1d5db !important;
  background-color: #f3f4f6 !important;
}
.react-calendar {
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: 'Arial', 'Helvetica', sans-serif;
  line-height: 1.125em;
}

.react-calendar--doubleView {
  width: 700px;
}

.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -0.5em;
}

.react-calendar--doubleView .react-calendar__viewContainer > * {
  width: 50%;
  margin: 0.5em;
}

.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  box-sizing: border-box;
}

.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}

.react-calendar button:enabled:hover {
  cursor: pointer;
}

.react-calendar__navigation {
  display: flex;
  height: 44px;
  margin-bottom: 1em;
}

.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}

.react-calendar__navigation button:disabled {
  background-color: #f0f0f0;
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  font-size: 0.75em;
  font-weight: bold;
}

.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.75em;
  font-weight: bold;
}

.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}

.react-calendar__month-view__days__day--neighboringMonth,
.react-calendar__decade-view__years__year--neighboringDecade,
.react-calendar__century-view__decades__decade--neighboringCentury {
  color: #757575;
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}

.react-calendar__tile {
  max-width: 100%;
  padding: 10px 6.6667px;
  background: none;
  text-align: center;
  font: inherit;
  font-size: 0.833em;
}

.react-calendar__tile:disabled {
  background-color: #f0f0f0;
  color: #ababab;
}

.react-calendar__month-view__days__day--neighboringMonth:disabled,
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
  color: #cdcdcd;
}

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__tile--now {
  background: #ffff76;
}

.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
  background: #ffffa9;
}

.react-calendar__tile--hasActive {
  background: #76baff;
}

.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}

.react-calendar__tile--active {
  background: #006edc;
  color: white;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}

.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}

/* Custom Calendar Styles for EditEventForm */
.custom-calendar {
  width: 100% !important;
  border: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.custom-calendar .react-calendar__navigation {
  display: flex;
  height: 44px;
  margin-bottom: 1em;
}

.custom-calendar .react-calendar__navigation button {
  min-width: 44px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  cursor: pointer;
  padding: 0 8px;
}

.custom-calendar .react-calendar__navigation button:hover {
  background-color: #f0f8ff;
  border-radius: 4px;
}

.custom-calendar .react-calendar__navigation button:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.custom-calendar .react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
  color: #666;
}

.custom-calendar .react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}

.custom-calendar .react-calendar__month-view__days__day {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
  color: #333;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.custom-calendar .react-calendar__month-view__days__day:hover {
  background-color: #f0f8ff;
}

.custom-calendar .react-calendar__month-view__days__day--neighboringMonth {
  color: #d9d9d9;
}

.custom-calendar .react-calendar__tile--now {
  background: #fff2e8;
  color: #fa8c16;
  font-weight: 600;
}

.custom-calendar .react-calendar__tile--active {
  background: #1890ff !important;
  color: white !important;
  font-weight: 600;
}

.custom-calendar .react-calendar__tile--range-start {
  background: #1890ff !important;
  color: white !important;
  border-radius: 4px 0 0 4px !important;
  font-weight: 600;
}

.custom-calendar .react-calendar__tile--range-end {
  background: #1890ff !important;
  color: white !important;
  border-radius: 0 4px 4px 0 !important;
  font-weight: 600;
}

.custom-calendar .react-calendar__tile--range-between {
  background: #e6f7ff !important;
  color: #1890ff !important;
  border-radius: 0 !important;
}

.custom-calendar .react-calendar__tile--hasActive {
  background: #1890ff;
  color: white;
}

.custom-calendar .react-calendar__tile--hasActive:hover {
  background: #40a9ff;
}

/* Disabled dates */
.custom-calendar .react-calendar__month-view__days__day:disabled {
  background-color: #f5f5f5;
  color: #d9d9d9;
  cursor: not-allowed;
}

.custom-calendar .react-calendar__month-view__days__day:disabled:hover {
  background-color: #f5f5f5;
}

/* Range selection styles */
.custom-calendar .react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6f7ff;
}

/* Main theme colors */
:root {
  --primary-color: #f37446; /* Orange - primary brand color */
  --secondary-color: #2ec4b6; /* Teal - secondary brand color */
  --accent-color: #ff9f1c; /* Yellow - accent color */
  --text-color: #333333; /* Dark gray for text */
  --light-bg: #f8f9fa; /* Light background */
  --card-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  --success-color: #52c41a; /* Green for success states */
  --warning-color: #faad14; /* Yellow for warnings */
  --error-color: #f5222d; /* Red for errors */
  --border-radius: 8px; /* Consistent border radius */
}

/* Main container styling */
.admin-events-container {
  padding: 24px;
  background-color: #f8f9fa;
  background-color: var(--light-bg);
  min-height: calc(100vh - 64px); /* Full height minus header */
}

/* Card styling with enhanced shadows and borders */
.admin-events-card {
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  box-shadow: var(--card-shadow);
  background-color: white;
  border: none;
  overflow: hidden;
}

/* Header styling with gradient background */
.admin-events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-events-header h4 {
  color: #f37446;
  color: var(--primary-color);
  font-weight: 600;
  margin: 0;
}

/* Create event button styling */
.create-event-btn {
  background-color: #f37446;
  background-color: var(--primary-color);
  border-color: #f37446;
  border-color: var(--primary-color);
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  transition: all 0.3s ease;
}

.create-event-btn:hover, 
.create-event-btn:focus {
  background-color: #ff8255; /* Lighter shade of primary */
  border-color: #ff8255;
  transform: translateY(-1px);
}

/* Events list card styling */
.events-list-card {
  margin-bottom: 24px;
  border-radius: 8px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.events-list-card .ant-card-head {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.events-list-card .ant-card-head-title {
  color: #333333;
  color: var(--text-color);
  font-weight: 600;
}

/* Loading container */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

/* Table styling */
.events-table .ant-table-thead > tr > th {
  background-color: #fafafa;
  color: #333333;
  color: var(--text-color);
  font-weight: 600;
}

.events-table .ant-table-tbody > tr:hover > td {
  background-color: rgba(255, 107, 53, 0.05); /* Very light primary color */
}

/* View details button */
.view-details-btn {
  color: #2ec4b6;
  color: var(--secondary-color);
  padding: 0;
  transition: all 0.3s ease;
}

.view-details-btn:hover {
  color: #3ad8c9; /* Lighter shade of secondary */
  transform: translateX(2px);
}

/* Edit button */
.edit-event-btn {
  color: #ff9f1c;
  color: var(--accent-color);
  padding: 0;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.edit-event-btn:hover {
  color: #ffb74d; /* Lighter shade of accent */
}

/* Food truck filter */
.food-truck-filter {
  display: flex;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Food trucks grid */
.admin-food-trucks-grid {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Food truck card styling */
.food-truck-card {
  transition: all 0.3s ease;
  overflow: hidden;
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.food-truck-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.food-truck-card.selected {
  border: 2px solid #f37446;
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
}

.food-truck-card-image {
  height: 160px;
  overflow: hidden;
  position: relative;
  border-top-left-radius: 8px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: 8px;
  border-top-right-radius: var(--border-radius);
}

.food-truck-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(24, 144, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.selected-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.food-truck-cuisines {
  margin-bottom: 8px;
}

.food-truck-vendor {
  font-size: 12px;
  color: #666;
}

.event-details-container {
  padding: 16px;
}

.event-time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.event-time-slot {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
  min-width: 150px;
}

.event-day {
  font-weight: bold;
  margin-bottom: 4px;
}

.event-date {
  color: #666;
  font-size: 12px;
  margin-bottom: 8px;
}

.event-times {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-time {
  font-size: 13px;
}

.participating-trucks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Event details modal styling - Mind-blowing design */
.event-details-modal .ant-modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.08);
  border: none;
  transform: translateZ(0);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.98);
}

.event-details-modal .ant-modal-header {
  background: linear-gradient(135deg, #f37446 0%, #ff8255 100%);
  background: linear-gradient(135deg, var(--primary-color) 0%, #ff8255 100%);
  border-bottom: none;
  padding: 20px 30px;
  position: relative;
}

.event-details-modal .ant-modal-title {
  color: white !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.event-details-modal .ant-modal-close {
  color: white;
}

.event-details-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-details-actions {
  display: flex;
  gap: 12px;
}

.edit-event-btn {
  background: white !important;
  color: #f37446 !important;
  color: var(--primary-color) !important;
  border: none !important;
  border-radius: 50px !important;
  height: 40px;
  padding: 0 25px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  display: flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.edit-event-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.edit-event-btn .anticon {
  margin-right: 8px;
  font-size: 16px;
}

.event-details-container {
  padding: 30px;
}

.event-info-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: none;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
}

.event-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #f37446, #ff9f1c);
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.event-info-card h3 {
  color: #1a2b49;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 15px;
}

.event-info-card h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background-color: #f37446;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.detail-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.detail-icon {
  font-size: 24px;
  color: #f37446;
  color: var(--primary-color);
  margin-right: 16px;
  margin-top: 4px;
  background: rgba(255, 107, 53, 0.1);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.detail-item strong {
  display: block;
  color: #1a2b49;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.event-description {
  padding: 24px;
  background-color: white;
  border-radius: 12px;
  color: #495057;
  line-height: 1.8;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.event-description::before {
  content: '"';
  position: absolute;
  top: -15px;
  left: 10px;
  font-size: 120px;
  color: rgba(255, 107, 53, 0.1);
  font-family: Georgia, serif;
}

/* Food trucks section */
.food-trucks-card {
  border-radius: 16px;
  overflow: hidden;
  margin-top: 30px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.food-trucks-card .ant-card-head {
  background: linear-gradient(135deg, #2ec4b6 0%, #3ad8c9 100%);
  background: linear-gradient(135deg, var(--secondary-color) 0%, #3ad8c9 100%);
  border-bottom: none;
  padding: 16px 24px;
}

.food-trucks-card .ant-card-head-title h4 {
  color: white !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.food-trucks-card .ant-card-body {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.event-food-truck-card {
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
  background: white;
}

.event-food-truck-card.selected {
  border: 2px solid #f37446;
  border: 2px solid var(--primary-color);
  box-shadow: 0 8px 25px rgba(243, 116, 70, 0.25);
}

.event-food-truck-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-food-truck-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f37446, #ff9f1c);
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}

.event-food-truck-card:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.truck-card-content {
  display: flex;
  align-items: center;
  padding: 16px;
}

.truck-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  position: relative;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.truck-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2ec4b6 0%, #1a9085 100%);
  background: linear-gradient(135deg, var(--secondary-color) 0%, #1a9085 100%);
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.placeholder-logo span {
  text-transform: uppercase;
}

.event-food-truck-card:hover .truck-logo {
  transform: scale(1.1) rotate(5deg);
}

.truck-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.event-food-truck-card:hover .truck-logo img {
  transform: scale(1.15);
}

.truck-info {
  flex: 1 1;
}

.truck-info strong {
  font-size: 18px;
  color: #1a2b49;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.event-food-truck-card:hover .truck-info strong {
  color: #f37446;
  color: var(--primary-color);
}

.truck-cuisine {
  color: #f37446;
  color: var(--primary-color);
  font-size: 14px;
  margin-top: 4px;
  font-weight: 500;
  display: inline-block;
  padding: 4px 10px;
  background-color: rgba(255, 107, 53, 0.1);
  border-radius: 20px;
}

.truck-vendor {
  color: #6c757d;
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.truck-vendor::before {
  content: '•';
  margin-right: 5px;
  color: #ff9f1c;
  color: var(--accent-color);
  font-size: 18px;
}

/* Event editing form */
.event-edit-container {
  padding: 24px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Food truck selection in edit mode */
.food-truck-selection {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
}

.food-truck-selection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2ec4b6, #ff9f1c);
  background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.food-truck-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.food-truck-selection-header h4 {
  margin: 0;
  color: #1a2b49;
  font-weight: 600;
}

.food-truck-search {
  margin-bottom: 20px;
  position: relative;
}

.food-truck-search .ant-input {
  border-radius: 50px;
  padding-left: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8e8e8;
}

.food-truck-search .ant-input:focus {
  border-color: #2ec4b6;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(46, 196, 182, 0.2);
}

.food-truck-search .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  z-index: 1;
}

.selected-trucks-container {
  margin-top: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-trucks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.selected-trucks-header h5 {
  margin: 0;
  color: #1a2b49;
  font-weight: 600;
}

.selected-truck-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(46, 196, 182, 0.1);
  color: #2ec4b6;
  color: var(--secondary-color);
  border-radius: 50px;
  padding: 6px 12px;
  margin: 0 8px 8px 0;
  font-size: 14px;
  transition: all 0.3s ease;
}

.selected-truck-tag:hover {
  background: rgba(46, 196, 182, 0.2);
}

.selected-truck-tag .anticon {
  margin-left: 6px;
  cursor: pointer;
  font-size: 12px;
}

.add-truck-btn {
  background: #2ec4b6 !important;
  background: var(--secondary-color) !important;
  border-color: #2ec4b6 !important;
  border-color: var(--secondary-color) !important;
  color: white !important;
  border-radius: 50px !important;
  height: 36px;
  padding: 0 20px !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(46, 196, 182, 0.25) !important;
  transition: all 0.3s ease !important;
}

.add-truck-btn:hover {
  background: #26b0a4 !important;
  border-color: #26b0a4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(46, 196, 182, 0.35) !important;
}

.add-truck-btn .anticon {
  margin-right: 6px;
  font-size: 16px;
}

.action-button.delete-button {
  color: #ff4d4f !important;
  opacity: 1 !important;
}

/* Filter Card Styling */
.events-filter-card {
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.events-filter-card .ant-card-body {
  padding: 20px;
}

/* Search Input Styling */
.search-input {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
}

.search-input:hover {
  border-color: #f37446;
  border-color: var(--primary-color);
}

.search-input:focus,
.search-input.ant-input-focused {
  border-color: #f37446;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(243, 116, 70, 0.2);
}

/* Filter and Sort Select Styling */
.filter-select .ant-select-selector,
.sort-select .ant-select-selector {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
}

.filter-select:hover .ant-select-selector,
.sort-select:hover .ant-select-selector {
  border-color: #f37446;
  border-color: var(--primary-color);
}

.filter-select.ant-select-focused .ant-select-selector,
.sort-select.ant-select-focused .ant-select-selector {
  border-color: #f37446;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(243, 116, 70, 0.2);
}

/* Filter Stats Styling */
.filter-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stats-tag {
  border-radius: 16px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
}

.search-tag {
  border-radius: 16px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
  color: white;
}

.search-tag .ant-tag-close-icon {
  color: white;
  margin-left: 6px;
}

.search-tag .ant-tag-close-icon:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Events Cards Container */
.events-cards-container {
  padding: 20px 0;
}

/* Empty State Styling */
.events-cards-container .ant-empty {
  margin: 40px 0;
}

.events-cards-container .ant-empty-description {
  color: #8c8c8c;
  font-size: 16px;
}

/* Responsive Filter Design */
@media (max-width: 768px) {
  .events-filter-card .ant-card-body {
    padding: 16px;
  }
  
  .filter-stats {
    justify-content: center;
    margin-top: 8px;
  }
  
  .search-input {
    margin-bottom: 8px;
  }
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-top: 15px;
}

/* Admin Event Card - Exactly like Vendor Calendar */
.admin-event-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-height: 280px;
  cursor: pointer;
}

.admin-event-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.admin-event-card.with-image {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
}

/* Event Image */
.admin-event-card .event-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.admin-event-card .event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.admin-event-card:hover .event-img {
  transform: scale(1.1);
}

/* Content Overlay */
.admin-event-card .event-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Event Content */
.admin-event-card .event-content {
  position: relative;
  z-index: 3;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

/* Remove this rule - all cards should have white text now */

/* Date Badge */
.admin-event-card .event-date-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 8px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: -webkit-fit-content;
  width: fit-content;
}

/* All date badges should have the same style now */

.admin-event-card .event-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 8px;
  opacity: 0.9;
}

.admin-event-card .date-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-event-card .date-text {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Event Title */
.admin-event-card .event-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* All titles should have white text and text shadow now */

/* Event Description */
.admin-event-card .event-description {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.9;
}

/* All descriptions should have white text now */

/* Event Location */
.admin-event-card .event-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.8;
}

/* All locations should have white text now */

/* Event URL */
.admin-event-card .event-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.admin-event-card .event-url a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

.admin-event-card .event-url a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* All URLs should have white text now */

/* Action Buttons */
.admin-event-card .event-action-buttons {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.admin-event-card:hover .event-action-buttons {
  opacity: 1;
  transform: translateY(0);
}

.admin-event-card .action-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-event-card .action-button:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.admin-event-card .action-button.delete-button {
  color: #ff4d4f;
}

.admin-event-card .action-button.delete-button:hover {
  background: #ff4d4f;
  color: white;
}

/* Image Upload Section */
.image-upload-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-btn {
  background: linear-gradient(135deg, #f37446 0%, #ff8255 100%);
  background: linear-gradient(135deg, var(--primary-color) 0%, #ff8255 100%);
  border: none;
  color: white;
  border-radius: 8px;
  height: 40px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(243, 116, 70, 0.3);
}

.upload-btn:hover {
  background: linear-gradient(135deg, #ff8255 0%, #f37446 100%);
  background: linear-gradient(135deg, #ff8255 0%, var(--primary-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(243, 116, 70, 0.4);
  color: white;
}

.image-preview-container {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: white;
  padding: 8px;
}

.event-image-preview {
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.remove-image-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 77, 79, 0.9);
  border: none;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s ease;
}

.remove-image-btn:hover {
  background: #ff4d4f;
  transform: scale(1.1);
}

/* Time Slots Styling */
.time-slots-container {
  background-color: #f8f9fa;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 16px;
  border: 1px solid #e9ecef;
}

.time-slots-container .ant-card {
  margin-bottom: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.time-slots-container .ant-card-head {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 16px;
  min-height: auto;
}

.time-slots-container .ant-card-head-title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  color: var(--text-color);
}

.time-slots-container .ant-card-body {
  padding: 12px 16px;
}

.time-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.time-slot-row:last-child {
  margin-bottom: 0;
}

.time-slot-row .ant-picker {
  flex: 1 1;
  max-width: 120px;
}

.time-slot-row span {
  color: #333333;
  color: var(--text-color);
  font-weight: 500;
  font-size: 14px;
}

.time-slot-row .ant-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-slot-row .ant-btn-text.ant-btn-dangerous {
  color: #f5222d;
  color: var(--error-color);
}

.time-slot-row .ant-btn-text.ant-btn-dangerous:hover {
  background-color: rgba(245, 34, 45, 0.1);
  border-color: #f5222d;
  border-color: var(--error-color);
}

/* Add Time Slot Button */
.ant-card-extra .ant-btn-dashed {
  border-color: #f37446;
  border-color: var(--primary-color);
  color: #f37446;
  color: var(--primary-color);
  font-size: 12px;
  height: 28px;
  padding: 0 8px;
}

.ant-card-extra .ant-btn-dashed:hover {
  background-color: rgba(243, 116, 70, 0.1);
  border-color: #f37446;
  border-color: var(--primary-color);
}

/* Copy Time Slots Dropdown */
.time-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.time-slots-header .ant-select {
  min-width: 250px;
}

.time-slots-header .ant-select-selector {
  border-color: #f37446;
  border-color: var(--primary-color);
}

.time-slots-header .ant-select-focused .ant-select-selector {
  border-color: #f37446;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(243, 116, 70, 0.2);
}

/* Empty time slots message */
.ant-typography-caption {
  color: #999;
  font-style: italic;
  font-size: 12px;
}

/* Step Navigation */
.event-form-modal .ant-steps {
  margin-bottom: 24px;
}

.event-form-modal .ant-steps-item-process .ant-steps-item-icon {
  background-color: #f37446;
  background-color: var(--primary-color);
  border-color: #f37446;
  border-color: var(--primary-color);
}

.event-form-modal .ant-steps-item-finish .ant-steps-item-icon {
  background-color: #52c41a;
  background-color: var(--success-color);
  border-color: #52c41a;
  border-color: var(--success-color);
}

/* Event Form Modal Styling */
.event-form-modal {
  top: 20px;
}

.event-form-modal .ant-modal-content {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.event-form-modal .ant-modal-header {
  background: linear-gradient(135deg, #f37446 0%, #ff6b35 100%);
  background: linear-gradient(135deg, var(--primary-color) 0%, #ff6b35 100%);
  border-bottom: none;
  padding: 20px 24px;
}

.event-form-modal .ant-modal-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.event-form-modal .ant-modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.event-form-modal .ant-form-item-label > label {
  font-weight: 600;
  color: #333333;
  color: var(--text-color);
}

.event-form-modal .ant-input,
.event-form-modal .ant-select-selector,
.event-form-modal .ant-picker {
  border-radius: 6px;
  border-color: #d9d9d9;
}

.event-form-modal .ant-input:focus,
.event-form-modal .ant-select-focused .ant-select-selector,
.event-form-modal .ant-picker-focused {
  border-color: #f37446;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(243, 116, 70, 0.2);
}

.event-form-modal .ant-btn-primary {
  background-color: #f37446;
  background-color: var(--primary-color);
  border-color: #f37446;
  border-color: var(--primary-color);
  border-radius: 6px;
  font-weight: 600;
}

.event-form-modal .ant-btn-primary:hover {
  background-color: #e66a3f;
  border-color: #e66a3f;
}

/* Form Steps Content */
.event-form-modal .ant-typography h5 {
  color: #f37446;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 16px;
}

/* Upload Section */
.image-upload-section {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.image-upload-section:hover {
  border-color: #f37446;
  border-color: var(--primary-color);
  background-color: rgba(243, 116, 70, 0.05);
}

.upload-btn {
  border-color: #f37446;
  border-color: var(--primary-color);
  color: #f37446;
  color: var(--primary-color);
}

.upload-btn:hover {
  background-color: #f37446;
  background-color: var(--primary-color);
  color: white;
}

.image-preview-container {
  margin-top: 16px;
  position: relative;
  display: inline-block;
}

.event-image-preview {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Map Container */
#admin-event-map {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .admin-event-card {
    min-height: 240px;
  }
  
  .admin-event-card .event-content {
    padding: 20px;
  }
  
  .admin-event-card .event-title {
    font-size: 18px;
  }
  
  .image-preview-container {
    width: 100%;
  }
  
  .event-image-preview {
    width: 100%;
    max-width: 200px;
  }
}

/* Admin Event Card - Exact Copy from Vendor Calendar */
.admin-event-card {
  background-color: rgb(245, 242, 242);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 0;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: visible;
  min-height: 250px;
  height: auto;
}

.admin-event-card.with-image {
  background-position: 50% 50%;
  background-size: cover;
  height: 250px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.admin-event-card.with-image .event-image-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  transition: transform 0.3s ease;
}

.admin-event-card:hover .event-image-background {
  transform: none;
}

.admin-event-card .overlap-group {
  height: 180px;
  position: relative;
  top: 79px;
}

.admin-event-card .event-content-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0px 0px 10px 10px;
  height: 180px;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

.admin-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.admin-event-card.upcoming-event {
  border-left: 4px solid #FF8C00;
  background: linear-gradient(to right, rgba(255, 140, 0, 0.05), transparent 20%);
}

.admin-event-card.past-event {
  border-left: 4px solid #9e9e9e;
  background: linear-gradient(to right, rgba(158, 158, 158, 0.05), transparent 20%);
}

/* Heading Container */
.heading {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  left: 0;
  padding: 8px;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100%;
}

.frame {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  position: relative;
}

.event-date-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  z-index: 3;
}

.event-date-badge .event-label {
  background-color: #F4A300;
  color: white;
  border-radius: 30px;
  padding: 4px 8px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  display: inline-block;
}

.like {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3.5px;
  position: relative;
}

.element-sep {
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-top: -0.6px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content;
}

/* Event Title */
.admin-event-card.with-image .event-title,
.admin-event-card .event-title {
  color: white;
  font-family: inherit;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  position: relative;
  width: 212.26px;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.admin-event-card:not(.with-image) .event-title {
  color: #333;
  text-shadow: none;
  font-weight: bold;
  margin-right: 10px;
  flex: 1 1;
  text-align: left;
  font-size: 16px;
  line-height: 1.3;
}

/* Event Description */
.admin-event-card.with-image .event-description {
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  width: 100%;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.admin-event-card:not(.with-image) .event-description {
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
  line-height: 1.4;
  color: #666;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  display: block;
  width: 100%;
}

/* Event Details */
.admin-event-card.with-image .event-details {
  margin-bottom: 15px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.9);
}

.admin-event-card:not(.with-image) .event-details {
  margin-bottom: 15px;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
}

.admin-event-card.with-image .event-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.admin-event-card:not(.with-image) .event-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.admin-event-card .event-link {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

.admin-event-card .event-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Action Buttons */
.admin-event-card .event-action-buttons {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 4;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.admin-event-card:hover .event-action-buttons {
  opacity: 1;
  transform: translateY(0);
}

.admin-event-card .action-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-event-card .action-button:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.admin-event-card .action-button.delete-btn {
  color: #ff4d4f;
}

.admin-event-card .action-button.delete-btn:hover {
  background: #ff4d4f;
  color: white;
}

/* Cards without images fallback */
.admin-event-card:not(.with-image) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.admin-event-card:not(.with-image) .heading {
  position: static;
  padding: 20px;
}

.admin-event-card:not(.with-image) .event-title {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-event-card:not(.with-image) .event-description {
  color: rgba(255, 255, 255, 0.9);
}

.admin-event-card:not(.with-image) .event-details {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}

.admin-event-card:not(.with-image) .event-detail {
  color: rgba(255, 255, 255, 0.9);
}

.admin-event-card:not(.with-image) .event-date-badge .element-sep {
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-event-card {
    min-height: 220px;
  }
  
  .admin-event-card .heading {
    padding: 6px;
  }
  
  .admin-event-card .event-title {
    font-size: 16px;
    width: auto;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.admin-faq-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.admin-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-faq-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-faq-save-order-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #2563eb;
  background-color: #eff6ff;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-faq-save-order-button:hover:not(:disabled) {
  background-color: #2563eb;
  color: #fff;
}

.admin-faq-save-order-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-faq-drag-handle {
  font-size: 24px;
  padding: 2px;
  color: inherit;
  transition: color 0.2s ease;
}

.admin-faq-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.admin-faq-add-button {
  display: flex;
  align-items: center;
  background-color: #2563eb;
  color: #ffffff;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.admin-faq-add-button:hover {
  background-color: #1e40af;
}

.admin-faq-add-icon {
  margin-right: 8px;
  font-size: 14px;
}

/* Drag-and-drop list (replaces table for reliable reorder) */
.admin-faq-dnd-container {
  overflow: visible;
}

.admin-faq-list-header {
  display: grid;
  grid-template-columns: 52px 80px 1fr 70px 90px 120px 100px;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background-color: #f9fafb;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  border-radius: 10px 10px 0 0;
  border: 1px solid #e5e7eb;
  border-bottom: none;
}

.admin-faq-droppable {
  border: 1px solid #e5e7eb;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.admin-faq-list-row {
  display: grid;
  grid-template-columns: 52px 80px 1fr 70px 90px 120px 100px;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background-color: #fff;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.admin-faq-list-row:last-child {
  border-bottom: none;
}

.admin-faq-list-row:hover {
  background-color: #f9fafb;
}

.admin-faq-col-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin: -0.25rem 0;
  color: #9ca3af;
  cursor: grab;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: background 0.2s ease, color 0.2s ease;
}

.admin-faq-col-drag:hover {
  background: #edf2f7;
  color: #4a5568;
}

.admin-faq-col-drag:active {
  cursor: grabbing;
}

.admin-faq-col-icon {
  display: flex;
  align-items: center;
  padding-right: 4px;
}

.admin-faq-col-name {
  font-weight: 500;
  color: #111827;
}

.admin-faq-col-position {
  color: #6b7280;
}

.admin-faq-col-actions {
  display: flex;
  gap: 6px;
}

/* Clone rendered in portal (body) – follows cursor; no transform so library can position it */
.admin-faq-row-clone {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  cursor: grabbing;
}

.admin-faq-table-container {
  overflow-x: auto;
}

.admin-faq-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.admin-faq-table th,
.admin-faq-table td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: left;
  font-size: 14px;
}

.admin-faq-table th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
}

.admin-faq-table td {
  vertical-align: middle;
}

.admin-faq-table tr:hover {
  background-color: #f3f4f6;
}

/* Action Buttons */
.admin-faq-action-button {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.admin-faq-action-button.edit {
  background-color: #e0f2fe;
  color: #0369a1;
}

.admin-faq-action-button.edit:hover {
  background-color: #bae6fd;
}

.admin-faq-action-button.delete {
  background-color: #fee2e2;
  color: #b91c1c;
}

.admin-faq-action-button.delete:hover {
  background-color: #fecaca;
}

/* Modal Styles */
.admin-faq-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-faq-modal-content {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.admin-faq-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 20px;
}

.admin-faq-modal-input,
select.admin-faq-modal-input {
  width: 100%!important;
  padding: 10px 12px!important;
  margin-bottom: 15px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.admin-faq-modal-input:focus,
select.admin-faq-modal-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.admin-faq-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.admin-faq-modal-save-button,
.admin-faq-modal-cancel-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.admin-faq-modal-save-button {
  background-color: #2563eb;
  color: #ffffff;
}

.admin-faq-modal-save-button:hover {
  background-color: #1d4ed8;
}

.admin-faq-modal-cancel-button {
  background-color: #e5e7eb;
  color: #1f2937;
}

.admin-faq-modal-cancel-button:hover {
  background-color: #d1d5db;
}

/* Status Badge */
.admin-faq-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-faq-status-badge.Active{
  background-color: #d1fae5;
  color: #065f46;
}

.admin-faq-status-badge.Inactive {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Icon Styling */
.admin-faq-icon {
  font-size: 18px;
  vertical-align: middle;
  color: #4b5563;
}

.admin-faq-icon-placeholder {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}


/* added emoji icon styles */
.admin-faq-emoji-icon {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-faq-modal-preview {
  margin: 10px 0;
  padding: 8px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-faq-icon-placeholder {
  color: #999;
  font-style: italic;
  font-size: 0.9rem;
}

/* Optional: Make emojis in the table slightly larger and centered */
td .admin-faq-emoji-icon {
  font-size: 28px;
  display: block;
  text-align: center;
}

.admin-faq-audience-checkboxes {
  display: flex;
  gap: 20px;
  margin: 15px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.admin-faq-audience-checkboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #495057;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background-color: white;
  border: 1px solid #dee2e6;
  flex: 1 1;
  justify-content: center;
}

.admin-faq-audience-checkboxes label:hover {
  background-color: #f1f3f5;
  border-color: #ced4da;
}

.admin-faq-audience-checkboxes label.active {
  background-color: #f4a300;
  border-color: #f4a300;
  color: white;
}

.admin-faq-audience-checkboxes input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-faq-audience-checkboxes label.active input[type="radio"] {
  border-color: white;
}

.admin-faq-audience-checkboxes input[type="radio"]:checked {
  background-color: white;
  border-color: white;
}

.admin-faq-audience-checkboxes input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #f4a300;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.admin-faq-audience-checkboxes input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
}

.admin-faq-audience-badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: #f4a300;
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.admin-faq-audience-title {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 10px;
  font-weight: 500;
}

/* Update table cell styling for targeted audience */
.admin-faq-table td:nth-last-child(2) {
  font-size: 13px;
  color: #495057;
}

.admin-faq-table td:nth-last-child(2) span {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin: 2px;
  font-size: 12px;
  color: #495057;
}
/* FAQManager.css */
.faq-container {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 2rem auto;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.faq-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-save-order-btn {
  font-weight: 500;
}

.faq-question-box .accordion-header {
  display: flex;
  align-items: stretch;
}

.faq-question-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  cursor: grab;
  color: #9ca3af;
  border-right: 1px solid #e2e8f0;
  background: #f9fafb;
  transition: background 0.2s ease, color 0.2s ease;
}

.faq-question-drag-handle:active {
  cursor: grabbing;
}

.faq-question-drag-handle:hover {
  background: #edf2f7;
  color: #4a5568;
}

.faq-question-box .accordion-header .accordion-button {
  flex: 1 1;
  border-radius: 0;
}

/* Clone rendered in portal (body) – follows cursor; no transform so library can position it */
.faq-question-clone {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  cursor: grabbing;
}

.faq-header h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a202c;
}

.accordion-button {
  background-color: #f7fafc !important;
  font-weight: 600;
  color: #2d3748;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
  color: #0052cc;
  background-color: #e6f0fa !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 204, 0.25);
  border-color: #0052cc;
}

.accordion-item {
  border: none;
  border-radius: 8px;
  margin-bottom: 1rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.faq-question-box {
  margin: 0.5rem 1rem;
  border: none;
}

.faq-question-box .accordion-button {
  background-color: #f9fafb !important;
  font-weight: 500;
  color: #2d3748;
}

.faq-question-box .accordion-button:not(.collapsed) {
  background-color: #edf2f7 !important;
  color: #1a4971;
}

.faq-question-box .accordion-body {
  padding: 1.5rem;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.answer-text {
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.reference-link-section {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 6px;
  border-left: 4px solid #0052cc;
}

.reference-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.reference-link {
  color: #0052cc;
  text-decoration: none;
  word-break: break-all;
  display: inline-block;
  font-size: 0.875rem;
}

.reference-link:hover {
  color: #003d99;
  text-decoration: underline;
}

.btn-primary {
  background-color: #0052cc;
  border-color: #0052cc;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #003d99;
  border-color: #003d99;
}

.btn-outline-primary {
  border-color: #0052cc;
  color: #0052cc;
}

.btn-outline-primary:hover {
  background-color: #e6f0fa;
  color: #0052cc;
  border:1px solid  #0052cc;
}

.btn-outline-danger {
  border-color: #c53030;
  color: #c53030;
}

.btn-outline-danger:hover {
  background-color: #fef6f5;
  color: #c53030;
  border:1px solid #c53030;
  /* color: ; */
}

.btn-sm {
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
}

.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background-color: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a202c;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body label {
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.modal-body .form-control,
.modal-body .form-select {
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: border-color 0.3s ease;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: #0052cc;
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 204, 0.25);
}

.modal-footer {
  border-top: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
}

.btn-outline-secondary {
  border-color: #718096;
  color: #718096;
}

.btn-outline-secondary:hover {
  background-color: #edf2f7;
}

/* no-categories-message */
.no-categories-message{
  margin: 0;
  text-align: center;
  color: #cccdcc;
  font-weight: 500;
  font-size: 2rem;
}

/* className="admin-faq-icon" */
/* .admin-faq-icon{
  margin: 0;
  font-size: 25px;
  font-weight: bold;
}

.admin-faq-icon.edit-icon{
  color: #4E71FF;
}

.admin-faq-icon.delete-icon{
  color: #AF3E3E;
} */

.status-badge {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-badge.active {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-badge.inactive {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.btn-outline-warning {
  border-color: #d97706;
  color: #d97706;
}

.btn-outline-warning:hover {
  background-color: #fef3c7;
  color: #d97706;
  border: 1px solid #d97706;
}

.btn-outline-success {
  border-color: #059669;
  color: #059669;
}

.btn-outline-success:hover {
  background-color: #d1fae5;
  color: #059669;
  border: 1px solid #059669;
}

/* Image Upload and Preview Styles */
.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 0.75rem;
}

.image-preview-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.image-preview-item:hover {
  border-color: #0052cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
}

.preview-thumbnail {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.image-preview-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview-item:hover .image-preview-overlay {
  opacity: 1;
}

.image-preview-overlay .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
}

.image-name {
  display: block;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
  word-break: break-word;
  background: #ffffff;
}

/* FAQ Images Display in Admin View */
.faq-images-display {
  margin: 1rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.images-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.images-label::before {
  content: '📷';
  margin-right: 0.5rem;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.image-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.image-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-image-thumbnail {
  width: 100%;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.faq-image-thumbnail:hover {
  transform: scale(1.05);
}

/* Form Text Styling */
.form-text.text-muted {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* Answer Text Formatting */
.answer-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}

/* Modal Enhancements */
.modal-dialog {
  max-width: 600px;
}

.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* File Input Styling */
input[type="file"].form-control {
  padding: 0.5rem;
  border: 2px dashed #dee2e6;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

input[type="file"].form-control:hover {
  border-color: #0052cc;
  background: #f0f8ff;
}

input[type="file"].form-control:focus {
  border-color: #0052cc;
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 204, 0.25);
  background: #ffffff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
  }
  
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  
  .faq-image-thumbnail {
    height: 60px;
  }
  
  .preview-thumbnail {
    height: 80px;
  }
  
  .modal-dialog {
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
}
.admin-consumer-list-container {
    padding: 24px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  .admin-consumer-list-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 16px;
  }
  
  .admin-consumer-list-title {
    margin-bottom: 24px !important;
    color: #1a1a1a;
  }
  
  .admin-consumer-list-table {
    margin-top: 16px;
    background-color: #ffffff;
  }
  
  .admin-consumer-list-table .ant-table-thead > tr > th {
    background: #fafafa;
    font-weight: 600;
  }
  
  .admin-consumer-list-table .ant-table-tbody > tr:hover > td {
    background: #f5f5f5;
  }
  
  .admin-consumer-list-name {
    font-weight: 500;
    color: #1a1a1a;
  }
  
  .admin-consumer-list-email {
    color: #1890ff;
  }
  
  .admin-consumer-list-email:hover {
    color: #40a9ff;
    text-decoration: underline;
  }
  
  .admin-consumer-list-vendor-id,
  .admin-consumer-list-user-id,
  .admin-consumer-list-date {
    color: #595959;
  }
  
  .admin-consumer-list-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .admin-consumer-list-status-active {
    background-color: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
  }
  
  .admin-consumer-list-status-deactivated {
    background-color: #fff1f0;
    color: #ff4d4f;
    border: 1px solid #ffa39e;
  }
  
  .admin-consumer-list-action-button {
    margin-right: 8px;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 12px;
  }
  
  .admin-consumer-list-action-button.ant-btn-primary {
    background-color: #1890ff;
    border-color: #1890ff;
  }
  
  .admin-consumer-list-action-button.ant-btn-primary:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
  }
  
  .admin-consumer-list-action-button.ant-btn-danger {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #ffffff;
  }
  
  .admin-consumer-list-action-button.ant-btn-danger:hover {
    background-color: #ff7875;
    border-color: #ff7875;
  }
  
  .admin-consumer-list-delete-button {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #ffffff;
  }
  
  .admin-consumer-list-delete-button:hover {
    background-color: #ff7875;
    border-color: #ff7875;
  }
  
  .admin-consumer-list-modal .ant-modal-header {
    padding: 16px 24px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
  }
  
  .admin-consumer-list-modal .ant-modal-title {
    font-weight: 600;
    color: #1a1a1a;
  }
  
  .admin-consumer-list-modal .ant-descriptions-item-label {
    font-weight: 500;
    color: #595959;
    background-color: #f5f7fa;
  }
  
  .admin-consumer-list-modal .ant-descriptions-item-content {
    color: #1a1a1a;
  }
  
  /* Modal Styles */
  .admin-consumer-list-modal .ant-modal-content {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .admin-consumer-list-modal .ant-modal-body {
    padding: 0;
    height: 600px;
  }
  
  .update-details-layout {
    height: 100%;
    background: #fff;
    padding: 10px;
  }
  
  .update-details-sider {
    background: #fff;
    border-right: 1px solid #f0f0f0;
  }
  
  .update-details-sider .ant-menu {
    border-right: none;
  }
  
  .update-details-sider .ant-menu-item {
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0 24px !important;
  }
  
  .update-details-sider .ant-menu-item-selected {
    background: #f5f5f5;
  }
  
  .update-details-content {
    padding: 0px 15px;
    overflow-y: auto;
    height: 100%;
  }
  
  .update-details-content::-webkit-scrollbar{
    display: none;
  }
  
  .update-details-section {
    max-width: 100%;
    /* border: 1px solid; */
  }
  
  .update-form {
    max-width: 100%;
    /* border: 1px solid; */
  }
  
  .form-section {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
  }
  
  .form-section:first-child {
    margin-top: 20px;
  }
  
  .form-section:last-child {
    margin-bottom: 20px;
  }
  
  .form-section .ant-typography {
    margin-bottom: 24px;
    color: #1a1a1a;
  }
  
  .update-input {
    width: 100%!important;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
  }
  
  .grid-item {
    width: 100%;
  }
  
  .update-form-buttons {
    margin-top: 24px;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
  }
  .consumer-update-modal-profile-btn{
    margin-right: 20px;
  }
  
  .update-form-buttons .ant-btn {
    min-width: 100px;
  }
  
  .password-form {
    margin-top: 24px;
  }
  
  .password-form .ant-form-item {
    margin-bottom: 24px;
  }
  
  .password-form .ant-form-item:last-child {
    margin-bottom: 0;
  }
  
  .mobile-verification-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
  }
  
  .mobile-input {
    flex: 1 1;
    max-width: 300px;
  }
  .issue-new-pass-otp
  {
    max-width: 100%!important;
  }
  .send-otp-button {
    min-width: 120px;
  }
  
  .verification-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
  }
  
  .verify-button {
    width: 100%;
  }
  
  /* Consumer View Modal Styles */
  .consumer-view-modal .ant-modal-content {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .consumer-view-modal .ant-modal-header {
    padding: 16px 24px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
  }
  
  .consumer-view-modal .ant-modal-body {
    padding: 0;
    height: 600px;
  }
  
  .consumer-view-layout {
    height: 100%;
    background: #fff;
    padding: 15px;
  }
  
  .consumer-view-sider {
    background: #fff;
    border-right: 1px solid #f0f0f0;
  }
  
  .consumer-view-sider .ant-menu {
    border-right: none;
  }
  
  .consumer-view-sider .ant-menu-item {
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0 24px !important;
  }
  
  .consumer-view-sider .ant-menu-item-selected {
    background: #f5f5f5;
  }
  
  .consumer-view-content {
    padding: 24px;
    overflow-y: auto;
    height: 100%;
  }
  
  .consumer-view-content::-webkit-scrollbar {
    display: none;
  }
  
  .consumer-view-section {
    max-width: 100%;
    padding: 16px;
  }
  
  .consumer-view-section .ant-typography {
    margin-bottom: 24px !important;
    color: #1a1a1a;
  }
  
  .consumer-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
  }
  
  .consumer-view-grid-item {
    width: 100%;
  }
  
  .consumer-view-info-item {
    margin-bottom: 16px;
  }
  
  .consumer-view-info-item:last-child {
    margin-bottom: 0;
  }
  
  .consumer-view-info-label {
    color: #8c8c8c;
    margin-bottom: 4px;
  }
  
  .consumer-view-info-value {
    color: #262626;
    font-weight: 500;
  }
  
  .consumer-view-business-details-section {
    margin-top: 24px;
    padding: 24px;
    background-color: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }
  
  .consumer-view-get-details-button {
    margin-bottom: 24px;
  }
  
  .consumer-view-business-info {
    margin-top: 24px;
    padding: 16px;
    background: #fafafa;
    border-radius: 4px;
  }
  
  .consumer-view-business-info .ant-typography {
    margin-bottom: 16px !important;
  }
  
  .consumer-view-input-label {
    color: #595959;
    font-weight: 500;
  }
  
  .consumer-view-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
  }
  
  .consumer-view-input:hover {
    border-color: #40a9ff;
  }
  
  .consumer-view-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
  
  .consumer-view-input:disabled {
    background-color: #f5f5f5;
    color: #595959;
    cursor: not-allowed;
  }
  
  .consumer-view-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .consumer-view-status-active {
    background-color: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
  }
  
  .consumer-view-status-deactivated {
    background-color: #fff1f0;
    color: #ff4d4f;
    border: 1px solid #ffa39e;
  }
  
  .consumer-view-table .ant-table-thead > tr > th {
    background: #fafafa;
    font-weight: 600;
  }
  
  .consumer-view-table .ant-table-tbody > tr:hover > td {
    background: #f5f5f5;
  }
  
  .consumer-view-vendor-details-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    justify-content: space-between;
  }
  
  .consumer-view-vendor-details-row .consumer-view-info-item {
    margin-bottom: 0;
    flex-grow: 1;
  }
  
  .consumer-view-get-details-button {
    flex-shrink: 0;
  }
  
  .consumer-view-business-info-section {
    margin-top: 24px;
    padding: 24px;
    background-color: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }
  
  .consumer-view-business-info-section .ant-typography {
    margin-bottom: 24px;
    color: #1a1a1a;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .admin-consumer-list-container {
      padding: 16px;
    }
  
    .admin-consumer-list-title {
      font-size: 20px;
      margin-bottom: 16px;
    }
  
    .admin-consumer-list-table .ant-table-tbody > tr > td {
      font-size: 12px;
    }
  
    .admin-consumer-list-action-button {
      font-size: 10px;
      padding: 2px 8px;
    }
  
    .admin-consumer-list-modal {
      width: 90% !important;
    }
  
    .admin-consumer-list-modal .ant-modal-body {
      height: 500px;
    }
  
    .grid-container {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  
    .form-section {
      padding: 16px;
    }
  
    .update-details-content {
      padding: 16px;
    }
  
    .consumer-view-modal .ant-modal-body {
      height: 500px;
    }
  
    .consumer-view-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  
    .consumer-view-content {
      padding: 16px;
    }
  
    .consumer-view-section {
      padding: 16px;
    }
  
    .consumer-view-business-details-section {
      padding: 16px;
    }
  
    .consumer-view-business-info {
      padding: 16px;
    }
  
    .consumer-view-section .ant-typography,
    .consumer-view-business-info .ant-typography {
      font-size: 18px;
      margin-bottom: 16px !important;
    }
  
    .consumer-view-vendor-details-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 16px;
    }
  
    .consumer-view-vendor-details-row .consumer-view-info-item {
      width: 100%;
    }
  
    .consumer-view-get-details-button {
      width: 100%;
    }
  }
  
  /* Table ID Badge Styles */
  .table-id-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  
  .table-id-badge.user-id {
    background-color: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.2);
  }
  
  .table-id-badge.vendor-id {
    background-color: rgba(156, 39, 176, 0.1);
    color: #7b1fa2 !important;
    border: 1px solid rgba(156, 39, 176, 0.2);
  }
  
  .table-id-badge .badge-icon {
    font-size: 14px;
  }
  
  .table-id-badge .badge-text {
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 0.5px;
  }
  
  .consumer-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .consumer-status-badge.status-active {
    background-color: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
  }
  
  .consumer-status-badge.status-pending {
    background-color: #fffbe6;
    color: #faad14;
    border: 1px solid #ffe58f;
  }
  
  .consumer-status-badge.status-flagged {
    background-color: #fff2e8;
    color: #fa541c;
    border: 1px solid #ffbb96;
  }
  
  .consumer-status-badge.status-disabled {
    background-color: #f0f2f5;
    color: #bfbfbf;
    border: 1px solid #d9d9d9;
  }
  
  .consumer-status-badge.status-locked {
    background-color: #f9f0ff;
    color: #722ed1;
    border: 1px solid #d3adf7;
  }
.admin-vendor-list-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.admin-vendor-list-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  padding: 16px;
}

.admin-vendor-list-title {
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 12px;
}

.admin-vendor-list-table {
  background-color: #ffffff;
}

.admin-vendor-list-table .ant-table-thead > tr > th {
  background-color: #fafafa;
  color: #595959;
  font-weight: 600;
  border-bottom: 2px solid #e8e8e8;
}

.admin-vendor-list-table .ant-table-tbody > tr:hover > td {
  background-color: #e6f7ff;
}

.admin-vendor-list-name {
  font-weight: 500;
  color: #1a1a1a;
}

.admin-vendor-list-email {
  color: #1890ff;
  text-decoration: none;
}

.admin-vendor-list-email:hover {
  text-decoration: underline;
}

.admin-vendor-list-phone,
.admin-vendor-list-address {
  color: #595959;
}

.admin-vendor-list-status-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
}

.admin-vendor-list-subscriptions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-vendor-list-subscription-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
}

.admin-vendor-list-action-button {
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 12px;
}

.admin-vendor-list-action-button.ant-btn-primary {
  background-color: #1890ff;
  border-color: #1890ff;
}

.admin-vendor-list-action-button.ant-btn-primary:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.admin-vendor-list-action-button.ant-btn-danger {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: #ffffff;
}

.admin-vendor-list-action-button.ant-btn-danger:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}

.admin-vendor-list-delete-button {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: #ffffff;
}

.admin-vendor-list-delete-button:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}

.admin-vendor-list-modal .ant-modal-header {
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.admin-vendor-list-modal .ant-modal-title {
  font-weight: 600;
  color: #1a1a1a;
}

.admin-vendor-list-modal .ant-descriptions-item-label {
  font-weight: 500;
  color: #595959;
  background-color: #f5f7fa;
}

.admin-vendor-list-modal .ant-descriptions-item-content {
  color: #1a1a1a;
}

.admin-vendor-list-subscription-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.admin-vendor-list-subscription-details .ant-tag {
  margin-right: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .admin-vendor-list-container {
    padding: 16px;
  }

  .admin-vendor-list-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .admin-vendor-list-table .ant-table-tbody > tr > td {
    font-size: 12px;
  }

  .admin-vendor-list-action-button {
    font-size: 10px;
    padding: 2px 8px;
  }

  .admin-vendor-list-modal {
    width: 90% !important;
    border:1px solid orange;
  }

  .admin-vendor-list-subscription-details {
    font-size: 12px;
  }
}

/* Vendor View Modal Layout */
.admin-vendor-list-modal .ant-modal-content {
  height: 650px; /* Adjust height as needed */
  display: flex;
  flex-direction: column;
}

.admin-vendor-list-modal .ant-modal-body {
  flex: 1 1;
  overflow: hidden; /* Hide overflow for the layout */
  padding: 0; /* Remove default padding to allow inner layout to control spacing */
}

.admin-vendor-list-modal .ant-layout {
  height: 100%;
}

.admin-vendor-list-sider {
  background: #ffffff !important; /* Set sidebar background to white */
  border-right: 1px solid #e8e8e8;
}

.admin-vendor-list-sider .ant-menu {
  background: #ffffff !important; /* Set sidebar background to white */
}

.admin-vendor-list-sider .ant-menu-item {
  margin: 0 !important;
  padding: 12px 24px !important;
}

.admin-vendor-list-sider .ant-menu-item-selected {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  /* border-right: 3px solid #1890ff; */
}

.admin-vendor-list-sider .ant-menu-item:hover {
  color: #1890ff !important;
}

.admin-vendor-list-content {
  padding: 24px;
  overflow-y: auto; /* Allow content to scroll if needed */
  background-color: #fff;
}

.vendor-modal-section {
  margin-bottom: 24px;
}

.vendor-modal-section:last-child {
  margin-bottom: 0;
}

/* Onboarding Packet tab: more space and scroll */
.vendor-modal-section.onboarding-packet-content {
  padding: 4px 0;
  min-height: 400px;
}

.vendor-modal-section.onboarding-packet-content .ant-card {
  border-radius: 8px;
}

.vendor-modal-section.onboarding-packet-content .ant-card-head {
  font-weight: 600;
}

.vendor-subscription-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: none;
}

.vendor-subscription-card .ant-card-head {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
}

.vendor-subscription-card .ant-card-head-title {
  font-weight: 500;
  color: #333;
}

/* Custom Badge Styling */
.custom-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
}

.custom-badge .anticon {
  margin-right: 5px;
}

.custom-badge.status-active {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.custom-badge.status-pending {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.custom-badge.status-flagged {
  background-color: #fff2e8;
  color: #fa541c;
  border: 1px solid #ffbb96;
}

.custom-badge.status-disabled {
  background-color: #f0f2f5;
  color: #bfbfbf;
  border: 1px solid #d9d9d9;
}

.custom-badge.status-locked {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.custom-badge.status-trial {
  background-color: #e6f7ff;
  color: #1890ff;
}

.vendor-details-card {
  margin-top: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vendor-details-card .ant-card-body {
  padding: 16px;
}

/* Responsive adjustments for the new grid layout */
@media (max-width: 768px) {
  .vendor-modal-section .ant-row {
    flex-direction: column;
  }
  .vendor-modal-section .ant-col {
    width: 100% !important;
  }
}

.detail-item-header {
  display: flex;
  align-items: center;
}

.detail-item-header .detail-icon {
  margin-right: 8px;
  color: #1890ff;
}

.update-modal-detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.update-modal-item-icon-wrapper {
  margin-right: 15px;
  padding-top: 5px; /* Adjust as needed for vertical alignment */
}

.update-modal-item-icon-wrapper .detail-icon {
  font-size: 24px;
  color: #faad14; /* Example color, can be adjusted */
}

.update-modal-item-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.update-modal-item-label {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.update-modal-item-value {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

/* Ensure the custom-badge inside update modal aligns properly */
.update-modal-item-value .custom-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 5px; /* Already set, but explicit for clarity */
}

.vendor-modal-section h4 {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
}

.vendor-details-card {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  margin-bottom: 20px;
}

.admin-vendor-id-badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e6f7ff; /* Light blue, similar to Ant Design primary color light version */
  color: #1890ff; /* Ant Design primary blue */
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #91d5ff;
}
.admin-truck-container {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
}

.admin-truck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-truck-header h2 {
  color: #333;
  margin: 0;
}

.admin-truck-table-container {
  overflow-x: auto;
}

.admin-truck-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-truck-table th,
.admin-truck-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.admin-truck-table th {
  background-color: #fafafa;
  font-weight: 600;
  color: #495057;
}

.admin-truck-table tr:hover {
  background-color: #f5f5f5;
}

.admin-truck-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-block;
}

.admin-truck-badge-active {
  background-color: #e3fcef;
  color: #00a854;
}

.admin-truck-badge-inactive {
  background-color: #fff1f0;
  color: #f5222d;
}

.admin-truck-view-btn {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
}

.admin-truck-view-btn:hover {
  background: rgba(24, 144, 255, 0.1);
}

/* Modal Styles */
.admin-truck-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.admin-truck-modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-truck-modal .ant-modal-content {
  border-radius: 8px;
}

.admin-truck-modal .ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.admin-truck-modal .ant-modal-body {
  padding: 24px;
}

.admin-truck-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-truck-modal-header h3 {
  margin: 0;
  color: #333;
}

.admin-truck-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.admin-truck-modal-close:hover {
  color: #666;
}

.admin-truck-detail-section {
  margin-bottom: 24px;
}

.admin-truck-detail-section:last-child {
  margin-bottom: 0;
}

.admin-truck-detail-section .ant-card-head {
  border-bottom: 2px solid #f0f0f0;
  padding: 0 16px;
}

.admin-truck-detail-section .ant-card-head-title {
  font-size: 16px;
  font-weight: 500;
}

.admin-truck-menu-category {
  margin-bottom: 16px;
}

.admin-truck-menu-category:last-child {
  margin-bottom: 0;
}

.admin-truck-menu-category .ant-card-head {
  background-color: #fafafa;
}

.admin-truck-menu-item {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-truck-menu-item:last-child {
  border-bottom: none;
}

.admin-truck-hours-item {
  text-align: center;
}

.admin-truck-hours-item .ant-card-body {
  padding: 12px;
}

/* Loading Spinner */
.admin-truck-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.admin-truck-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .admin-truck-container {
    padding: 16px;
  }

  .admin-truck-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-truck-modal .ant-modal-body {
    padding: 16px;
  }
}

/* Truck View Modal Styles */
.truck-view-modal .ant-modal-content {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.truck-modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.truck-view-modal .ant-modal-body {
  flex: 1 1;
  overflow: hidden;
  padding: 0;
}

.truck-view-layout {
  height: 100%;
  background: #fff;
}

.truck-view-sider {
  background: #fff;
  border-right: 1px solid #f0f0f0;
}

.truck-view-menu {
  height: 100%;
  border-right: none;
}

.truck-view-content {
  padding: 24px;
  overflow-y: auto;
}

.truck-view-section {
  max-width: 800px;
  margin: 0 auto;
}

.truck-view-info-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.truck-view-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.truck-view-info-item .ant-typography {
  margin: 0;
}

.truck-view-social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.truck-view-social-links a {
  color: #1890ff;
  text-decoration: none;
}

.truck-view-social-links a:hover {
  text-decoration: underline;
}

.truck-view-menu-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.truck-view-menu-category {
  height: 100%;
}

.truck-view-menu-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.truck-view-menu-item:last-child {
  border-bottom: none;
}

.truck-view-menu-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.truck-view-cuisine-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.truck-view-hours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.truck-view-hour-item {
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
  text-align: center;
}

/* New style for the View location link */
.truck-view-location-link {
  color: #1890ff; /* Ant Design blue */
  text-decoration: underline;
  cursor: pointer;
}

.truck-view-location-link:hover {
  color: #40a9ff; /* Lighter blue on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .truck-view-modal .ant-modal-content {
    height: 90vh;
  }

  .truck-view-menu-categories {
    grid-template-columns: 1fr;
  }

  .truck-view-hours {
    grid-template-columns: 1fr;
  }
}

/* Truck Profile Grid Styles */
.truck-view-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
  padding: 16px;
}

.truck-view-profile-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  height: 100%;
}

.truck-view-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.truck-view-profile-icon {
  font-size: 20px;
  color: #1890ff;
}

.truck-view-info-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.truck-view-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.truck-view-info-item .ant-typography {
  margin: 0;
}

.truck-view-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.truck-view-social-link {
  color: #1890ff;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(24, 144, 255, 0.1);
  transition: all 0.3s ease;
}

.truck-view-social-link:hover {
  background: rgba(24, 144, 255, 0.2);
  text-decoration: none;
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .truck-view-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* Truck ID Badge Styles */
.truck-view-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: rgba(24, 144, 255, 0.1);
  border: 1px solid rgba(24, 144, 255, 0.2);
  border-radius: 6px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: #1890ff!important;
  transition: all 0.3s ease;
}

.truck-view-id-badge:hover {
  background-color: rgba(24, 144, 255, 0.15);
  border-color: rgba(24, 144, 255, 0.3);
}

.truck-view-id-badge .badge-icon {
  font-size: 14px;
  color: #1890ff!important;
}

.truck-view-id-badge .badge-text {
  letter-spacing: 0.5px;
}

.truck-publish-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}

.truck-publish-status-badge.status-published {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.truck-publish-status-badge.status-pending {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.truck-publish-status-badge.status-unpublished {
  background-color: #f0f2f5;
  color: #bfbfbf;
  border: 1px solid #d9d9d9;
}

/* View Modal */
.truck-view-modal .ant-modal-title {
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   AdminDocument.css — Legal Documents Management Styles
   Uses tokens from theme.css design system
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─── */
.admin-doc-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: var(--font-body);
}

/* ─── Header ─── */
.admin-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.admin-doc-main-title {
    margin-bottom: 4px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--h3-size) !important;
    font-weight: var(--weight-bold) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-doc-main-title .anticon {
    color: var(--color-primary);
}

.admin-doc-refresh-btn {
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.admin-doc-refresh-btn:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ─── Upload Card ─── */
.admin-doc-upload-card {
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(6, 28, 61, 0.06);
    border: 1px solid var(--border-light);
    background: #fff;
}

.admin-doc-upload-card .ant-card-body {
    padding: 24px;
}

.admin-doc-upload-title {
    margin-bottom: 20px !important;
    color: var(--color-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-doc-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 16px;
    gap: 16px;
}

.admin-doc-upload-item {
    background: var(--color-bg-light);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition-medium);
}

.admin-doc-upload-item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.12);
}

.admin-doc-upload-item.uploaded {
    border-color: var(--color-primary);
    border-style: solid;
    background: var(--color-primary-light);
}

.admin-doc-upload-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-doc-upload-item-icon {
    font-size: 28px;
    color: var(--color-negative);
    flex-shrink: 0;
}

.admin-doc-uploaded-tag {
    margin-left: 6px;
    font-size: 11px;
}

.admin-doc-suggested-file {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-family: var(--font-body);
    word-break: break-all;
    line-height: 1.4;
}

.admin-doc-upload-btn {
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    align-self: flex-start;
    transition: var(--transition-fast);
}

.admin-doc-upload-btn.ant-btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.admin-doc-upload-btn.ant-btn-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.35);
}

/* ─── Table Card ─── */
.admin-doc-table-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(6, 28, 61, 0.06);
    border: 1px solid var(--border-light);
    background: #fff;
}

.admin-doc-table-card .ant-card-body {
    padding: 24px;
}

.admin-doc-table-title {
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
}

.admin-doc-table .ant-table-thead>tr>th {
    background: var(--color-navy) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--weight-semibold);
    font-size: var(--h5-size);
    font-family: var(--font-body);
    border-bottom: none;
}

.admin-doc-table .ant-table-thead>tr>th::before {
    display: none !important;
}

.admin-doc-table .ant-table-tbody>tr:nth-child(even) {
    background: var(--color-bg-light);
}

.admin-doc-table .ant-table-tbody>tr:hover>td {
    background: var(--color-primary-light) !important;
}

.admin-doc-table .ant-table-tbody>tr>td {
    border-bottom: 1px solid var(--color-gray-300);
    padding: 14px 16px;
    font-family: var(--font-body);
    color: var(--text-primary);
}

/* ─── Document Name Cell ─── */
.admin-doc-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-doc-pdf-icon {
    font-size: 32px;
    color: var(--color-negative);
    flex-shrink: 0;
}

.admin-doc-title {
    font-size: var(--h5-size);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.admin-doc-filename {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Action Buttons ─── */
.admin-doc-action-btn {
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.admin-doc-view-btn {
    background: var(--color-primary) !important;
    border: none !important;
    color: #fff !important;
}

.admin-doc-view-btn:hover {
    background: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.4) !important;
}

.admin-doc-edit-btn {
    color: var(--color-navy) !important;
    border-color: var(--color-gray-300) !important;
}

.admin-doc-edit-btn:hover {
    background: var(--color-bg-light) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: translateY(-1px);
}

.admin-doc-delete-btn {
    color: var(--color-negative) !important;
    border-color: var(--color-negative) !important;
}

.admin-doc-delete-btn:hover {
    background: #fff0f0 !important;
    transform: translateY(-1px);
}

/* ─── Loading ─── */
.admin-doc-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.admin-doc-loading .ant-spin-dot-item {
    background-color: var(--color-primary);
}

/* ─── View PDF Modal ─── */
.admin-doc-view-modal .ant-modal-content {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-doc-view-modal .ant-modal-header {
    background: var(--color-navy);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 24px;
}

.admin-doc-view-modal .ant-modal-title {
    color: var(--text-inverse) !important;
}

.admin-doc-modal-title {
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--weight-semibold);
    font-family: var(--font-heading);
}

.admin-doc-modal-title .anticon {
    color: var(--color-primary);
}

.admin-doc-view-modal .ant-modal-close {
    color: var(--text-inverse);
}

.admin-doc-view-modal .ant-modal-close:hover {
    color: var(--color-primary);
}

.admin-doc-view-modal .ant-modal-body {
    padding: 0;
}

.admin-doc-pdf-viewer {
    width: 100%;
    height: 80vh;
    background: var(--color-bg-light);
}

.admin-doc-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ─── Edit Modal ─── */
.admin-doc-edit-modal .ant-modal-content {
    border-radius: var(--radius-lg);
}

.admin-doc-edit-modal .ant-btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.admin-doc-edit-modal .ant-btn-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.admin-doc-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.admin-doc-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-doc-edit-field .ant-input {
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-family: var(--font-body);
    border-color: var(--border-light);
}

.admin-doc-edit-field .ant-input:focus,
.admin-doc-edit-field .ant-input:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.15);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .admin-doc-container {
        padding: 16px;
    }

    .admin-doc-header {
        flex-direction: column;
        gap: 12px;
    }

    .admin-doc-upload-grid {
        grid-template-columns: 1fr;
    }

    .admin-doc-pdf-viewer {
        height: 60vh;
    }

    .admin-doc-view-modal {
        width: 95% !important;
    }
}

@media (max-width: 480px) {
    .admin-doc-main-title {
        font-size: var(--h4-size) !important;
    }

    .admin-doc-upload-item {
        padding: 12px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   AdminCoupons.css — Promotional Coupon Management Styles
   Uses tokens from theme.css design system
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─── */
.admin-coupons-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: var(--font-body);
}

/* ─── Header ─── */
.admin-coupons-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-coupons-main-title {
    margin-bottom: 4px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--h3-size) !important;
    font-weight: var(--weight-bold) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-coupons-main-title .anticon {
    color: var(--color-primary);
}

/* ─── Stats Row ─── */
.admin-coupons-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.admin-coupons-stat-card {
    flex: 1 1;
    min-width: 160px;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 12px rgba(6, 28, 61, 0.06) !important;
    border: 1px solid var(--border-light) !important;
    transition: var(--transition-medium);
}

.admin-coupons-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 28, 61, 0.1) !important;
}

.admin-coupons-stat-card .ant-statistic-title {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-coupons-stat-card .ant-statistic-content-value {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

/* ─── Generate Card ─── */
.admin-coupons-generate-card {
    margin-bottom: 24px;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 12px rgba(6, 28, 61, 0.06) !important;
    border: 1px solid var(--border-light) !important;
    background: #fff;
}

.admin-coupons-generate-card .ant-card-body {
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.admin-coupons-generate-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary-light), #FFF8E1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-coupons-generate-icon .anticon {
    font-size: 28px;
    color: var(--color-primary);
}

.admin-coupons-generate-info {
    flex: 1 1;
}

.admin-coupons-generate-info h3 {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.admin-coupons-generate-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-coupons-generate-btn {
    border-radius: var(--radius-md) !important;
    font-weight: var(--weight-bold) !important;
    font-family: var(--font-body) !important;
    height: 44px !important;
    padding: 0 28px !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    box-shadow: 0 3px 10px rgba(244, 163, 0, 0.3);
    transition: var(--transition-fast);
}

.admin-coupons-generate-btn:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(244, 163, 0, 0.4) !important;
}

/* ─── Table Card ─── */
.admin-coupons-table-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 12px rgba(6, 28, 61, 0.06) !important;
    border: 1px solid var(--border-light) !important;
    background: #fff;
}

.admin-coupons-table-card .ant-card-body {
    padding: 24px;
}

.admin-coupons-table-title {
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
}

.admin-coupons-table .ant-table-thead>tr>th {
    background: var(--color-navy) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--weight-semibold);
    font-size: var(--h5-size);
    font-family: var(--font-body);
    border-bottom: none;
}

.admin-coupons-table .ant-table-thead>tr>th::before {
    display: none !important;
}

.admin-coupons-table .ant-table-tbody>tr:nth-child(even) {
    background: var(--color-bg-light);
}

.admin-coupons-table .ant-table-tbody>tr:hover>td {
    background: var(--color-primary-light) !important;
}

.admin-coupons-table .ant-table-tbody>tr>td {
    border-bottom: 1px solid var(--color-gray-300);
    padding: 14px 16px;
    font-family: var(--font-body);
    color: var(--text-primary);
}

/* ─── Coupon Code styling ─── */
.admin-coupons-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--color-navy);
    background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-primary);
    display: inline-block;
    -webkit-user-select: all;
            user-select: all;
    cursor: pointer;
    transition: var(--transition-fast);
}

.admin-coupons-code:hover {
    background: linear-gradient(135deg, #FFF3CD, #FFE082);
    transform: scale(1.02);
}

/* ─── Action Buttons ─── */
.admin-coupons-action-btn {
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-fast) !important;
}

.admin-coupons-send-btn {
    background: var(--color-navy) !important;
    border: none !important;
    color: #fff !important;
}

.admin-coupons-send-btn:hover {
    background: #0d2e5c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 28, 61, 0.3) !important;
}

.admin-coupons-delete-btn {
    color: var(--color-negative) !important;
    border-color: var(--color-negative) !important;
}

.admin-coupons-delete-btn:hover {
    background: #fff0f0 !important;
    transform: translateY(-1px);
}

/* ─── Send Modal ─── */
.admin-coupons-send-modal .ant-modal-content {
    border-radius: var(--radius-lg);
}

.admin-coupons-send-modal .ant-modal-header {
    background: var(--color-navy);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 24px;
}

.admin-coupons-send-modal .ant-modal-title {
    color: var(--text-inverse) !important;
}

.admin-coupons-send-modal .ant-modal-close {
    color: var(--text-inverse);
}

.admin-coupons-send-modal .ant-modal-close:hover {
    color: var(--color-primary);
}

.admin-coupons-send-modal .ant-btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.admin-coupons-send-modal .ant-btn-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.admin-coupons-send-preview {
    background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.admin-coupons-send-preview-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 5px;
    color: var(--color-navy);
}

/* ─── Loading ─── */
.admin-coupons-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.admin-coupons-loading .ant-spin-dot-item {
    background-color: var(--color-primary);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .admin-coupons-container {
        padding: 16px;
    }

    .admin-coupons-header {
        flex-direction: column;
    }

    .admin-coupons-generate-card .ant-card-body {
        flex-direction: column;
        text-align: center;
    }

    .admin-coupons-stats {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .admin-coupons-main-title {
        font-size: var(--h4-size) !important;
    }
}

.admin-subscriptions-container {
    padding: 24px;
    background-color: var(--color-bg-light);
    min-height: 100vh;
}

.admin-subscriptions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.admin-subscriptions-title {
    color: var(--color-navy);
    margin: 0 !important;
    font-family: var(--font-heading);
}

.admin-subscriptions-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-subscriptions-stat-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--transition-fast);
}

.admin-subscriptions-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.admin-subscriptions-actions-card {
    margin-bottom: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-subscriptions-table-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-subscriptions-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.ant-table-wrapper {
    margin-top: 16px;
}

.ant-btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.ant-btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.ant-modal-header {
    background-color: var(--color-navy);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ant-modal-title {
    color: var(--text-inverse) !important;
}

.ant-modal-close {
    color: var(--text-inverse);
}

.ant-modal-close:hover {
    color: var(--color-primary);
}

.ant-form-item-label > label {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.ant-input,
.ant-input-number,
.ant-select-selector {
    border-radius: var(--radius-sm);
    border-color: var(--border-light);
}

.ant-input:focus,
.ant-input-number:focus,
.ant-select-selector:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.1);
}

.ant-switch-checked {
    background-color: var(--color-primary);
}

.ant-tag {
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
}

.ant-divider-horizontal.ant-divider-with-text {
    margin: 24px 0 16px;
}

.ant-divider-inner-text {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ant-statistic-title {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 4px;
}

.ant-statistic-content {
    font-family: var(--font-heading);
}

@media (max-width: 768px) {
    .admin-subscriptions-container {
        padding: 16px;
    }

    .admin-subscriptions-header {
        flex-direction: column;
        gap: 16px;
    }

    .admin-subscriptions-stats {
        grid-template-columns: 1fr;
    }
}

/* InviteAdminForm.css */

.invite-admin-card {
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background-color: #ffffff;
    border: none;
}

.invite-admin-card .ant-card-head {
    background-color: #fafafa;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #f0f0f0;
}

.invite-admin-card .ant-card-head-title {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 600;
}

.invite-form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a1a1a;
}

.title-icon {
    font-size: 20px;
    color: #f4a300;
}

.invite-form-description {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #f4a300;
}

.invite-form-description p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.invite-form {
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.label-icon {
    color: #667eea;
    font-size: 16px;
}

.email-input {
    border-radius: 8px;
    border: 2px solid #e1e5e9;
    transition: all 0.3s ease;
}

.email-input:hover {
    border-color: #f4a300;
}

.email-input:focus,
.email-input.ant-input-focused {
    border-color: #f4a300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.2);
}

.form-actions {
    margin-top: 24px;
}

.invite-button {
    background-color: #f4a300;
    border: none;
    border-radius: 8px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(244, 163, 0, 0.3);
}

.invite-button:hover {
    background-color: #e6930a;
    box-shadow: 0 4px 8px rgba(244, 163, 0, 0.4);
}

.invite-button:active {
    transform: translateY(0);
}

.invite-button.ant-btn-loading {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}

.invite-info {
    margin-top: 24px;
}

.info-alert {
    border-radius: 8px;
    border: 1px solid #bee3f8;
    background-color: #ebf8ff;
}

.info-alert .ant-alert-message {
    color: #2b6cb0;
    font-weight: 600;
}

.info-alert .ant-alert-description {
    color: #2c5282;
}

.info-alert ul {
    margin: 8px 0 0 0;
    padding-left: 16px;
}

.info-alert li {
    margin-bottom: 4px;
    font-size: 13px;
}

/* Success Modal Styles */
.success-modal .ant-modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.success-modal .ant-modal-header {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border-bottom: none;
    padding: 20px 24px;
}

.success-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.success-icon {
    font-size: 24px;
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 60%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(-5px);
    }
}

.success-content {
    padding: 8px 0;
}

.success-message {
    text-align: center;
    margin-bottom: 24px;
}

.success-message p {
    margin-bottom: 12px;
    color: #555;
    font-size: 16px;
}

.invited-email {
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    border: 2px solid #4fd1c7;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #234e52;
    word-break: break-all;
}

.invitation-details {
    background-color: #f7fafc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-item strong {
    color: #2d3748;
    font-weight: 600;
}

.next-steps-alert {
    border-radius: 8px;
    border: 1px solid #c6f6d5;
    background-color: #f0fff4;
}

.next-steps-alert .ant-alert-message {
    color: #22543d;
    font-weight: 600;
}

.next-steps-alert .ant-alert-description {
    color: #276749;
    font-size: 13px;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .invite-admin-card {
        margin: 16px;
        max-width: none;
    }
    
    .invite-form-title {
        font-size: 16px;
    }
    
    .title-icon {
        font-size: 18px;
    }
    
    .invite-button {
        height: 44px;
        font-size: 15px;
    }
    
    .success-modal-title {
        font-size: 16px;
    }
    
    .invited-email {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* Loading State */
.invite-button.ant-btn-loading .ant-btn-loading-icon {
    margin-right: 8px;
}

/* Form Validation States */
.email-input.ant-input-status-error {
    border-color: #f56565;
}

.email-input.ant-input-status-error:focus {
    border-color: #f56565;
    box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.2);
}

/* Hover Effects */
.invite-admin-card:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Focus States for Accessibility */
.invite-button:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.email-input:focus {
    outline: none;
}

/* Animation for form appearance */
.invite-admin-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.admin-list-container {
  padding: 0;
  background-color: transparent;
}

.admin-list-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 16px;
  border: none;
}

.admin-list-title {
  margin-bottom: 24px !important;
  color: #1a1a1a;
  font-weight: 600;
}

.admin-list-table {
  margin-top: 16px;
  background-color: #ffffff;
  min-height: 400px;
}

.admin-list-table .ant-table-thead > tr > th {
  background: #fafafa;
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: 2px solid #f0f0f0;
}

.admin-list-table .ant-table-tbody > tr:hover > td {
  background: #f5f5f5;
}

.admin-list-table .ant-table-tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

/* Horizontal scroll only; avoid overflow:hidden + containment so pagination stays clickable across browsers */
.admin-list-table .ant-table-container {
  overflow-x: auto;
  overflow-y: visible;
}

.admin-list-table .ant-table-body {
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-list-table .ant-table-thead > tr > th,
.admin-list-table .ant-table-tbody > tr > td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cell styling */
.admin-name-cell,
.admin-email-cell,
.admin-phone-cell,
.admin-date-cell,
.admin-login-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-icon {
  color: #1890ff;
  font-size: 14px;
}

.admin-name {
  font-weight: 500;
  color: #1a1a1a;
}

.admin-email {
  color: #1890ff;
  cursor: pointer;
}

.admin-email:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.admin-date {
  color: #595959;
  font-size: 13px;
}

.admin-login-count {
  font-weight: 500;
}

/* Status tags */
.ant-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

/* Action buttons */
.admin-list-table .ant-btn {
  border-radius: 6px;
  font-weight: 500;
}

.admin-list-table .ant-btn-sm {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Modal styling */
.ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.ant-modal-title {
  font-weight: 600;
  color: #1a1a1a;
}

.ant-modal-body {
  padding: 24px;
}

.ant-modal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 16px 24px;
}

/* Responsive design */
@media (max-width: 768px) {
  .admin-list-container {
    padding: 0;
  }
  
  .admin-list-card {
    padding: 12px;
    margin: 0;
  }
  
  .admin-list-title {
    font-size: 18px;
    margin-bottom: 16px !important;
  }
  
  .admin-list-table .ant-table-tbody > tr > td {
    padding: 8px 12px;
  }
  
  .admin-name-cell,
  .admin-email-cell,
  .admin-phone-cell,
  .admin-date-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .admin-icon {
    display: none;
  }
}

/* Table scroll styling */
.admin-list-table .ant-table-body {
  overflow-x: auto;
}

.admin-list-table .ant-table-placeholder {
  padding: 40px 20px;
}

/* Pagination styling */
.admin-list-table .ant-pagination {
  margin-top: 24px;
  text-align: right;
}

.admin-list-table .ant-pagination-total-text {
  color: #595959;
  font-size: 14px;
}

/* Loading state */
.admin-list-table .ant-spin-container {
  min-height: 200px;
}

/* Empty state */
.admin-list-table .ant-empty {
  padding: 40px 20px;
}

.admin-list-table .ant-empty-description {
  color: #8c8c8c;
}

.admin-management-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.admin-tabs-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-tab {
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-tab.active {
  background-color: #f4a300 !important;
  color: white;
  border-color: #f4a300;
}

.admin-tab:hover:not(.active) {
  background-color: #ffe0a1;
}

.admin-tab-content {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* Responsive design */
@media (max-width: 768px) {
  .admin-management-page {
    padding: 16px;
  }
  
  .admin-tabs-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .admin-tab {
    text-align: center;
  }
  
  .admin-tab-content {
    padding: 16px;
  }
}

/* AcceptInvitationPage.css */

.accept-invitation-container {
    min-height: 100vh;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.accept-invitation-card,
.verification-card,
.error-card {
    max-width: 600px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #ffffff;
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header {
    background-color: #fafafa;
    color: #1a1a1a;
    padding: 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: none;
}

.card-header p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.setup-steps {
    margin: 32px 0;
    padding: 0 24px;
}

.setup-steps .ant-steps-item-title {
    font-weight: 600;
    color: #2d3748;
}

.setup-steps .ant-steps-item-description {
    color: #718096;
    font-size: 13px;
}

.setup-steps .ant-steps-item-process .ant-steps-item-icon {
    background-color: #667eea;
    border-color: #667eea;
}

.setup-steps .ant-steps-item-finish .ant-steps-item-icon {
    background-color: #48bb78;
    border-color: #48bb78;
}

.invitation-info {
    margin: 24px;
}

.info-alert {
    border-radius: 8px;
    border: 1px solid #bee3f8;
    background-color: #ebf8ff;
}

.info-alert .ant-alert-message {
    color: #2b6cb0;
    font-weight: 600;
}

.info-alert .ant-alert-description {
    color: #2c5282;
}

.info-alert .ant-alert-description p {
    margin: 4px 0;
}

.setup-form {
    padding: 0 24px 24px;
}

.form-section {
    margin-bottom: 32px;
}

.form-section h4 {
    color: #2d3748;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-item-half {
    flex: 1 1;
}

.setup-form .ant-form-item-label > label {
    font-weight: 600;
    color: #2d3748;
}

.setup-form .ant-input,
.setup-form .ant-input-password {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.setup-form .ant-input:hover,
.setup-form .ant-input-password:hover {
    border-color: #667eea;
}

.setup-form .ant-input:focus,
.setup-form .ant-input-focused,
.setup-form .ant-input-password:focus,
.setup-form .ant-input-password.ant-input-focused {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.password-requirements {
    margin: 24px 0;
}

.password-requirements .ant-alert {
    border-radius: 8px;
    border: 1px solid #fbb6ce;
    background-color: #fed7e2;
}

.password-requirements .ant-alert-message {
    color: #b83280;
    font-weight: 600;
}

.password-requirements .ant-alert-description {
    color: #97266d;
}

.password-requirements ul {
    margin: 8px 0 0 0;
    padding-left: 16px;
}

.password-requirements li {
    margin-bottom: 4px;
    font-size: 13px;
}

.form-actions {
    margin-top: 32px;
}

.setup-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.setup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.setup-button:active {
    transform: translateY(0);
}

.setup-button.ant-btn-loading {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}

/* Success Step */
.success-step {
    padding: 48px 24px;
    text-align: center;
}

.success-content {
    max-width: 400px;
    margin: 0 auto;
}

.success-icon {
    font-size: 64px;
    color: #48bb78;
    margin-bottom: 24px;
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 60%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(-5px);
    }
}

.success-content h3 {
    color: #2d3748;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.success-content p {
    color: #718096;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Verification Loading */
.verification-loading {
    padding: 48px 24px;
    text-align: center;
}

.loading-icon {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.verification-loading h3 {
    color: #2d3748;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.verification-loading p {
    color: #718096;
    font-size: 16px;
}

/* Error Card */
.error-content {
    padding: 48px 24px;
    text-align: center;
}

.error-icon {
    font-size: 64px;
    color: #f56565;
    margin-bottom: 24px;
}

.error-content h3 {
    color: #2d3748;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.error-content p {
    color: #718096;
    font-size: 16px;
    margin-bottom: 24px;
}

.error-content .ant-btn {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    border: none;
    border-radius: 8px;
    height: 40px;
    font-weight: 600;
}

.error-content .ant-btn:hover {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .accept-invitation-container {
        padding: 16px;
    }
    
    .accept-invitation-card,
    .verification-card,
    .error-card {
        max-width: none;
        margin: 0;
    }
    
    .card-header {
        padding: 24px 16px;
    }
    
    .card-header h2 {
        font-size: 24px;
    }
    
    .setup-steps {
        padding: 0 16px;
        margin: 24px 0;
    }
    
    .setup-form {
        padding: 0 16px 16px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-item-half {
        flex: none;
    }
    
    .form-section h4 {
        font-size: 16px;
    }
    
    .setup-button {
        height: 44px;
        font-size: 15px;
    }
    
    .success-icon,
    .error-icon {
        font-size: 48px;
    }
    
    .success-content h3,
    .error-content h3,
    .verification-loading h3 {
        font-size: 20px;
    }
    
    .loading-icon {
        font-size: 36px;
    }
}

/* Focus States for Accessibility */
.setup-button:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.setup-form .ant-input:focus,
.setup-form .ant-input-password:focus {
    outline: none;
}

/* Form Validation States */
.setup-form .ant-form-item-has-error .ant-input,
.setup-form .ant-form-item-has-error .ant-input-password {
    border-color: #f56565;
}

.setup-form .ant-form-item-has-error .ant-input:focus,
.setup-form .ant-form-item-has-error .ant-input-password:focus {
    border-color: #f56565;
    box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.2);
}

/* Steps customization for mobile */
@media (max-width: 576px) {
    .setup-steps .ant-steps-item-title {
        font-size: 14px;
    }
    
    .setup-steps .ant-steps-item-description {
        font-size: 12px;
    }
}

/* VerifyOtpPage.css */

.verify-otp-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.verify-otp-card {
    max-width: 500px;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    color: white;
    padding: 40px 24px;
    text-align: center;
}

.header-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.card-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.card-header p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.verification-content {
    padding: 32px 24px;
}

.email-info {
    margin-bottom: 32px;
}

.email-alert {
    border-radius: 8px;
    border: 1px solid #bee3f8;
    background-color: #ebf8ff;
}

.email-alert .ant-alert-message {
    color: #2b6cb0;
    font-weight: 600;
}

.email-alert .ant-alert-description {
    color: #2c5282;
}

.email-alert .ant-alert-description p {
    margin: 4px 0 12px 0;
}

.email-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    border: 2px solid #4fd1c7;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    color: #234e52;
    word-break: break-all;
}

.email-icon {
    color: #319795;
    font-size: 16px;
    flex-shrink: 0;
}

.otp-section {
    margin-bottom: 32px;
}

.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.otp-input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.otp-input:hover {
    border-color: #4CAF50;
}

.otp-input:focus,
.otp-input.ant-input-focused {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.otp-input.ant-input-disabled {
    background-color: #f7fafc;
    border-color: #e2e8f0;
    color: #a0aec0;
}

.timer-section {
    margin-bottom: 24px;
}

.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #718096;
    font-size: 14px;
    font-weight: 500;
}

.timer-icon {
    color: #4CAF50;
    font-size: 16px;
}

.verify-button {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    border: none;
    border-radius: 8px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.verify-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, #43a047 0%, #7cb342 100%);
}

.verify-button:active {
    transform: translateY(0);
}

.verify-button:disabled {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.verify-button.ant-btn-loading {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}

.resend-section {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
}

.resend-text {
    color: #718096;
    font-size: 14px;
    margin-bottom: 12px;
}

.resend-button {
    color: #4CAF50;
    font-weight: 600;
    padding: 0;
    height: auto;
    font-size: 14px;
}

.resend-button:hover:not(:disabled) {
    color: #43a047;
}

.resend-button:disabled {
    color: #a0aec0;
    cursor: not-allowed;
}

.help-section {
    margin-top: 24px;
}

.help-alert {
    border-radius: 8px;
    border: 1px solid #fbb6ce;
    background-color: #fed7e2;
}

.help-alert .ant-alert-message {
    color: #b83280;
    font-weight: 600;
}

.help-alert .ant-alert-description {
    color: #97266d;
}

.help-alert .ant-alert-description p {
    margin: 4px 0;
    font-size: 13px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .verify-otp-container {
        padding: 16px;
    }
    
    .verify-otp-card {
        max-width: none;
        margin: 0;
    }
    
    .card-header {
        padding: 32px 16px;
    }
    
    .card-header h2 {
        font-size: 24px;
    }
    
    .header-icon {
        font-size: 40px;
    }
    
    .verification-content {
        padding: 24px 16px;
    }
    
    .otp-inputs {
        gap: 8px;
    }
    
    .otp-input {
        width: 45px;
        height: 55px;
        font-size: 20px;
    }
    
    .verify-button {
        height: 44px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .otp-inputs {
        gap: 6px;
    }
    
    .otp-input {
        width: 40px;
        height: 50px;
        font-size: 18px;
    }
    
    .email-display {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .card-header h2 {
        font-size: 22px;
    }
    
    .card-header p {
        font-size: 14px;
    }
}

/* Focus States for Accessibility */
.verify-button:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

.otp-input:focus {
    outline: none;
}

.resend-button:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* Animation for OTP input focus */
.otp-input:focus {
    animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Success state for completed OTP */
.otp-input.completed {
    border-color: #4CAF50;
    background-color: #f0fff4;
    color: #2d5016;
}

/* Error state for invalid OTP */
.otp-input.error {
    border-color: #f56565;
    background-color: #fed7d7;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Loading overlay for verification */
.verify-button.ant-btn-loading .ant-btn-loading-icon {
    margin-right: 8px;
}

/* NewsDetails.css */
.news-details-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 2rem 0;
}

.news-details-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Top Action Buttons */
.news-details-top-actions {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-details-back-btn,
.news-details-download-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  text-decoration: none;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.news-details-back-btn {
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

.news-details-download-btn {
  color: #2563eb;
  border: 1px solid #2563eb;
}

.news-details-back-btn:hover {
  background-color: #f3f4f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-details-download-btn:hover {
  background-color: #2563eb;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-details-action-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}

/* Loading State */
.news-details-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
}

.news-details-loading-text {
  font-size: 1.25rem;
  color: #4b5563;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
}

/* Image Section */
.news-details-image-section {
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.news-details-image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* Header Section */
.news-details-header {
  background-color: white;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-details-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.news-details-description {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.7;
  margin-top: 1.5rem;
}

/* Badges */
.news-details-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.news-details-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: #f3f4f6;
}

.news-details-badge-icon {
  margin-right: 0.5rem;
}

.news-details-badge-expiry {
  background-color: #fee2e2;
  color: #b91c1c;
}

.news-details-badge-created {
  background-color: #e0f2fe;
  color: #0369a1;
}

.news-details-badge-address {
  background-color: #f3e8ff;
  color: #6b21a8;
}

/* PDF Section */
.news-details-pdf-container {
  background-color: white;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-details-pdf-title {
  /* font-size: 1.5rem; */
  font-weight: 600;
  color: #1f2937;
  text-shadow: 0px 0px 2px grey;
  margin-bottom: 1.5rem;
}

.news-details-pdf-wrapper {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}

.news-details-pdf-iframe {
  width: 100%;
  height: 800px;
  /* border: 1px solid #e2e8f0; */
  border: none;
  display: block;
  background-color: white;
}

/* Custom scrollbar for the PDF iframe */
.news-details-pdf-iframe::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.news-details-pdf-iframe::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-left: 1px solid #e2e8f0;
}

.news-details-pdf-iframe::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border: 2px solid #f1f5f9;
  border-radius: 6px;
}

.news-details-pdf-iframe::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.news-details-pdf-iframe::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

.news-details-pdf-error {
  color: #ef4444;
  text-align: center;
  padding: 2rem;
  background-color: #fee2e2;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.news-details-no-pdf {
  text-align: center;
  color: #6b7280;
  padding: 2rem;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Navigation Buttons */
.news-details-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding: 0 1rem;
}

.news-details-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #2563eb;
  background-color: white;
  border: 2px solid #2563eb;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.news-details-nav-btn:hover:not(:disabled) {
  background-color: #2563eb;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.news-details-nav-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.news-details-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #9ca3af;
  color: #9ca3af;
}

.news-details-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.75rem;
}

.news-details-prev-btn .news-details-nav-icon {
  margin-right: 0.75rem;
}

.news-details-next-btn .news-details-nav-icon {
  margin-left: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .news-details-wrapper {
    padding: 0 0.5rem;
  }

  .news-details-top-actions {
    padding: 0 0.5rem;
    margin-bottom: 1rem;
  }

  .news-details-back-btn,
  .news-details-download-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .news-details-action-icon {
    width: 1rem;
    height: 1rem;
  }

  .news-details-badges {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .news-details-badge {
    width: -webkit-fit-content;
    width: fit-content;
  }
  
  .news-details-title {
    font-size: 1.5rem;
  }
  
  .news-details-pdf-container {
    padding: 1.5rem;
  }

  .news-details-pdf-iframe {
    height: 500px;
  }

  .news-details-navigation {
    padding: 0 0.5rem;
    margin-top: 2rem;
  }

  .news-details-nav-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }

  .news-details-nav-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .news-details-header,
  .news-details-pdf-container {
    padding: 1.5rem;
  }
}
.event-card-body .ant-card-body{
    padding: 14px;
}
.trucklists-event-card-body .ant-card-body{
    padding: 10px;
}




/* Main Container */
.events-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 24px;
  padding: 20px;
}

/* Outer Ring Animation */
.outer-ring {
  animation: spin 2s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Inner Ring Animation */
.inner-ring {
  animation: pulse 1.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Truck Emoji Animation */
.truck-emoji {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Loading Title */
.loading-title {
  font-size: 22px;
  color: #333;
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* Loading Dots Animation */
.loading-dots {
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Loading Subtitle */
.loading-subtitle {
  font-size: 15px;
  color: #666;
  margin: 0;
  font-weight: 400;
}

/* Essential styles for the new Events page components */

/* Main Container Styles */
.food-truck-explorer {
    padding: 12px;
    background-color: #f9f9f9;
    min-height: 100vh;
}

/* Modern Filter Bar and Toggle Button Styles */
.filter-toggle-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
  margin-top: 0;
  padding-top: 0;
}

.filter-toggle {
  background: #1a2b49;
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px #1a2b4920;
  transition: all 0.2s;
  padding: 0 20px;
  height: 36px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.filter-toggle--active {
  background: #F4A300 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #F4A30040;
}

.event-filter-bar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px #e9ecef80;
  border: 1.5px solid #F4A300;
  padding: 10px 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: all 0.2s;
  position: relative;
  z-index: 2;
}

.event-filter-select,
.event-filter-range,
.event-filter-input {
  width: 80%;
  border-radius: 12px !important;
  font-size: 16px;
  background: #f4f7fc;
  border: 1.5px solid #e9ecef;
  color: #1a2b49;
  transition: border 0.2s, box-shadow 0.2s;
  box-shadow: none;
}

.event-filter-select:focus,
.event-filter-range:focus,
.event-filter-input:focus {
  border-color: #F4A300;
  box-shadow: 0 0 0 2px #F4A30033;
}

.event-filter-dropdown {
  border-radius: 12px !important;
  background: #fff;
  border: 1.5px solid #F4A300;
}

/* Left Panel Styles */
.left-food-truck-panel {
    height: calc(95vh - 120px);
    overflow-y: hidden;
    padding: 0px;
    margin: 0;
}

.left-food-truck-panel.ant-card .ant-card-body {
    padding: 5px;
    height: calc(105vh - 150px);
}

/* Food Truck List Styles */
.food-truck-list {
    padding: 0px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    margin-top: 0rem;
    margin: 0px;
    padding-right: 10px;
}

.food-truck-list::-webkit-scrollbar {
    width: 2px;
}

.food-truck-list::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.food-truck-list::-webkit-scrollbar-thumb {
    background-color: #F4A300;
    border-radius: 10px;
}

.food-truck-status-header {
    margin: 10px 0;
    padding-left: 5px;
}

.food-truck-status-header h3 {
    font-size: 16px;
    margin: 0;
    color: #333;
}

/* Food Truck Card Styles */
.food-truck-card-modern {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.food-truck-card-modern:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Loading and Error States */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.empty-section-message {
  padding: 20px;
  text-align: center;
  color: #666;
  font-style: italic;
  background: #f9f9f9;
  border-radius: 8px;
  margin: 10px 0;
}

/* Map Container Styles */
.map-container {
    height: calc(95vh - 120px);
    width: 100%;
    min-height: 400px;
    background-color: #f5f5f5;
    border-radius: 8px;
    position: relative;
}

/* Google Maps InfoWindow Styles */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
}

.gm-ui-hover-effect {
  top: 0 !important;
  right: 0 !important;
}

.gm-style-iw, .gm-style-iw-c, .gm-style-iw-d {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gm-style-iw-tc::after {
  display: none !important;
}

.custom-info-window {
  line-height: 1.4 !important;
  font-family: 'Arial', sans-serif !important;
}

.info-window-button:hover {
  background-color: #F4A300 !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 163, 0, 0.3) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .event-filter-bar {
    padding: 12px 8px;
    border-radius: 10px;
  }
  .filter-toggle-row {
    margin-bottom: 4px;
  }
}

/* Responsive Adjustments */
@media (max-width: 480px) {
  .food-truck-explorer {
    padding: 12px;
  }
}


.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* =====================================================
   DESIGN SYSTEM THEME
   Global Tokens + Base Styles
===================================================== */

:root {
  /* =====================================================
     BRAND COLORS
  ===================================================== */
  --color-primary: #F4A300;
  --color-primary-hover: #DB9200;
  --color-primary-light: #FFEEDB;

  --color-negative: #FE0004;
  --color-negative-hover: #D40003;

  /* =====================================================
     DARK NEUTRALS
  ===================================================== */
  --color-navy: #061C3D;
  --color-gray-900: #3E4958;
  --color-gray-800: #5B5B5B;

  /* =====================================================
     MID / LIGHT NEUTRALS
  ===================================================== */
  --color-gray-600: #9C9B9B;
  --color-gray-400: #BEBEDF;
  --color-gray-300: #D7D7D7;
  --color-gray-300-50: rgba(215, 215, 215, 0.5);
  --color-bg-light: #F9FAFB;

  /* =====================================================
     TEXT COLORS
  ===================================================== */
  --text-primary: #061C3D;
  --text-secondary: #5B5B5B;
  --text-muted: #9C9B9B;
  --text-inverse: #FFFFFF;

  /* =====================================================
     BORDERS
  ===================================================== */
  --border-light: #D7D7D7;
  --border-primary: #F4A300;
  --border-negative: #FE0004;

  /* =====================================================
     RADIUS
  ===================================================== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 50px;

  /* =====================================================
     TYPOGRAPHY
  ===================================================== */
  --font-heading: "Lexend", sans-serif;
  --font-body: "Inter", sans-serif;

  --h1-size: 56px;
  --h2-size: 32px;
  --h3-size: 24px;
  --h4-size: 20px;
  --h5-size: 14px;
  --body-size: 20px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* =====================================================
     TRANSITIONS
  ===================================================== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}


/* =====================================================
   GLOBAL BASE RESET
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  background-color: #F9FAFB;
  background-color: var(--color-bg-light);
  color: #061C3D;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =====================================================
   TYPOGRAPHY BASE STYLES
===================================================== */

h1 {
  font-family: "Lexend", sans-serif;
  font-family: var(--font-heading);
  font-size: 56px;
  font-size: var(--h1-size);
  font-weight: 600;
  font-weight: var(--weight-semibold);
  color: #061C3D;
  color: var(--text-primary);
  margin: 0;
}

h2 {
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  font-size: 32px;
  font-size: var(--h2-size);
  font-weight: 700;
  font-weight: var(--weight-bold);
  color: #061C3D;
  color: var(--text-primary);
  margin: 0;
}

h3 {
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  font-size: 24px;
  font-size: var(--h3-size);
  font-weight: 500;
  font-weight: var(--weight-medium);
  margin: 0;
}

h4 {
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  font-size: 20px;
  font-size: var(--h4-size);
  font-weight: 600;
  font-weight: var(--weight-semibold);
  margin: 0;
}

h5 {
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  font-size: 14px;
  font-size: var(--h5-size);
  font-weight: 400;
  font-weight: var(--weight-regular);
  margin: 0;
}

/* p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin: 0;
} */


/* =====================================================
   GLOBAL BUTTON RESET (Optional but recommended)
===================================================== */

button {
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--transition-fast);
  background: none;
}

button:focus-visible {
  outline: 2px solid #F4A300;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* =====================================================
   UTILITY CLASSES (Optional)
===================================================== */

.text-primary {
  color: #061C3D;
  color: var(--text-primary);
}

.text-secondary {
  color: #5B5B5B;
  color: var(--text-secondary);
}

.bg-primary {
  background-color: #F4A300;
  background-color: var(--color-primary);
}

.bg-light {
  background-color: #F9FAFB;
  background-color: var(--color-bg-light);
}

.rounded-sm {
  border-radius: 6px;
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: 8px;
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: 12px;
  border-radius: var(--radius-lg);
}

/* PaymentPage.css */
.payment-container {
  background-color: #f4f7fc;
  min-height: 100vh;
  padding: 2rem 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Match subscription container styles */
.subscription-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1a2b49;
}

.subscription-header {
  text-align: center;
  margin-bottom: 40px;
}

.subscription-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1a2b49;
}

.subscription-header p {
  font-size: 18px;
  color: #4b5563;
  max-width: 600px;
  margin: 0 auto;
}

/* Payment summary container */
.payment-summary-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

@media (max-width: 992px) {
  .payment-summary-container {
    grid-template-columns: 1fr;
  }
}

/* Order summary card */
.order-summary-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: -webkit-fit-content;
  height: fit-content;
}

.order-summary-card h2 {
  color: #1a2b49;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.order-summary-card h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #F4A300;
  border-radius: 2px;
}

/* Payment details card */
.payment-details-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}


/* Payment summary container */
.payment-summary-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

@media (max-width: 992px) {
  .payment-summary-container {
    grid-template-columns: 1fr;
  }
}

/* Order summary card */
.order-summary-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: -webkit-fit-content;
  height: fit-content;
}

.order-summary-card h2 {
  color: #1a2b49;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.order-summary-card h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #F4A300;
  border-radius: 2px;
}

/* Payment details card */
.payment-details-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.payment-details-card h2 {
  color: #1a2b49;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

/* Plan features */
.plan-features {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.feature-list {
  margin-top: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.feature-icon {
  width: 20px;
  height: 20px;
  color: #22c55e;
  margin-right: 10px;
  flex-shrink: 0;
}

.payment-details-card h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #F4A300;
  border-radius: 2px;
}

/* Badge styling */
.plan-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.free-trial-badge {
  background: linear-gradient(135deg, rgba(244, 163, 0, 0.1), rgba(244, 163, 0, 0.2));
  color: #F4A300;
  border: 1px solid rgba(244, 163, 0, 0.2);
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: #F4A300;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
}

.back-button:hover {
  background: #e59700;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.25);
}

.back-button:active {
  transform: translateY(0);
}

.back-button svg {
  transition: transform 0.2s ease;
  width: 18px;
  height: 18px;
}

.back-button:hover svg {
  transform: translateX(-3px);
}

.back-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Summary items */
.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #4b5563;
}

.summary-item:last-of-type {
  border-bottom: none;
}

.summary-total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  font-weight: 600;
  color: #1a2b49;
}

.price-period {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: normal;
  margin-left: 4px;
}

/* Additional food truck selector */
.food-truck-addon {
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.food-truck-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.truck-count {
  margin: 0 20px;
  font-size: 24px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  color: #1a2b49;
}

.truck-adjust-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.truck-adjust-btn:hover {
  background: #1d4ed8;
  transform: scale(1.1);
}

.truck-adjust-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

/* PayPal container */
.paypal-container {
  max-width: 500px;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.disabled-paypal {
  opacity: 0.5;
  pointer-events: none;
}

/* Loading states */
.loading-container-spinner {
  text-align: center;
  padding: 3px 0;
}

/* .loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #2563eb;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 15px;
} */
/* Add this to your PaymentPage.css file */
.plan-change-notification {
  background-color: #e8e9eb;
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.plan-change-notification p {
  margin: 8px 0;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}

.plan-change-notification strong {
  color: #F4A300;
  font-weight: 600;
}

.plan-change-notification .current-plan {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}

.plan-change-notification .foodtruck-count {
  display: inline-block;
  background-color: #F4A300;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  font-weight: 500;
}

.delete-truck-button {
  background-color: #F4A300;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  display: flex;
}

.delete-truck-button:hover {
  background-color: #e59700;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  background: #fee2e2;
  color: #b91c1c;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

/* Terms container */
.terms-container {
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
}

.terms-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  margin-top: 3px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  accent-color: #2563eb;
}

.terms-checkbox label {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

.terms-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.terms-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

.after-trial-price {
  margin-top: 10px;
  font-size: 0.875rem;
  color: #F4A300;
  font-weight: 500;
  padding: 8px 15px;
  background: rgba(244, 163, 0, 0.1);
  border-radius: 20px;
  display: inline-block;
  text-align: center;
}

/* Trial note */
.trial-note {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff8e6;
  border-radius: 8px;
  border-left: 4px solid #F4A300;
}

.trial-note p {
  margin: 8px 0;
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
}

/* Footer section */
.subscription-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  background-color: #F4A300;
  margin-top: 60px;
  border-radius: 8px;
  color: white;
}

.footer-section {
  padding: 0 20px;
  flex: 1 1;
  text-align: center;
}

.footer-section a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.footer-section a:hover {
  text-decoration: underline;
}

.submit-button {
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  color: white;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  width: 100%;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.submit-button:hover {
  background: linear-gradient(145deg, #1d4ed8, #1e40af);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.after-trial-info {
  margin-top: 15px;
  background-color: #fff8e6;
  border-radius: 8px;
  padding: 12px 15px;
  border-left: 3px solid #F4A300;
}

.after-trial-info .summary-item {
  border-bottom: none;
  padding: 0;
  margin-bottom: 0;
}


.after-trial-info .billing-value {
  font-weight: 600;
  color: #F4A300;
}

/* After trial plan confirmation */
.after-trial-confirm {
  margin-top: 25px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  background-color: #f9fafb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.confirm-heading {
  font-size: 16px;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 15px;
  text-align: center;
}

.plan-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 15px;
}

.plan-option {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;
}

.plan-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.plan-option.selected {
  border-color: #F4A300;
  background-color: #fff8e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.15);
}

.plan-option-name {
  font-weight: 600;
  font-size: 16px;
  color: #1a2b49;
  margin-bottom: 5px;
}

.plan-option-price {
  color: #4b5563;
  font-size: 14px;
}

/* Responsive styles for plan selector */
@media (max-width: 640px) {
  .plan-selector {
    grid-template-columns: 1fr;
  }

  .after-trial-confirm {
    padding: 15px;
  }
}

.submit-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
}

.submit-button::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 200px;
  background: rgba(255, 255, 255, 0.3);
  top: -50%;
  left: -100px;
  transform: rotate(30deg);
  transition: all 0.6s;
}

.submit-button:hover::after {
  left: 110%;
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Payment methods */
.payment-methods {
  margin-bottom: 30px;
}

.payment-methods h3 {
  margin-bottom: 20px;
  color: #1a2b49;
  font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .subscription-header h1 {
    font-size: 28px;
  }

  .subscription-header p {
    font-size: 16px;
  }

  .order-summary-card,
  .payment-details-card {
    padding: 20px;
  }

  .food-truck-selector {
    flex-wrap: wrap;
  }
}

.price-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
}

.price-period {
  color: #6b7280;
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .payment-container {
    padding: 1rem 0;
  }

  .plan-details-card {
    padding: 1rem;
  }

  .payment-method-icon {
    width: 28px;
    height: 28px;
  }

  .payment-method-icon svg {
    width: 14px;
    height: 14px;
  }

  .card-logos svg {
    width: 16px;
    height: 16px;
  }

  .price-amount {
    font-size: 1.5rem;
  }
}

/* PayPal container styling */
.paypal-container {
  margin-top: 1rem;
  max-width: 100%;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fix for SVG sizing in PaymentPageEnhanced */
.payment-container svg {
  max-width: 100%;
  max-height: 24px;
  width: auto;
  height: auto;
}

/* Ensure content fits in a single page */
.max-w-4xl {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .max-w-4xl {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Coupon Section ─── */
.coupon-section {
  background: linear-gradient(135deg, #FFF8E1, #FFFDF5);
  border: 2px dashed #F4A300;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.coupon-section:hover {
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.15);
}

.coupon-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.coupon-section-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a2b49;
}

.coupon-section-header .coupon-toggle-icon {
  margin-left: auto;
  font-size: 12px;
  color: #F4A300;
  transition: transform 0.3s ease;
}

.coupon-section-header .coupon-toggle-icon.open {
  transform: rotate(180deg);
}

.coupon-input-area {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.coupon-input-area input {
  flex: 1 1;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1a2b49;
  text-align: center;
  transition: border-color 0.2s ease;
  outline: none;
}

.coupon-input-area input:focus {
  border-color: #F4A300;
  box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.15);
}

.coupon-input-area input::placeholder {
  letter-spacing: 1px;
  font-weight: 400;
  color: #9ca3af;
  text-transform: none;
}

.coupon-validate-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, #061C3D, #0d2e5c);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coupon-validate-btn:hover {
  background: linear-gradient(135deg, #0d2e5c, #102d53);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 28, 61, 0.3);
}

.coupon-validate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.coupon-result {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s ease;
}

.coupon-result.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.coupon-result.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.coupon-result .result-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Activate Button ─── */
.coupon-activate-btn {
  width: 100%;
  padding: 16px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #F4A300, #e69500);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(244, 163, 0, 0.35);
  transition: all 0.3s ease;
  animation: couponPulse 2s infinite;
}

.coupon-activate-btn:hover {
  background: linear-gradient(135deg, #e69500, #d18800);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(244, 163, 0, 0.45);
}

.coupon-activate-btn:active {
  transform: translateY(0);
}

.coupon-activate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  animation: none;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.2);
}

@keyframes couponPulse {
  0% {
    box-shadow: 0 6px 20px rgba(244, 163, 0, 0.35);
  }

  50% {
    box-shadow: 0 6px 30px rgba(244, 163, 0, 0.55);
  }

  100% {
    box-shadow: 0 6px 20px rgba(244, 163, 0, 0.35);
  }
}
/* Stripe Checkout Button Styles */
.stripe-checkout-container {
  width: 100%;
  margin: 16px 0;
}

.stripe-checkout-button {
  width: 100%;
  padding: 12px 24px;
  /* background og gold color*/
  background: #FFC439;
  color: black;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  box-shadow: 0 2px 4px rgba(99, 91, 255, 0.2);
}

.stripe-checkout-button:hover:not(:disabled) {
  background: #f4bc38;
  box-shadow: 0 4px 8px rgba(99, 91, 255, 0.3);
  transform: translateY(-1px);
}

.stripe-checkout-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(99, 91, 255, 0.2);
}

.stripe-checkout-button:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.stripe-checkout-button.loading {
  background: #f4bc38;
  cursor: wait;
}

.button-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-loading span {
  font-size: 14px;
}

/* Error message styles */
.stripe-error-message {
  margin-top: 12px;
  padding: 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
}

.stripe-error-message p {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.retry-button {
  background: #dc2626;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.retry-button:hover {
  background: #b91c1c;
}

/* Payment info styles */
.payment-info {
  margin-top: 12px;
  text-align: center;
}

.payment-amount {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 4px 0;
}

.payment-security {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Error container for configuration issues */
.stripe-error {
  padding: 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  text-align: center;
}

.stripe-error p {
  margin: 0;
  font-size: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
  .stripe-checkout-button {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 52px;
  }
  
  .payment-info {
    margin-top: 8px;
  }
  
  .payment-amount {
    font-size: 13px;
  }
  
  .payment-security {
    font-size: 11px;
  }
}

/* Integration with existing payment page styles */
.payment-methods .stripe-checkout-container {
  margin-top: 16px;
}

.payment-methods .stripe-checkout-button {
  border-radius: 12px;
  font-weight: 500;
}

/* Loading animation */
@keyframes stripe-loading {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.stripe-checkout-button.loading {
  animation: stripe-loading 1.5s ease-in-out infinite;
}

.global-new-section-container{
    /* border: 1px solid; */
    /* margin: 10px; */
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(data:image/gif;base64,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) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot);
    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(/static/media/slick.295183786cd8a1389865.woff) format('woff'), url(/static/media/slick.c94f7671dcc99dce43e2.ttf) format('truetype'), url(/static/media/slick.2630a3e3eab21c607e21.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

.news-tile {
  position: relative;
  width: 424px;
  height: 439px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
}

/* ✅ Show image properly */
.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ Placeholder when no image is present */
.placeholder-image {
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  color: #888;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Green overlay at the bottom */
.news-tile::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, #3a3835, transparent);
  z-index: 1;
}

/* ✅ Content on top of everything */
.news-content {
  position: absolute;
  bottom: 0;
  padding: 16px;
  width: 100%;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.news-content h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
}

.news-content p {
  font-size: 14px;
  margin: 0 0 10px 0;
}

.news-content small {
  font-size: 12px;
  display: block;
  margin-bottom: 10px;
}

.read-more-button {
  background-color: #F4A300;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.read-more-button:hover {
  background-color: #ddd;
}

.slick-slide {
  padding: 0 10px;
  margin: 30px 0;
}


.news-slider-wrapper {
  position: relative;
  padding-top: 60px; /* give space for top arrows */
}

.top-arrow-container {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px; /* space between arrows */
  align-items: center;
  z-index: 5;
}



.custom-arrow {
  background-color: #F4A300;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.custom-arrow:hover {
  background-color: #F4A300;
}




.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 00px 0px; /* reduce top padding (was likely 80px or more) */
    margin-top: 0; /* make sure there's no margin pushing it down */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}




/* Text Content */
.hero-text {
    flex: 1 1;
    padding: 20px;
    text-align: left;
}


.hero-text h2 {
    font-size: 36px;
    color: #F4A300;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left; /* 👈 add this line */
}


.hero-text p {
    font-size: 18px;
    color: #444;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Button Styling */
.hero-button {
    background: #F4A300;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.hero-button:hover {
    background: #F4A300;
}

.hero-image img {
    margin-top: 60px; /* 👈 Adjust this value */
    max-width: 100%;
    height: auto;
    box-shadow: none !important;
    border: none !important;
    outline: none;
    background: transparent;
    display: block;
}




/* Responsive Design */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .hero-text {
        text-align: center;
        padding: 0;
    }

    .hero-button {
        justify-content: center;
    }
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
  }
  
  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .carousel-slide.active {
    opacity: 1;
  }
  
  .carousel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #ffffff;
    padding: 20px;
  }
  
  .carousel-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  
  .carousel-description {
    font-size: 1.25rem;
    margin-bottom: 30px;
    max-width: 800px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  .carousel-cta {
    background-color: #f4a300;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .carousel-cta:hover {
    background-color: #d18e00;
  }
  
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 8px;
    border-radius: 50%;
  }
  
  .carousel-arrow:hover {
    color: #f4a300;
    background-color: #ffffff;
    border-radius: 50%;
  }
  
  .carousel-arrow-left {
    left: 20px;
  }
  
  .carousel-arrow-right {
    right: 20px;
  }
  
  .arrow-icon {
    width: 32px;
    height: 32px;
  }
  
  .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  
  .carousel-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    opacity: 0.5;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
  }
  
  .carousel-dot:hover {
    background-color: #f7b733;
    opacity: 1;
  }
  
  .carousel-dot.active {
    background-color: #f4a300;
    opacity: 1;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .carousel-title {
      font-size: 2rem;
    }
  
    .carousel-description {
      font-size: 1rem;
    }
  
    .carousel-cta {
      padding: 10px 20px;
    }
  
    .carousel-arrow {
      top: 50%;
    }
  
    .arrow-icon {
      width: 24px;
      height: 24px;
    }
  
    .carousel-dot {
      width: 4px;
      height: 4px;
    }
  }
  
  @media (max-width: 480px) {
    .carousel-title {
      font-size: 1.5rem;
    }
  
    .carousel-description {
      font-size: 0.875rem;
    }
  
    .carousel-cta {
      padding: 8px 16px;
      font-size: 0.875rem;
    }
  }
.global-news-container {
  padding: 5rem 3rem;
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin-bottom: 0;
  /* border: 1px solid purple; */
  /* height: 100%; */
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.news-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  text-shadow: 0px 0px 2px grey;
  margin: 0;
}

.news-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #555;
}

.news-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 0.5rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.news-error {
  text-align: center;
  color: red;
  font-weight: 500;
  margin: 1rem 0;
}

.news-noNews {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #666;
  background: #e9ecef;
  border-radius: 12px;
}

/* Carousel Styles */
.news-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  padding-bottom: 0.5rem;
  margin-bottom: 0!important;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width: 100%;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  /* border: 1px solid; */
}

.news-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.news-carousel-card {
  flex: 0 0 300px;
  height: 380px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  scroll-snap-align: start;
}

.news-carousel-card:hover {
  transform: translateY(-5px);
}

.news-carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.news-carousel-content {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-carousel-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.news-carousel-description {
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  line-height: 1.4;
}

.news-carousel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.news-badge {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 500;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.news-badge-country {
  background-color: rgba(193, 249, 206, 0.8);
  color: #0c5c21;
}

.news-badge-expiry {
  background-color: rgba(255, 204, 209, 0.8);
  color: #b30015;
}

.news-badge-proximity {
  background-color: rgba(249, 228, 162, 0.8);
  color: #b25900;
}

.news-badge-audience {
  background-color: rgba(209, 247, 255, 0.8);
  color: #00566b;
}

.news-badge-user {
  background-color: rgba(175, 216, 255, 0.8);
  color: #004080;
}

.news-badge-vendor {
  background-color: rgba(255, 214, 214, 0.8);
  color: #7a0000;
}

.news-carousel-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.news-read-more {
  padding: 0.5rem 1rem;
  background-color: rgba(244, 163, 0, 0.9);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s, transform 0.2s;
  text-align: center;
  width: -webkit-max-content;
  width: max-content;
}

.news-read-more:hover {
  background-color: #f4a300;
  transform: scale(1.05);
}

.news-pdf-button {
  padding: 0.5rem 1rem;
  background-color: rgba(52, 58, 64, 0.8);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s, transform 0.2s;
  text-align: center;
  flex: 1 1;
}

.news-pdf-button:hover {
  background-color: #343a40;
  transform: scale(1.05);
}

/* View More Button Styles */
.news-viewMore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 50px;
  background-color: #f4a300;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.news-viewMore:hover {
  background-color: #d68e00;
  transform: scale(1.05);
}

.news-viewMoreContent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.news-viewMoreText {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}

.news-viewMoreIcon {
  color: white;
  width: 18px;
  height: 18px;
}

/* Media Queries */
@media (min-width: 768px) {
  .news-carousel-card {
    flex: 0 0 400px;
  }
}

@media (min-width: 1200px) {
  .news-carousel-card {
    flex: 0 0 500px;
  }
}

@media (max-width: 767px) {
  .news-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .news-carousel-card {
    flex: 0 0 280px;
    height: 350px;
  }
  
  .news-container {
    padding: 2rem 1rem;
    padding-bottom: 1rem;
  }
}

.news-carousel-wrapper {
  position: relative;
  width: 100%;
}

.news-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  color: #333;
  padding: 0;
}

.news-carousel-nav:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) scale(1.1);
  color: #f4a300;
}

.news-carousel-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.news-carousel-prev {
  left: -20px;
}

.news-carousel-next {
  right: -20px;
}

.news-carousel-nav svg {
  transition: transform 0.3s ease;
}

.news-carousel-nav:hover svg {
  transform: scale(1.2);
}

/* Add responsive styles for the navigation buttons */
@media (max-width: 768px) {
  .news-carousel-nav {
    width: 32px;
    height: 32px;
  }

  .news-carousel-prev {
    left: -16px;
  }

  .news-carousel-next {
    right: -16px;
  }

  .news-carousel-nav svg {
    width: 20px;
    height: 20px;
  }
}

.location-form {
  margin: 1rem 0;
  width: 100%;
}

.location-inputs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.location-input {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 150px;
  flex: 1 1;
}

.location-submit {
  padding: 0.5rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.location-submit:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .location-inputs {
    flex-direction: column;
  }
  
  .location-input {
    width: 100%;
  }
  
  .location-submit {
    width: 100%;
  }
}
.highlight-news-section {
  padding: 3rem 2rem;
}

.highlight-news-heading {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: left;
  text-shadow: 0px 0px 2px grey;
}

.highlight-news-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* News Cards Section - Main content */
.highlight-news-cards-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
  align-items: start!important;
}

/* Carousel mode layout */
.highlight-news-cards-section.carousel-mode {
  grid-template-columns: 3fr 1fr;
}

.highlight-news-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 300px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.highlight-news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.highlight-news-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
}

.highlight-news-card-content {
  padding: 15px;
  color: #fff;
  width: 100%;
  text-align: left;
}

.highlight-news-title {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
}

.highlight-news-excerpt {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-news-read-more {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.85rem;
  transition: color 0.2s;
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.highlight-news-read-more:hover {
  background: #fff;
  color: #000;
}

/* Carousel Styles - Updated for proper positioning and image fit */
.highlight-news-carousel {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  position: relative;
}

.highlight-news-carousel-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.highlight-news-carousel-slide {
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.highlight-news-carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.highlight-news-carousel-content {
  padding: 20px;
  color: #fff;
  width: 100%;
  text-align: left;
  z-index: 2;
}

.highlight-news-carousel-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-news-carousel-excerpt {
  font-size: 0.9rem;
  margin: 0 0 15px 0;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-news-carousel-read-more {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.85rem;
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #fff;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.highlight-news-carousel-read-more:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* Social Card Styles */
.highlight-news-card.social-card {
  background-color: #fff;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.highlight-news-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f4a300;
  margin-bottom: 15px;
  text-align: center;
}

.highlight-news-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
}

.highlight-news-social-icons a {
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  padding: 8px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.highlight-news-social-icons .facebook-icon {
  color: #1877F2;
  border: 1px solid #1877F2;
}

.highlight-news-social-icons .youtube-icon {
  color: #FF0000;
  border: 1px solid #FF0000;
}

.highlight-news-social-icons a:hover {
  transform: scale(1.1);
}

/* .highlight-news-social-icons .facebook-icon:hover, 
.highlight-news-social-icons .twitter-icon:hover, 
.highlight-news-social-icons .linkedin-icon:hover {
  color: #007BFF;
  background-color: #d7e8fa;
  border: 1px solid #d7e8fa;
}

.highlight-news-social-icons .whatsapp-icon:hover {
  color: #0ce913;
  background-color: #dafad7;
  border: 1px solid #dafad7;
} */

.highlight-news-contact {
  font-size: 0.9rem;
  margin-top: 15px;
  text-align: center;
  color: #000;
}

.highlight-news-contact p {
  color: #000;
  margin-bottom: 8px;
}

.highlight-news-contact a {
  text-decoration: none;
  color: #000000;
}

/* No News Card Styles */
.highlight-news-card.no-news-card {
  background-color: #f0f0f0;
  grid-column: span 3;
}

.no-news-card {
  background: #f8fafc;
  color: #333;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 32px 20px 28px 20px;
  margin: 0 auto;
  max-width: 340px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.no-news-card .highlight-news-title {
  color: #222;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.no-news-card .highlight-news-excerpt {
  color: #555;
  font-size: 0.98rem;
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .highlight-news-cards-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .highlight-news-cards-section.carousel-mode {
    grid-template-columns: 2fr 1fr;
  }
  
  .highlight-news-card.no-news-card {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .highlight-news-section {
    padding: 2rem 1rem;
  }
  
  .highlight-news-cards-section {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .highlight-news-cards-section.carousel-mode {
    grid-template-columns: 1fr;
  }
  
  .highlight-news-card.no-news-card {
    grid-column: span 1;
  }

  .highlight-news-card,
  .highlight-news-carousel-slide {
    height: 250px;
  }

  .highlight-news-carousel {
    height: 280px;
  }

  .highlight-news-carousel-content {
    padding: 15px;
  }

  .highlight-news-carousel-title {
    font-size: 1rem;
  }

  .highlight-news-carousel-excerpt {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .highlight-news-title {
    font-size: 0.95rem;
  }
  
  .highlight-news-excerpt {
    font-size: 0.8rem;
  }
  
  .highlight-news-social-icons {
    gap: 10px;
  }
  
  .highlight-news-social-icons a {
    font-size: 1.2rem;
    padding: 6px;
  }

  .highlight-news-carousel {
    height: 250px;
  }

  .highlight-news-carousel-content {
    padding: 12px;
  }

  .highlight-news-carousel-title {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }

  .highlight-news-carousel-excerpt {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .highlight-news-carousel-read-more {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* mail-icon style */
.mail-icon {
  color: rgb(255, 149, 149);
  border: 1px solid rgb(255, 149, 149);
  border-radius: 50%;
  padding: 10px;
}

.mail-icon:hover {
  color: rgb(255, 50, 50);
  border: 1px solid rgb(255, 50, 50);
}

/* Linear Carousel Styles - Updated for professional look */
.linear-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  width: 100%;
  padding: 10px 0;
  -webkit-user-select: none;
          user-select: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.linear-carousel::-webkit-scrollbar {
  display: none;
}

.linear-carousel-inner {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  height: 100%;
}

.linear-slide {
  min-width: 320px;
  max-width: 340px;
  flex: 0 0 320px;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.linear-slide:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 2;
}

/* Ensure overlay and content positioning in carousel slides */
.linear-slide .highlight-news-carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-radius: 12px;
}

.linear-slide .highlight-news-carousel-content {
  padding: 20px;
  color: #fff;
  width: 100%;
  text-align: left;
  z-index: 2;
  position: relative;
}

/* Responsive carousel adjustments */
@media (max-width: 1024px) {
  .linear-slide {
    min-width: 280px;
    max-width: 300px;
    flex: 0 0 280px;
  }
  
  .linear-carousel-inner {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .linear-slide {
    min-width: 240px;
    max-width: 260px;
    flex: 0 0 240px;
  }
  
  .linear-carousel-inner {
    gap: 12px;
  }

  .linear-slide .highlight-news-carousel-content {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .linear-slide {
    min-width: 200px;
    max-width: 220px;
    flex: 0 0 200px;
  }
  
  .linear-carousel-inner {
    gap: 10px;
  }

  .linear-slide .highlight-news-carousel-content {
    padding: 12px;
  }
}
/* NewsBanner.css */
.news-banner {
    /* width: 100vw; Full viewport width */
    position: relative;
    /* To allow absolute positioning of child elements if needed */
    overflow: hidden;
    /* Prevent scrollbars if image overflows */
}

.new_banner_image {
    width: 100%;
    /* Full width of the parent container */
    height: 400px;
        display: block;
    /* Remove any default inline spacing */
}
.getGlobal-container {
  padding: 5rem 2rem;
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.getGlobal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.getGlobal-heading {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  text-shadow: 0px 0px 2px grey;
}

.getGlobal-search {
  width: 300px;
}

.getGlobal-searchInput {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.getGlobal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #555;
}

.getGlobal-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 0.5rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.getGlobal-error {
  text-align: center;
  color: red;
  font-weight: 500;
  margin: 1rem 0;
}

.getGlobal-noResults {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
  background-color: #f8f8f8;
  border-radius: 8px;
  margin: 20px 0;
}

.getGlobal-newsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.getGlobal-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out;
}

.getGlobal-card:hover {
  transform: translateY(-5px);
}

.getGlobal-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.getGlobal-imagePlaceholder {
  width: 100%;
  height: 180px;
  background-color: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1rem;
}

.getGlobal-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.getGlobal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}

.getGlobal-description {
  font-size: 0.95rem;
  color: #555;
  flex-grow: 1;
  margin-bottom: 0.75rem;
}

.getGlobal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.getGlobal-badge {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 500;
}

.getGlobal-badge-country {
  background-color: #c1f9ce;
  box-shadow: 0px 0px 2px 1px #ccc;
  color: green;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.getGlobal-badge-expiry {
  background-color: #ffccd1;
  color: red;
  box-shadow: 0px 0px 2px 1px #ccc;
}

.getGlobal-badge-proximity {
  background-color: #f9e4a2;
  color: #fd7e00;
  box-shadow: 0px 0px 2px 1px #ccc;
}

.getGlobal-badge-audience {
  background-color: #7209b7;
  color: white;
}

.getGlobal-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.getGlobal-pdfButton {
  flex: 1 1;
  padding: 0.5rem;
  text-align: center;
  background-color: #343a40;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.getGlobal-pdfButton:hover {
  background-color: #23272b;
}

.getGlobal-readMoreButton {
  flex: 1 1;
  padding: 0.5rem;
  text-align: center;
  background-color: #f4a300;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.getGlobal-readMoreButton:hover {
  background-color: #0056b3;
}

.getGlobal-noPdf {
  flex: 1 1;
  color: #888;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
}

@media (max-width: 768px) {
  .getGlobal-header {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  
  .getGlobal-search {
    width: 100%;
    max-width: 300px;
  }
}
.user-faq-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .user-faq-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d38800, #F4A300, #ffc04d);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
  }
  
  .user-faq-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.7rem 0;
  }
  
  .user-faq-container h3 {
    color: #1a2b49;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a2b49, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .user-faq-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .user-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .user-faq-category {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  
  .user-faq-category:hover {
    box-shadow: 0 8px 24px rgba(244, 163, 0, 0.15);
    transform: translateY(-2px);
    border-color: #F4A300;
  }
  
  .user-faq-category-header {
    display: flex;
    align-items: center;
    padding: 1.35rem 1.05rem;
    background: linear-gradient(135deg, #fefefe, #f9fafb);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .user-faq-category-header:hover {
    background: linear-gradient(135deg, #fff9f0, #fff5e6);
  }
  
  .user-faq-category-icon {
    font-size: 1.75rem;
    margin-right: 1.25rem;
    color: #F4A300;
    pointer-events: none;
    transition: transform 0.3s ease;
  }
  
  .user-faq-category-header:hover .user-faq-category-icon {
    transform: scale(1.1);
  }
  
  .user-faq-category-header h5 {
    margin: 0;
    flex-grow: 1;
    color: #1a2b49;
    font-size: 1.15rem;
    font-weight: 600;
    pointer-events: none;
  }
  
  .user-faq-category-toggle,
  .user-faq-question-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6b7280;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    pointer-events: auto;
    flex-shrink: 0;
    border-radius: 6px;
  }
  
  .user-faq-category-header:hover .user-faq-category-toggle,
  .user-faq-question-header:hover .user-faq-question-toggle {
    color: #F4A300;
    background: rgba(244, 163, 0, 0.1);
  }
  
  .user-faq-category-content {
    padding: 0 1.5rem;
    overflow: hidden;
    background: #fafbfc;
  }
  
  .user-faq-question {
    border-bottom: 1px solid #f0f0f0;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
    background: #ffffff;
    border-radius: 8px;
  }
  
  .user-faq-question:last-child {
    border-bottom: none;
  }
  
  .user-faq-question-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    border-radius: 8px;
  }
  
  .user-faq-question-header:hover {
    background: linear-gradient(135deg, #fff9f0, #fffbf5);
    transform: translateX(4px);
  }
  
  .user-faq-question-header h4 {
    margin: 0;
    flex-grow: 1;
    color: #1a2b49;
    font-size: 1.05rem;
    font-weight: 500;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    line-height: 1.5;
  }
  
  .user-faq-question-content {
    padding: 0 1.5rem 1.75rem 1.5rem;
    color: #4b5563;
    line-height: 1.8;
    font-size: 1rem;
    position: relative;
    z-index: 0;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
  }
  
  .user-faq-answer {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #495057;
    font-size: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  .user-faq-link-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #fff9f0, #fff5e6);
    border-radius: 10px;
    border-left: 4px solid #F4A300;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.08);
  }
  
  .user-faq-learn-more {
    color: #F4A300;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    background: rgba(244, 163, 0, 0.1);
    border: 1px solid rgba(244, 163, 0, 0.2);
  }
  
  .user-faq-learn-more:hover {
    color: #d38800;
    background: rgba(244, 163, 0, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.25);
    border-color: #F4A300;
  }
  
  .user-faq-no-questions {
    padding: 1.5rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    font-size: 1rem;
  }
  
  .user-faq-no-faqs {
    text-align: center;
    padding: 4rem 3rem;
    background: linear-gradient(135deg, #fafbfc, #f5f6f7);
    border-radius: 16px;
    margin-top: 2rem;
    border: 2px dashed #e0e0e0;
  }
  
  .user-faq-empty-state {
    max-width: 400px;
    margin: 0 auto;
  }
  
  /* Enhanced Loading Spinner */
  .user-faq-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #fafbfc, #f8f9fa);
    border-radius: 16px;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
  }

  .user-faq-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(244, 163, 0, 0.1), transparent);
    animation: shimmer 2s infinite;
  }

  .loader {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
  }

  .loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #F4A300;
    border-right: 3px solid #F4A300;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
  }

  .loader::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border: 2px solid transparent;
    border-bottom: 2px solid #ffc04d;
    border-left: 2px solid #ffc04d;
    border-radius: 50%;
    animation: spin 1.8s linear infinite reverse;
  }

  .user-faq-loader p {
    color: #6b7280;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    animation: pulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
  }

  .user-faq-loader::after {
    content: '💡';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    animation: bounce 2s ease-in-out infinite;
    opacity: 0.6;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
  }

  @keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  
  /* FAQ Images Styles */
  .user-faq-images {
    margin: 1.5rem 0;
    padding: 1.75rem;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  
  .user-faq-images-title {
    color: #1a2b49;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .user-faq-images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
  }
  
  .user-faq-image-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .user-faq-image-item:hover {
    border-color: #F4A300;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(244, 163, 0, 0.2);
  }
  
  .user-faq-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
    background: #f8f9fa;
  }
  
  .user-faq-image-item:hover .user-faq-image {
    transform: scale(1.05);
  }
  
  /* Image loading state */
  .user-faq-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .user-faq-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 1rem 0.75rem 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
  }
  
  .user-faq-image-item:hover .user-faq-image-overlay {
    opacity: 1;
  }
  
  .user-faq-image-zoom {
    font-size: 0.85rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  /* Image Modal Styles */
  .user-faq-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
  }
  
  .user-faq-image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
    animation: scaleIn 0.3s ease;
  }
  
  .user-faq-image-modal-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }
  
  .user-faq-image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #374151;
  }
  
  .user-faq-image-modal-close:hover {
    background: #ffffff;
    transform: scale(1.1);
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes scaleIn {
    from { 
      opacity: 0;
      transform: scale(0.8);
    }
    to { 
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .user-faq-images-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
    }
  }
  
  @media (max-width: 768px) {
    .user-faq-container {
      margin: 1rem;
      padding: 1.5rem;
    }
    
    .user-faq-container h3 {
      font-size: 1.75rem;
    }
    
    .user-faq-subtitle {
      font-size: 1rem;
    }
    
    .user-faq-images-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    .user-faq-image-item {
      height: 150px;
    }
    
    .user-faq-images {
      padding: 1rem;
    }
    
    .user-faq-image-modal-close {
      top: -35px;
      width: 28px;
      height: 28px;
      font-size: 1rem;
    }
    
    .user-faq-loader {
      padding: 3rem 1.5rem;
    }
    
    .loader {
      width: 50px;
      height: 50px;
    }
    
    .user-faq-loader p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    .user-faq-images-grid {
      grid-template-columns: 1fr;
    }
    
    .user-faq-image-item {
      height: 200px;
    }
    
    .user-faq-loader {
      padding: 2rem 1rem;
    }
    
    .loader {
      width: 45px;
      height: 45px;
    }
    
    .user-faq-loader p {
      font-size: 0.95rem;
    }
    
    .user-faq-loader::after {
      font-size: 1.2rem;
      top: 0.75rem;
      right: 0.75rem;
    }
  }
/* Main Container Styles */
.own-food-truck-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 80px);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media (max-width: 768px) {
  .own-food-truck-container {
    padding: 16px 12px;
  }
}

@media (max-width: 480px) {
  .own-food-truck-container {
    padding: 12px 8px;
  }
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef;
  position: relative;
}

@media (max-width: 768px) {
  .page-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
}

/* Settings Button */
.settings-button {
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(90deg, #ff9800, #ff5722);
  border: none;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .settings-button {
    position: static;
    margin-top: 12px;
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .settings-button {
    padding: 0.5rem 1rem;
    font-size: 14px;
    max-width: 100%;
  }
}

.settings-button:hover {
  background: linear-gradient(90deg, #ff5722, #ff9800);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.page-header h1 {
  font-size: 32px;
  color: #1a2b49;
  margin-bottom: 12px;
  font-weight: 700;
}

.page-header p {
  font-size: 16px;
  color: #6c757d;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 24px;
    margin-bottom: 8px;
  }
  
  .page-header p {
    font-size: 14px;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 20px;
    line-height: 1.3;
  }
  
  .page-header p {
    font-size: 13px;
  }
}

/* Steps Card */
.steps-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: none;
}

.food-truck-steps {
  padding: 24px 16px;
}

/* Ant Design Steps Customization */
.food-truck-steps .ant-steps-item-title {
  font-weight: 600;
  font-size: 16px;
  color: #1a2b49;
}

.food-truck-steps .ant-steps-item-description {
  font-size: 14px;
  color: #6c757d;
}

.food-truck-steps .ant-steps-item-icon {
  background-color: #f4f7fc;
  border-color: #e9ecef;
}

.food-truck-steps .ant-steps-item-active .ant-steps-item-icon {
  background-color: #F4A300;
  border-color: #F4A300;
}

.food-truck-steps .ant-steps-item-finish .ant-steps-item-icon {
  background-color: #52c41a;
  border-color: #52c41a;
}

.food-truck-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
  color: white;
}

.completed-step-icon {
  color: white;
}

/* Step Content Card */
.step-content-card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 2rem;
  border: none;
  opacity: 1;
}

.step-content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.step-content-card.animate-in {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.2s;
  opacity: 1;
}

/* Step Content Row Styles */
.step-content-row {
  display: flex;
  flex-wrap: wrap;
}

/* Step Details Column Styles */
.step-details-col {
  display: flex;
  flex-direction: column;
}

/* Step Details Styles */
.step-details {
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .step-details {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .step-details {
    padding: 1rem;
  }
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.step-header h2 {
  font-size: 2rem;
  color: #333;
  font-weight: 700;
}

@media (max-width: 768px) {
  .step-header h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .step-header h2 {
    font-size: 1.3rem;
    line-height: 1.3;
  }
}

.step-description {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 1.8rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .step-description {
    font-size: 1rem;
    margin-bottom: 1.2rem;
  }
}

@media (max-width: 480px) {
  .step-description {
    font-size: 0.95rem;
  }
}

/* Styled Divider */
.styled-divider {
  margin: 1.5rem 0;
  color: #ff9800;
  font-weight: 600;
}

.divider-text {
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #ff9800;
}

/* Benefits Container Styles */
.benefits-container {
  margin-bottom: 2rem;
}

/* Benefits List Styles */
.benefits-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .benefits-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 480px) {
  .benefits-list li {
    padding: 1rem;
  }
}

.benefits-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Benefit Icon Styles */
.benefit-icon {
  margin-right: 1rem;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  flex-shrink: 0;
}

/* Benefit Text Styles */
.benefit-text {
  flex: 1 1;
}

.benefit-text h4 {
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.benefit-text p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* Step Actions Styles */
.step-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
}

/* Button Styles */
.primary-action-button {
  background: linear-gradient(90deg, #ff9800, #ff5722);
  border: none;
  height: auto;
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .primary-action-button {
    width: 100%;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .primary-action-button {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }
}

.primary-action-button:hover {
  background: linear-gradient(90deg, #ff5722, #ff9800);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.secondary-action-button {
  border: 2px solid #ff9800;
  color: #ff9800;
  height: auto;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .secondary-action-button {
    width: 100%;
    padding: 0.65rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .secondary-action-button {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }
}

.secondary-action-button:hover {
  background-color: rgba(255, 152, 0, 0.1);
  border-color: #ff5722;
  color: #ff5722;
}

/* Step Image Column Styles */
.step-image-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step Image Container Styles */
.step-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .step-image-container {
    min-height: 250px;
    border-radius: 8px;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .step-image-container {
    min-height: 200px;
  }
}

/* Step Image Styles */
.step-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.step-image-container:hover .step-image {
  transform: scale(1.05);
}

/* Image Overlay Styles */
.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

/* Overlay Text Styles */
.overlay-text {
  font-size: 1.3rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .overlay-text {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .overlay-text {
    font-size: 1rem;
  }
}

/* Loading Container Styles */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 1.2rem;
}

.loading-container p {
  font-size: 1.2rem;
  color: #666;
}

/* Completed Step Icon Styles */
.completed-step-icon {
  color: #52c41a;
}

/* Subscription Step Styles */
.subscription-step-content {
  padding: 2rem 2rem 0;
}

@media (max-width: 768px) {
  .subscription-step-content {
    padding: 1.5rem 1rem 0;
  }
}

@media (max-width: 480px) {
  .subscription-step-content {
    padding: 1rem 0.5rem 0;
  }
}

.subscription-alert {
  margin: 1.5rem 0;
  border-radius: 8px;
}

/* Subscription Info Styles */
.subscription-info {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 1rem;
  border-left: 4px solid #ff9800;
}
.subscription-info p {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0;
  font-weight: 200;
}

/* Existing Trucks List */
.existing-trucks {
  margin-bottom: 1rem;
}

/* Truck Count Display */
.truck-count-display {
  display: flex;
  align-items: center;
  padding: 1.2rem;
  background-color: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  position: relative;
}

@media (max-width: 768px) {
  .truck-count-display {
    flex-wrap: wrap;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .truck-count-display {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0.8rem;
  }
}

.truck-count-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.truck-count-icon .anticon {
  font-size: 1.5rem;
  color: white;
}

.truck-count-info {
  flex: 1 1;
}

.truck-count-info h3 {
  font-size: 1.2rem;
  color: #333;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .truck-count-info h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .truck-count-info h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }
}

.truck-count-info p {
  color: #666;
  margin: 0;
  font-size: 0.95rem;
}

.manage-trucks-btn {
  margin-left: 1rem;
  background: linear-gradient(90deg, #ff9800, #ff5722);
  border: none;
  height: auto;
  padding: 0.6rem 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .manage-trucks-btn {
    margin-left: 0;
    margin-top: 0.8rem;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .manage-trucks-btn {
    margin-top: 0.8rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }
}

.manage-trucks-btn:hover {
  background: linear-gradient(90deg, #ff5722, #ff9800);
  transform: translateY(-2px);
}

.subscription-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.subscription-header h2 {
  font-size: 28px;
  color: #1a2b49;
  margin-bottom: 8px;
  font-weight: 700;
}

.subscription-header p {
  font-size: 16px;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* Loading State */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
}

.loading-container p {
  font-size: 16px;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 992px) {
  .step-content-row {
    flex-direction: column-reverse;
  }
  
  .step-image-container {
    min-height: 300px;
    border-radius: 8px;
    margin-bottom: 1rem;
  }
  
  .step-details {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .food-truck-steps {
    padding: 16px 8px;
  }
  
  .food-truck-steps .ant-steps-item-title {
    font-size: 14px;
  }
  
  .food-truck-steps .ant-steps-item-description {
    font-size: 12px;
    display: none; /* Hide descriptions on mobile for cleaner look */
  }
  
  .step-content-card {
    margin-bottom: 1rem;
  }
  
  .benefit-text h4 {
    font-size: 1rem;
  }
  
  .benefit-text p {
    font-size: 0.9rem;
  }
  
  .subscription-info h3 {
    font-size: 1.1rem;
  }
  
  .subscription-info p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .steps-card {
    margin-bottom: 12px;
  }
  
  .food-truck-steps {
    padding: 12px 4px;
  }
  
  .food-truck-steps .ant-steps-item-title {
    font-size: 12px;
  }
  
  .benefit-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
    margin-right: 0.8rem;
  }
  
  .benefit-text h4 {
    font-size: 0.95rem;
  }
  
  .benefit-text p {
    font-size: 0.85rem;
  }
  
  .truck-count-icon {
    width: 45px;
    height: 45px;
    margin-right: 0;
    margin-bottom: 0.8rem;
  }
  
  .truck-count-icon .anticon {
    font-size: 1.3rem;
  }
  
  .subscription-info {
    padding: 0.8rem;
  }
  
  .subscription-info h3 {
    font-size: 1rem;
  }
  
  .subscription-info p {
    font-size: 0.9rem;
  }
  
  .styled-divider {
    margin: 1rem 0;
  }
  
  .divider-text {
    font-size: 0.75rem;
  }
}

/* Touch-friendly improvements for mobile */
@media (max-width: 768px) {
  .primary-action-button,
  .secondary-action-button,
  .settings-button,
  .manage-trucks-btn {
    min-height: 44px; /* Minimum touch target size */
  }
}

/* Feedback Modal Responsive */
@media (max-width: 768px) {
  .feedback-modal .ant-modal {
    max-width: 90%;
    margin: 16px auto;
  }
  
  .feedback-modal .ant-modal-body {
    padding: 16px;
  }
  
  .feedback-content {
    font-size: 14px;
  }
  
  .new-truck-info h3 {
    font-size: 1.2rem;
  }
  
  .next-steps h4 {
    font-size: 1rem;
  }
  
  .next-steps ul {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .feedback-modal .ant-modal {
    max-width: 95%;
  }
  
  .feedback-modal-title {
    font-size: 16px;
  }
  
  .new-truck-info h3 {
    font-size: 1.1rem;
  }
  
  .feedback-modal .ant-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .feedback-modal .ant-modal-footer .ant-btn {
    width: 100%;
    margin: 0;
  }
}

.user-footer {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 30px 20px 25px;
    margin-top: 60px;
    width: 100%;
    flex-shrink: 0;
    clear: both;
    position: relative;
    display: block;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    grid-gap: 50px;
    gap: 50px;
    padding-bottom: 30px;
}

.footer-section {
    text-align: left;
}

.footer-section h3 {
    color: #F4A300;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 0;
}

.footer-about {
    max-width: 100%;
}

.footer-logo {
    width: 140px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.footer-description {
    color: #bdc3c7;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.footer-app-inline {
    margin-top: 20px;
}

.footer-app-inline .app-download-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.footer-app-inline .app-download-link:hover {
    opacity: 0.8;
}

.footer-app-inline .app-store-badge {
    height: 40px;
    width: auto;
    display: block;
}

/* Contact Section */
.footer-contact .footer-address {
    font-style: normal;
    color: #bdc3c7;
    margin-bottom: 15px;
}

.footer-contact .footer-address p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact .footer-emails p {
    margin: 8px 0;
}

.footer-contact .footer-emails a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-contact .footer-emails a:hover {
    color: #F4A300;
}

.footer-contact-heading-link {
    color: #F4A300;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-heading-link:hover {
    color: #ffb733;
    text-decoration: underline;
}

/* Links Section */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: #F4A300;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding: 15px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-bottom-content p {
    margin: 0;
    font-size: 14px;
    color: #bdc3c7;
}

.footer-build-version {
    margin: 0;
    font-size: 12px;
    color: #7f8c8d;
    letter-spacing: 0.02em;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-legal a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #F4A300;
}

.footer-legal .separator {
    color: #7f8c8d;
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .user-footer {
        padding: 30px 20px 20px;
        margin-top: 60px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 25px;
    }

    .footer-section {
        text-align: center;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-app-inline {
        display: flex;
        justify-content: center;
    }

    .footer-contact .footer-address,
    .footer-contact .footer-emails {
        text-align: center;
    }

    .footer-links-list {
        text-align: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-legal {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-footer {
        padding: 25px 15px 15px;
    }

    .footer-content {
        gap: 25px;
        padding-bottom: 20px;
    }

    .footer-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-description,
    .footer-contact .footer-address p,
    .footer-contact .footer-emails a,
    .footer-links-list a,
    .footer-bottom-content p,
    .footer-legal a {
        font-size: 13px;
    }
}


.privacy-policy-container {
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    font-family: 'Lexend', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.privacy-policy-content {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 60px 50px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
    border: 1px solid rgba(244, 163, 0, 0.1);
}

.privacy-policy-content:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.privacy-policy-content h1 {
    color: #061c3d;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 4px solid #F4A300;
    padding-bottom: 20px;
    position: relative;
    font-family: 'Lexend', sans-serif;
}

.privacy-policy-content h1::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #F4A300, #ff9800);
    border-radius: 2px;
}

.last-updated {
    color: #7f8c8d;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Scroll animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.privacy-policy-content section {
    margin-bottom: 40px;
    padding: 25px;
    background: #fafbfc;
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out;
}

.privacy-policy-content section:hover {
    background: #f8f9fa;
    border-left-color: #F4A300;
    transform: translateX(4px);
}

.privacy-policy-content h2 {
    color: #100f14;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 18px;
    margin-top: 0;
    font-family: 'Lexend', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
}

.privacy-policy-content h2::before {
    content: '▸';
    color: #F4A300;
    font-size: 20px;
}

.privacy-policy-content h3 {
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 24px;
    font-family: 'Lexend', sans-serif;
    padding-left: 20px;
    position: relative;
}

.privacy-policy-content h3::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #F4A300;
    font-size: 24px;
    line-height: 1;
}

.privacy-policy-content p {
    color: #49475a;
    line-height: 1.9;
    margin-bottom: 18px;
    font-size: 16px;
    font-family: 'Lexend', sans-serif;
}

.privacy-policy-content ul {
    margin: 20px 0;
    padding-left: 35px;
    list-style: none;
}

.privacy-policy-content li {
    color: #49475a;
    line-height: 2;
    margin-bottom: 12px;
    font-size: 16px;
    font-family: 'Lexend', sans-serif;
    position: relative;
    padding-left: 25px;
}

.privacy-policy-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #F4A300;
    font-weight: bold;
    font-size: 18px;
}

.privacy-policy-content ul li strong {
    color: #100f14;
    font-weight: 600;
}

.contact-info {
    list-style: none;
    padding-left: 0;
}

.contact-info li {
    margin-bottom: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .privacy-policy-container {
        padding: 30px 15px;
    }

    .privacy-policy-content {
        padding: 35px 28px;
        border-radius: 12px;
    }

    .privacy-policy-content h1 {
        font-size: 32px;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .privacy-policy-content section {
        padding: 20px;
        margin-bottom: 30px;
    }

    .privacy-policy-content h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .privacy-policy-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .privacy-policy-content p,
    .privacy-policy-content li {
        font-size: 15px;
        line-height: 1.8;
    }

    .privacy-policy-content ul {
        padding-left: 30px;
    }

    .privacy-policy-content li {
        padding-left: 22px;
    }
}

@media (max-width: 480px) {
    .privacy-policy-container {
        padding: 20px 10px;
    }

    .privacy-policy-content {
        padding: 25px 18px;
        border-radius: 10px;
    }

    .privacy-policy-content h1 {
        font-size: 26px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .privacy-policy-content section {
        padding: 18px;
        margin-bottom: 25px;
    }

    .privacy-policy-content h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .privacy-policy-content h2::before {
        font-size: 18px;
    }

    .privacy-policy-content h3 {
        font-size: 16px;
        padding-left: 18px;
    }

    .privacy-policy-content p,
    .privacy-policy-content li {
        font-size: 14px;
        line-height: 1.7;
    }

    .privacy-policy-content ul {
        padding-left: 25px;
    }

    .privacy-policy-content li {
        padding-left: 20px;
        margin-bottom: 10px;
    }
}


/* Payment Success Page */
.psp-container {
  min-height: 100vh;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: var(--font-body);
}

.psp-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(6, 28, 61, 0.08);
  max-width: 480px;
  width: 100%;
  padding: 48px 40px;
  text-align: center;
  border-top: 4px solid var(--color-primary);
}

/* Loading */
.psp-loading-text {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 15px;
  font-family: var(--font-body);
}

/* Icon */
.psp-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 36px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: psp-pop 0.4s ease;
}

@keyframes psp-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Title & subtitle */
.psp-title {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.psp-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

/* Details box */
.psp-details {
  background: var(--color-bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: left;
}

.psp-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.psp-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.psp-detail-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.psp-detail-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* Checklist */
.psp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
}

.psp-checklist li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 6px 0;
  padding-left: 22px;
  position: relative;
}

.psp-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* Button */
.psp-btn {
  width: 100%;
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.psp-btn:hover {
  background-color: var(--color-primary-hover);
}

@media (max-width: 540px) {
  .psp-card { padding: 36px 24px; }
  .psp-title { font-size: 24px; }
}

/* Payment Cancel Page */
.pcp-container {
  min-height: 100vh;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: var(--font-body);
}

.pcp-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(6, 28, 61, 0.08);
  max-width: 480px;
  width: 100%;
  padding: 48px 40px;
  text-align: center;
  border-top: 4px solid var(--color-negative);
}

/* Icon */
.pcp-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #fff0f0;
  color: var(--color-negative);
  font-size: 30px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: pcp-pop 0.4s ease;
}

@keyframes pcp-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Title & text */
.pcp-title {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.pcp-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.pcp-info {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 32px;
}

/* Buttons */
.pcp-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pcp-btn-primary {
  width: 100%;
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.pcp-btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.pcp-btn-secondary {
  width: 100%;
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pcp-btn-secondary:hover {
  border-color: var(--color-gray-600);
  color: var(--text-primary);
}

@media (max-width: 540px) {
  .pcp-card { padding: 36px 24px; }
  .pcp-title { font-size: 24px; }
}

/* ===== Page Container ===== */
.SubscriptionUpgradePage_container__B9wqB {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 28px 60px;
  font-family: var(--font-body);
}

.SubscriptionUpgradePage_loading__6Ymg7 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

/* ===== Header ===== */
.SubscriptionUpgradePage_header__DERhQ {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-gray-300);
}

.SubscriptionUpgradePage_backButton__kfXdR {
  margin-bottom: 20px;
  border-radius: var(--radius-md) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
}

.SubscriptionUpgradePage_backButton__kfXdR:hover {
  color: var(--color-primary) !important;
  border-color: var(--border-primary) !important;
}

.SubscriptionUpgradePage_title__QHTUH {
  margin-bottom: 6px !important;
  color: var(--text-primary);
  font-weight: var(--weight-bold) !important;
  letter-spacing: -0.3px;
}

.SubscriptionUpgradePage_subtitle__5PTFN {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 0;
}

/* ===== Current Plan Card ===== */
.SubscriptionUpgradePage_currentPlanCard__Tp0tS {
  border: 1px solid var(--color-gray-300) !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.SubscriptionUpgradePage_currentPlanCard__Tp0tS .ant-card-body {
  padding: 20px 24px !important;
}

.SubscriptionUpgradePage_currentPlanHeader__l3SoX {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.SubscriptionUpgradePage_currentPlanHeader__l3SoX h4 {
  font-weight: var(--weight-semibold) !important;
}

.SubscriptionUpgradePage_planTag__qRi0P {
  font-size: 11px !important;
  font-weight: var(--weight-semibold) !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.SubscriptionUpgradePage_currentPlanDetails__pCqGr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.SubscriptionUpgradePage_planDetailItem__9qkYm {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.SubscriptionUpgradePage_planDetailItem__9qkYm .ant-typography-secondary {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: var(--weight-medium);
}

/* ===== Upgrade Plans Grid ===== */
.SubscriptionUpgradePage_plansGrid__aBxYU {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 0;
}

.SubscriptionUpgradePage_planCard__N2qCa {
  border-radius: var(--radius-lg) !important;
  border: 2px solid var(--color-gray-300) !important;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.SubscriptionUpgradePage_planCard__N2qCa .ant-card-body {
  padding: 24px !important;
}

.SubscriptionUpgradePage_planCard__N2qCa:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 6px 24px rgba(244, 163, 0, 0.12);
  transform: translateY(-3px);
}

.SubscriptionUpgradePage_planCardSelected__QwSpd {
  border-color: var(--color-primary) !important;
  box-shadow: 0 6px 28px rgba(244, 163, 0, 0.2);
  background: linear-gradient(180deg, #fffef9 0%, var(--color-primary-light) 100%);
}

.SubscriptionUpgradePage_recommendedBadge__BgMQ5 {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--text-inverse);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom-left-radius: var(--radius-lg);
}

.SubscriptionUpgradePage_planCardContent__iFwXd {
  padding: 0;
}

.SubscriptionUpgradePage_planCardName__BEAJD {
  margin-bottom: 4px !important;
  color: var(--text-primary);
  font-weight: var(--weight-bold) !important;
}

.SubscriptionUpgradePage_planCardPrice__7OYSi {
  margin-bottom: 4px;
  line-height: 1;
}

.SubscriptionUpgradePage_priceAmount__Ac5Mh {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -1px;
}

.SubscriptionUpgradePage_priceInterval__FxRSV {
  font-size: 15px;
  color: var(--text-muted);
  margin-left: 2px;
  font-weight: var(--weight-regular);
}

.SubscriptionUpgradePage_planCardFeatures__OaJNB {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.SubscriptionUpgradePage_planCardFeatures__OaJNB li {
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--color-gray-900);
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}

.SubscriptionUpgradePage_planCardFeatures__OaJNB li .anticon {
  margin-top: 2px;
  flex-shrink: 0;
}

.SubscriptionUpgradePage_selectPlanBtn__6Zxwt {
  margin-top: 4px;
  border-radius: var(--radius-md) !important;
  font-weight: var(--weight-semibold) !important;
  height: 40px !important;
}

/* ===== Proration Preview Card ===== */
.SubscriptionUpgradePage_prorationCard__n3Ejq {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-gray-300) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.SubscriptionUpgradePage_prorationCard__n3Ejq .ant-card-body {
  padding: 28px !important;
}

/* ===== Plan Comparison ===== */
.SubscriptionUpgradePage_planComparison__T-IQn {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  padding: 8px 0 16px;
}

.SubscriptionUpgradePage_comparisonItem__V1Rqn {
  flex: 1 1;
  text-align: center;
  padding: 22px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-light);
  border: 1px solid var(--color-gray-300);
}

.SubscriptionUpgradePage_comparisonItem__V1Rqn h4 {
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

.SubscriptionUpgradePage_comparisonItemCurrent__CqB5F {
  background: #f4f5f7;
  border-color: var(--color-gray-300);
}

.SubscriptionUpgradePage_comparisonItemNew__yKJ2i {
  background: linear-gradient(180deg, #fffdf5 0%, var(--color-primary-light) 100%);
  border: 2px solid var(--color-primary);
}

.SubscriptionUpgradePage_comparisonArrow__xErZb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.SubscriptionUpgradePage_comparisonPrice__47ABA {
  font-size: 18px;
  font-weight: var(--weight-bold);
  display: block;
  margin-top: 6px;
  color: var(--text-primary);
}

.SubscriptionUpgradePage_comparisonPriceHighlight__mPq\+G {
  color: var(--color-primary);
  font-size: 20px;
}

/* ===== Proration Breakdown ===== */
.SubscriptionUpgradePage_prorationBreakdown__Wzzba {
  padding: 12px 0;
  max-width: 560px;
  margin: 0 auto;
}

.SubscriptionUpgradePage_breakdownRow__DKuUg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

.SubscriptionUpgradePage_breakdownRowCredit__5E\+s8 {
  background: #f6ffed;
}

.SubscriptionUpgradePage_creditAmount__uFEJe {
  color: #389e0d;
  font-weight: var(--weight-semibold);
}

.SubscriptionUpgradePage_breakdownRowCharge__vQVKD {
  background: #fff7e6;
}

.SubscriptionUpgradePage_breakdownRowTotal__C7-f6 {
  padding: 16px;
  margin-top: 8px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.SubscriptionUpgradePage_breakdownRowNextBilling__MCIOi {
  padding: 6px 16px;
}

/* ===== Upgrade Actions ===== */
.SubscriptionUpgradePage_upgradeActions__5jcaA {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.SubscriptionUpgradePage_confirmUpgradeBtn__YeYdE {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border: none !important;
  font-weight: var(--weight-bold) !important;
  font-size: 15px !important;
  height: 48px !important;
  padding: 0 36px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 14px rgba(244, 163, 0, 0.3) !important;
  letter-spacing: 0.2px;
}

.SubscriptionUpgradePage_confirmUpgradeBtn__YeYdE:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, #d07e00 100%) !important;
  box-shadow: 0 6px 20px rgba(244, 163, 0, 0.4) !important;
  transform: translateY(-1px);
}

/* ===== Success Card ===== */
.SubscriptionUpgradePage_successCard__tfxyv {
  max-width: 560px;
  margin: 80px auto;
  border-radius: 16px !important;
  text-align: center;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

.SubscriptionUpgradePage_successCard__tfxyv .ant-card-body {
  padding: 48px 32px !important;
}

.SubscriptionUpgradePage_successContent__0M9lY {
  padding: 0;
}

.SubscriptionUpgradePage_successIcon__GzI-Q {
  font-size: 72px;
  color: #52c41a;
  margin-bottom: 24px;
  display: block;
}

.SubscriptionUpgradePage_successMessage__xnbj\+ {
  font-size: 16px;
  max-width: 420px;
  margin: 0 auto 12px;
  line-height: 1.6;
  color: var(--color-gray-900);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .SubscriptionUpgradePage_container__B9wqB {
    padding: 20px 16px 40px;
  }

  .SubscriptionUpgradePage_planComparison__T-IQn {
    flex-direction: column;
    gap: 12px;
  }

  .SubscriptionUpgradePage_comparisonArrow__xErZb {
    transform: rotate(90deg);
    padding: 4px 0;
  }

  .SubscriptionUpgradePage_plansGrid__aBxYU {
    grid-template-columns: 1fr;
  }

  .SubscriptionUpgradePage_currentPlanDetails__pCqGr {
    grid-template-columns: 1fr 1fr;
  }

  .SubscriptionUpgradePage_upgradeActions__5jcaA {
    flex-direction: column-reverse;
  }

  .SubscriptionUpgradePage_upgradeActions__5jcaA button {
    width: 100%;
  }

  .SubscriptionUpgradePage_breakdownRow__DKuUg {
    padding: 10px 12px;
  }

  .SubscriptionUpgradePage_prorationBreakdown__Wzzba {
    max-width: 100%;
  }

  .SubscriptionUpgradePage_successCard__tfxyv {
    margin: 40px 16px;
  }
}

@media (max-width: 480px) {
  .SubscriptionUpgradePage_currentPlanDetails__pCqGr {
    grid-template-columns: 1fr;
  }

  .SubscriptionUpgradePage_priceAmount__Ac5Mh {
    font-size: 28px;
  }

  .SubscriptionUpgradePage_confirmUpgradeBtn__YeYdE {
    padding: 0 20px !important;
    font-size: 14px !important;
  }
}

.order-payment-success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}

.order-payment-success-card {
  max-width: 600px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

@media (max-width: 768px) {
  .order-payment-success-container {
    padding: 10px;
  }
  
  .order-payment-success-card {
    max-width: 100%;
  }
}

/* Public Header Styles */
.truck-site-header {
  background-color: #000000;
  border-bottom: 1px solid #333;
  padding: 12px 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.header-logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.truck-logo-header {
  height: 50px;
  width: 50px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #f4a300;
}

.truck-name-header {
  font-size: 24px;
  font-weight: 700;
  /* color: #ffffff; */
  margin: 0;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-btn {
  padding: 8px 18px;
  background-color: transparent;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
  white-space: nowrap;
}

.nav-btn:hover {
  background-color: #fff5e6;
  color: #f4a300;
}

.nav-btn.active {
  /* color :  #f4a300 */
  background-color: #f4a300;
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .header-nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .truck-name-header {
    font-size: 20px;
  }

  .truck-logo-header {
    height: 40px;
    width: 40px;
  }
}

.user-footer {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 30px 20px 25px;
    margin-top: 60px;
    width: 100%;
    flex-shrink: 0;
    clear: both;
    position: relative;
    display: block;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    grid-gap: 50px;
    gap: 50px;
    padding-bottom: 30px;
}

.footer-section {
    text-align: left;
}

.footer-section h3 {
    color: #F4A300;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 0;
}

.footer-about {
    max-width: 100%;
}

.footer-logo {
    width: 140px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.footer-description {
    color: #bdc3c7;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.footer-app-inline {
    margin-top: 20px;
}

.footer-app-inline .app-download-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.footer-app-inline .app-download-link:hover {
    opacity: 0.8;
}

.footer-app-inline .app-store-badge {
    height: 40px;
    width: auto;
    display: block;
}

/* Contact Section */
/* Email & Phone styling */
.footer-contact .footer-emails p {
    margin: 8px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.footer-contact .footer-emails p svg {
    margin-right: 8px;
    color: #F4A300; /* icon color */
}

/* Social icons below email and phone */
.footer-contact .footer-social {
    margin-top: 12px;
    display: flex;
    gap: 15px;
}

.footer-contact .footer-social a {
    font-size: 18px;
    color: #ecf0f1;
    transition: color 0.3s ease;
}

.footer-contact .footer-social a:hover {
    color: #F4A300;
}

.footer-contact-heading-link {
    color: #F4A300;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-heading-link:hover {
    color: #ffb733;
    text-decoration: underline;
}

/* Links Section */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: #F4A300;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding: 15px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom-content p {
    margin: 0;
    font-size: 14px;
    color: #bdc3c7;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-legal a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #F4A300;
}

.footer-legal .separator {
    color: #7f8c8d;
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .user-footer {
        padding: 30px 20px 20px;
        margin-top: 60px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 25px;
    }

    .footer-section {
        text-align: center;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-app-inline {
        display: flex;
        justify-content: center;
    }

    .footer-contact .footer-address,
    .footer-contact .footer-emails {
        text-align: center;
    }

    .footer-links-list {
        text-align: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-legal {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-footer {
        padding: 25px 15px 15px;
    }

    .footer-content {
        gap: 25px;
        padding-bottom: 20px;
    }

    .footer-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-description,
    .footer-contact .footer-address p,
    .footer-contact .footer-emails a,
    .footer-links-list a,
    .footer-bottom-content p,
    .footer-legal a {
        font-size: 13px;
    }
}


/* Public Home Tab Styles */
.home-tab {
  width: 100%;
}

.hero-image-section {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
}

.hero-main-image {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.placeholder-hero {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, #f4a300 0%, #d89000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 8px;
}

/* Hero Image Navigation Buttons */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(128, 128, 128, 0.8);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-nav-btn:hover {
  background: rgba(100, 100, 100, 0.95);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hero-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.hero-nav-prev {
  left: 15px;
  padding-top:3px;

}

.hero-nav-next {
  right: 15px;
  padding-top:3px;
}

.gallery-thumbnails-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
}

.thumbnail {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.3s;
}

.thumbnail.active {
  border-color: #1890ff;
}

.thumbnail:hover {
  border-color: #f4a300;
}

.thumbnail img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* Info Cards */
.info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* Menu Section Wrapper */
.menu-section-wrapper {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Business Hours Card */
.business-hours-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.business-hours-card .ant-card-body {
  padding: 24px;
}

.business-hours-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f4a300;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  padding: 16px;
  border-radius: 8px;
  margin: -8px -8px 20px -8px;
}

.hours-header-icon {
  font-size: 24px;
  color: #f4a300;
  background: white;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.2);
}

.hours-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.map-card {
  height: 400px !important;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.ant-card-body .hours-card {
  padding: 0;
  height: 400px !important;
  overflow-y: auto;
}

/* .map-card .ant-card-body {
  padding: 0 !important;
  height: 100%;
} */

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.header-icon {
  font-size: 20px;
  color: #f4a300;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* Order Ahead Section */
.order-ahead-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.order-ahead-button {
  background: #f4a300;
  border: none;
  height: 50px;
  padding: 0 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
  transition: all 0.3s ease;
}

.order-ahead-button:hover {
  background: #d89000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4);
}

.order-ahead-button:active {
  transform: translateY(0);
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hour-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px;
  background: transparent;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.hour-row:hover {
  background: #f9f9f9;
}

.hour-row:last-child {
  margin-bottom: 0;
}

.day-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

.day-hours {
  font-weight: 500;
  font-size: 14px;
}

.day-hours.open {
  color: #52c41a;
  background: #f6ffed;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #b7eb8f;
}

.day-hours.closed {
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  padding: 4px 12px;
  border-radius: 4px;
  background: #fff1f0;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 992px) {
  .map-card, .hours-card {
    height: auto !important;
  }
  
  .business-hours-card {
    margin-top: 20px;
  }
  
  .order-ahead-section {
    margin-top: 20px;
  }
}

/* Public Menu Tab Styles */
.menu-tab-outer {
  width: 100%;
  padding: 20px;
}

.menu-tab {
  width: 100%;
}

/* Menu Sidebar */
.menu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.menu-category-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 6px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  border: 1px solid #f0f0f0;
}

.menu-category-tabs::-webkit-scrollbar {
  height: 6px;
}

.menu-category-tabs::-webkit-scrollbar-thumb {
  background: #f4a300;
  border-radius: 3px;
}

.category-tab {
  padding: 8px 16px;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  transition: all 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab:hover {
  background: #fff5e6;
  color: #f4a300;
  border-color: #f4a300;
}

.category-tab.active {
  background: #f4a300;
  color: white;
  border-color: #f4a300;
}

.menu-items-container {
  width: 100%;
}

/* Grid layout handled by Ant Design Row/Col */
.menu-items-grid {
  width: 100%;
}

.menu-item-card-menu {
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8 !important;
  background: #ffffff !important;
  height: 100%;
  width: 100% !important;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

.menu-item-card-menu:hover {
  box-shadow: 0 6px 20px rgba(244, 163, 0, 0.25) !important;
  transform: translateY(-6px);
  border-color: #f4a300 !important;
}

.item-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.menu-item-card-menu:hover .item-image img {
  transform: scale(1.05);
}

.item-content {
  padding: 16px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-grow: 1;
}

.item-price {
  font-size: 20px;
  font-weight: 700;
  color: #f4a300;
  margin-top: auto;
  display: inline-block;
}

.add-ons {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.add-ons-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.addon-price {
  color: #f4a300;
  font-weight: 500;
}

.no-menu-message,
.no-items-message {
  text-align: center;
  padding: 80px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
  border: 1px solid #f0f0f0;
}

.no-menu-message h3,
.no-items-message h3 {
  font-size: 26px;
  color: #333;
  margin-bottom: 12px;
  margin-top: 12px;
  font-weight: 600;
}

.no-menu-message p,
.no-items-message p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* Business Hours Card (matching PublicHome styles) */
.business-hours-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.business-hours-card {
  padding: 6px;
}

.business-hours-header-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f4a300;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  padding: 12px;
  border-radius: 8px;
  margin: -8px -8px 16px -8px;
}

.hours-header-icon {
  font-size: 24px;
  color: #f4a300;
  background: white;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(244, 163, 0, 0.2);
}

.hours-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hour-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background: transparent;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.hour-row:hover {
  background: #f9f9f9;
}

.hour-row:last-child {
  margin-bottom: 0;
}

.day-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

.day-hours {
  font-weight: 500;
  font-size: 14px;
}

.day-hours.open {
  color: #52c41a;
  background: #f6ffed;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #b7eb8f;
}

.day-hours.closed {
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff1f0;
  font-size: 14px;
  font-weight: 600;
}

/* Order Ahead Section */
.order-ahead-section {
  padding: 12px;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.order-ahead-button {
  background: #f4a300;
  border: none;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
  transition: all 0.3s ease;
}

.order-ahead-button:hover {
  background: #d89000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4) !important;
}

.order-ahead-button:active {
  transform: translateY(0);
}

/* Info Details Card */
.info-details-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  row-gap: 20px;
}

.info-details-card .ant-card-body {
  padding: 20px;
}

.info-item {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-left: 12px;
  transition: all 0.2s ease;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item:hover {
  background: #fff9e6;
  transform: translateX(4px);
}

.info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-icon {
  font-size: 16px;
  color: #f4a300;
}

.info-value {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  padding-left: 24px;
}

@media (max-width: 992px) {
  .menu-tab-outer {
    padding: 16px;
  }

  .menu-sidebar {
    margin-top: 20px;
  }

  /* .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  } */
}

@media (max-width: 768px) {
  .menu-tab-outer {
    padding: 12px;
  }

  .menu-category-tabs {
    padding: 15px;
    gap: 8px;
  }

  .category-tab {
    padding: 10px 20px;
    font-size: 14px;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .item-image {
    height: 180px;
  }

  .item-content {
    padding: 16px;
  }

  .item-name {
    font-size: 17px;
  }

  .item-price {
    font-size: 20px;
  }

  .order-ahead-section {
    padding: 16px;
  }

  .order-ahead-button {
    height: 45px;
    font-size: 16px;
  }
}

/* Public About Tab Styles */
.about-tab {
  width: 100%;
  padding: 20px 0;
}

.about-loading {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

.about-container {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-gap: 0;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-height: 500px;
}

/* Left Section - Owner Info */
.about-left {
  background: #ffffff;
  color: #000;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.owner-image-wrapper {
  width: 100%;
  margin-bottom: 30px;
}

.owner-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
  display: block;
}

.owner-image-placeholder {
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}

.owner-info {
  flex: 1 1;
}

.owner-title {
  font-size: 16px;
  font-weight: 600;
  color: #f4a300;
  margin-bottom: 20px;
  line-height: 1.4;
}

.owner-bio {
  margin-bottom: 30px;
}

.owner-bio p {
  font-size: 14px;
  line-height: 1.8;
  color: #000000;
  margin: 0;
}

/* Footer Icons */
.about-footer-icons {
  display: flex;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #333;
}

.social-icon-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4a300;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon-link:hover {
  background: #f4a300;
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.4);
}

/* Right Section - Main Content */
.about-right {
  background: #ffffff;
  color: #000;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
}

.about-header {
  margin-bottom: 30px;
}

.about-title {
  font-size: 36px;
  font-weight: 700;
  color: #f4a300;
  margin: 0;
  line-height: 1.2;
  text-transform: capitalize;
}

.about-main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

.about-description {
  font-size: 16px;
  line-height: 1.9;
  color: #e0e0e0;
  margin: 0;
  text-align: justify;
}

/* Scroll to Content Indicator (Optional) */
.scroll-indicator {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  color: #666;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Rich Text Content Rendering */
.rich-text-content {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.rich-text-content p {
  margin: 0 0 10px;
}

.rich-text-content p:last-child {
  margin-bottom: 0;
}

.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3 {
  margin: 12px 0 6px;
  line-height: 1.3;
}

.rich-text-content h1 { font-size: 1.6em; }
.rich-text-content h2 { font-size: 1.3em; }
.rich-text-content h3 { font-size: 1.1em; }

.rich-text-content strong { font-weight: 700; }
.rich-text-content em { font-style: italic; }
.rich-text-content u { text-decoration: underline; }
.rich-text-content s { text-decoration: line-through; }

.rich-text-content ul,
.rich-text-content ol {
  padding-left: 24px;
  margin: 6px 0;
}

.rich-text-content li {
  margin-bottom: 4px;
}

.rich-text-content blockquote {
  border-left: 3px solid #f4a300;
  padding-left: 14px;
  margin: 10px 0;
  font-style: italic;
  opacity: 0.9;
}

.rich-text-content a {
  color: #f4a300;
  text-decoration: underline;
}

.rich-text-content a:hover {
  opacity: 0.8;
}

.owner-bio .rich-text-content {
  font-size: 14px;
  line-height: 1.8;
  color: #000000;
}

.about-main-content .rich-text-content {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
}

/* =====================================================
   COMPACT CONTACT SECTION
===================================================== */
.contact-section-compact {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.contact-compact-title {
  font-family: 'Lexend', sans-serif;
  font-family: var(--font-heading, 'Lexend', sans-serif);
  font-size: 18px;
  font-weight: 600;
  font-weight: var(--weight-semibold, 600);
  color: #F4A300;
  color: var(--color-primary, #F4A300);
  margin: 0 0 15px 0;
  text-align: center;
}

.contact-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.contact-compact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  background: var(--color-bg-light, #F9FAFB);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid #D7D7D7;
  border: 1px solid var(--border-light, #D7D7D7);
  text-decoration: none;
  transition: 0.2s ease;
  transition: var(--transition-fast, 0.2s ease);
}

.contact-compact-item:hover {
  background: #fff;
  border-color: #F4A300;
  border-color: var(--color-primary, #F4A300);
  box-shadow: 0 2px 6px rgba(244, 163, 0, 0.15);
}

.contact-compact-icon {
  font-size: 14px;
  color: #F4A300;
  color: var(--color-primary, #F4A300);
  flex-shrink: 0;
}

.contact-compact-text {
  font-size: 13px;
  font-weight: 500;
  font-weight: var(--weight-medium, 500);
  color: #061C3D;
  color: var(--text-primary, #061C3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .about-container {
    grid-template-columns: 40% 60%;
  }

  .about-right {
    padding: 30px 35px;
  }

  .about-title {
    font-size: 30px;
  }

  .about-description {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .about-left {
    padding: 30px 25px;
  }

  .about-right {
    padding: 30px 25px;
  }

  .owner-image {
    max-height: 300px;
  }

  .contact-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .owner-image-placeholder {
    height: 200px;
    font-size: 60px;
  }

  .about-title {
    font-size: 28px;
  }

  .about-description {
    font-size: 14px;
    text-align: left;
  }

  .owner-title {
    font-size: 15px;
  }

  .owner-bio p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .about-tab {
    padding: 10px 0;
  }

  .about-left,
  .about-right {
    padding: 25px 20px;
  }

  .about-title {
    font-size: 24px;
  }

  .about-description {
    font-size: 13px;
    line-height: 1.7;
  }

  .owner-image {
    max-height: 250px;
  }

  .contact-section-compact {
    margin-top: 15px;
    padding: 15px;
  }

  .contact-compact-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .contact-compact-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-compact-item {
    padding: 10px;
  }

  .contact-compact-icon {
    font-size: 13px;
  }

  .contact-compact-text {
    font-size: 12px;
  }

  .owner-image-placeholder {
    height: 180px;
    font-size: 50px;
  }

  .about-footer-icons {
    gap: 12px;
  }

  .social-icon-link {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* Public Events Container */
.public-events-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 24px;
}

.public-events-loading,
.public-events-error,
.public-events-empty {
  text-align: center;
  padding: 80px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
}

.public-events-loading p {
  margin-top: 20px;
  font-size: 16px;
  color: #666;
}

.public-events-error p {
  font-size: 16px;
  color: #ff4d4f;
}

/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-top: 15px;
}

/* Event Card Styles */
.event-card {
  background-color: rgb(245, 242, 242);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 0;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: visible;
  min-height: 250px;
  height: auto;
}

.event-card.with-image {
  background-position: 50% 50%;
  background-size: cover;
  height: 250px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.event-card .event-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.event-card .event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.event-card.upcoming-event {
  border-left: 4px solid #FF8C00;
  background: linear-gradient(to right, rgba(255, 140, 0, 0.05), transparent 20%);
}

.event-card .event-content-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0px 0px 10px 10px;
  height: 180px;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

/* Heading and Content */
.heading {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  left: 0;
  padding: 8px;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100%;
}

.frame {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9.43px;
  position: relative;
}

.event-date-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  z-index: 3;
}

.event-date-badge .event-label {
  background-color: #F4A300;
  color: white;
  border-radius: 30px;
  padding: 4px 8px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  display: inline-block;
}

.like {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3.54px;
  position: relative;
}

.element-sep {
  color: white;
  font-family: inherit;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  position: relative;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.event-card.with-image .event-title {
  color: white;
  font-family: inherit;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  position: relative;
  width: 212.26px;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.event-card:not(.with-image) .event-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}

.event-card.with-image .event-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}

.event-card:not(.with-image) .event-description {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* Event Detail Modal Styles */
.public-event-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.public-event-modal-content {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.public-event-modal-header {
  position: relative;
  /* background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%); */
  color: white;
  min-height: 150px;
  overflow: hidden;
}

.public-event-modal-header-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.public-event-modal-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-event-modal-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(135deg, rgba(255, 112, 67, 0.9) 0%, rgba(255, 87, 34, 0.9) 100%); */
  z-index: 2;
}

.public-event-modal-header-content {
  position: relative;
  z-index: 3;
  padding: 20px 24px;
}

.public-event-modal-header-content h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  padding-right: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.public-event-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5722;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 4;
}

.public-event-modal-close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.public-event-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(85vh - 120px);
}

.public-event-detail-section {
  margin-bottom: 24px;
}

.public-event-detail-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  margin-bottom: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 3px solid #FF7043;
  transition: all 0.2s ease;
}

.public-event-detail-item:hover {
  background: #fff5f2;
  box-shadow: 0 2px 8px rgba(255, 112, 67, 0.1);
}

.public-event-icon {
  color: #FF7043;
  font-size: 20px;
  margin-right: 16px;
  margin-top: 2px;
}

.public-event-detail-content {
  flex: 1 1;
}

.public-event-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.public-event-detail-value {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  font-weight: 500;
}

.public-event-description-section {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #fff9f6 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid #ffe8e0;
}

.public-event-description-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.public-event-description-header .public-event-icon {
  margin-right: 10px;
}

.public-event-description-text {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
}

.public-event-schedule-section {
  margin-top: 24px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.public-event-schedule-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.public-event-schedule-title .public-event-icon {
  margin-right: 10px;
}

.public-event-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-event-schedule-item {
  padding: 12px 16px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #FF7043;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.public-event-schedule-day {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.public-event-schedule-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-event-time-slot {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
  background: #fff5f2;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .public-events-container {
    padding: 20px 16px;
  }

  .events-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .public-events-container {
    padding: 16px 12px;
  }

  .events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .event-card {
    min-height: 220px;
  }

  .event-card.with-image {
    height: 220px;
  }

  .event-card.with-image .event-title {
    font-size: 16px;
  }

  .event-description {
    font-size: 13px;
  }

  .public-event-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .public-event-modal-header-content h2 {
    font-size: 20px;
  }

  .public-event-modal-body {
    padding: 16px;
  }

  .public-event-detail-item {
    padding: 12px;
  }
}

/* Public Catering Container */
.public-catering-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  min-height: 60vh;
}

/* Disabled State */
.public-catering-disabled {
  text-align: center;
  padding: 80px 20px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.public-catering-disabled .catering-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.public-catering-disabled h2 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.public-catering-disabled p {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.6;
}

.public-catering-disabled .catering-subtext {
  font-size: 14px;
  color: #999;
}

/* Enabled State */
.public-catering-enabled {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Header */
.catering-header {
  background: #eeaa21;
  color: white;
  padding: 30px 16px;
  text-align: center;
}

.catering-icon-large {
  font-size: 72px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.catering-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  color: white;
}

.catering-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  max-width: 700px;
  margin: 0 auto;
}

/* Features Section */
.catering-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  padding: 50px 40px;
  background: #f9f9f9;
}

.catering-feature {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.catering-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.2);
}

.feature-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.catering-feature h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.catering-feature p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* CTA Section */
.catering-cta {
  text-align: center;
  padding: 50px 40px;
  background: white;
}

.catering-request-button {
  background: linear-gradient(135deg, #F4A300 0%, #FF8C00 100%);
  color: white;
  border: none;
  padding: 18px 48px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.3);
  transition: all 0.3s ease;
}

.catering-request-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(244, 163, 0, 0.4);
}

.catering-request-button:active {
  transform: translateY(0);
}

.button-icon {
  font-size: 22px;
}

.catering-note {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .public-catering-container {
    padding: 24px 16px;
  }

  .catering-header {
    padding: 40px 24px;
  }

  .catering-header h1 {
    font-size: 28px;
  }

  .catering-subtitle {
    font-size: 16px;
  }

  .catering-features {
    grid-template-columns: 1fr;
    padding: 30px 20px;
    gap: 20px;
  }

  .catering-cta {
    padding: 30px 20px;
  }

  .catering-request-button {
    padding: 16px 36px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }

  .public-catering-disabled {
    padding: 60px 20px;
  }

  .public-catering-disabled h2 {
    font-size: 24px;
  }
}

/* Public Placeholder Tab Styles */
.placeholder-tab {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.placeholder-tab h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

.placeholder-tab p {
  font-size: 16px;
  color: #666;
}

/* ============================================
   PUBLIC TRUCK SITE - MODERN DESIGN
   Primary Color: #f4a300
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.public-truck-site {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */
.public-truck-loading,
.public-truck-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  text-align: center;
}

.loading-spinner-public {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #f4a300;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.public-truck-error button {
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #f4a300;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
}

.public-truck-error button:hover {
  background-color: #d89000;
}

/* ============================================
   HEADER
   ============================================ */
.truck-site-header {
  background-color: #ffffff;
  border-bottom: 2px solid #f0f0f0;
  padding: 15px 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.header-logo {
  flex-shrink: 0;
}

.logo-image {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}


/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
  flex: 1 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
  width: 100%;
}

/* ============================================
   HOME TAB
   ============================================ */
.home-tab {
  width: 100%;
}

.hero-image-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Update the Hero Image to match the 400px height */
.hero-main-image {
  width: 100%;
  height:-webkit-fit-content;
  height:fit-content; /* Matched to design */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.placeholder-hero {
  width: 100%;
  height: 400px; /* Matched to design */
  background: linear-gradient(135deg, #f4a300 0%, #d89000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 8px;
}

.image-gallery {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.gallery-nav-btn {
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  color: #666;
  transition: all 0.3s;
  flex-shrink: 0;
}

.gallery-nav-btn:hover {
  background: #f4a300;
  color: white;
  border-color: #f4a300;
}

.gallery-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex: 1 1;
  padding: 5px 0;
}

.gallery-thumbnails::-webkit-scrollbar {
  height: 6px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
  background: #f4a300;
  border-radius: 3px;
}

.thumbnail {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s;
}

.thumbnail:hover {
  border-color: #f4a300;
  transform: scale(1.05);
}

.thumbnail.active {
  border-color: #f4a300;
  box-shadow: 0 0 0 2px #fff5e6;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info Cards */
.info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.map-card iframe {
  border-radius: 8px;
}
/* Ensure the Map and Hours cards are the same height */

.day-name {
  font-weight: 500;
  color: #333;
  font-size: 15px;
}

.day-hours {
  font-weight: 500;
  font-size: 15px;
}

.day-hours.open {
  color: #333;
}

.day-hours.closed {
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  padding: 4px 12px;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
}

/* ============================================
   MENU TAB
   ============================================ */
/* .menu-tab {
  width: 100%;
}

.menu-category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.menu-category-tabs::-webkit-scrollbar {
  height: 6px;
}

.menu-category-tabs::-webkit-scrollbar-thumb {
  background: #f4a300;
  border-radius: 3px;
}

.category-tab {
  padding: 12px 24px;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  transition: all 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab:hover {
  background: #fff5e6;
  color: #f4a300;
  border-color: #f4a300;
}

.category-tab.active {
  background: #f4a300;
  color: white;
  border-color: #f4a300;
}

.menu-items-container {
  width: 100%;
}

.menu-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.menu-item-card {
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #e8e8e8 !important;
}

.menu-item-card:hover {
  box-shadow: 0 4px 16px rgba(244, 163, 0, 0.2) !important;
  transform: translateY(-4px);
  border-color: #f4a300 !important;
}

.item-content {
  padding: 12px;
}

.item-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.item-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.item-price {
  font-size: 20px;
  font-weight: bold;
  color: #f4a300;
  margin-top: 12px;
}

.add-ons {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.add-ons-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.addon-price {
  color: #f4a300;
  font-weight: 500;
}

/* Hours Sidebar in Menu */
.hours-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.order-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.cuisine-tag {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.status-tag {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}

.order-btn {
  width: 100%;
  padding: 14px;
  background: #f4a300;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.order-btn:hover {
  background: #d89000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

.no-menu-message {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.no-menu-message h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.no-menu-message p {
  font-size: 16px;
  color: #666;
} */

/* ============================================
   OTHER TABS
   ============================================ */
.placeholder-tab {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.placeholder-tab h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

.placeholder-tab p {
  font-size: 16px;
  color: #666;
}

/* About Tab */
.about-tab {
  width: 100%;
}

.about-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.about-card h2 {
  font-size: 32px;
  color: #333;
  margin-bottom: 15px;
}

.about-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.about-description {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 25px;
}

.tags-section {
  margin: 25px 0;
}

.tags-section h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
}

.tags-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-section {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 2px solid #f0f0f0;
}

.contact-section h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-btn {
  padding: 10px 20px;
  background: #f4a300;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-block;
}

.social-btn:hover {
  background: #d89000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */
.truck-site-footer {
  background: #1a1a1a;
  color: white;
  padding: 25px 0;
  margin-top: auto;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-logo {
  height: 40px;
  width: auto;
}

.footer-text {
  font-size: 14px;
  color: #ccc;
}

.footer-right {
  text-align: right;
}

.footer-right p {
  font-size: 14px;
  color: #ccc;
  margin: 4px 0;
}

.footer-right strong {
  color: #f4a300;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
  .header-nav {
    gap: 5px;
  }

  .nav-btn {
    padding: 8px 14px;
    font-size: 14px;
  }

  .hero-main-image {
    height: 350px;
  }

  /* .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  } */
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 15px;
  }

  .header-nav {
    width: 100%;
    justify-content: center;
  }

  .nav-btn {
    flex: 1 1;
    min-width: 80px;
  }

  .main-content {
    padding: 20px 16px;
  }

  .hero-main-image {
    height: 280px;
  }

  .gallery-thumbnails {
    gap: 8px;
  }

  .thumbnail {
    width: 80px;
    height: 60px;
  }

  /* .menu-items-grid {
    grid-template-columns: 1fr;
  } */

  .hours-sidebar {
    position: static;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-left {
    flex-direction: column;
  }

  .footer-right {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .logo-image {
    height: 45px;
  }

  .nav-btn {
    padding: 6px 10px;
    font-size: 13px;
  }

  .hero-main-image {
    height: 220px;
  }

  .about-card {
    padding: 20px;
  }

  .about-card h2 {
    font-size: 24px;
  }
}

/* Header */
.truck-header {
  background-color: white;
  border-bottom: 2px solid #e0e0e0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.truck-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
}

.truck-logo-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.truck-logo-small {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}

.truck-nav {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.truck-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s;
}

.truck-nav a:hover {
  color: #f4a300;
}

/* Hero Section */
.hero-section {
  background-color: white;
  padding: 30px 20px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 30px;
  gap: 30px;
}

.hero-main-image {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-truck-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

/* Sidebar */
.hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map-container {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.day-name {
  font-weight: 500;
  color: #555;
}

.day-hours {
  color: #28a745;
  font-weight: 500;
}

.day-hours.closed {
  color: #dc3545;
}

/* Image Gallery Carousel */
.image-gallery-carousel {
  max-width: 1200px;
  margin: 30px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
}

.carousel-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-images {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
}

.carousel-images::-webkit-scrollbar {
  height: 8px;
}

.carousel-images::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.carousel-images::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.carousel-image {
  flex-shrink: 0;
  width: 150px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.3s, transform 0.3s;
}

.carousel-image:hover {
  transform: scale(1.05);
}

.carousel-image.active {
  border-color: #f4a300;
}

.carousel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 3px solid #f4a300;
  padding-bottom: 15px;
}

/* Menu Section */
.menu-section {
  background-color: #f8f9fa;
  padding: 40px 0;
}

.menu-categories {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.menu-category {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.category-name {
  font-size: 26px;
  color: #495057;
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 5px solid #f4a300;
}
/* 
.menu-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
} */

.menu-item-card {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: transform 0.3s, box-shadow 0.3s;
}

.menu-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.menu-item-info {
  flex: 1 1;
}

.item-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.item-description {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.5;
}

.item-price {
  font-size: 20px;
  font-weight: bold;
  color: #28a745;
  margin-left: 15px;
  flex-shrink: 0;
}

.no-items,
.no-menu {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 20px;
}

/* About Section */
.about-section {
  background-color: white;
  padding: 40px 0;
}

.about-content {
  background-color: #f8f9fa;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.about-text h3 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

.cuisine-tag {
  font-size: 18px;
  color: #f4a300;
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-block;
}

.truck-details {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.price-range {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.truck-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.tag-badge {
  padding: 8px 16px;
  background-color: #e9ecef;
  border-radius: 20px;
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.social-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.social-link {
  padding: 10px 20px;
  background-color: #f4a300;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s, transform 0.3s;
}

.social-link:hover {
  background-color: #d68f00;
  transform: translateY(-2px);
}

/* Footer */
.truck-footer {
  background-color: #333;
  color: white;
  padding: 30px 20px;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-logo {
  width: 40px;
  height: 40px;
}

.footer-links p {
  margin: 5px 0;
  color: #ccc;
}

/* Responsive Design */
@media (max-width: 968px) {
  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-sidebar {
    order: -1;
  }

  .truck-nav {
    gap: 15px;
  }

  .truck-nav a {
    font-size: 14px;
  }

  /* .menu-items-grid {
    grid-template-columns: 1fr;
  } */

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .section-title {
    font-size: 24px;
  }

  .category-name {
    font-size: 20px;
  }

  .about-content {
    padding: 20px;
  }

  .carousel-image {
    width: 100px;
    height: 80px;
  }
}

.contact-us-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

.contact-us-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d38800, #F4A300, #ffc04d);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
}

.contact-us-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0.7rem 0;
}

.contact-us-header h1 {
    color: #1a2b49;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a2b49, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-us-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.contact-us-content {
    margin-top: 2rem;
}

.contact-info-card,
.contact-form-card {
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.contact-info-card:hover,
.contact-form-card:hover {
    box-shadow: 0 8px 24px rgba(244, 163, 0, 0.15);
    transform: translateY(-2px);
}

.contact-info-card h3,
.contact-form-card h3 {
    color: #1a2b49;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #F4A300;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-info-item:hover {
    background: #fff9f0;
    transform: translateX(5px);
}

.contact-info-item.survey-section {
    background: linear-gradient(135deg, #fff9f0, #fff5e6);
    border: 2px solid #F4A300;
    border-radius: 12px;
}

.contact-icon {
    font-size: 1.5rem;
    color: #F4A300;
    margin-right: 1rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.contact-info-text {
    flex: 1 1;
}

.contact-info-label {
    font-weight: 600;
    color: #1a2b49;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-info-value {
    color: #4b5563;
    margin: 0;
    line-height: 1.8;
    font-size: 0.95rem;
}

.contact-info-value a {
    color: #F4A300;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-value a:hover {
    color: #d38800;
    text-decoration: underline;
}

.contact-info-value address {
    font-style: normal;
    margin: 0;
}

.contact-info-value address p {
    margin: 0.25rem 0;
}

.survey-button {
    width: 100%;
    margin-top: 0.5rem;
    height: 45px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
    transition: all 0.3s ease;
}

.survey-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4);
}

.contact-form {
    margin-top: 1rem;
}

.contact-form .ant-form-item-label > label {
    font-weight: 600;
    color: #1a2b49;
}

.contact-form .ant-input,
.contact-form .ant-input-affix-wrapper {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.contact-form .ant-input:hover,
.contact-form .ant-input-affix-wrapper:hover {
    border-color: #F4A300;
}

.contact-form .ant-input:focus,
.contact-form .ant-input-affix-wrapper:focus,
.contact-form .ant-input-focused,
.contact-form .ant-input-affix-wrapper-focused {
    border-color: #F4A300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.1);
}

.contact-form .ant-input::placeholder {
    color: #9ca3af;
}

.submit-button {
    width: 100%;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
    transition: all 0.3s ease;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-us-container {
        padding: 2rem 1.5rem;
    }

    .contact-us-header h1 {
        font-size: 2rem;
    }

    .contact-us-subtitle {
        font-size: 1rem;
    }

    .contact-info-card,
    .contact-form-card {
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .contact-us-container {
        padding: 1.5rem 1rem;
        margin: 1rem;
        border-radius: 12px;
    }

    .contact-us-header {
        margin-bottom: 2rem;
    }

    .contact-us-header h1 {
        font-size: 1.75rem;
    }

    .contact-us-subtitle {
        font-size: 0.95rem;
    }

    .contact-info-item {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .contact-icon {
        margin-right: 0;
        margin-bottom: 0.75rem;
    }

    .contact-info-text {
        width: 100%;
    }

    .contact-info-value address {
        text-align: center;
    }

    .survey-button {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .contact-us-container {
        padding: 1rem 0.75rem;
        margin: 0.5rem;
    }

    .contact-us-header h1 {
        font-size: 1.5rem;
    }

    .contact-info-card h3,
    .contact-form-card h3 {
        font-size: 1.25rem;
    }

    .contact-form .ant-form-item {
        margin-bottom: 1rem;
    }
}


.partnership-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

.partnership-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d38800, #F4A300, #ffc04d);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
}

.partnership-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0.7rem 0;
}

.partnership-header h1 {
    color: #1a2b49;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a2b49, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.partnership-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.partnership-content {
    margin-top: 2rem;
}

.partnership-form-wrapper {
    width: 100%;
}

.partnership-form-card,
.partnership-questions-card {
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.partnership-form-card:hover,
.partnership-questions-card:hover {
    box-shadow: 0 8px 24px rgba(244, 163, 0, 0.15);
    transform: translateY(-2px);
}

.partnership-form-card h3,
.partnership-questions-card h3 {
    color: #1a2b49;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #F4A300;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.partnership-card-icon {
    font-size: 1.25rem;
    color: #F4A300;
}

.partnership-form .ant-form-item,
.partnership-questions-form .ant-form-item {
    margin-bottom: 1.25rem;
}

.partnership-form .ant-form-item-label > label,
.partnership-questions-form .ant-form-item-label > label {
    font-weight: 600;
    color: #1a2b49;
}

.partnership-form .ant-input,
.partnership-form .ant-input-affix-wrapper,
.partnership-form .ant-select-selector,
.partnership-questions-form .ant-input {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.partnership-form .ant-input:hover,
.partnership-form .ant-input-affix-wrapper:hover,
.partnership-form .ant-select-selector:hover,
.partnership-questions-form .ant-input:hover {
    border-color: #F4A300;
}

.partnership-form .ant-input:focus,
.partnership-form .ant-input-affix-wrapper:focus,
.partnership-form .ant-input-focused,
.partnership-form .ant-select-focused .ant-select-selector,
.partnership-questions-form .ant-input:focus {
    border-color: #F4A300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.1);
}

.partnership-textarea.ant-input {
    resize: vertical;
    min-height: 80px;
}

.partnership-submit-item {
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.partnership-submit-button {
    width: 100%;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
    transition: all 0.3s ease;
}

.partnership-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4);
}

.partnership-info-footer {
    margin-top: 2rem;
    text-align: center;
}

.partnership-contact-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff9f0, #fff5e6);
    border: 1px solid rgba(244, 163, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.partnership-footer-icon {
    color: #F4A300;
    font-size: 1.1rem;
}

.partnership-footer-text {
    color: #4b5563;
    font-size: 0.95rem;
}

.partnership-footer-text a {
    color: #F4A300;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.partnership-footer-text a:hover {
    color: #d38800;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 992px) {
    .partnership-container {
        padding: 2rem 1.5rem;
    }

    .partnership-header h1 {
        font-size: 2rem;
    }

    .partnership-subtitle {
        font-size: 1rem;
    }

    .partnership-form-card,
    .partnership-questions-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .partnership-container {
        padding: 1.5rem 1rem;
        margin: 1rem;
        border-radius: 12px;
    }

    .partnership-header {
        margin-bottom: 2rem;
    }

    .partnership-header h1 {
        font-size: 1.75rem;
    }

    .partnership-subtitle {
        font-size: 0.95rem;
    }

    .partnership-form-card h3,
    .partnership-questions-card h3 {
        font-size: 1.25rem;
    }

    .partnership-questions-form .ant-form-item {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .partnership-container {
        padding: 1rem 0.75rem;
        margin: 0.5rem;
    }

    .partnership-header h1 {
        font-size: 1.5rem;
    }
}

.investors-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

.investors-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d38800, #F4A300, #ffc04d);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 8px rgba(244, 163, 0, 0.3);
}

.investors-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0.7rem 0;
}

.investors-header h1 {
    color: #1a2b49;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a2b49, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.investors-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.investors-content {
    margin-top: 2rem;
}

.investors-form-wrapper {
    width: 100%;
}

.investors-form-card,
.investors-questions-card {
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.investors-form-card:hover,
.investors-questions-card:hover {
    box-shadow: 0 8px 24px rgba(244, 163, 0, 0.15);
    transform: translateY(-2px);
}

.investors-form-card h3,
.investors-questions-card h3 {
    color: #1a2b49;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #F4A300;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.investors-card-icon {
    font-size: 1.25rem;
    color: #F4A300;
}

.investors-form .ant-form-item,
.investors-questions-form .ant-form-item {
    margin-bottom: 1.25rem;
}

.investors-form .ant-form-item-label > label,
.investors-questions-form .ant-form-item-label > label {
    font-weight: 600;
    color: #1a2b49;
}

.investors-form .ant-input,
.investors-form .ant-input-affix-wrapper,
.investors-form .ant-select-selector,
.investors-questions-form .ant-input {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.investors-form .ant-input:hover,
.investors-form .ant-input-affix-wrapper:hover,
.investors-form .ant-select-selector:hover,
.investors-questions-form .ant-input:hover {
    border-color: #F4A300;
}

.investors-form .ant-input:focus,
.investors-form .ant-input-affix-wrapper:focus,
.investors-form .ant-input-focused,
.investors-form .ant-select-focused .ant-select-selector,
.investors-questions-form .ant-input:focus {
    border-color: #F4A300;
    box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.1);
}

.investors-textarea.ant-input {
    resize: vertical;
    min-height: 80px;
}

.investors-submit-item {
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.investors-submit-button {
    width: 100%;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(244, 163, 0, 0.3);
    transition: all 0.3s ease;
}

.investors-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 163, 0, 0.4);
}

.investors-info-footer {
    margin-top: 2rem;
    text-align: center;
}

.investors-contact-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff9f0, #fff5e6);
    border: 1px solid rgba(244, 163, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.investors-footer-text {
    color: #4b5563;
    font-size: 0.95rem;
}

.investors-footer-text a {
    color: #F4A300;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.investors-footer-text a:hover {
    color: #d38800;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 992px) {
    .investors-container {
        padding: 2rem 1.5rem;
    }

    .investors-header h1 {
        font-size: 2rem;
    }

    .investors-subtitle {
        font-size: 1rem;
    }

    .investors-form-card,
    .investors-questions-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .investors-container {
        padding: 1.5rem 1rem;
        margin: 1rem;
        border-radius: 12px;
    }

    .investors-header {
        margin-bottom: 2rem;
    }

    .investors-header h1 {
        font-size: 1.75rem;
    }

    .investors-subtitle {
        font-size: 0.95rem;
    }

    .investors-form-card h3,
    .investors-questions-card h3 {
        font-size: 1.25rem;
    }

    .investors-questions-form .ant-form-item {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .investors-container {
        padding: 1rem 0.75rem;
        margin: 0.5rem;
    }

    .investors-header h1 {
        font-size: 1.5rem;
    }
}


.DesignSystemDemo_wrapper__h\+P3x {
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--color-bg-light);
}

.DesignSystemDemo_section__H4qwm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.DesignSystemDemo_buttonRow__zqzxE {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Base Button */
.DesignSystemDemo_button__7nUcF {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

/* ===== PRIMARY ===== */
.DesignSystemDemo_primary__QzYam {
  background-color: var(--color-primary);
  color: var(--text-inverse);
  padding: 12px 22px;
  font-weight: var(--weight-semibold);
}

.DesignSystemDemo_primary__QzYam:hover {
  background-color: var(--color-primary-hover);
}

/* ===== SECONDARY ===== */
.DesignSystemDemo_secondary__xkmSL {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 12px 22px;
  font-weight: var(--weight-medium);
}

.DesignSystemDemo_secondary__xkmSL:hover {
  background-color: var(--color-primary-light);
}

/* ===== DISABLED ===== */
.DesignSystemDemo_disabled__SObYd {
  background-color: var(--color-gray-400);
  color: var(--text-inverse);
  padding: 12px 22px;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ===== SMALL ===== */
.DesignSystemDemo_small__yaZwL {
  padding: 6px 14px;
  font-size: 12px;
}

.DesignSystemDemo_smallGray__k4OXx {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--color-gray-300);
}

.DesignSystemDemo_smallGray__k4OXx:hover {
  background-color: rgba(215, 215, 215, 0.5);
}

.DesignSystemDemo_smallPrimary__Nz9-V {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ===== LARGE ===== */
.DesignSystemDemo_large__NQeOK {
  padding: 16px 28px;
  font-size: 16px;
}

.DesignSystemDemo_largeSecondary__ZDply {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.DesignSystemDemo_largeNegative__nnnv1 {
  background: #ffffff;
  color: var(--color-negative);
  border: 1.5px solid var(--color-negative);
}

.DesignSystemDemo_largeNegative__nnnv1:hover {
  background-color: rgba(254, 0, 4, 0.05);
}

.vendor-onboarding-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24px;
}

.vendor-onboarding-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.vendor-onboarding-inner {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vendor-onboarding-inner .ant-typography {
  display: block;
  margin-bottom: 8px;
}

.vendor-onboarding-inner .block-mb {
  display: block;
  margin-bottom: 16px;
  color: #666;
}

.onboarding-card {
  margin-bottom: 24px;
}

.onboarding-card .ant-card-head-title {
  font-size: 1.1rem;
}

.onboarding-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.onboarding-actions .ant-btn-primary {
  background: #F4A300;
  border-color: #F4A300;
}

.onboarding-actions .ant-btn-primary:hover {
  background: #e59400;
  border-color: #e59400;
}

.onboarding-no-subscription-note {
  margin-top: 24px;
  padding: 12px 16px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  color: #389e0d;
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-revision-banner {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #ffccc7;
  background: #fff2f0;
  color: #a8071a;
}

.onboarding-revision-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.onboarding-revision-subtitle {
  color: #ad2e24;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.onboarding-revision-message {
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(168, 7, 26, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  color: #a8071a;
  font-size: 13px;
  line-height: 1.5;
}