@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght@300');

/* PP Neue Montreal - Variable font (supports all weights) */
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-Variable.woff2') format('woff2-variations'),
         url('/fonts/PPNeueMontreal-Variable.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* PP Neue Montreal - Static fallbacks for older browsers */
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
         url('/fonts/PPNeueMontreal-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
         url('/fonts/PPNeueMontreal-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-SemiBold.woff2') format('woff2'),
         url('/fonts/PPNeueMontreal-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
         url('/fonts/PPNeueMontreal-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/**
 * Color variables
 */
:root {
  /* Gray scale */
  --gray-025: #FDFDFD;
  --gray-050: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E9EAEB;
  --gray-300: #D5D7DA;
  --gray-400: #A4A7AE;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252B37;
  --gray-900: #181D27;
  --gray-950: #0A0D12;

  /* Brand/Primary colors */
  --brand-950: #000000;
  --brand-900: #0a0a30;

  /* Semantic colors */
  --color-primary: var(--brand-950);
  --color-primary-hover: var(--brand-900);
  --color-text: var(--gray-800);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-border: var(--gray-200);

  /* Status colors */
  --success-500: #12B76A;
  --warning-400: #FDB022;
  --error-500: #F04438;

  /* Font families */
  --font-display: 'PP Neue Montreal', sans-serif;
  --font-body: 'PP Neue Montreal', sans-serif;

  --page-pad: max(24px, 4vw);
}
@import './_fonts.css';
@import './_colors.css';
@import './_normalize.css';
@import './_reboot.css';
@import './_typography.css';
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* modified:
 * - removed IE related rules
 * - removed rules that are redeclared later
 * - removed focus/outline rules
 */

/* Document
   ========================================================================== */

/**
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline; /* 1 */
  text-decoration: underline dotted; /* 1 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  padding: 0; /* 3 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Prevent padding and border from affecting element width
 */
html {
  box-sizing: border-box;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--color-text);
}

*,
*::before,
*::after {
  box-sizing: inherit;

  /* default border style */
  border: none;
}

/**
 * Default colors
 */
body {
  background-color: #fff;
  hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  color: var(--color-text);
}

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

button {
  border: 0;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
  outline: none;
}

button,
input,
optgroup,
select,
textarea {
  appearance: none;
  background-color: inherit;
  font: inherit;
  line-height: inherit;
  outline: none;
  margin: 0; /* Remove the margin in Firefox and Safari. */
}

/* Opinionated: add "hand" cursor to non-disabled button elements.*/ 
button,
[type='button'],
[type='reset'],
[type='submit'] {
 &:not(:disabled) {
   cursor: pointer;
 }
}

/* Remove cancel and results buttons for search inputs */
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-results-button {
 display: none;
}

textarea {
  padding: 0.5rem 0;
}

img {
  vertical-align: middle; /* from bootstrap reboot */
}

table {
  border-collapse: collapse;
}

/* remove IE clear button on inputs */
::-ms-clear {
 display: none;
}

/* Display styles - PP Neue Montreal */
h1 {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.02em;
}

h4 {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 500;
  line-height: 38px;
}

h5 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

h6 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

/* Body text styles */
.text-xl {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
}

.text-lg {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
}

.text-md {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

.text-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.text-xs {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
}

/* ============================================
   TOAST ALERT COMPONENT
   Reusable dark toast notification
   ============================================ */

.toast-alert {
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px 16px;
    gap: 12px;
    position: fixed;
    width: 343px;
    right: 24px;
    top: 24px;
    background: #13161B;
    border: 1px solid #373A41;
    border-radius: 12px;
    z-index: 9999;
    animation: toast-slide-in 0.3s ease-out;
}

.toast-alert.is-visible {
    display: flex;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-alert.is-hiding {
    animation: toast-slide-out 0.3s ease-in forwards;
}

/* Close button */
.toast-alert__close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    position: absolute;
    width: 36px;
    height: 36px;
    right: 8px;
    top: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.toast-alert__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.toast-alert__close-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.toast-alert__close-icon::before,
.toast-alert__close-icon::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 1.67px;
    left: 50%;
    top: 50%;
    background: #61656C;
    border-radius: 1px;
}

.toast-alert__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.toast-alert__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Featured icon */
.toast-alert__icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

/* Content */
.toast-alert__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.toast-alert__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding-right: 28px;
}

.toast-alert__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #CECFD2;
    margin: 0;
}

.toast-alert__description {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #94979C;
    margin: 0;
}

/* Actions */
.toast-alert__actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.toast-alert__action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #CECFD2;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.toast-alert__action:hover {
    color: #FFFFFF;
}

/* Variants - icon classes for JS to swap if needed */
.toast-alert--success .toast-alert__icon {
    /* Default success icon */
}

.toast-alert--error .toast-alert__icon {
    /* Can swap icon via JS for error variant */
}

.toast-alert--warning .toast-alert__icon {
    /* Can swap icon via JS for warning variant */
}

/* Mobile responsive */
@media (max-width: 767px) {
    .toast-alert {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
    }
}

/* ================================================
   Become Partner Page
   ================================================ */

.become-partner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 40px;
    background: #FDFDFD;
}

.become-partner__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 40px var(--page-pad);
    gap: 24px;
    width: 100%;
    background: #FDFDFD;
    border-radius: 0 16px 0 0;
}

/* Header */
.become-partner__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.become-partner__title {
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.become-partner__subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #414651;
    margin: 0;
}

/* Video Section */
.become-partner__video {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.become-partner__video-inner {
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.become-partner__video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Card */
.become-partner__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

/* Section */
.become-partner__section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.become-partner__section-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 280px;
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
}

.become-partner__section-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    margin: 0;
}

.become-partner__section-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.become-partner__section-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
}

/* Field Row */
.become-partner__field-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.become-partner__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
}

.become-partner__field--full {
    width: 100%;
}

/* Label */
.become-partner__label-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
}

.become-partner__label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
}

.become-partner__asterisk {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #4A5578;
}

/* Input */
.become-partner__input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

.become-partner__input::placeholder {
    color: #717680;
}

.become-partner__input:focus {
    outline: none;
    border-color: #4A5578;
    box-shadow: 0px 0px 0px 4px rgba(74, 85, 120, 0.12), 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.become-partner__input--readonly,
.become-partner__input:disabled,
input.become-partner__input[disabled] {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #d0d5dd !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Phone Input — intl-tel-input overrides */
.iti {
    width: 100%;
    display: flex;
    align-items: stretch;
}

.iti__tel-input {
    height: 44px;
    width: 100%;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    padding: 10px 14px;
    box-sizing: border-box;
}

.iti__tel-input::placeholder {
    color: #717680;
}

.iti__tel-input:focus {
    outline: none;
    border-color: #4A5578;
    box-shadow: 0px 0px 0px 4px rgba(74, 85, 120, 0.12), 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.iti__selected-country {
    height: 44px;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #D5D7DA;
    background: #FFFFFF;
    display: flex;
    align-items: center;
}

.iti__selected-country:hover {
    background: #F9FAFB;
}

/* Divider */
.become-partner__divider {
    width: 100%;
    height: 1px;
    background: #EAECF0;
}

/* Error */
.become-partner__error {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #D92D20;
}

/* Actions */
.become-partner__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

/* Button */
.become-partner__btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    min-width: 200px;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.become-partner__btn .material-symbols-rounded {
    font-size: 20px;
}

.become-partner__btn--primary {
    background: #000000;
    border: 1px solid #000000;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.become-partner__btn--primary .material-symbols-rounded {
    color: #FFFFFF;
}

.become-partner__btn--primary:hover {
    background: #181D27;
}

.become-partner__btn--primary:disabled {
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    color: #A4A7AE;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    cursor: not-allowed;
}

.become-partner__btn--primary:disabled .material-symbols-rounded {
    color: #D5D7DA;
}

/* Responsive */
@media (max-width: 900px) {
    .become-partner__container {
        padding: 40px 24px;
    }

    .become-partner__section {
        flex-direction: column;
    }

    .become-partner__section-label {
        width: 100%;
        max-width: 100%;
    }

    .become-partner__field-row {
        flex-direction: column;
    }

    .become-partner__title {
        font-size: 36px;
        line-height: 44px;
    }
}

@media (max-width: 600px) {
    .become-partner__container {
        padding: 24px 16px;
    }

    .become-partner__title {
        font-size: 28px;
        line-height: 36px;
    }

    .become-partner__card {
        padding: 16px;
    }

    .become-partner__btn {
        width: 100%;
    }
}

/* Become Seller Pages */

.become-seller {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 40px;
    background: #FDFDFD;
}

.become-seller__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 70px;
    gap: 24px;
    width: 100%;
    background: #FDFDFD;
    border-radius: 0 16px 0 0;
}

.become-seller__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.become-seller__title {
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.become-seller__subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
    margin: 0;
    hyphens: none;
}

/* Back Button */
.become-seller__back {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    width: 100%;
    max-width: 100%;
}

.become-seller__back .material-symbols-rounded {
    font-size: 20px;
    color: #717680;
}

.become-seller__back-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.become-seller__back:hover .material-symbols-rounded,
.become-seller__back:hover .become-seller__back-text {
    color: #414651;
}

/* Watch Button */
.become-seller__watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.become-seller__watch-btn:hover {
    background: #F9FAFB;
}

.become-seller__watch-btn svg {
    flex-shrink: 0;
    color: #414651;
}

/* Progress Steps */
.become-seller__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 8px 0;
    height: 76px;
}

.become-seller__progress-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    position: relative;
}

.become-seller__progress-lines {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    width: 85%;
    height: 0;
    top: 12px;
    left: 7.5%;
}

.become-seller__progress-line {
    flex: 1;
    height: 4px;
    border: none;
    background-image: radial-gradient(circle, #D5D7DA 1px, transparent 1px);
    background-size: 10px 4px;
    background-repeat: repeat-x;
    background-position: center;
}

.become-seller__progress-line--complete {
    background-image: radial-gradient(circle, #D5D7DA 1px, transparent 1px);
}

.become-seller__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    z-index: 1;
}

.become-seller__step-icon {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
}

.become-seller__step-icon--active {
    background: #FFFFFF;
    border: 2px solid #414651;
}

.become-seller__step-icon--complete {
    background: transparent;
    border: none;
}

.become-seller__step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D5D7DA;
}

.become-seller__step-icon--active .become-seller__step-dot,
.become-seller__step-icon--complete .become-seller__step-dot {
    background: #FFFFFF;
}

.become-seller__step-check {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.become-seller__step-complete {
    width: 24px;
    height: 24px;
}

.become-seller__step-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #414651;
}

.become-seller__step--active .become-seller__step-text {
    color: #404968;
}

/* Form Card */
.become-seller__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    width: 100%;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.become-seller__card--alert {
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 10px;
}

.become-seller__card--stripe {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
}

.become-seller__stripe-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    background: #FAFAFA;
    border-radius: 8px;
    box-sizing: border-box;
}

.become-seller__stripe-illustration {
    max-width: 100%;
    height: auto;
}

.become-seller__stripe-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.become-seller__stripe-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.become-seller__stripe-title {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #252B37;
}

.become-seller__stripe-desc {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
}

.become-seller__card--stripe form {
    display: flex;
    gap: 12px;
    margin-left: auto;
}


.become-seller__card--stripe .become-seller__error {
    width: 100%;
    padding: 0 0 16px 0;
}

.become-seller__card--stripe .become-seller__error--hidden {
    display: none;
    padding: 0;
}

.become-seller__container > form {
    width: 100%;
}

.become-seller__section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.become-seller__section--column {
    flex-direction: column;
    gap: 16px;
}

.become-seller__section--column-lg {
    flex-direction: column;
    gap: 24px;
}

.become-seller__section-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 280px;
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
}

.become-seller__section-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    margin: 0;
}

.become-seller__section-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.become-seller__section-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.become-seller__section-fields .become-seller__input,
.become-seller__section-fields .become-seller__select {
    width: 100%;
}

.become-seller .select-with-icon {
    height: 44px;
}

.become-seller--flow .select-with-icon .custom-select-trigger,
.become-seller--flow .select-with-icon .custom-select-option {
    font-family: 'PP Neue Montreal', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

/* Form Fields */
.become-seller__field-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.become-seller__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.become-seller__field--full {
    width: 100%;
}

.become-seller__field2 {
    display: flex;
    padding: var(--spacing-xl, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl, 16px);
    align-self: stretch;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
    background: var(--Component-colors-Utility-Gray-utility-gray-50, #FAFAFA);
}

.become-seller__field--hidden {
    display: none;
}

.become-seller__field--zip {
    flex: 0 0 35%;
}

.become-seller__label-wrapper {
    display: inline;
}

.become-seller__label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.become-seller__asterisk {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #2E2E6B;
}

.become-seller__input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

.become-seller__input::placeholder {
    color: #A4A7AE;
}

.become-seller__input:focus {
    outline: none;
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.become-seller__input--readonly,
.become-seller__input[readonly] {
    background: #FAFAFA !important;
    background-color: #FAFAFA !important;
    color: #717680 !important;
    -webkit-text-fill-color: #717680 !important;
    cursor: not-allowed;
    border: 1px solid #D5D7DA !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
    opacity: 1 !important;
    -webkit-opacity: 1;
}

.become-seller__select--placeholder,
.become-seller__select:invalid {
    color: #717680;
}

.become-seller__select {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23A4A7AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.become-seller__select:focus {
    outline: none;
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.become-seller__hint {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.become-seller__error {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #D92D20;
}

.become-seller__error--hidden {
    display: none;
}

.become-seller__error-link {
    color: #2E2E6B;
    text-decoration: underline;
    font-weight: 500;
}

.become-seller__error-link:hover {
    color: #000000;
}

.become-seller__divider {
    width: 100%;
    height: 0;
    border: 1px solid #E9EAEB;
    border-radius: 20px;
}

.become-seller__url__divier {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 8px);
    align-self: stretch;
    border: 1px solid #E9EAEB;
    width: 100%;
    background: var(--Colors-Border-border-secondary, #E9EAEB);
}
/* Verified Badge */
.become-seller__verified-badge {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
    margin-left: 8px;
}

.become-seller__verified-badge strong {
    font-weight: 600;
    color: #A4A7AE;
}

/* Optional Label */
.become-seller__optional-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A4A7AE;
    margin-left: 4px;
}

/* Step Sub Text */
.become-seller__step-sub {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #535862;
}

/* Step Number */
.become-seller__step-number {
    font-family: 'PP Neue Montreal', var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #717680;
    display: flex;
    align-items: center;
    justify-content: center;
}

.become-seller__step-icon--active .become-seller__step-number {
    color: #414651;
}

/* Radio Cards */
.become-seller__radio-cards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.become-seller__radio-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    padding: 16px;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.become-seller__radio-card:hover {
    border-color: #A4A7AE;
}

.become-seller__radio-card:has(input:checked) {
    border: 2px solid #181D27;
    padding: 15px;
}

.become-seller__radio-card:has(input:checked) input[type="radio"] {
    outline: none;
    box-shadow: none;
}

.become-seller__radio-card input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid #D5D7DA;
    border-radius: 9999px;
    margin: 0;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    background: #FFFFFF;
    outline: none;
}

.become-seller__radio-card input[type="radio"]:checked {
    border: none;
    background: #181D27;
    background-image: radial-gradient(circle, #FFFFFF 4px, #181D27 4px);
}

.become-seller__radio-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.become-seller__radio-card-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
}

.become-seller__radio-card-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
}

/* Video Hints */
.become-seller__video-hints {
    display: flex;
    padding: var(--spacing-md, 8px) var(--spacing-sm, 6px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl, 16px);
    align-self: stretch;
    border-radius: var(--radius-md, 8px);
    background: var(--Component-colors-Utility-Gray-utility-gray-100, #F5F5F5);
    padding-left: 24px !important;  
}

.become-seller__video-hints li {
    align-self: stretch;
    color: var(--colors-text-text-tertiary-600, #535862);
    font-family: var(--Font-family-font-family-body, "PP Neue Montreal");
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
    list-style-type: disc !important; /* 1. Forces the default black dots to appear */
}

.become-seller__video-hint-sub {
    font-weight: 400;
    color: #717680;
}

.become-seller__video-notice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    margin-top: 8px;
    background: #FAFAFA;
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
    width: 100%;
    justify-content: center;
}

.become-seller__stripe-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
}

.become-seller__stripe-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.become-seller__stripe-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.become-seller__stripe-info-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    margin: 0;
}

.become-seller__stripe-info-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.become-seller__btn--stripe-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    white-space: nowrap;
}

.become-seller__btn--stripe-link:hover {
    background: #F9F9FB;
}

.become-seller__btn--stripe-link .material-symbols-rounded {
    font-size: 20px;
    color: #A4A7AE;
}

/* Avatar Section */
.become-seller__avatar-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.become-seller__avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.become-seller__avatar-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.33px;
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border: 0.833px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    box-sizing: border-box;
}

.become-seller__avatar-img {
    width: 73.33px;
    height: 73.33px;
    border-radius: 50%;
    object-fit: cover;
    border: 0.833px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16.67px 20px -3.33px rgba(10, 13, 18, 0.08),
                0 6.67px 6.67px -3.33px rgba(10, 13, 18, 0.03),
                0 2.5px 2.5px -1.25px rgba(10, 13, 18, 0.04);
}

.become-seller__avatar-placeholder {
    width: 73.33px;
    height: 73.33px;
    border-radius: 50%;
    background: #E9EAEB;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #717680;
}

.become-seller__avatar-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    height: 80px;
}

.become-seller__avatar-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05),
                inset 0 0 0 1px rgba(10, 13, 18, 0.18),
                inset 0 -2px 0 rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    cursor: pointer;
}

.become-seller__avatar-btn:hover {
    background: #F9F9FB;
}

/* Tags Input */
.become-seller__tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    padding: 0px 14px;
    width: 100%;
    min-height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
}

.become-seller__tags input.become-seller__tags-input,
.become-seller__tags input.become-seller__tags-input:hover,
.become-seller__tags input.become-seller__tags-input:focus,
.become-seller__tags input.become-seller__tags-input:active {
    flex: 1;
    min-width: 120px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

.become-seller__tags-input::placeholder {
    color: #717680;
}

.become-seller__tag {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 4px 2px 9px;
    gap: 3px;
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    border-radius: 6px;
}

.become-seller__tag--locked {
    padding: 2px 9px;
    cursor: default;
}

.become-seller__tag-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.become-seller__tag-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #717680;
}

.become-seller__tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 3px;
}

.become-seller__tag-remove:hover {
    background: #F5F5F5;
}

.become-seller__tag-remove svg {
    width: 12px;
    height: 12px;
    stroke: #A4A7AE;
}

/* Background Items */
.become-seller__bg-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.become-seller__care-toggle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.become-seller__btn-group {
    display: flex;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    filter: drop-shadow(0px 1px 2px rgba(10, 13, 18, 0.05));
    overflow: hidden;
}

.become-seller__btn-group-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 14px;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    background: #FFFFFF;
    border-right: 1px solid #D5D7DA;
}

.become-seller__btn-group-item:last-child {
    border-right: none;
}

.become-seller__btn-group-item--active {
    background: #FAFAFA;
    color: #252B37;
}

.become-seller__btn-group-radio {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 1px solid #D5D7DA;
    box-sizing: border-box;
}

.become-seller__btn-group-item--active .become-seller__btn-group-radio {
    background: #000000;
    border-color: #000000;
    box-shadow: inset 0 0 0 3px #FFFFFF;
}

#careItemsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.become-seller__bg-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.become-seller__bg-item-input {
    flex: 1;
}

.become-seller__bg-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #A4A7AE;
    cursor: pointer;
}

.become-seller__bg-item-remove:hover {
    opacity: 0.7;
}

.become-seller__bg-item-remove img {
    pointer-events: none;
}

.become-seller__add-btn img {
    width: 16px;
    height: 16px;
}

.become-seller__add-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-top: 8px;
    background: none;
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    cursor: pointer;
}

.become-seller__add-btn:hover {
    color: #252B37;
}

/* Actions */
.become-seller__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

.become-seller__btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.become-seller__btn--primary {
    background: #000000;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.become-seller__btn--primary:hover {
    background: #181D27;
}

.become-seller__btn--primary:disabled {
    background: #F9F9FB;
    color: #A4A7AE;
    border: 1px solid #E9EAEB;
    cursor: not-allowed;
}

.become-seller__btn--secondary {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05),
                inset 0 0 0 1px rgba(10, 13, 18, 0.18),
                inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.become-seller__btn--secondary:hover {
    background: #F9F9FB;
}

.become-seller__btn--muted {
    background: #F9F9FB;
    color: #A4A7AE;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.become-seller__btn--muted:hover {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.become-seller__btn--text {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #535862;
}

.become-seller__btn--text:hover {
    color: #252B37;
}

.become-seller__btn--disabled {
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #A4A7AE;
    cursor: not-allowed;
}

.become-seller__btn--disabled img {
    opacity: 0.5;
}

.become-seller__link {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
    text-decoration: none;
    cursor: pointer;
}

.become-seller__link:hover {
    color: #252B37;
}

.become-seller__btn--full {
    width: 100%;
    margin-top: 12px;
}

.become-seller__btn svg {
    flex-shrink: 0;
}

.become-seller__btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Alert Messages */
.become-seller__alert {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
}

.become-seller__alert--info {
    background: #EFF8FF;
    border: 1px solid #B2DDFF;
}

.become-seller__alert--success {
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
}

.become-seller__alert--warning {
    background: #FFFAEB;
    border: 1px solid #FEDF89;
}

.become-seller__alert--error {
    background: #FEF3F2;
    border: 1px solid #FECDCA;
}

.become-seller__alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.become-seller__alert-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.become-seller__alert-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #181D27;
}

.become-seller__alert-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

/* Checkbox */
.become-seller__checkbox-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

input.become-seller__checkbox[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid #D5D7DA;
    border-radius: 6px;
    cursor: pointer;
    background: #FFFFFF;
    position: relative;
}

input.become-seller__checkbox[type="checkbox"]:checked {
    background: #000020;
    border-color: #000020;
}

.become-seller__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.become-seller__checkbox:focus {
    outline: none;
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.become-seller__checkbox-label {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    cursor: pointer;
}

.become-seller__checkbox-label--multiline {
    line-height: 22px;
}

.become-seller__card > .become-seller__checkbox-wrapper {
    padding: 0;
    align-items: flex-start;
}

/* Status Card (Approval page) */
.become-seller__status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.become-seller__status-check {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.become-seller__status-icon-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.become-seller__status-icon-outer-lg {
    position: absolute;
    width: 40px;
    height: 40px;
}

.become-seller__status-icon-outer {
    position: absolute;
    width: 28px;
    height: 28px;
}

.become-seller__status-icon-inner {
    position: relative;
    width: 16px;
    height: 16px;
}

.become-seller__status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.become-seller__status-icon--info {
    background: #EFF8FF;
}

.become-seller__status-icon--success {
    background: #ECFDF3;
}

.become-seller__status-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.become-seller__status-title {
    font-family: var(--font-body);
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.become-seller__status-desc {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.become-seller__status-text {
    margin: 0;
    font-size: 14px;
    color: #535862;
}

/* Dashboard Cards */
.become-seller__dashboard-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.become-seller__dashboard-card {
    flex: 1;
    min-width: 200px;
    padding: 24px;
    background: #F9F9FB;
    border-radius: 12px;
}

.become-seller__dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.become-seller__dashboard-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.become-seller__dashboard-icon--blue {
    background: #EFF8FF;
}

.become-seller__dashboard-icon--green {
    background: #ECFDF3;
}

.become-seller__dashboard-icon--red {
    background: #FEF3F2;
}

.become-seller__dashboard-label {
    margin: 0;
    font-size: 14px;
    color: #535862;
}

/* Spinner */
.become-seller__spinner {
    animation: become-seller-spin 1s linear infinite;
}

@keyframes become-seller-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Modal */
.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.profile-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    position: relative;
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
                0px 8px 8px -4px rgba(10, 13, 18, 0.03),
                0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    border-radius: 16px;
}

.profile-modal__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 0;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.profile-modal__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.profile-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.profile-modal__close:hover {
    background: #F5F5F5;
}

.profile-modal__close svg {
    width: 24px;
    height: 24px;
}

.profile-modal__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

.profile-modal__title {
    margin: 0;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
}

.profile-modal__desc {
    margin: 0;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.profile-modal__actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 24px 24px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.profile-modal__btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    border: none;
}

.profile-modal__btn--secondary {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
                inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.profile-modal__btn--secondary:hover {
    background: #F9F9FB;
}

.profile-modal__btn--primary {
    background: #000000;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
                inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.profile-modal__btn--primary:hover {
    background: #181D27;
}

/* Profile Tabs */
.profile-tabs {
    width: 100%;
    margin-bottom: 24px;
}

.profile-tabs ul {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    gap: 12px;
    list-style: none;
    border-bottom: 1px solid #E9EAEB;
}

.profile-tabs li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 4px 12px;
    gap: 8px;
    position: relative;
}

.profile-tabs li a {
    font-family: 'PP Neue Montreal', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
    text-decoration: none;
    white-space: nowrap;
}

.profile-tabs li a:hover {
    color: #414651;
}

.profile-tabs li.active a {
    color: #000000;
}

.profile-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #000000;
}

/* Responsive */
@media (max-width: 1024px) {
    .become-seller__container {
        padding: 40px;
    }

    .become-seller__header,
    .become-seller__video,
    .become-seller__intro,
    .become-seller__progress,
    .become-seller__card,
    .become-seller__actions,
    .become-seller__alert {
        max-width: 100%;
    }

    .become-seller__section {
        flex-direction: column;
    }

    .become-seller__section-label {
        width: 100%;
        max-width: 100%;
    }

    .become-seller__title {
        font-size: 36px;
        line-height: 44px;
    }
}

@media (max-width: 768px) {
    .become-seller__container {
        padding: 24px;
    }

    .become-seller__header,
    .become-seller__video,
    .become-seller__intro,
    .become-seller__progress,
    .become-seller__card,
    .become-seller__actions,
    .become-seller__alert {
        max-width: 100%;
    }


    .become-seller__field--zip {
        flex: 1;
    }

    .become-seller__title {
        font-size: 28px;
        line-height: 36px;
    }


    .become-seller__step-text {
        font-size: 12px;
    }

    .become-seller__dashboard-grid {
        flex-direction: column;
    }

    .profile-tabs ul {
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .profile-tabs li {
        padding: 0 2px 12px;
    }

    .profile-tabs li a {
        font-size: 13px;
    }
}

/* Textarea */
.become-seller__textarea-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.become-seller__field-row .become-seller__textarea {
    min-height: 154px;
}

.become-seller__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 270px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    resize: vertical;
    padding-bottom: 20px;
}

.become-seller__textarea::-webkit-resizer {
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='9' y1='0.5' x2='0.5' y2='9' stroke='%23A4A7AE' stroke-linecap='round'/%3E%3Cline x1='9' y1='4.5' x2='4.5' y2='9' stroke='%23A4A7AE' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    width: 20px;
    height: 20px;
}

.become-seller__textarea--embedded {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    min-height: 160px;
    resize: none;
}

.become-seller__textarea--compact {
    min-height: 84px;
}

.become-seller__textarea::placeholder {
    color: #717680;
}

.become-seller__textarea:focus {
    outline: none;
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.become-seller__textarea--embedded:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.become-seller__textarea-group--active {
    border-color: #A4A7AE;
}

.become-seller__upload-inline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    gap: 4px;
    width: calc(100% - 28px);
    box-sizing: border-box;
    margin: 8px 14px 14px;
    border: 1px dashed #E9EAEB;
    border-radius: 12px;
}

.become-seller__textarea-group .become-seller__upload-divider {
    padding: 0 14px;
    margin-top: 8px;
}

.become-seller__textarea-group .become-seller__upload-file {
    width: calc(100% - 28px);
    box-sizing: border-box;
    margin: 8px 14px 14px;
    padding: 16px;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    position: relative;
}

/* Upload Zone */
.become-seller__upload-divider {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.become-seller__upload-divider::before,
.become-seller__upload-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E9EAEB;
}

.become-seller__upload-divider-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    white-space: nowrap;
    text-align: center;
}

.become-seller__upload-zone {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: #FFFFFF;
    border: 1px dashed #D5D7DA;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.become-seller__upload-zone--active,
.become-seller__upload-zone:hover {
    border-color: #A4A7AE;
}

.become-seller__upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.become-seller__upload-text {
    margin: 0;
    font-size: 14px;
    color: #535862;
}

.become-seller__upload-link {
    font-weight: 600;
    color: #1A1A4D;
    cursor: pointer;
    text-decoration: none;
}

.become-seller__upload-hint {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: #535862;
}

.become-seller__upload-file {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    font-size: 14px;
    color: #252B37;
    box-sizing: border-box;
}

.become-seller__upload-file-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.become-seller__upload-file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.become-seller__upload-file-name {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.become-seller__upload-file-size {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.become-seller__upload-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
}

.become-seller__upload-remove img {
    pointer-events: none;
}

.become-seller__upload-remove svg {
    width: 12px;
    height: 12px;
    stroke: #A4A7AE;
}

.become-seller__upload-remove:hover svg {
    stroke: #D92D20;
}

/* URL Input */
#portfolioList {
    width: 100%;
}

.become-seller__url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.become-seller__url-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.become-seller__url-input-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm, 6px);
    align-self: stretch;
}

.become-seller__url-input-wrap .become-seller__input__wrap {
    display: flex;
    padding: 28px 14px;
    align-items: center;
    gap: var(--spacing-md, 8px);
    align-self: stretch;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
}

.become-seller__url-input-wrap .become-seller__input__box{
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 8px);
    flex: 1 0 0;
    border: none;
    box-shadow:none;
}

.become-seller__url-input-wrap .become-seller__input__input{
    color: var(--Component-colors-Utility-Gray-utility-gray-400, #A4A7AE);
    text-overflow: ellipsis;
    font-family: var(--Font-family-font-family-body, "PP Neue Montreal");
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px); /* 150% */
    border: none !important;
    box-shadow:none;
}

/* .become-seller__url-input-wrap .become-seller__input__input:focus-within {
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
} */

.become-seller__url-prefix {
    padding: 10px 12px 10px 14px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    white-space: nowrap;
    user-select: none;
}

/* .become-seller__url-input-wrap .become-seller__input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
} */

/* Character Counter */
.become-seller__counter {
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    align-self: flex-start;
}

/* Radio Group */
.become-seller__radio-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.become-seller__radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #252B37;
    cursor: pointer;
}

.become-seller__radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #D5D7DA;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: #FFFFFF;
}

.become-seller__radio input[type="radio"]:checked {
    border-color: #4A5578;
}

.become-seller__radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #4A5578;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Care Package Toggle */
.become-seller__care-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

/* Care Package Section */
#carePackageSection {
    width: 100%;
}

.become-seller__care-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Price Input */
.become-seller__price-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.become-seller__price-input-wrap:focus-within {
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.become-seller__price-prefix {
    padding: 0 0 0 14px;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    white-space: nowrap;
    user-select: none;
}

.become-seller__price-select {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 4px !important;
    padding-right: 32px !important;
    height: 100% !important;
    flex: 1;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23A4A7AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
}

/* Audio Zone */
.become-seller__audio-zone {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
    background: #FFFFFF;
    border: 1px dashed #D5D7DA;
    border-radius: 8px;
    min-height: 120px;
}

.become-seller__audio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.become-seller__audio-text {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: #252B37;
}

.become-seller__audio-recording {
    display: flex;
    align-items: center;
    gap: 12px;
}

.become-seller__audio-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.become-seller__audio-wave span {
    display: block;
    width: 3px;
    height: 8px;
    background: #4A5578;
    border-radius: 2px;
    animation: audio-wave 0.6s ease-in-out infinite alternate;
}

.become-seller__audio-wave span:nth-child(1) { animation-delay: 0s; }
.become-seller__audio-wave span:nth-child(2) { animation-delay: 0.1s; }
.become-seller__audio-wave span:nth-child(3) { animation-delay: 0.2s; }
.become-seller__audio-wave span:nth-child(4) { animation-delay: 0.3s; }
.become-seller__audio-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes audio-wave {
    from { height: 6px; }
    to { height: 20px; }
}

.become-seller__audio-timer {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #535862;
    min-width: 32px;
}

.become-seller__audio-stop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #D92D20;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.become-seller__audio-playback {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    box-sizing: border-box;
}

.become-seller__audio-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.become-seller__audio-play:hover {
    opacity: 0.8;
}

.become-seller__waveform-wrap {
    flex: 1;
    position: relative;
    height: 32px;
    min-width: 0;
    overflow: hidden;
}

.become-seller__audio-waveform {
    width: 100%;
    height: 32px;
    display: block;
}

.become-seller__audio-waveform--muted {
    opacity: 0.3;
}

.become-seller__waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    overflow: hidden;
}

.become-seller__waveform-progress img {
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
}

.become-seller__play-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.become-seller__audio-playback .become-seller__upload-remove {
    position: static;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 6px;
    margin-left: 0;
    flex-shrink: 0;
}

.become-seller__audio-playback .become-seller__upload-remove svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .become-seller__field-row {
        flex-direction: column;
    }
}


/**
 * Figma Design - Complete Stylesheet
 * Based on: LSB expanded.png design
 *
 * Breakpoints:
 * - Desktop: 1280px and above
 * - Tablet: 768px - 1279px
 * - Mobile: below 768px
 */

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ============================================
   CSS VARIABLES (Colors)
   ============================================ */
:root {
  --gray-025: #FDFDFD;
  --gray-050: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E9EAEB;
  --gray-300: #D5D7DA;
  --gray-400: #A4A7AE;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252B37;
  --gray-900: #181D27;
  --gray-950: #0A0D12;

  --success-500: #12B76A;
  --warning-400: #FDB022;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   NORMALIZE / RESET
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-800);
  background: #FDFDFD;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

p {
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
}

/* ============================================
   LAYOUT - Body with Sidebar + Main
   ============================================ */
body {
  display: flex;
  min-height: 100vh;
}

/* Hide old background gradient */
.background-gradient {
  display: none !important;
}

/* ============================================
   SIDEBAR - 200px width
   ============================================ */
aside.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 212px;
  height: 100vh;
  padding: 40px 20px 32px;
  background: #000000;
  flex-shrink: 0;
  box-shadow: none;
  border-right: none;
  z-index: 10;
}

aside.sidebar header {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 172px;
  margin: 0 auto;
  margin-bottom: 40px;
}

aside.sidebar header .sidebar__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 172px;
  height: 32px;
  margin: 0;
}

aside.sidebar header .sidebar__brand .sidebar__brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-right: 0;
}

aside.sidebar header .sidebar__brand .sidebar__brand-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
}

aside.sidebar .sidebar__btn-collapse {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  width: 28px;
  height: 28px;
  right: -14px;
  top: 34px;
  background: #181D27;
  box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.3), 0px 1px 2px -1px rgba(10, 13, 18, 0.3);
  border-radius: 6px;
  border: 1px solid #373A41;
  cursor: pointer;
}

aside.sidebar .sidebar__btn-collapse .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #A4A7AE;
  font-variation-settings: 'wght' 300;
  transition: transform 0.3s ease;
}

/* Sidebar Navigation */
aside.sidebar .sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 172px;
  margin: 0 auto;
}

aside.sidebar .sidebar__category {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 172px;
  margin-bottom: 0;
}

aside.sidebar .sidebar__category-title {
  width: 172px;
  height: 18px;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

aside.sidebar .sidebar__category-subtitle {
  display: block;
  width: 172px;
  height: 18px;
  margin-top: 12px;
  padding: 0;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
}

aside.sidebar .sidebar__category-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 212px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
}

aside.sidebar.collapsed .sidebar__category-subtitle {
  display: none;
}

aside.sidebar .sidebar__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  width: 172px;
  height: 36px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 0;
  background: transparent;
}

aside.sidebar .sidebar__link .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #A4A7AE;
  font-variation-settings: 'wght' 300;
}

aside.sidebar .sidebar__link.active .material-symbols-rounded {
  color: #FFFFFF;
}

aside.sidebar .sidebar__link .sidebar__link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

aside.sidebar .sidebar__link .sidebar__link-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

aside.sidebar .sidebar__link .sidebar__link-unread-dot {
  position: absolute;
  top: -2px;
  right: -1px;
  width: 8px;
  height: 8px;
}

aside.sidebar .sidebar__link .sidebar__link-label {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #F7F7F7;
  white-space: nowrap;
}

aside.sidebar .sidebar__link.active {
  background: #22262F;
}

aside.sidebar .sidebar__link.active .sidebar__link-label {
  font-weight: 600;
}

aside.sidebar .sidebar__link.active .sidebar__link-icon {
  filter: none;
}

aside.sidebar .sidebar__link:hover {
  background: #22262F;
}

aside.sidebar .sidebar__link--logout:hover {
  background: #2A1515;
  color: #D92D20;
}

aside.sidebar .sidebar__link--logout:hover .sidebar__link-label,
aside.sidebar .sidebar__link--logout:hover .material-symbols-rounded {
  color: #D92D20;
}

aside.sidebar .sidebar__badge {
  margin-left: auto;
  background: #13161B;
  border: 1px solid #373A41;
  border-radius: 9999px;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #F7F7F7;
}

.sidebar__profile-avatar {
  width: 20px;
  height: 20px;
  border-radius: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Sidebar Footer */
aside.sidebar footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 172px;
  margin: auto auto 0;
}

aside.sidebar .sidebar__social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 27px 12px;
}

aside.sidebar .sidebar__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #181D27;
  border-radius: 50%;
  text-decoration: none;
}

aside.sidebar .sidebar__social-link:hover {
  background: #22262F;
}

aside.sidebar .sidebar__social-link img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(48%) sepia(5%) saturate(500%) hue-rotate(190deg) brightness(92%) contrast(90%);
}

aside.sidebar .sidebar__footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  margin: 0;
}

aside.sidebar .sidebar__footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

aside.sidebar .sidebar__footer-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  text-decoration: none;
}

aside.sidebar .sidebar__footer-link:hover {
  text-decoration: underline;
}

/* Collapsed Sidebar */
aside.sidebar.collapsed {
  width: 88px;
  padding: 40px 12px 32px;
}

aside.sidebar.collapsed header,
aside.sidebar.collapsed .sidebar__nav,
aside.sidebar.collapsed footer {
  width: auto;
}

aside.sidebar.collapsed .sidebar__brand {
  width: auto;
  justify-content: center;
}

aside.sidebar.collapsed .sidebar__brand-text {
  display: none;
}

aside.sidebar.collapsed .sidebar__category {
  width: auto;
}

aside.sidebar.collapsed .sidebar__category-title {
  display: none;
}

aside.sidebar.collapsed .sidebar__link {
  width: auto;
  padding: 8px;
  justify-content: center;
}

aside.sidebar.collapsed .sidebar__link-label {
  display: none;
}

aside.sidebar.collapsed .sidebar__social {
  flex-direction: column;
  width: auto;
  height: auto;
  gap: 8px;
}

aside.sidebar.collapsed .sidebar__footer-divider,
aside.sidebar.collapsed .sidebar__footer-links {
  display: none;
}

aside.sidebar.collapsed .sidebar__btn-collapse .material-symbols-rounded {
  transform: rotate(180deg);
}

/* Adjust main content when sidebar is collapsed - desktop only */
@media (min-width: 1024px) {
  aside.sidebar .sidebar__btn-collapse {
    display: none;
  }

  body:has(aside.sidebar.collapsed) main.main {
    margin-left: 88px;
  }
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
main.main {
  flex: 1;
  width: 100%;
  max-width: none;
  padding: 12px 12px 12px 0;
  margin-left: 212px;
  background: #FDFDFD;
  transition: margin-left 0.2s ease;
}

#main-panel {
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
  background: #FDFDFD;
  border-radius: 0 16px 16px 0;
  min-height: calc(100vh - 24px);
}

.services-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 70px 70px;
  background: #FFFFFF;
  gap: 24px;
  min-height: 100%;
  width: 100%;
}

/* Sidebar backdrop - hidden on desktop */
.sidebar-backdrop {
  display: none;
}

/* Mobile header - hidden on desktop/tablet */
.mobile-header {
  display: none;
}

/* ============================================
   HOMEPAGE HEADER - ITALIC TITLE, NO BACKGROUND
   ============================================ */
.homepage-header__title {
  font-family: 'PP Neue Montreal', var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: left;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0;
}

.homepage-header__subtitle {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

.homepage-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* Category pill buttons */

.controls__tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0px 4px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  cursor: pointer;
  transition: color 220ms var(--ease-out-quint);
  white-space: nowrap;
  height: 36px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.controls__tab:hover {
  color: #000000;
}

.controls__tab--active {
  color: #000000;
}

.controls__tabs {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 1;
  border-bottom: 1px solid #E9EAEB;
  margin-right: 16px;
}

.controls__tabs-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: #000000;
  border-radius: 2px;
  transform: translateX(0);
  transition: transform 360ms var(--ease-out-quint),
  width 360ms var(--ease-out-quint);
  pointer-events: none;
}

.controls__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.controls__search-icon:hover {
  background: #F9FAFB;
}

.controls__search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  box-sizing: border-box;
  min-width: 200px;
}

.controls__search-field-icon {
  flex-shrink: 0;
  opacity: 0.5;
}

.controls__search-field input,
.controls__search-field input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  width: 100%;
  padding: 0 !important;
}

.controls__search-inline {
  display: none;
  border-bottom: 1px solid #E9EAEB;
  padding: 8px 4px;
  margin-right: 16px;
}

.controls__search-inline-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  width: 100%;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.controls__search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
}

.controls__search-close:hover {
  opacity: 1;
}

.controls__pill {
  display: none;
}

.controls__pills {
  display: none;
}

.controls__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}

.controls__right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 1px;
}

.controls__pills {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.services-page .select-with-icon {
  min-width: auto;
}

.controls__sort {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px !important;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  padding: 8px 12px;
  box-sizing: border-box;
}

.controls__sort select {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  cursor: pointer;
  padding: 0;
  padding-right: 24px;
  appearance: none;
  -webkit-appearance: none;
}

.controls__sort .i-keyboard_arrow_down {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #A4A7AE;
  pointer-events: none;
}

/* ============================================
   FORM CONTROLS BASE
   ============================================ */
.input-with-icon,
.select-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.select-with-icon__dollar {
  position: absolute;
  left: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  z-index: 1;
  pointer-events: none;
}

.select-with-icon__dollar + .edit-service-field__select {
  padding-left: 36px;
}

/* ============================================
   CONTROLS / SEARCH & FILTERS
   ============================================ */
form.controls {
  margin: 0;
  padding: 0;
  width: 100%;
}

form.controls .controls__wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Search Container */
form.controls .controls__search-container {
  margin-bottom: 0;
}

form.controls .controls__search-container.input-with-icon {
  width: 218px;
  min-width: 218px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

form.controls .controls__search-container input {
  width: 100%;
  height: 100%;
  padding: 8px 12px 8px 42px;
  border: none !important;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  background: transparent;
  outline: none;
}

form.controls .controls__search-container input::placeholder {
  color: #717680;
}

form.controls .controls__search-container .material-symbols-rounded,
form.controls .controls__search-container img {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
}

/* Filter Container */
form.controls .controls__filter-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

form.controls .controls__filter-container .select-with-icon {
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

form.controls .controls__filter-container .controls__filter-sort {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

form.controls .controls__filter-container select {
  width: 100%;
  height: 100%;
  padding: 10px 36px 10px 38px;
  border: none !important;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  background: transparent;
  appearance: none;
  cursor: pointer;
  outline: none;
}

form.controls .controls__filter-container .material-symbols-rounded:first-child {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #A4A7AE;
  font-variation-settings: 'wght' 300;
}

form.controls .controls__filter-container .i-keyboard_arrow_down {
  position: absolute;
  right: 14px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #A4A7AE;
  font-variation-settings: 'wght' 300;
  pointer-events: none;
}

/* ============================================
   SERVICES PANEL
   ============================================ */
#services-panel {
  position: relative;
  padding: 0;
  width: 100%;
}

/* ============================================
   SERVICE CARDS GRID - max 4 columns, 24px gap
   ============================================ */
.ai-service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  .ai-service-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ai-service-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1400px) {
  .ai-service-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   SERVICE CARD - 281x366px
   ============================================ */
.ai-service-list .card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 20px;
  gap: 28px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /*height: 398px;*/
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ai-service-list .card:hover {
  border-color: #D0D3D9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card Header with Image and Avatar */
.ai-service-list .card .card__header {
  position: relative;
  width: 100%;
  /* Use automatic height so the thumbnail can keep a 16:9 aspect ratio */
  height: auto;
  /* Prevent the header (and thus the image) from becoming too tall on very wide screens */
  max-height: 338px;
  overflow: visible;
}

.ai-service-list .card .card__thumbnail {
  width: 100%;
  /* Enforce 16:9 thumbnail format */
  aspect-ratio: 16 / 9;
  height: auto;
  /* Cap the image height to keep footer content in view on large screens */
  max-height: 338px;
  border-radius: 8px;
  background-color: #F5F5F5;
  background-size: cover;
  background-position: center;
}

/* Avatar positioned at bottom-left of image */
.ai-service-list .card .card__avatar {
  position: absolute;
  bottom: -40px;
  left: 18px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.ai-service-list .card .card__avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.ai-service-list .card .card__avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  border: 2.5px solid #FFFFFF;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.card__avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-service-list .card .card__avatar-initials {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  border: 2.5px solid #FFFFFF;
  background: #D3DCCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: #535862;
  flex-shrink: 0;
}

.ai-service-list .card .card__verified-tick {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.card__owner-info {
  display: flex;
  flex-direction: column;
}

.card__owner-name {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.card__owner-country {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

.ai-service-list .card .card__online-indicator {
  position: absolute;
  right: -1px;
  bottom: 9px;
  width: 14px;
  height: 14px;
  background: #12B76A;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}

/* Card Body */
.ai-service-list .card .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 12px 0;
  gap: 4px;
  width: 100%;
  flex: 1;
}

.ai-service-list .card .card__title {
  width: 100%;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #070416;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-service-list .card .card__rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 28px;
}

.ai-service-list .card .card__rating .material-symbols-rounded {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #FDB022;
  font-variation-settings: 'FILL' 1;
}

.ai-service-list .card .card__rating span:last-child {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.ai-service-list .card .card__description {
  width: 100%;
  height: 60px;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Card Footer */
.ai-service-list .card .card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  width: 100%;
  height: 24px;
}

.ai-service-list .card .card__footer .material-symbols-rounded {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #252B37;
  font-variation-settings: 'wght' 300;
}

.ai-service-list .card .card__delivery-time {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.ai-service-list .card .card__price {
  margin-left: auto;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #070416;
}

/* ============================================
   SKELETON LOADER
   ============================================ */

#services-skeleton {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  z-index: 10;
}

@media (min-width: 1800px) {
  #services-skeleton {
    grid-template-columns: repeat(5, 1fr);
  }
}

#services-skeleton.htmx-request {
  display: grid;
}

/* Hide results while skeleton is loading */
#services-panel #services-skeleton.htmx-request ~ #service-results {
  display: none;
}

.skeleton-card {
  width: 281px;
  height: 366px;
  border-radius: 16px;
  background: linear-gradient(90deg,
  rgba(0, 0, 0, 0.04) 25%,
  rgba(0, 0, 0, 0.08) 37%,
  rgba(0, 0, 0, 0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.1s infinite;
}

/* Default (4 cols): show 8 cards */
.skeleton-card:nth-child(n+9) {
  display: none;
}

@media (min-width: 1800px) {

  /* Big screen (5 cols): show all 10 */
  .skeleton-card {
    display: block;
  }
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* ============================================
   AUTH MODAL STYLES
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #f1f3f5;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow: auto;
  border-radius: 16px;
  background: rgba(18, 18, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  letter-spacing: 0.2px;
}

.modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.modal__body {
  padding: 18px;
}

.modal__headline {
  margin: 0 0 14px 0;
  font-size: 22px;
  font-weight: 700;
  color: #f1f3f5;
}

/* Form fields in modal */
.validation-summary {
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.20);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.field input {
  height: 44px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.field input:focus {
  border-color: rgba(120, 150, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(120, 150, 255, 0.18);
}

.field span,
.field .field-validation-error {
  font-size: 12px;
  color: rgba(255, 120, 120, 0.9);
}

/* Buttons */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-weight: 650;
}

.btn-primary,
.btn--primary {
  background: var(--color-primary, #000000);
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.btn-primary:hover,
.btn--primary:hover {
  background: var(--color-primary-hover, #0a0a30);
}

.btn-secondary,
.btn--secondary {
  background: #FFFFFF;
  color: var(--gray-700, #414651);
  border: 1px solid var(--gray-300, #D5D7DA);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.btn-secondary:hover,
.btn--secondary:hover {
  background: var(--gray-050, #FAFAFA);
}

.btn-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.btn-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   AUTH MODAL - FIGMA DESIGN
   ============================================ */

.auth-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 32px;
  width: 100%;
  max-width: 531px;
  background: #FFFFFF;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  border-radius: 16px;
}

.auth-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #717680;
  z-index: 1;
}

.auth-modal__close:hover {
  background: #F5F5F5;
}

.auth-modal__close .material-symbols-rounded {
  font-size: 24px;
}

.auth-modal__body {
  width: 100%;
}

/* Auth Form Styles */
.auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.auth-form__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 16px;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

.auth-form__logo {
  width: 40px;
  height: 40px;
}

.auth-form__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #252B37;
  margin: 0;
}

.auth-form__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #252B37;
  margin: -20px 0 0 0;
}

.auth-form__form {
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.auth-form__errors.validation-summary-valid {
  display: none !important;
}

.auth-form__errors {
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #DC2626;
  font-size: 14px;
}

.auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}

.auth-form__name-row {
  display: flex;
  gap: 12px;
}

.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.auth-form__input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  outline: none;
}

.auth-form__input::placeholder {
  color: #717680;
}

.auth-form__input:focus {
  border-color: #252B37;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), 0 0 0 2px rgba(37, 43, 55, 0.1);
}

.auth-form__password-wrapper {
  position: relative;
  width: 100%;
}

.auth-form__password-wrapper .auth-form__input {
  padding-right: 44px;
}

.auth-form__toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.auth-form__toggle-password .material-symbols-rounded {
  font-size: 20px;
  color: #717680;
}

.auth-form__error {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #DC2626;
}

.auth-form__forgot {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  text-decoration: none;
  align-self: flex-start;
}

.auth-form__forgot:hover {
  text-decoration: underline;
}

.auth-form__actions {
  margin-top: 32px;
  margin-bottom: 16px;
}

.auth-form__submit {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  gap: 6px;
  width: 100%;
  height: 44px;
  background: #F5F5F5;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #A4A7AE;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-form__submit .material-symbols-rounded {
  font-size: 20px;
  color: #A4A7AE;
}

.auth-form__submit:hover {
  background: #EBEBEB;
}

.auth-form__submit.is-ready,
.auth-form__submit:not(:disabled) {
  background: #000020;
  color: #FFFFFF;
  border-color: #000020;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.auth-form__submit.is-ready .material-symbols-rounded {
  color: #FFFFFF;
}

.auth-form__submit.is-ready:hover {
  background: #181D27;
}

.auth-form__footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.auth-form__link {
  font-weight: 600;
  color: #000000;
  text-decoration: none;
}

.auth-form__link:hover {
  text-decoration: underline;
}

.auth-form__password-hints {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.auth-form__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: #535862;
}

.auth-form__hint-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #D5D7DA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.auth-form__hint-icon::after {
  content: '';
  display: block;
  width: 5px;
  height: 3px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  transform: rotate(-45deg);
  margin-bottom: 1px;
}

.auth-form__hint--valid .auth-form__hint-icon {
  background: #17B26A;
}

.auth-form__terms-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: #252B37;
  cursor: pointer;
}

.auth-form__terms-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #D5D7DA;
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.auth-form__terms-check input[type="checkbox"]:focus,
.auth-form__terms-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.auth-form__terms-check input[type="checkbox"]:checked {
  background: #000000;
  border-color: #000000;
}

.auth-form__terms-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.auth-form__terms-check a {
  color: #252B37;
  text-decoration: underline;
}

.auth-form__terms-check a:hover {
  color: #181D27;
}

.auth-form__terms-note {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: #252B37;
  text-align: center;
  margin: 0;
  padding: 0 0 24px;
}

.auth-form__terms-note a {
  color: #535862;
  text-decoration: underline;
}

.auth-form__terms-note a:hover {
  color: #252B37;
}

.auth-form__submit:disabled {
  background: #F9F9FB;
  border: 1px solid #E9EAEB;
  color: #A4A7AE;
  cursor: not-allowed;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

/* Mobile responsive */
@media (max-width: 767px) {
  .auth-modal__dialog {
    max-width: calc(100vw - 32px);
    margin: 16px;
  }

  .auth-form__header {
    padding: 40px 20px 0;
  }

  .auth-form__form {
    padding: 0 20px;
  }
}

/* ============================================
   TABLET (768px - 1023px) - Sidebar visible, overlays content with backdrop
   ============================================ */
@media (max-width: 1023px) and (min-width: 768px) {

  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Sidebar visible, fixed overlay */
  aside.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
  }

  /* Main content with fixed left padding for collapsed sidebar */
  main.main {
    margin-left: 0;
    width: 100%;
    padding: 12px 12px 12px 88px;
    overflow-x: hidden;
    transition: padding-left 0.2s ease;
  }

  /* Backdrop hidden by default on tablet, show when sidebar not collapsed */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 88px;
    width: calc(100% - 88px);
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Show backdrop when sidebar is expanded (not collapsed) */
  body:has(aside.sidebar:not(.collapsed)) .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .services-page {
    padding: 40px 24px;
  }

  .homepage-header {
    padding: 32px 0 0;
  }

  .homepage-header__title {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 20px;
  }

  form.controls .controls__filter-container {
    flex-wrap: wrap;
    gap: 12px;
  }

  form.controls .controls__filter-container .select-with-icon {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
  }

  form.controls .controls__filter-container .controls__filter-sort {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
    margin-left: 0;
  }


  /* Tablet (2 cols): show 4 cards */
  .skeleton-card:nth-child(n+5) {
    display: none;
  }
}

/* ============================================
   MOBILE (below 768px) - Sidebar hidden, icon in header
   ============================================ */
@media (max-width: 767px) {

  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Sidebar hidden by default */
  aside.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 212px;
    padding: 40px 20px 32px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
  }

  aside.sidebar .sidebar__btn-collapse {
    display: none;
  }

  /* Expanded state - sidebar slides in */
  aside.sidebar.expanded {
    transform: translateX(0);
  }

  aside.sidebar.expanded .sidebar__btn-collapse {
    display: flex;
    left: 198px;
  }

  /* Main content full width with mobile header */
  main.main {
    margin-left: 0;
    width: 100%;
    padding: 0;
  }

  /* Mobile header with Brainlancer icon only */
  .mobile-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
  }

  .mobile-header__logo {
    width: 32px;
    height: 32px;
  }

  .mobile-header__text {
    display: none;
  }

  /* Backdrop - hidden by default, shown when active */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  #main-panel {
    padding: 0;
    margin: 5px;
    border-radius: 16px;
    background: #FDFDFD;
  }

  .services-page {
    padding: 24px 16px;
  }

  .homepage-header {
    padding: 8px 0 0;
  }

  .homepage-header__title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
  }

  form.controls {
    padding: 0;
  }

  #services-panel {
    padding: 0;
  }

  form.controls .controls__search-container {
    margin-bottom: 16px;
  }

  form.controls .controls__search-container.input-with-icon {
    height: 48px;
    border-radius: 8px;
  }

  form.controls .controls__search-container input {
    border-radius: 8px;
    font-size: 16px;
  }

  form.controls .controls__filter-container {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  form.controls .controls__filter-container .select-with-icon,
  form.controls .controls__filter-container .controls__filter-sort {
    flex: 1 1 100%;
    min-width: 100%;
    margin-left: 0;
  }

  form.controls .controls__filter-container select {
    font-size: 16px;
  }

  .ai-service-list {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .ai-service-list .card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: auto;
    min-height: 366px;
    overflow: visible;
  }

  .ai-service-list .card .card__header {
    width: calc(100%);
    overflow: visible;
  }

  .ai-service-list .card .card__thumbnail {
    width: 100%;
    height: 146px;
    overflow: visible;
  }

  .ai-service-list .card .card__avatar {
    position: absolute;
    bottom: -24px;
    left: 12px;
    overflow: visible;
  }

  .ai-service-list .card .card__avatar-wrapper {
    overflow: visible;
  }

  .ai-service-list .card .card__body {
    width: calc(100% - 24px);
    padding: 12px 4px 0;
  }

  .ai-service-list .card .card__title,
  .ai-service-list .card .card__rating,
  .ai-service-list .card .card__description {
    width: 100%;
  }

  .ai-service-list .card .card__footer {
    width: calc(100% - 24px);
    padding: 0 4px;
  }

  #services-skeleton {
    position: relative;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    box-sizing: border-box;
  }

  .skeleton-card {
    width: 100%;
    max-width: 100%;
    height: 379px;
  }

  /* Mobile (1 col): show 2 cards */
  .skeleton-card:nth-child(n+3) {
    display: none;
  }

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

  .btn {
    width: 100%;
  }
}


/* ============================================
   PAGINATION - Modern Minimal Style
   ============================================ */
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px 24px 16px;
  width: 100%;
  border-top: 1px solid #E9EAEB;
}

.pagination__group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  overflow: hidden;
  filter: drop-shadow(0px 1px 2px rgba(10, 13, 18, 0.05));
}

.pagination__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 8px 14px;
  gap: 6px;
  height: 40px;
  background: #FFFFFF;
  border-right: 1px solid #E9EAEB;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.pagination__btn--next {
  border-right: none;
  padding: 8px 14px 8px 16px;
}

.pagination__btn--disabled {
  color: #D5D7DA;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__btn .material-symbols-rounded {
  font-size: 20px;
  color: #717680;
}

.pagination__btn--disabled .material-symbols-rounded {
  color: #D5D7DA;
}

.pagination__btn:hover:not(.pagination__btn--disabled) {
  background: #F9FAFB;
}

.pagination__num {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-right: 1px solid #E9EAEB;
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.pagination__num:hover:not(.pagination__num--active):not(.pagination__num--dots) {
  background: #F9FAFB;
}

.pagination__num--active {
  background: #F5F5F5;
  font-weight: 500;
}

.pagination__num--dots {
  cursor: default;
  color: #A4A7AE;
}

/* Legacy pagination classes (used by buyer orders page) */
.pagination__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #252B37;
  text-decoration: none;
  cursor: pointer;
}

.pagination__arrow:hover:not(.disabled) {
  background: #F5F5F5;
}

.pagination__arrow.disabled {
  color: #D5D7DA;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__arrow .material-symbols-rounded {
  font-size: 24px;
}

.pagination__pages {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.pagination__page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #535862;
  text-decoration: none;
  cursor: pointer;
}

.pagination__page:hover {
  background: #F5F5F5;
  color: #252B37;
}

.pagination__page.active {
  background: #252B37;
  color: #FFFFFF;
}

.pagination__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  font-size: 14px;
  color: #A4A7AE;
}

/* No results message */
.no-results {
  text-align: center;
  padding: 48px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  color: #717680;
}

/* Mobile pagination */
@media (max-width: 767px) {
  .pagination__btn span:not(.material-symbols-rounded) {
    display: none;
  }

  .pagination__btn {
    padding: 8px;
    width: 40px;
    min-width: 40px;
  }

  .pagination__num {
    width: 36px;
    min-width: 36px;
    font-size: 13px;
  }
}

/* ============================================
   ORDERS PAGE
   ============================================ */

.orders-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 70px;
  gap: 24px;
  min-height: 100%;
}

@media (min-width: 768px) {
  #main-panel:has(.orders-page--empty) {
    overflow: hidden;
    height: calc(100vh - 24px);
  }
}

.orders-page--empty {
  align-items: stretch;
  justify-content: flex-start;
  padding: 12px 12px 0 0;
  height: calc(100vh - 48px);
  background: #FDFDFD;
  box-sizing: border-box;
}

.orders-page--empty .chat-empty-state {
  flex: 1;
  border-radius: 0 16px 0 0;
}

.orders-page__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.orders-page__empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  position: relative;
}

.orders-page__empty-illustration-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  min-width: 220px;
}

.orders-page__empty-bg-pattern-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.orders-page__empty-state .orders-table__empty-illustration {
  width: 220px;
  height: 160px;
  position: relative;
  z-index: 2;
}

.orders-page__empty-state-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 352px;
}

.orders-page__empty-state .orders-table__empty-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #181D27;
  margin: 0;
}

.orders-page__empty-state .orders-table__empty-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #535862;
  margin: 0;
}

.orders-page__empty-state .orders-table__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-primary, #000000);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.orders-page__empty-state .orders-table__empty-btn:hover {
  background: #1a1f2e;
}

.orders-page__empty-state .orders-table__empty-btn .material-symbols-rounded {
  font-size: 20px;
}

.orders-table__empty-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.orders-table__empty-filter-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #535862;
  margin: 0;
}

.orders-page__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.orders-page__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0;
}

.orders-page__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0;
}

/* Orders Table Container */
.orders-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

/* Orders Metrics Section */
.orders-table__metrics {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  gap: 20px;
}

.orders-table__metrics-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.orders-table__count {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.orders-table__count-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

.orders-table__count-number {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: #181D27;
}

/* Tabs */
.orders-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 2px;
  gap: 2px;
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  height: 40px;
}

.orders-tabs__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #A4A7AE;
  transition: all 0.15s ease;
}

.orders-tabs__tab:hover {
  color: #535862;
}

.orders-tabs__tab--active {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  color: #252B37;
}

/* Table Content */
.orders-table__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Table Header */
.orders-table__header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 80px;
  border-bottom: 1px solid #E9EAEB;
  background: #FFFFFF;
}

.orders-table__header-cell {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

/* Table Rows */
.orders-table__row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 80px;
  border-bottom: 1px solid #E9EAEB;
  transition: background 0.15s ease;
}

.orders-table__row:hover {
  background: #F9FAFB;
}

.orders-table__row:last-child {
  border-bottom: none;
}

.orders-table__cell {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
}

.orders-table__cell--service {
  font-weight: 500;
  color: #252B37;
}

.orders-table__custom-offer-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orders-table__custom-offer-label {
  color: #717680;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}

.orders-table__custom-offer-system {
  font-weight: 600;
  color: #252B37;
}

.orders-table__cell--seller {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orders-table__profile-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background-color 0.15s ease;
}

.orders-table__profile-trigger:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.orders-table__profile-trigger:hover .orders-table__seller-name {
  color: var(--color-brand-primary, #7F56D9);
}

.orders-table__avatar {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  object-fit: cover;
  background: #F5F5F5;
}

.orders-table__avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: #717680;
}

.orders-table__seller-name {
  font-weight: 400;
  color: #252B37;
  transition: color 0.15s ease;
}

.orders-table__cell--date,
.orders-table__cell--amount {
  font-weight: 400;
  color: #252B37;
}

/* Status Badges */
.orders-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
}

.orders-badge--warning {
  background: #FFFAEB;
  border: 1px solid #FEDF89;
  color: #B54708;
}

.orders-badge--neutral {
  background: #FAFAFA;
  border: 1px solid #E9EAEB;
  color: #414651;
}

.orders-badge--success {
  background: #ECFDF3;
  border: 1px solid #ABEFC6;
  color: #067647;
}

.orders-table__days-remaining {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #535862;
  margin-left: 8px;
}

a .orders-table__carepackage-link,
.orders-table__carepackage-link {
  color: #079455;
  font-weight: 500;

  transition: color 0.15s ease-in-out;
}

a:hover .orders-table__carepackage-link,
.orders-table__carepackage-link:hover {
  color: #056a3e;
  text-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);

}

/* Action Buttons */
.orders-table__cell--actions {
  justify-content: flex-end;
  padding: 16px;
  gap: 8px;
}

.orders-table__action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.orders-table__action-btn:hover {
  background: #F9FAFB;
  border-color: #A4A7AE;
}

.orders-table__action-btn .material-symbols-rounded {
  font-size: 20px;
  color: #252B37;
}

/* SVG Button variant - uses pre-styled SVG with shadows */
.orders-table__action-btn--svg {
  display: flex;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
  background: none;
  border: none;
  padding: 0;
}

.orders-table__action-btn--svg:hover {
  opacity: 0.8;
}

.orders-table__action-btn--svg img {
  width: 36px;
  height: 36px;
}

/* Empty State */
.orders-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 16px;
  text-align: center;
}

.orders-table__empty-illustration {
  width: 230px;
  height: 166px;
}

.orders-table__empty-icon {
  font-size: 48px;
  color: #A4A7AE;
}

.orders-table__empty-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #252B37;
  margin: 0;
}

.orders-table__empty-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

.orders-table__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  margin-top: 8px;
  background: #181D27;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.orders-table__empty-btn:hover {
  background: #252B37;
}

.orders-table__empty-btn .material-symbols-rounded {
  font-size: 20px;
}

/* Responsive - Tablet */
@media (max-width: 1023px) {
  .orders-page {
    padding: 40px 24px;
  }

  .orders-page__title {
    font-size: 36px;
    line-height: 48px;
  }

  .orders-table__header {
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 60px;
  }

  .orders-table__row {
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 60px;
  }

  .orders-table__header-cell--amount,
  .orders-table__cell--amount {
    display: none;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .orders-page {
    padding: 24px 16px;
  }

  .orders-page__title {
    font-size: 28px;
    line-height: 36px;
  }

  .orders-table__metrics-row {
    flex-direction: column;
    gap: 16px;
  }

  .orders-tabs {
    width: 100%;
  }

  .orders-tabs__tab {
    flex: 1;
  }

  /* Stack rows on mobile */
  .orders-table__header {
    display: none;
  }

  .orders-table__row {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }

  .orders-table__cell {
    padding: 0;
  }

  .orders-table__cell--service {
    font-size: 14px;
    font-weight: 600;
  }

  .orders-table__cell--seller {
    order: -1;
  }

  .orders-table__cell--status {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .orders-table__cell--actions {
    justify-content: flex-start;
  }

  .orders-page--empty {
    min-height: calc(100vh - 60px);
  }
}

/* ===========================================
   FINALIZE ORDER MODAL
   =========================================== */
.finalize-modal__dialog {
  position: relative;
  width: min(400px, 92vw);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.finalize-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #717680;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.finalize-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.finalize-modal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 0;
  gap: 16px;
}

.finalize-modal__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 10px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.finalize-modal__icon .material-symbols-rounded {
  font-size: 24px;
  color: #22262F;
}

.finalize-modal__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.finalize-modal__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.finalize-modal__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
}

.finalize-modal__actions {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 32px 24px 24px;
}

.finalize-modal__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  height: 44px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  box-sizing: border-box;
}

.finalize-modal__btn--secondary {
  background: #FFFFFF;
  color: #252B37;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.finalize-modal__btn--secondary:hover {
  background: #F9FAFB;
}

.finalize-modal__btn--primary {
  background: #17B26A;
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.finalize-modal__btn--primary:hover {
  background: #15a35f;
}

/* ===========================================
   RATE ORDER MODAL
   =========================================== */
.rate-modal__dialog {
  position: relative;
  width: min(400px, 92vw);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.rate-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #A4A7AE;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.rate-modal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 0;
  gap: 16px;
}

.rate-modal__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 10px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.rate-modal__icon .material-symbols-rounded {
  font-size: 24px;
  color: #22262F;
}

.rate-modal__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rate-modal__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  margin: 0;
}

.rate-modal__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
}

#rate-order-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rate-modal__stars {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  gap: 32px;
}

.rate-modal__star {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s;
}

.rate-modal__star:hover {
  transform: scale(1.1);
}

.rate-modal__star .material-symbols-rounded {
  font-size: 36px;
  color: #E9EAEB;
  font-variation-settings: 'FILL' 1;
  transition: color 0.15s;
}

.rate-modal__star.active .material-symbols-rounded {
  color: #FDB022;
}

.rate-modal__textarea-wrap {
  padding: 0 24px;
}

.rate-modal__textarea {
  width: 100%;
  height: 180px;
  padding: 12px 14px;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  resize: none;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.rate-modal__textarea:focus {
  outline: none;
  border-color: #252B37;
}

.rate-modal__textarea::placeholder {
  color: #717680;
}

.rate-modal__actions {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 20px 24px 24px;
}

.rate-modal__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  height: 44px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  box-sizing: border-box;
}

.rate-modal__btn .material-symbols-rounded {
  font-size: 20px;
}

.rate-modal__btn--secondary {
  background: #FFFFFF;
  color: #252B37;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.rate-modal__btn--secondary:hover {
  background: #F9FAFB;
}

.rate-modal__btn--primary {
  background: var(--color-primary, #000000);
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.rate-modal__btn--primary:hover {
  background: #1a1d2e;
}

html:has(.finalize-modal.is-open),
html:has(.rate-modal.is-open),
body:has(.finalize-modal.is-open),
body:has(.rate-modal.is-open) {
  overflow: hidden !important;
}

/* Mobile responsive */
@media (max-width: 480px) {

  .finalize-modal__content,
  .rate-modal__content {
    padding: 20px 20px 0;
  }

  .finalize-modal__actions {
    flex-direction: column;
    padding: 24px 20px 20px;
  }

  .rate-modal__actions {
    flex-direction: column;
    padding: 16px 20px 20px;
  }

  .rate-modal__textarea-wrap {
    padding: 0 20px;
  }

  .finalize-modal__btn,
  .rate-modal__btn {
    width: 100%;
  }
}

/* ============================================
   EDIT SERVICE PAGE
   ============================================ */
body:has(.edit-service-page) {
  height: 100vh;
  overflow: hidden;
}

body:has(.edit-service-page) #main-panel {
  overflow-y: auto;
  height: calc(100vh - 24px);
}

.edit-service-page {
  min-height: 0;
}

.edit-service-page__container {
  padding: 40px var(--page-pad) 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.edit-service-page__container form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Back Link */
.edit-service-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.edit-service-page__back .material-symbols-rounded {
  font-size: 20px;
  color: #535862;
}

.edit-service-page__back-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #717680;
}

.edit-service-page__back:hover .material-symbols-rounded,
.edit-service-page__back:hover .edit-service-page__back-text {
  color: #252B37;
}

/* Page Header */
.edit-service-page__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-service-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0;
}

.edit-service-page__alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
}

.edit-service-page__alert-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-service-page__alert-icon-outer-lg {
  position: absolute;
  width: 40px;
  height: 40px;
}

.edit-service-page__alert-icon-outer {
  position: absolute;
  width: 28px;
  height: 28px;
}

.edit-service-page__alert-icon-inner {
  position: relative;
  width: 16px;
  height: 16px;
}


.edit-service-page__alert-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-service-page__alert-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
}

.edit-service-page__alert-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
}

.edit-service-page__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0;
}

/* Cards */
.edit-service-card {
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  padding: 24px;
}

/* Section - Two Column Layout */
.edit-service-section {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px;
}

.edit-service-section__label {
  width: 280px;
  min-width: 200px;
  max-width: 280px;
  flex-shrink: 0;
  display: block;
}

.edit-service-section__title {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
  margin: 0 0 4px 0;
}

.edit-service-section__title .edit-service-field__required {
  color: #535862;
  font-weight: 400;
}

.edit-service-section__badge {
  display: inline-block;
  padding: 2px 8px;
  background: #0E101B;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  border-radius: 16px;
  margin-bottom: 4px;
}

.edit-service-section__description {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-600);
  margin: 0;
}

.edit-service-section__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Form Fields */
.edit-service-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-service-field__label-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.edit-service-field__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.edit-service-field__required {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #4A5578;
}

.edit-service-field__input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  font-family: var(--font-body);
  font-size: 16px;
  color: #181D27;
  background: #FFFFFF;
  outline: none;
  box-sizing: border-box;
}

.edit-service-field__input:focus {
  border-color: #98A2B3;
  box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
}

.edit-service-field__input::placeholder {
  color: #717680;
}

.edit-service-field__select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 10px 14px;
  padding-right: 40px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  font-family: var(--font-body);
  font-size: 16px;
  color: #181D27;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.edit-service-field__select:focus {
  border-color: #98A2B3;
  box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
}

.edit-service-field__textarea {
  min-height: 128px;
  padding: 12px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  font-family: var(--font-body);
  font-size: 16px;
  color: #181D27;
  background: #FFFFFF;
  resize: vertical;
  outline: none;
}

.edit-service-field__textarea:focus {
  border-color: #98A2B3;
  box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
}

.edit-service-field__textarea::placeholder {
  color: #717680;
}

.edit-service-field__hint {
  font-family: var(--font-body);
  font-size: 14px;
  color: #717680;
}

.edit-service-industry-select {
  flex-wrap: wrap !important;
}

.edit-service-industry-select .edit-service-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}

.edit-service-industry-select .edit-service-industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.edit-service-industry-select .edit-service-industry-tag__delete {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #A4A7AE;
}

.edit-service-industry-select .edit-service-industry-tag__delete:hover {
  color: #D92D20;
}

.edit-service-industry-select .edit-service-industry-tag__delete .material-symbols-rounded {
  font-size: 14px;
}

.edit-service-industry-tooltip {
  position: absolute !important;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.edit-service-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.edit-service-field__input-wrap .edit-service-field__input {
  flex: 1;
  padding-right: 36px;
}

.edit-service-field__input-wrap .edit-service-field__tooltip-wrap {
  position: absolute;
  right: 12px;
}

.edit-service-field__tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.edit-service-field__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  transform: none;
  padding: 8px 12px;
  background: #0A0D12;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #FFFFFF;
  white-space: nowrap;
  width: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.edit-service-field__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-top-color: #0A0D12;
}

.edit-service-field__tooltip--center {
  right: auto !important;
  left: 50%;
  transform: translateX(-50%);
}

.edit-service-field__tooltip--center::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.edit-service-field__tooltip-wrap:hover .edit-service-field__tooltip {
  opacity: 1;
  visibility: visible;
}

.edit-service-field__error {
  font-family: var(--font-body);
  font-size: 14px;
  color: #F04438;
}

.edit-service-field__error:empty {
  display: none;
}


.edit-service-field--tight {
  margin-bottom: -16px;
}

/* Two fields in a row */
.edit-service-field-row {
  display: flex;
  gap: 24px;
}

.edit-service-field-row > .edit-service-field {
  flex: 1;
  max-width: 50%;
}

/* Divider */
.edit-service-divider {
  height: 1px;
  background: #EAECF0;
  margin: 4px 0;
}

.edit-service-hosting-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-service-hosting-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-service-hosting-card:hover {
  background: #F9FAFB;
}

.edit-service-page label.edit-service-hosting-card input[type="checkbox"].edit-service-hosting-card__checkbox {
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 2px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid #D5D7DA !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  position: relative !important;
  outline: none !important;
  display: inline-block !important;
  transform: none !important;
}

.edit-service-page label.edit-service-hosting-card input[type="checkbox"].edit-service-hosting-card__checkbox:checked {
  background-color: #F4F5F7 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='%23D5D7DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: #D5D7DA !important;
}

.edit-service-page label.edit-service-hosting-card input[type="checkbox"].edit-service-hosting-card__checkbox:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #F4F5F7 !important;
}

.edit-service-hosting-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-service-hosting-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.edit-service-hosting-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #252B37;
}

.edit-service-hosting-card__badge {
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #414651;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 6px;
}

.edit-service-hosting-card__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: #717680;
  line-height: 20px;
}

/* Price Input */
.edit-service-field__price-wrapper {
  position: relative;
}

.edit-service-field__price-currency {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 16px;
  color: #667085;
}

.edit-service-field__input--price {
  padding-left: 28px;
}

/* Delivery Stepper */
.edit-service-stepper {
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  width: fit-content;
  margin-top: 3px;
}

.edit-service-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA !important;
  cursor: pointer;
  color: #535862;
}

.edit-service-stepper__btn:first-child {
  border-radius: 8px 0 0 8px !important;
}

.edit-service-stepper__btn:last-child {
  border-radius: 0 8px 8px 0 !important;
}

.edit-service-stepper__btn:hover {
  background: #F9FAFB;
}

.edit-service-stepper__btn .material-symbols-rounded {
  font-size: 20px;
  color: #344054;
}

input.edit-service-stepper__input,
input[type="number"].edit-service-stepper__input {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 44px !important;
  border: 1px solid #D5D7DA !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: #181D27 !important;
  background: #FFFFFF !important;
  outline: none;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.edit-service-stepper__input::-webkit-outer-spin-button,
.edit-service-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edit-service-stepper__value input {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-size: 16px;
  color: #181D27 !important;
  outline: none;
  box-shadow: none !important;
}

.edit-service-stepper__hint {
  font-family: var(--font-body);
  font-size: 14px;
  color: #717680;
  margin-top: 6px;
}

/* Thumbnail Section */
.edit-service-thumbnail {
  display: flex;
  gap: 16px;
}

.edit-service-thumbnail__preview {
  flex: 1;
  /* Ensure 16:9 preview area */
  aspect-ratio: 16 / 9;
  min-height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #F2F4F7;
}

.edit-service-thumbnail__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-service-thumbnail .edit-service-upload {
  flex: 1;
}

/* Upload Dropzone */
.edit-service-upload {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
  cursor: pointer;
  min-height: 108px;
}

.edit-service-upload:hover {
  background: #F9FAFB;
  border-color: #D5D7DA;
}

.edit-service-upload--dragging {
  background: #F9FAFB;
  border-color: #98A2B3;
}

.edit-service-upload--loading {
  pointer-events: none;
  opacity: 0.7;
}

.edit-service-upload__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  color: #535862;
}

.edit-service-upload__spinner .spin {
  font-size: 24px;
  color: #535862;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.edit-service-upload__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.edit-service-upload__icon .material-symbols-rounded {
  font-size: 20px;
  color: #475467;
}

.edit-service-upload__icon img {
  width: 20px;
  height: 20px;
}

.edit-service-upload__text {
  text-align: center;
}

.edit-service-upload__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.edit-service-upload__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #1A1A4D;
}

.edit-service-upload__or {
  font-family: var(--font-body);
  font-size: 14px;
  color: #535862;
}

.edit-service-upload__hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: #535862;
}

/* Preview Images Grid */
.edit-service-images {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-service-images__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.edit-service-images__item {
  position: relative;
  /* Use strict 16:9 for gallery previews and placeholders */
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #F2F4F7;
}

.edit-service-images__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-service-images__item--empty {
  background: #F2F4F7;
}

.edit-service-images__delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.edit-service-images__item:hover .edit-service-images__delete {
  opacity: 1;
}

.edit-service-images__delete .material-symbols-rounded {
  font-size: 16px;
  color: #475467;
}

/* What You'll Deliver - Checklist */
.edit-service-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-service-checklist__row {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 28px;
}

.edit-service-checklist__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.edit-service-checklist__icon {
  flex-shrink: 0;
}

.edit-service-checklist__icon .material-symbols-rounded {
  font-size: 20px;
  font-variation-settings: 'wght' 300;
  color: #344054;
}

.edit-service-checklist__icon img {
  width: 20px;
  height: 20px;
}

.edit-service-checklist__input,
input.edit-service-checklist__input,
input[type="text"].edit-service-checklist__input {
  flex: 1;
  border: none !important;
  border-width: 0 !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #181D27 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.edit-service-checklist__input:focus {
  box-shadow: none !important;
}

.edit-service-checklist__input::placeholder {
  color: #717680;
}

.edit-service-checklist__delete {
  position: absolute;
  right: 0;
  top: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.edit-service-checklist__row:hover .edit-service-checklist__delete {
  opacity: 1;
}

.edit-service-checklist__delete .material-symbols-rounded {
  font-size: 20px;
  color: #A4A7AE;
}

.edit-service-checklist__delete:hover .material-symbols-rounded {
  color: #D92D20;
}

/* Client Questions */
.edit-service-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-service-questions__row {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 28px;
  flex-wrap: wrap;
}

.edit-service-questions__row .edit-service-field__error {
  width: 100%;
  margin-top: 4px;
}

.edit-service-questions__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
}

.edit-service-questions__input-wrapper {
  flex: 1;
}

.edit-service-questions__input,
input.edit-service-questions__input,
input[type="text"].edit-service-questions__input {
  flex: 1;
  width: 100%;
  height: auto !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  outline: none !important;
}

.edit-service-questions__input:focus,
input.edit-service-questions__input:focus,
input[type="text"].edit-service-questions__input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.edit-service-questions__input::placeholder {
  color: #98A2B3;
}

.edit-service-questions__dropdown {
  flex-shrink: 0;
}

.edit-service-questions__dropdown .select-with-icon {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: auto !important;
  height: auto !important;
}

.edit-service-questions__req-select {
  display: block !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: auto !important;
  font-family: var(--font-body);
  font-size: 14px;
  color: #717680 !important;
  cursor: pointer;
  outline: none;
}

.edit-service-questions .edit-service-questions__row .edit-service-questions__dropdown select,
.edit-service-questions__dropdown .select-with-icon select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  height: auto;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0;
  padding: 0;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto;
  width: auto;
  font-family: var(--font-body);
  font-size: 14px;
  color: #717680 !important;
  cursor: pointer;
  outline: none;
}

.edit-service-questions__dropdown select:focus {
  box-shadow: none !important;
  outline: none;
}

.edit-service-questions__delete {
  position: absolute;
  right: 0;
  top: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.edit-service-questions__row:hover .edit-service-questions__delete {
  opacity: 1;
}

.edit-service-questions__delete .material-symbols-rounded {
  font-size: 20px;
  color: #A4A7AE;
}

.edit-service-questions__delete:hover .material-symbols-rounded {
  color: #D92D20;
}

/* Add Button */
.edit-service-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.edit-service-add-btn .material-symbols-rounded {
  font-size: 20px;
  color: #667085;
}

.edit-service-add-btn__text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #667085;
}

.edit-service-add-btn:hover .material-symbols-rounded,
.edit-service-add-btn:hover .edit-service-add-btn__text {
  color: #344054;
}

.edit-service-add-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Action Buttons */
.edit-service-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.edit-service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.edit-service-btn .material-symbols-rounded {
  font-size: 20px;
}

.edit-service-btn--secondary {
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  color: #344054;
}

.edit-service-btn--secondary:hover {
  background: #F9FAFB;
}

.edit-service-btn--primary {
  background: #000000;
  border: 1px solid #000000;
  color: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.edit-service-btn--primary:hover {
  background: #181D27;
}

/* Alerts */
.edit-service-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
}

.edit-service-alert--error {
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  color: #B42318;
}

.edit-service-alert--success {
  background: #ECFDF3;
  border: 1px solid #ABEFC6;
  color: #067647;
}

/* Responsive - Tablet */
@media (max-width: 900px) {
  .edit-service-page__container {
    padding: 32px var(--page-pad);
  }

  .edit-service-section {
    flex-direction: column;
    gap: 16px;
  }

  .edit-service-section__label {
    width: 100%;
  }

  .edit-service-page__title {
    font-size: 36px;
  }

  .edit-service-thumbnail {
    flex-direction: column;
  }

  .edit-service-thumbnail__preview {
    width: 100%;
    max-width: 200px;
  }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
  .edit-service-page__container {
    padding: 24px var(--page-pad);
  }

  .edit-service-page__title {
    font-size: 28px;
  }

  .edit-service-card {
    padding: 16px;
  }

  .edit-service-field-row {
    flex-direction: column;
    gap: 16px;
  }

  .edit-service-images__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .edit-service-actions {
    flex-direction: column;
  }

  .edit-service-btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDE-OUT PROFILE PANEL
   ════════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.slideout-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slideout-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Slide-out container */
.slideout {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: #FFFFFF;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.slideout.active {
  transform: translateX(0);
}

/* Header */
.slideout__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 32px 24px;
  background: #FFFFFF;
  flex-shrink: 0;
}

.slideout__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #181D27;
  margin: 0;
}

.slideout__close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.slideout__close:hover {
  background: #F5F5F5;
}

.slideout__close .material-symbols-rounded {
  font-size: 20px;
  color: #A4A7AE;
}

/* Profile section */
.slideout__profile {
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
}

/* Banner */
.slideout__banner {
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-top: -24px;
  padding: 0 8px;
  margin-bottom: -48px;
}

.slideout__banner-img {
  width: 100%;
  height: 120px;
  background: #F3F5F7;
  border-radius: 12px;
}

/* Avatar */
.slideout__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  z-index: 1;
}

.slideout__avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
}

.slideout__avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.slideout__avatar-fallback {
  width: 88px;
  height: 88px;
  border-radius: 9999px;
  background: #D3DCCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 32px;
  color: #414651;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

/* Name and title */
.slideout__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.slideout__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #181D27;
  margin: 0;
}

.slideout__online {
  width: 10px;
  height: 10px;
  background: #17B26A;
  border: 1.5px solid #FFFFFF;
  border-radius: 9999px;
}

.slideout__title-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #535862;
  margin: 0 0 16px 0;
}

/* Action buttons */
.slideout__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.slideout__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  text-decoration: none;
}

.slideout__btn--outline {
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  color: #414651;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
  inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.slideout__btn--outline:hover {
  background: #F9FAFB;
}

.slideout__btn--primary {
  background: #000000;
  border: none;
  color: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
  inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.slideout__btn--primary:hover {
  background: #0a0a30;
}

.slideout__btn-icon {
  width: 20px;
  height: 20px;
}

/* Details (location, languages) */
.slideout__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slideout__detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slideout__detail-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideout__detail-icon img {
  width: 20px;
  height: 20px;
}

.slideout__detail-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

/* Content section (Background & Experience) */
.slideout__content {
  padding: 0 24px;
}

.slideout__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slideout__section-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.slideout__list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.slideout__list li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin-bottom: 8px;
}

.slideout__list li:last-child {
  margin-bottom: 0;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .slideout {
    width: 100%;
  }
}

/* ==========================================================================
   PROFILE PAGE
   ========================================================================== */

.profile-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px var(--page-pad) 32px;
  gap: 24px;
  width: 100%;
  min-height: 100vh;
}

.profile-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #717680;
}

.profile-page__back:hover {
  color: #252B37;
}

.profile-page__back .material-symbols-rounded {
  font-size: 20px;
}

.profile-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0;
}

/* Profile Card */
.profile-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  overflow: hidden;
}

.profile-card__header {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;
  background: #FFFFFF;
}

.profile-card__banner {
  width: 100%;
  height: 120px;
  background: #F3F5F7;
  border-radius: 12px;
  margin-bottom: -40px;
}

.profile-card__container {
  padding: 0 20px;
}

.profile-card__avatar-and-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.profile-card__avatar {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}

.profile-card__avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 104px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  padding: 4px;
}

.profile-card__avatar-img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.profile-card__avatar-fallback {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #D3DCCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 32px;
  color: #535862;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.profile-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-top: 64px;
}

.profile-card__share-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
  inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.profile-card__share-btn img {
  width: 20px;
  height: 20px;
}

.profile-card__message-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  background: #000000;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
  inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.profile-card__message-btn img {
  width: 20px;
  height: 20px;
}

.profile-card__message-btn span {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
}

/* Profile Card Body */
.profile-card__body {
  padding: 24px 32px 24px;
}

.profile-card__content {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.profile-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.profile-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-card__name {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #252B37;
  margin: 0;
}

.profile-card__profession {
  font-family: 'PP Neue Montreal', var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-card__detail-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.profile-card__detail-icon {
  width: 20px;
  height: 20px;
}

.profile-card__detail-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

/* Experience section */
.profile-card__experience {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.profile-card__section-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.profile-card__experience-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-card__experience-list li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

/* Available Services Section */
.profile-services {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}

.profile-services__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.profile-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Service Card */
.profile-service-card {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
  gap: 28px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.profile-service-card:hover {
  box-shadow: 0px 4px 8px rgba(10, 13, 18, 0.08);
}

.profile-service-card__image {
  width: 100%;
  height: 146px;
  border-radius: 12px;
  overflow: hidden;
}

.profile-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-service-card__body {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  gap: 16px;
}

.profile-service-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #070416;
  margin: 0;
}

.profile-service-card__rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.profile-service-card__star {
  font-size: 20px;
  color: #FDB022;
}

.profile-service-card__rating span:last-child {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.profile-service-card__description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-service-card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.profile-service-card__delivery {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.profile-service-card__delivery img {
  width: 24px;
  height: 24px;
}

.profile-service-card__delivery span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.profile-service-card__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #070416;
}

/* Profile page responsive */
@media (max-width: 768px) {
  .profile-page {
    padding: 16px;
    max-width: none;
    width: 100%;
  }

  .profile-page__title {
    font-size: 32px;
    line-height: 40px;
  }

  .profile-card__content {
    flex-direction: column;
  }

  .profile-card__avatar-and-content {
    flex-direction: column;
    align-items: center;
  }

  .profile-card__actions {
    padding-top: 16px;
    justify-content: center;
  }

  .profile-services__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SERVICE CARD (Global styles for profile page)
   ========================================================================== */

.profile-services__grid .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 320px;
  padding: 12px 12px 20px;
  gap: 12px;
  border-radius: 16px;
  background-color: white;
  border: 1px solid var(--color-border);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;
}

.profile-services__grid .card:hover {
  box-shadow: 0px 4px 8px rgba(10, 13, 18, 0.08);
}

.profile-services__grid .card__header {
  position: relative;
  margin-bottom: 0;
}

.profile-services__grid .card__thumbnail {
  width: 100%;
  height: 146px;
  border-radius: 12px;
  background-color: var(--gray-100);
  background-size: cover;
  background-position: center;
}

.profile-services__grid .card__avatar {
  display: none;
}

.profile-services__grid .card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2rem 1rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.profile-services__grid .card__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  margin-bottom: 0.25rem;
}

.profile-services__grid .card .card__rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  height: 28px;
}

.profile-services__grid .card .card__rating .material-symbols-rounded {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #FDB022 !important;
  font-variation-settings: 'FILL' 1 !important;
}

.profile-services__grid .card .card__rating span:last-child {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.profile-services__grid .card__description {
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-services__grid .card .card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  height: 24px;
}

.profile-services__grid .card .card__footer .material-symbols-rounded {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--color-text);
  font-variation-settings: 'wght' 300;
}

.profile-services__grid .card .card__delivery-time {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.profile-services__grid .card .card__price {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-primary);
}

/* Push Cookiebot widget out of sidebar area */
#CookiebotWidget {
  left: 150px !important;
}
/* ===== Care Package Details ===== */
.cp-details {
    width: 100%;
    background: transparent;
    min-height: calc(100vh - 12px);
    padding: 0 var(--page-pad);
    box-sizing: border-box;
    font-family: 'PP Neue Montreal', sans-serif;
    color: #252B37;
    padding-top: 30px;
}

.cp-details__back {
    font-size: 14px;
    font-weight: 600;
    color: #717680;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.cp-details__back .material-symbols-rounded { font-size: 20px; }
.cp-details__back:hover { color: #252B37; }

.cp-details__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0 0 12px 0;
}

.cp-details__subtitle {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #414651;
    margin: 0 0 24px 0;
}

/* Two column layout */
.cp-details__layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.cp-details__left-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-details__right-col {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.cp-details__summary {
    width: 100%;
}

@media (max-width: 768px) {
    .cp-details__layout { flex-direction: column; }
    .cp-details__right-col { width: 100%; position: static; }
    .cp-details__left-col { width: 100%; min-width: 0; }
}

/* Cards */
.cp-details__card {
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-details__section-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #252B37;
    margin: 0;
}

/* Deliverables list */
.cp-details__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-details__list-item {
    font-size: 14px;
    color: #252B37;
    padding-left: 16px;
    position: relative;
}

.cp-details__list-item::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #252B37;
    font-size: 16px;
}

/* Subscription Summary */
.cp-summary__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-summary__label {
    font-size: 14px;
    color: #535862;
}

.cp-summary__value {
    font-size: 16px;
    font-weight: 600;
    color: #252B37;
}

/* Billing tabs */
.cp-billing__tabs {
    display: flex;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    padding: 0;
    gap: 2px;
    height: 36px;
}

.cp-billing__tab {
    flex: 1;
    padding: 8px 12px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #717680;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.cp-billing__tab--active {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
}

.cp-billing__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-billing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
}

.cp-billing__label {
    font-weight: 500;
    color: #414651;
    flex: 1;
}

.cp-billing__value {
    font-weight: 400;
    color: #535862;
}

.cp-billing__copy {
    align-self: flex-end;
    margin-top: 8px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #535862;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cp-billing__copy:hover { color: #252B37; }

/* Payment history divider */
.cp-payments__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #717680;
    font-size: 14px;
    margin: 8px 0 0;
}

.cp-payments__divider::before,
.cp-payments__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E9EAEB;
}

.cp-payments__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-payment-item {
    display: flex;
    align-items: center;
    padding: 16px;
    min-height: 80px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
    gap: 12px;
}

.cp-payment-item > div:first-child {
    flex: 1;
}

.cp-payment-item__actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}


.cp-payment-date {
    font-size: 14px;
    font-weight: 500;
    color: #535862;
}

.cp-payment-amount {
    font-size: 18px;
    font-weight: 600;
    color: #181D27;
    line-height: 28px;
}

/* Upload */
.cp-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.cp-payment-item form {
    display: inline;
}

.cp-upload__hint {
    font-size: 12px;
    color: #717680;
}

/* Buttons */
.cp-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.cp-btn--full { width: 100%; margin-top: 8px; }

.cp-btn--sm { padding: 8px 14px; font-size: 13px; }

.cp-btn--primary {
    background: #0E101B;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}
.cp-btn--primary:hover { background: #252B37; }

.cp-btn--secondary {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}
.cp-btn--secondary:hover { background: #F9FAFB; }

.cp-btn--danger { background: #D92D20; color: #FFFFFF; }
.cp-btn--danger:hover { background: #B42318; }

.cp-btn--danger-outline {
    background: #FFFFFF;
    color: #D92D20;
    border: 1px solid #FECDCA;
}
.cp-btn--danger-outline:hover { background: #FEF3F2; }

/* Status colors */
.cp-status--active { color: #067647; font-weight: 600; }
.cp-status--warning { color: #B54708; font-weight: 600; }
.cp-status--error { color: #B42318; font-weight: 600; }

/* Empty state */
.cp-empty-text {
    font-size: 14px;
    color: #717680;
    font-style: italic;
    margin: 0;
}

/* Modals */
.cp-modal {
    position: relative;
    width: min(480px, 92vw);
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0;
    color: #252B37;
    border: none;
}

.cp-modal[open], .cp-modal.show {
    display: flex;
    flex-direction: column;
}

.cp-modal::backdrop {
    background: rgba(10, 13, 18, 0.4);
    backdrop-filter: blur(4px);
}

.cp-modal__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0;
}

.cp-modal__close {
    background: transparent;
    border: none;
    color: #717680;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    width: 44px;
    height: 44px;
}
.cp-modal__close:hover { background: #F5F5F5; color: #252B37; }

.cp-modal__body {
    padding: 16px 24px 0;
}

.cp-modal__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 2px 0;
    color: #252B37;
}

.cp-modal__text { font-size: 14px; color: #535862; margin: 0; line-height: 20px; hyphens: none; }

.cp-modal__footer {
    display: flex;
    gap: 12px;
    padding: 32px 24px 24px;
}

.cp-btn--modal {
    flex: 1;
    height: 44px;
    font-size: 16px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

@import "base/_colors.css";

.select-with-icon {
    position: relative !important;
    display: flex !important;
    align-items: center;
    gap: 0.125rem;
    /* Small gap between fixed icon and trigger */
    padding: 0 0.75rem;
    /* Vertical padding handled by height */
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
    min-width: 180px;
    height: 36px;
}

/* Ensure icons inside our custom container aren't forced to absolute by site.css */
.select-with-icon .material-symbols-rounded {
    position: static !important;
    font-size: 1.25rem;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-with-icon select {
    display: none !important;
}

.select-with-icon .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0 0.5rem;
    font-family: 'PP Neue Montreal', var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    height: 100%;
}

.select-with-icon .custom-select-options {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    /* Higher z-index for edit forms */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    max-height: 250px;
    overflow-y: auto;
}

.select-with-icon .custom-select-options.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: translateY(0);
}

.select-with-icon .custom-select-option {
    position: relative;
    padding: 0.875rem 1rem 0.875rem 2.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    color: var(--gray-700);
    border-bottom: 1px solid #f3f4f6;
    font-weight: 500;
}

.select-with-icon .custom-select-option:last-child {
    border-bottom: none;
}

.select-with-icon .custom-select-option:hover {
    background-color: #f9fafb;
}

.select-with-icon .custom-select-option.selected {
    background-color: transparent;
    /* font-weight: 600; 
    color: var(--blue-700, #2563eb); */
}

.select-with-icon .custom-select-option::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-color: transparent;
    transition: all 0.2s ease;
}

.select-with-icon .custom-select-option.selected::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23414651' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Force the sort dropdown to align right and expand left if needed */
.controls__filter-sort .custom-select-options {
    left: auto !important;
    right: 0 !important;
}

/* Edit page specific tweaks */
.edit-service-field .select-with-icon {
    width: 100%;
    margin-top: 0.25rem;
}
/* ===== Fully Booked Modal ===== */
.fully-booked-modal__dialog {
  position: relative;
  width: min(480px, 92vw);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: #252B37;
}

.fully-booked-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.fully-booked-modal__icon-box {
  width: 48px;
  height: 48px;
  border: 1px solid #E9EAEB;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #414651;
}

.fully-booked-modal__icon-box .material-symbols-rounded {
  font-size: 24px;
}

.fully-booked-modal__close {
  background: transparent;
  border: none;
  color: #717680;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}

.fully-booked-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.fully-booked-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #252B37;
  margin: 0 0 8px 0;
}

.fully-booked-modal__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  color: #535862;
  margin: 0 0 24px 0;
  line-height: 20px;
}

.fully-booked-modal__btn {
  width: 100%;
  padding: 10px 16px;
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/* ============================================
   SERVICE DETAIL PAGE - Based on POC
   ============================================ */

.service-detail {
  width: 100%;
  background: transparent;
  min-height: calc(100vh - 12px);
  position: relative;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}

.service-detail__back {
  color: #717680;
  text-decoration: none;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  margin-bottom: 24px;
}

.service-detail__back:hover {
  color: #252B37;
}

.service-detail__back .material-symbols-rounded {
  font-size: 20px;
}

.service-detail__header {
  background: transparent;
  margin: 0;
  padding: 30px 0 0 0;
  position: relative;
}

.service-detail__header-inner {
  max-width: 100%;
}

.service-detail__title {
  font-family: 'PP Neue Montreal', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0 0 12px 0;
}

.service-detail__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0 0 24px 0;
}

/* Share Button */
.service-detail__share-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
  cursor: pointer;
  transition: background 0.2s;
}

.service-detail__share-btn .material-symbols-rounded {
  font-size: 20px;
}

.service-detail__share-btn:hover {
  background: #F9FAFB;
}

/* Main Grid Layout */
.service-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 24px;
  margin-top: 24px;
  padding: 0;
  align-items: start;
}

.service-detail__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Gallery */
.service-detail__gallery {
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  padding: 12px;
  position: relative;
}

.service-detail__main-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.service-detail__main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail__thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}

.service-detail__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  border: 2px solid transparent;
  padding: 0;
  background: #F5F5F5;
}

.service-detail__thumb.active {
  border: 3px solid var(--color-primary, #000000);
  box-sizing: border-box;
}

.service-detail__thumb:hover {
  transform: scale(1.02);
}

.service-detail__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections (Overview, Profile) */
.service-detail__section {
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  padding: 24px;
}

.service-detail__section-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 12px 0;
  color: #252B37;
}

.service-detail__overview {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.service-detail__overview p {
  margin: 0 0 16px 0;
}

.service-detail__overview p:last-child {
  margin-bottom: 0;
}

/* Profile Section - Two-part card structure */
.service-detail__section--profile {
  padding: 0;
  overflow: visible;
  border: none;
  background: transparent;
}

.service-detail__section--profile .service-detail__section-title {
  display: none;

  /* Title is now part of the side panel */
}

.service-detail__profile {
  display: flex;
  flex-direction: column;
}

/* Profile Header - Top part with gradient and avatar */
.service-detail__profile-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 12px 24px;
  background: #FFFFFF;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: #E9EAEB;
  border-radius: 16px 16px 0px 0px;
}

/* Gradient banner image */
.service-detail__profile-banner {
  width: 100%;
  height: 120px;
  background: #F3F5F7;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Avatar container - overlaps banner */
.service-detail__avatar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 24px;
  margin-top: -70px;
}

.service-detail__avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  width: 96px;
  height: 96px;
  background: #FFFFFF;
  border-radius: 9999px;
  box-sizing: border-box;
}

.service-detail__avatar {
  width: 88px;
  height: 88px;
  border-radius: 200px;
  object-fit: cover;
  background: #D3DCCF;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  flex-shrink: 0;
}

.service-detail__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D3DCCF;
}

.service-detail__avatar--placeholder .material-symbols-rounded {
  font-size: 40px;
  color: #8A9A80;
}

/* Profile Side Panel - Bottom part */
.service-detail__profile-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 24px 32px;
  gap: 24px;
  background: #FFFFFF;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #E9EAEB;
  border-radius: 0px 0px 16px 16px;
}

.service-detail__profile-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0px 24px;
}

.service-detail__profile-name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #252B37;
}

.service-detail__profile-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.service-detail__profile-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-detail__profile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.service-detail__profile-meta .material-symbols-rounded {
  font-size: 20px;
  color: #252B37;
}

/* Background & Experience Section */
.service-detail__cv-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0px 24px;
}

.service-detail__cv-header {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.service-detail__cv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-detail__cv-list li {
  color: #252B37;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding-left: 20px;
  position: relative;
}

.service-detail__cv-list li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: #252B37;
}

/* Sidebar - Purchase Card */
.service-detail__sidebar {
  position: sticky;
  top: 32px;
  height: fit-content;
  align-self: start;
}

.service-detail__purchase-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 24px 24px 16px;
  gap: 16px;
  width: 350px;
  max-width: 360px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  border-radius: 16px;
}

.service-detail__price-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 4px;
  width: 100%;
}

.service-detail__card-title {
  width: 100%;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #252B37;
  margin: 0;
}

.service-detail__card-subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #252B37;
  margin: 0;
}

.service-detail__price {
  width: 100%;
  font-family: 'PP Neue Montreal', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: #252B37;
  margin: 0;
}

.service-detail__delivery {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
}

.service-detail__delivery .material-symbols-rounded {
  font-size: 24px;
  color: #A4A7AE;
}

.service-detail__delivery img {
  width: 22px;
  height: 20px;
}

.service-detail__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 12px;
  width: 100%;
}

.service-detail__btn {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  gap: 6px;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.service-detail__btn img {
  flex-shrink: 0;
}

.service-detail__btn--primary {
  background: var(--color-primary, #000000);
  color: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border: none;
}

.service-detail__btn--primary .material-symbols-rounded {
  color: #B9C0D4;
}

.service-detail__btn--primary img {
  width: 20px;
  height: 20px;
}

/* Spinning animation for loading icon */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rot ate(0deg);
  }

  to {

    transform: rotate(360deg);
  }
}

.service-detail__btn--primary:hover {
  background: var(--color-primary-hover, #0a0a30);
}

.service-detail__btn--secondary {
  background: #FFFFFF;
  color: #414651;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.service-detail__btn--secondary .material-symbols-rounded {
  color: #A4A7AE;
}

.service-detail__btn--secondary img {
  width: 20px;
  height: 20px;
}

.service-detail__btn--secondary:hover {
  background: #F9FAFB;
}

.service-detail__features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: 2px;
  width: 100%;
  margin-top: -12px;
}

.service-detail__features-label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0 0 8px 0;
}

.service-detail__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-detail__features-list li {
  display: flex;
  align-items: center;
  padding: 2px 0;
  gap: 8px;
  min-height: 28px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #252B37;
  white-space: nowrap;
}

.service-detail__features-list li::before {
  content: "";
  background-image: url('/images/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.service-detail__requirements-list {
  list-style: square;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-detail__requirements-list li {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.service-detail__estimated-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  margin: 0 0 4px 0;
}

.service-detail__estimated-value {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
}

.service-detail__estimated-note {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #252B37;
  margin: 2px 0 0 0;
}

.service-detail__features-list--dots li::before {
  width: 6px;
  height: 6px;
  background: #717680;
  border-radius: 9999px;
  background-image: none;
  margin: 0 7px;
}

.service-detail__separator {
  width: 100%;
  height: 0;
  border-top: 1px solid #E9EAEB;
  margin: 12px 0;
}

.service-detail__custom-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  gap: 4px;
  width: 100%;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.service-detail__custom-offer .material-symbols-rounded {
  font-size: 20px;
  color: #414651;
}

.service-detail__custom-offer:hover {
  color: #252B37;
  background: #F5F5F5;
}

/* ============================================
   MESSAGE FORM MODAL - LIGHT THEME
   ============================================ */
.message-modal__dialog {
  position: relative;
  width: min(480px, 92vw);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.message-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 20px;
}

.message-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: #252B37;
  margin: 0;
}

.message-modal__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
  margin: 0;
}

.message-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #717680;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.message-modal__body {
  padding: 0 24px 24px;
}

.message-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

/* Recipient avatar and name */
.message-form__recipient {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
}

.message-form__avatar {
  width: 56px;
  height: 56px;
  border-radius: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  object-fit: cover;
  flex-shrink: 0;
}

.message-form__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E9EAEB;
  color: #717680;
}

.message-form__avatar--placeholder .material-symbols-rounded {
  font-size: 28px;
}

.message-form__recipient-name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #252B37;
}

.message-form__textarea-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.message-form__textarea-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.message-form__textarea-wrapper:focus-within .message-form__disclaimer {
    border-color: var(--gray-400);
}

.message-form__textarea {
    width: 100%;
    min-height: 152px;
    padding: 12px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 8px 8px 0 0;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    resize: vertical;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.message-form__disclaimer {
    background: #F3F4F6;
    padding: 8px 14px;
    border: 1px solid #E9EAEB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: #717680;
    text-align: center;
}

.message-form__disclaimer a {
    color: #111111;
    text-decoration: underline;
    font-weight: 500;
}

.message-form__textarea:focus {
    outline: none;
    box-shadow: none !important;
    border-color: var(--gray-400) !important;
}

.message-form__textarea::placeholder {
  color: #717680;
}


.message-form__char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #A4A7AE;
  margin-top: 4px;
}

.message-modal__featured-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.message-modal__header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.message-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
}

.message-modal__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

.message-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.message-form__actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.message-form__actions .btn .material-symbols-rounded {
  font-size: 20px;
}

.message-form__actions .btn--primary {
  background: var(--color-primary, #000000);
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.message-form__actions .btn--primary:hover {
  background: #0a0c15;
}

.message-form__actions .btn--secondary {
  background: #FFFFFF;
  color: #252B37;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.message-form__actions .btn--secondary:hover {
  background: #F5F5F5;
}

/* Form field with label */
.message-form__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.message-form__label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
}

.message-form__required {
  color: #252B37;
  margin-left: 2px;
}

/* Input with prefix (budget field) */
.message-form__input-wrapper {
  position: relative;
  width: 100%;
}

.message-form__input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #717680;
  pointer-events: none;
}

.message-form__input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  background: #FFFFFF;
}

.message-form__input:focus {
  outline: none;
  border-color: #252B37;
}

.message-form__input::placeholder {
  color: #717680;
}

.message-form__input--with-prefix {
  padding-left: 28px;
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
  .service-detail {
    padding: 0 20px;
  }

  .service-detail__header {
    padding: 30px 0 10px 0;
  }

  .service-detail__layout {
    grid-template-columns: 1fr;
    margin-top: 32px;
    gap: 24px;
  }

  .service-detail__main {
    order: 0;
    gap: 24px;
  }

  .service-detail__sidebar {
    position: sticky;
    top: 32px;
    height: fit-content;
    align-self: start;
    width: 350px;
  }

  .service-detail__main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .service-detail__thumbnails {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
  }

  .service-detail__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .service-detail__purchase-card {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Profile section tablet */
  .service-detail__profile-header {
    padding: 12px 12px 20px;
  }

  .service-detail__profile-banner {
    height: 100px;
  }

  .service-detail__avatar-container {
    margin-top: -40px;
  }
}

/* ============================================
   MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .service-detail {
    padding: 0 16px;
  }

  .service-detail__header {
    padding: 16px 0;
  }

  .service-detail__back {
    margin-bottom: 16px;
  }

  .service-detail__title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 4px;
  }

  .service-detail__subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .service-detail__layout {
    grid-template-columns: 1fr;
    margin-top: 16px;
    gap: 24px;
  }

  .service-detail__main {
    order: 0;
    gap: 24px;
  }

  .service-detail__sidebar {
    position: relative;
    top: 0;
    order: 1;
    margin-bottom: 20px;
  }

  .service-detail__main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 8px;
  }

  .service-detail__thumbnails {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .service-detail__thumb {
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
  }

  .service-detail__section {
    padding: 16px;
  }

  .service-detail__section-title {
    font-size: 18px;
    line-height: 28px;
  }

  .service-detail__purchase-card {
    width: 100%;
    padding: 16px;
  }

  /* Profile section mobile */
  .service-detail__section--profile {
    padding: 0;
  }

  .service-detail__profile-header {
    padding: 8px 8px 16px;
    border-radius: 12px 12px 0px 0px;
  }

  .service-detail__profile-banner {
    height: 80px;
    border-radius: 8px;
  }

  .service-detail__avatar-container {
    padding: 0px 16px;
    margin-top: -36px;
  }

  .service-detail__avatar-wrapper {
    width: 80px;
    height: 80px;
  }

  .service-detail__avatar {
    width: 72px;
    height: 72px;
  }

  .service-detail__avatar--placeholder .material-symbols-rounded {
    font-size: 32px;
  }

  .service-detail__profile-panel {
    padding: 0px 16px 24px;
    gap: 20px;
    border-radius: 0px 0px 12px 12px;
  }

  .service-detail__profile-info {
    padding: 0px 16px;
    gap: 8px;
  }

  .service-detail__profile-name {
    font-size: 16px;
    line-height: 22px;
  }

  .service-detail__cv-section {
    padding: 0px 16px;
    gap: 8px;
  }

  .service-detail__cv-header {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ============================================
   BILLING DETAILS MODAL
   ============================================ */

/* Prevent 
orizontal scroll on page */
html,
body {
  overflow-x: hidden;
}

/* Hide page scrollbars when modals are open */
html:has(.message-modal.is-open),
html:has(.billing-modal.is-open),
html:has(.fullbooked-modal.is-open),
body:has(.message-modal.is-open),
body:has(.billing-modal.is-open),
body:has(.fullbooked-modal.is-open) {
  overflow: hidden !important;
  height: 100vh !important;
}

body:has(.message-modal.is-open) .main,
body:has(.message-modal.is-open) #main-panel,
body:has(.billing-modal.is-open) .main,
body:has(.billing-modal.is-open) #main-panel,
body:has(.fullbooked-modal.is-open) .main,
body:has(.fullbooked-modal.is-open) #main-panel {
  overflow: hidden !important;
  height: 100% !important;
}

/* Hide billing modal when not open */
#billing-modal:not(.is-open),
.modal.billing-modal:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.billing-modal.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden auto;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 24px;
}

/* Hide the original backdrop, using modal background instead */
.billing-modal .modal__backdrop {
  display: none;
}

.billing-modal__dialog {
  position: relative;
  flex-shrink: 0;
  width: min(480px, 100%);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.billing-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.billing-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 10px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.billing-modal__icon .material-symbols-rounded {
  font-size: 24px;
  color: #717680;
}

.billing-modal__icon--success {
  background: #ECFDF3;
  border-color: #ABEFC6;
}

.billing-modal__icon--success .material-symbols-rounded {
  color: #067647;
}

.billing-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #717680;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.billing-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.billing-modal__close .material-symbols-rounded {
  font-size: 24px;
}

.billing-modal__title-section {
  padding: 16px 24px 0;
}

.billing-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.billing-modal__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 2px 0 0;
}

.billing-modal__form {
  display: flex;
  flex-direction: column;
}

.billing-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

.billing-modal__error {
  padding: 12px 16px;
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  border-radius: 8px;
  color: #B42318;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.billing-modal__actions {
  display: flex;
  gap: 12px;
  padding: 24px;
  padding-top: 8px;
}

.billing-modal__actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.billing-modal__actions .btn--primary {
  background: var(--color-primary, #000000);
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.billing-modal__actions .btn--primary:hover {
  background: #1a1c2e;
}

.billing-modal__actions .btn--secondary {
  background: #FFFFFF;
  color: #414651;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.billing-modal__actions .btn--secondary:hover {
  background: #F5F5F5;
}

/* Billing Form Fields */
.billing-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-form__label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.billing-form__required {
  color: #252B37;
  margin-left: 2px;
}

.billing-form__input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
}

.billing-form__input:focus {
  outline: none;
  border-color: #252B37;
}

.billing-form__input::placeholder {
  color: #717680;
}

/* Select / Dropdown */
.billing-form__select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.billing-form__select-icon {
  position: absolute;
  left: 14px;
  font-size: 24px;
  color: #717680;
  pointer-events: none;
}

.billing-form__select {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 44px 10px 46px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  appearance: none;
  cursor: pointer;
}

.billing-form__select:focus {
  outline: none;
  border-color: #252B37;
}

.billing-form__select option[value=""] {
  color: #717680;
}

.billing-form__select-chevron {
  position: absolute;
  right: 14px;
  font-size: 20px;
  color: #A4A7AE;
  pointer-events: none;
}

/* Checkbox */
.billing-form__checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.billing-form__checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid #D5D7DA;
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.billing-form__checkbox:checked {
  background: var(--color-primary, #000000);
  border-color: var(--color-primary, #000000);
}

.billing-form__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.billing-form__checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 16, 27, 0.2);
}

.billing-form__checkbox-label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
  cursor: pointer;
}

/* Mobile adjustments for billing modal */
@media (max-width: 767px) {
  .billing-modal.is-open {
    padding: 16px;
  }

  .billing-modal__actions {
    flex-direction: column;
  }

  .billing-modal__actions .btn {
    width: 100%;
  }
}

/* ========== ===yy=============================
   FULLY BOOKED MODAL
   ============================================ */

.fullbooked-modal.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 24px;
}

.fullbooked-modal:not(.is-open) {
  display: none;
}

.fullbooked-modal .modal__backdrop {
  display: none;
}

.fullbooked-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 20px-4px rgb(10, 13, 18, 0.08),
  0px 8px 8px -4 gba(10, 18, 0.03),
  0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  border-radius: 16px;
}

.fullbooked-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #717680;
  transition: background-color 0.2s;
}

.fullbooked-modal__close:hover {
  background: #F5F5F5;
}

.fullbooked-modal__close .material-symbols-rounded {
  font-size: 24px;
}

.fullbooked-modal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 0;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.fullbooked-modal__icon {
  width: 48px;
  height: 48px;
}

.fullbooked-modal__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fullbooked-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.fullbooked-modal__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

.fullbooked-modal__actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 32px 24px 24px;
  width: 100%;
  box-sizing: border-box;
}

.fullbooked-modal__actions .btn {
  flex: 1;
  height: 44px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  box-sizing: border-box;
}

.fullbooked-modal__actions .btn--secondary {
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(0, 13, 1),
  inset 0px 0px 0px 1px rgba(10, 13, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  color: #414651;
}

.fullbooked-modal__actions .btn--secondary:hover {
  background: #F9FAFB;
}

.fullbooked-modal__actions .btn--primary {
  background: var(--color-primary, #000000);
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
  inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  color: #FFFFFF;
}

.fullbooked-modal__actions .btn--primary:hover {
  background: #1a1d2e;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .fullbooked-modal.is-open {
    padding: 16px;
  }

  .fullbooked-modal__actions {
    flex-direction: column;
  }

  .fullbooked-modal__actions .btn {
    width: 100%;
  }
}
/* ============================================================
   MESSAGES PAGE - Frame 86 Figma Design
   ============================================================ */

/* Prevent scroll on main panel when messages page is shown (desktop only) */
@media (min-width: 768px) {
  #main-panel:has(.messages-page) {
    overflow: hidden;
    height: calc(100vh - 24px);
  }
}

/* Page Container */
.messages-page {
  display: flex;
  flex-direction: column;
  padding: 70px 70px 0;
  gap: 24px;
  height: calc(100vh - 12px);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .messages-page {
    overflow: hidden;
  }
}

.messages-page__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0;
}

/* Empty page - no header, full area */
.messages-page--empty {
  padding: 12px 12px 0 0;
  height: calc(100vh - 48px);
  box-sizing: border-box;
}

.messages-page--empty .chat-empty-state {
  flex: 1;
  border-radius: 0 16px 0 0;
}

/* Page Header */
.messages-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}

.messages-header__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: -0.01em;
  color: #252B37;
  margin: 0;
}

.messages-header__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0;
}

/* Chat Shell - Single unified container */
.chat-shell {
  display: flex;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Empty state shell - full width, no border */
.chat-shell--empty {
  border: none;
  background: transparent;
}

.chat-shell--empty .chat-empty-state {
  width: 100%;
  border-radius: 0 16px 0 0;
  flex: 1;
}

/* ============================================================
   LEFT PANEL - Conversation List
   ============================================================ */

.chat-sidebar {
  width: 380px;
  min-width: 320px;
  max-width: 420px;
  background: #FFFFFF;
  border-right: 1px solid #E9EAEB;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Search */
.chat-search {
  padding: 16px;
  border-bottom: 1px solid #E9EAEB;
}

.chat-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.chat-search__icon {
  position: absolute;
  left: 14px;
  color: #717680;
  font-size: 20px;
  pointer-events: none;
}

.chat-search__input {
  width: 100%;
  height: 44px;
  padding: 10px 14px 10px 44px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.chat-search__input::placeholder {
  color: #717680;
}

.chat-search__input:focus {
  border-color: #535862;
}

.chat-search__clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #717680;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
}

.chat-search__hint {
  margin-top: 8px;
  font-size: 12px;
  color: #535862;
}

/* Conversation List */
.chat-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Conversation Item */
.conv {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid #E9EAEB;
  background: #FFFFFF;
  transition: background-color 0.15s ease;
}

.conv:hover {
  background: #FAFAFA;
}

.conv.is-active {
  background: #F5F5F5;
}

.conv__unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F04438;
  flex-shrink: 0;
  margin-top: 23px;
}

.conv__unread-dot--hidden {
  visibility: hidden;
}

.conv__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.conv__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E9EAEB;
}

.conv__avatar--placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #535862;
  border: 1px solid #E9EAEB;
}

.conv__online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #17B26A;
  border: 2px solid #FFFFFF;
}

.conv__content {
  flex: 1;
  min-width: 0;
}

.conv__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.conv__name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #181D27;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv__time {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #717680;
  white-space: nowrap;
  flex-shrink: 0;
}

.conv__preview {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #535862;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No conversations */
.chat-empty {
  padding: 24px;
  text-align: center;
  color: #717680;
  font-size: 14px;
}

/* ============================================================
   RIGHT PANEL - Chat Thread
   ============================================================ */

.chat-main {
  flex: 1;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Thread Header */
.chat-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E9EAEB;
  background: #FFFFFF;
}

.chat-main-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-main-header__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chat-main-header__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E9EAEB;
}

.chat-main-header__avatar--placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #535862;
  border: 1px solid #E9EAEB;
}

.chat-main-header__online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #17B26A;
  border: 2px solid #FFFFFF;
}

.chat-main-header__name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #181D27;
}

.chat-main-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-main-header__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #414651;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.chat-main-header__btn:hover {
  background: #F9FAFB;
}

.chat-main-header__btn .material-symbols-rounded {
  font-size: 20px;
}

.chat-main-header__icon {
  width: 20px;
  height: 20px;
}

/* Empty state header */
.chat-main-header--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.chat-main-header__placeholder {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  color: #717680;
}

/* Header Disclaimer */
.chat-main-disclaimer {
  background: #F3F4F6;
  padding: 8px 20px;
  border-bottom: 1px solid #E9EAEB;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #717680;
  text-align: center;
}

.chat-main-disclaimer a {
  color: #111111;
  text-decoration: underline;
  font-weight: 500;
}

/* Typing indicator */
.chat-typing {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 12px;
  color: #717680;
  margin-top: 2px;
}

/* ============================================================
   MESSAGES AREA
   ============================================================ */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* Load older */
.thread-topbar {
  text-align: center;
  margin-bottom: 16px;
}

.chat-load-older {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #535862;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.chat-load-older:hover {
  background: #F5F5F5;
}

/* Day Divider */
.chat-day-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
}

.chat-day-divider__line {
  flex: 1;
  height: 1px;
  background: #E9EAEB;
}

.chat-day-divider__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #717680;
  white-space: nowrap;
}

/* Message Group */
.message-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-group--outgoing {
  align-items: flex-end;
}

.message-group--incoming {
  align-items: flex-start;
}

/* Message Row */
.message-row {
  display: flex;
  gap: 12px;
  max-width: 75%;
}

.message-row--outgoing {
  flex-direction: row-reverse;
  margin-left: auto;
}

.message-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #E9EAEB;
}

.message-row__avatar--placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  flex-shrink: 0;
  border: 1px solid #E9EAEB;
}

.message-row__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-row--outgoing .message-row__content {
  align-items: stretch;
}

.message-row--outgoing .bubble {
  align-self: flex-end;
}

/* Message Header (name + time) */
.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}


.message-header__name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #414651;
}

.message-header__time {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #717680;
}

/* Message Bubble */
.bubble {
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 100%;
}

.bubble--incoming {
  background: #FAFAFA;
  border: 1px solid #E9EAEB;
  border-radius: 0 8px 8px 8px;
}

.bubble--outgoing {
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 8px 0 8px 8px;
}

.bubble__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #535862;
  word-wrap: break-word;
  white-space: pre-line;
}

/* File Attachment */
.file-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  min-width: 200px;
}

.file-attachment__icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-attachment__icon {
  width: 40px;
  height: 40px;
}

.file-attachment__pdf-badge {
  background: #F04438;
  color: #FFFFFF;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 2px;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

.file-attachment__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.file-attachment__name {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-attachment__size {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #717680;
}

.file-attachment__link {
  text-decoration: none;
  color: inherit;
}

.file-attachment__link:hover .file-attachment__name {
  text-decoration: underline;
}

/* Image in chat */
.chat-img-wrap {
  max-width: 300px;
}

.chat-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #E9EAEB;
}

.chat-img-link {
  display: block;
}

/* Meeting card */
.meeting-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  min-width: 200px;
}

.meeting-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #414651;
}

.meeting-card__time {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 13px;
  color: #717680;
}

.meeting-card__join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #181D27;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
}

.meeting-card__join:hover {
  background: #252B37;
}

/* System message card (Order Started, Custom Offer) */
.system-msg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  min-width: 200px;
}

.system-msg-card:has(.system-msg-card__body) {
  background: #FFFFFF;
  border-radius: 8px 0px 8px 8px;
  width: 330px;
  max-width: 330px;
  gap: 2px;
}

.system-msg-card__icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  color: #414651;
}

.system-msg-card__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 13px;
  color: #717680;
  white-space: pre-line;
}

.system-msg-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.system-msg-card__body .system-msg-card__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
}

.system-msg-card__body .system-msg-card__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  white-space: normal;
  hyphens: none;
}

.system-msg-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #181D27;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
}

.system-msg-card__btn:hover {
  background: #252B37;
}

.system-msg-card:has(.system-msg-card__body) .system-msg-card__btn {
  align-self: flex-end;
  margin-top: 14px;
  padding: 8px 12px;
  background: #000000;
  font-family: 'PP Neue Montreal', sans-serif;
  line-height: 20px;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

/* Empty thread */
.chat-empty-thread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #717680;
  font-size: 14px;
}

/* ============================================================
   MESSAGE INPUT AREA
   ============================================================ */

.chat-compose {
  padding: 0 24px 24px;
  background: #FFFFFF;
}

.chat-compose__box {
  display: flex;
  flex-direction: column;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.chat-compose__input-row {
  width: 100%;
  border: none;
}

.chat-compose__box .chat-compose__input,
.chat-compose__box textarea.chat-compose__input {
  width: 100%;
  min-height: 72px;
  max-height: 150px;
  padding: 12px 14px;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27 !important;
  background: transparent !important;
  outline: none !important;
  resize: none;
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-compose__input::placeholder {
  color: #717680;
}

.chat-compose__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 14px 14px;
  margin-top: 8px;
}

.chat-compose__left-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-compose__attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #A4A7AE;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.chat-compose__attach-btn:hover {
  background: #F9FAFB;
  color: #535862;
}

.chat-compose__attach-btn .material-symbols-rounded {
  font-size: 20px;
}

.chat-compose__attach-icon {
  width: 16px;
  height: 16px;
}

.chat-compose__offer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #414651;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.chat-compose__offer-btn:hover {
  background: #F9FAFB;
}

.chat-compose__send-btn {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #404968;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
}

.chat-compose__send-btn:hover {
  color: #181D27;
}

/* Attachment indicator */
.chat-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 8px 14px;
  padding: 8px 12px;
  background: #F3F4F6;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 13px;
  color: #414651;
}

.chat-attachment__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.chat-attachment__remove {
  background: none;
  border: none;
  color: #717680;
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  line-height: 1;
}

.chat-attachment__remove:hover {
  color: #414651;
}

/* Hidden file input */
.chat-compose__file-input {
  display: none;
}

/* Meeting form (hidden by default, for legacy support) */
#chat-create-meeting {
  display: none;
}

/* ============================================================
   EMPTY STATE - No Messages Yet
   ============================================================ */

.chat-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 70px;
  background: #FDFDFD;
  position: relative;
  overflow: hidden;
}

/* Decorative concentric circles */
.chat-empty-state__pattern {
  position: absolute;
  width: 480px;
  height: 480px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.chat-empty-state__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #E9EAEB;
  border-radius: 50%;
}

.chat-empty-state__circle--1 {
  width: 96px;
  height: 96px;
}

.chat-empty-state__circle--2 {
  width: 160px;
  height: 160px;
}

.chat-empty-state__circle--3 {
  width: 224px;
  height: 224px;
}

.chat-empty-state__circle--4 {
  width: 288px;
  height: 288px;
}

.chat-empty-state__circle--5 {
  width: 352px;
  height: 352px;
}

.chat-empty-state__circle--6 {
  width: 416px;
  height: 416px;
}

.chat-empty-state__circle--7 {
  width: 480px;
  height: 480px;
}

/* Content container */
.chat-empty-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
  max-width: 512px;
  background: transparent;
}

/* Illustration - box with icon overlay */
.chat-empty-state__illustration {
  position: relative;
  width: 170px;
  height: 180px;
}

.chat-empty-state__box {
  width: 170px;
  height: 180px;
}

.chat-empty-state__icon {
  position: absolute;
  width: 56px;
  height: 56px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Text */
.chat-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 352px;
}

.chat-empty-state__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #181D27;
  margin: 0;
}

.chat-empty-state__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #535862;
  margin: 0;
}

/* Simple empty placeholder (for conversation list) */
.chat-empty {
  padding: 24px 16px;
  text-align: center;
  color: #717680;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .messages-page {
    padding: 32px 40px;
    height: auto;
    min-height: calc(100vh - 24px);
  }

  .chat-shell {
    flex-direction: column;
    flex: none;
    min-height: 600px;
  }

  .chat-sidebar {
    width: 100%;
    max-width: 100%;
    max-height: 300px;
    border-right: none;
    border-bottom: 1px solid #E9EAEB;
  }

  .chat-main {
    flex: 1;
    min-height: 400px;
  }

  .chat-empty-state {
    padding: 40px;
  }

  .chat-empty-state__pattern {
    width: 320px;
    height: 320px;
  }

  .chat-empty-state__circle--5,
  .chat-empty-state__circle--6,
  .chat-empty-state__circle--7 {
    display: none;
  }
}

@media (max-width: 767px) {
  .messages-page {
    padding: 24px 16px;
    height: auto;
    min-height: calc(100vh - 24px);
  }

  .messages-header__title {
    font-size: 28px;
    line-height: 36px;
  }

  .chat-sidebar {
    max-height: 250px;
  }

  .conv {
    padding: 12px 16px;
  }

  .conv__avatar,
  .conv__avatar--placeholder {
    width: 48px;
    height: 48px;
  }

  .chat-main-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .chat-main-header__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .message-row {
    max-width: 90%;
  }

  .chat-compose__left-actions {
    flex-wrap: wrap;
  }

  .chat-empty-state {
    padding: 24px 16px;
  }

  .chat-empty-state__pattern {
    width: 240px;
    height: 240px;
  }

  .chat-empty-state__circle--4,
  .chat-empty-state__circle--5,
  .chat-empty-state__circle--6,
  .chat-empty-state__circle--7 {
    display: none;
  }

  .chat-empty-state__illustration {
    width: 130px;
    height: 140px;
  }

  .chat-empty-state__box {
    width: 130px;
    height: 140px;
  }

  .chat-empty-state__icon {
    width: 44px;
    height: 44px;
    bottom: 16px;
  }

  .chat-empty-state__title {
    font-size: 18px;
    line-height: 26px;
  }

  .chat-empty-state__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ============================================================
   SELECT SERVICE MODAL
   ============================================================ */

.select-system-modal.is-open {
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.select-system-modal .modal__backdrop {
  display: none;
}

.select-system-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 480px;
  max-width: 90vw;
  background: #FFFFFF;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
              0px 8px 8px -4px rgba(10, 13, 18, 0.03),
              0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  border-radius: 16px;
  overflow: hidden;
}

.select-system-modal__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 20px;
  gap: 16px;
  position: relative;
  background: #FFFFFF;
}

.select-system-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
              inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
              inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 10px;
}

.select-system-modal__icon .material-symbols-rounded {
  font-size: 24px;
  color: #000000;
}

.select-system-modal__icon img {
  width: 24px;
  height: 24px;
}

.select-system-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.select-system-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  margin: 0;
}

.select-system-modal__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

.select-system-modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #A4A7AE;
}

.select-system-modal__close:hover {
  background: #F9FAFB;
  color: #535862;
}

.select-system-modal__close .material-symbols-rounded {
  font-size: 24px;
}

.select-system-modal__divider {
  width: 100%;
  height: 1px;
  background: #E9EAEB;
}

.select-system-modal__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px;
  gap: 20px;
  background: #FFFFFF;
}

.select-system-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.select-system-modal__empty p {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  color: #535862;
  margin: 0;
}

/* System card for selection */
.system-card-select,
.service-card-select {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.system-card-select:hover,
.service-card-select:hover {
  border-color: #D5D7DA;
}

.system-card-select:focus,
.service-card-select:focus {
  outline: none;
  border-color: #181D27;
  box-shadow: 0px 0px 0px 2px rgba(24, 29, 39, 0.1);
}

.system-card-select__content,
.service-card-select__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.system-card-select__title,
.service-card-select__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  margin: 0;
}

.system-card-select__overview,
.service-card-select__overview {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

/* ============================================================
   CREATE OFFER PAGE - Frame 86
   ============================================================ */

.create-offer-page {
  min-height: 100vh;
  background: transparent;
  padding: 30px var(--page-pad) 24px;
}

/* Back Button */
.create-offer__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}

.create-offer__back:hover {
  color: #252B37;
}

.create-offer__back .material-symbols-rounded {
  font-size: 20px;
}

/* Page Header */
.create-offer__header {
  margin-bottom: 0;
}

.create-offer__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0 0 12px 0;
}

.create-offer__subtitle {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0 0 24px 0;
}

/* Form */
.create-offer__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cards */
.create-offer__card {
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  padding: 24px;
}

/* Section - Two column layout */
.create-offer__section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

.create-offer__section-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.create-offer__section-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #252B37;
  margin: 0;
}

.create-offer__section-desc {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

/* Section Fields */
.create-offer__section-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Field */
.create-offer__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.create-offer__field-row {
  display: flex;
  gap: 24px;
}

.create-offer__field--half {
  flex: 1;
}

/* Labels */
.create-offer__label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
}

.create-offer__required {
  color: inherit;
}

/* Inputs */
.create-offer__input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  box-sizing: border-box;
}

.create-offer__input::placeholder {
  color: #717680;
}

.create-offer__input:focus {
  border-color: #181D27;
}

/* Select */
.create-offer__select {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23535862' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  outline: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  box-sizing: border-box;
  padding-right: 40px;
}

.create-offer__select:focus {
  border-color: #181D27;
}

.create-offer__select--small {
  width: auto;
  min-width: 120px;
}

/* Textarea */
.create-offer__textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  resize: vertical;
  box-sizing: border-box;
}

.create-offer__textarea::placeholder {
  color: #717680;
}

.create-offer__textarea:focus {
  border-color: #181D27;
}

/* Hint */
.create-offer__hint {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

/* Divider */
.create-offer__divider {
  width: 100%;
  height: 1px;
  background: #E9EAEB;
  margin: 4px 0;
}

/* Input Group (with prefix) */
.create-offer__input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.create-offer__input-prefix {
  position: absolute;
  left: 14px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #535862;
  pointer-events: none;
}

.create-offer__input--with-prefix {
  padding-left: 32px;
}

/* Stepper */
.create-offer__stepper {
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  overflow: hidden;
  width: fit-content;
}

.create-offer__stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA !important;
  cursor: pointer;
  color: #535862;
  transition: background-color 0.15s ease;
}

.create-offer__stepper-btn:first-child {
  border-radius: 8px 0 0 8px !important;
}

.create-offer__stepper-btn:last-child {
  border-radius: 0 8px 8px 0 !important;
}

.create-offer__stepper-btn:hover {
  background: #F9FAFB;
}

.create-offer__stepper-btn .material-symbols-rounded {
  font-size: 20px;
}

input.create-offer__stepper-input,
input[type="number"].create-offer__stepper-input {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 44px !important;
  border: 1px solid #D5D7DA !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0;
  text-align: center;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  outline: none;
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.create-offer__stepper-input::-webkit-outer-spin-button,
.create-offer__stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Thumbnail Row */
.create-offer__thumbnail-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.create-offer__thumbnail-preview {
  position: relative;
  flex: 1;
  min-height: 146px;
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  overflow: hidden;
}

.create-offer__thumbnail-row .create-offer__upload-box {
  flex: 1;
}

.create-offer__thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-offer__thumbnail-remove {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.create-offer__thumbnail-remove .material-symbols-rounded {
  font-size: 16px;
}

/* Upload Box */
.create-offer__upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #D5D7DA;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  flex: 1;
  min-height: 146px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.create-offer__upload-box:hover {
  border-color: #A4A7AE;
  background: #F9FAFB;
}

.create-offer__upload-box--wide {
  flex: none;
  width: 100%;
}

.create-offer__upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #F5F5F5;
  border: 6px solid #FAFAFA;
  border-radius: 50%;
}

.create-offer__upload-icon .material-symbols-rounded {
  font-size: 20px;
  color: #535862;
}

.create-offer__upload-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  text-align: center;
  margin: 0;
}

.create-offer__upload-link {
  color: #6941C6;
  font-weight: 600;
  cursor: pointer;
}

.create-offer__upload-hint {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  margin: 0;
}

.create-offer__upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Gallery */
.create-offer__gallery {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.create-offer__gallery-item {
  position: relative;
  width: 100px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E9EAEB;
}

.create-offer__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-offer__gallery-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.create-offer__gallery-remove .material-symbols-rounded {
  font-size: 14px;
}

/* Checklist (Deliverables) */
.create-offer__checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.create-offer__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.create-offer__checklist-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.create-offer__checklist-item .create-offer__input {
  flex: 1;
  height: auto;
  border: none !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Questions */
.create-offer__questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.create-offer__question-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.create-offer__question-item .create-offer__input {
  flex: 1;
  height: auto;
  border: none !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.create-offer__question-item .create-offer__select.create-offer__select--small {
  height: auto;
  border: none !important;
  border-radius: 0;
  padding: 0 24px 0 0;
  background-color: transparent;
  background-position: right 0 center;
  box-shadow: none !important;
  min-width: auto;
  width: auto;
  font-size: 14px;
  color: #717680;
  flex-shrink: 0;
}

/* Add Another Button */
.create-offer__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: transparent;
  border: none;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #535862;
  cursor: pointer;
  width: fit-content;
  transition: color 0.15s ease;
}

.create-offer__add-btn:hover {
  color: #414651;
}

.create-offer__add-btn .material-symbols-rounded {
  font-size: 20px;
}

/* Buyer Request Card (Flow A) */
.create-offer__request-card {
  background: #F9FAFB;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.create-offer__request-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #181D27;
  margin: 0 0 8px 0;
}

.create-offer__request-message {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #535862;
  margin: 0 0 8px 0;
}

.create-offer__request-budget {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #414651;
  margin: 0;
}

/* Row with delete button */
.create-offer__checklist-row,
.create-offer__question-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-offer__checklist-row .create-offer__checklist-item,
.create-offer__question-row .create-offer__question-item {
  flex: 1;
}

.create-offer__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: #A4A7AE;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.create-offer__delete-btn:hover {
  color: #D92D20;
}

.create-offer__delete-btn .material-symbols-rounded {
  font-size: 20px;
}

.create-offer__field .field-validation-error,
.create-offer__field--half .field-validation-error,
.create-offer__field-row .field-validation-error,
.create-offer__section-fields .field-validation-error,
.create-offer__questions .field-validation-error {
    display: block;
    margin-top: 6px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #F04438;
}

.field-validation-valid {
    display: none;
}

/* Actions */
.create-offer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.btn img {
  width: 20px;
  height: 20px;
}

.btn .material-symbols-rounded {
  font-size: 20px;
}

.btn--primary {
  background: var(--color-primary, #000000);
  border: 1px solid var(--color-primary, #000000);
  color: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.btn--primary:hover {
  background: var(--color-primary-hover, #0a0a30);
  border-color: var(--color-primary-hover, #0a0a30);
}

.btn--secondary {
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  color: #414651;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.btn--secondary:hover {
  background: #F9FAFB;
}

/* Responsive */
@media (max-width: 767px) {
  .create-offer-page {
    padding: 24px 16px 48px;
  }

  .create-offer__title {
    font-size: 24px;
    line-height: 32px;
  }

  .create-offer__section {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .create-offer__field-row {
    flex-direction: column;
    gap: 16px;
  }

  .create-offer__thumbnail-row {
    flex-direction: column;
  }

  .create-offer__thumbnail-preview {
    width: 100%;
    height: 180px;
  }

  .create-offer__actions {
    flex-direction: column;
  }

  .create-offer__actions .btn {
    width: 100%;
  }
}

/* ===== Meeting date/time picker modal ===== */

.meeting-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 18, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.meeting-picker {
    background: #fff;
    border-radius: 16px;
    width: 328px;
    box-sizing: border-box;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.meeting-picker__content {
    padding: 20px 24px;
}

.meeting-picker__calendar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    margin: 0 auto;
}

.meeting-picker__month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
}

.meeting-picker__nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A4A7AE;
    padding: 6px;
}

.meeting-picker__nav-btn:hover {
    background: #F5F5F5;
    color: #414651;
}

.meeting-picker__month-label {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: center;
    flex: 1;
}

.meeting-picker__weekdays {
    display: flex;
    flex-wrap: wrap;
}

.meeting-picker__weekdays span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #717680;
}

.meeting-picker__days {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
}

.mp-cell {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #414651;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mp-cell:hover:not(:disabled):not(.mp-cell--selected) {
    background: #F2F4F7;
}

.mp-cell--other {
    color: #717680;
}

.mp-cell--today {
    background: #F2F4F7;
    color: #181D27;
    font-weight: 500;
}

.mp-cell--selected {
    background: #0E101B !important;
    color: #fff !important;
    font-weight: 600;
}

.mp-cell--past {
    color: #A4A7AE;
    cursor: default;
}

.meeting-picker__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.meeting-picker__time-field {
    min-width: 0;
}

.meeting-picker__input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 16px;
    color: #181D27;
    outline: none;
}

.meeting-picker__time-field--select {
    position: relative;
}

.meeting-picker__select {
    cursor: pointer;
    appearance: none;
    padding-right: 32px;
}

.meeting-picker__chevron {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #717680;
    pointer-events: none;
}

.meeting-picker__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid #E9EAEB;
    height: 88px;
    align-items: flex-start;
    box-sizing: border-box;
}

.meeting-picker__btn {
    flex: 1;
    height: 40px;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
}

.meeting-picker__btn--cancel {
    background: #fff;
    border: 1px solid #D5D7DA;
    color: #414651;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.meeting-picker__btn--cancel:hover {
    background: #F5F5F5;
}

.meeting-picker__btn--confirm {
    background: #000000;
    color: #fff;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.meeting-picker__btn--confirm:hover {
    background: #252B37;
}

@keyframes mp-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.mp-days--error {
    animation: mp-shake 0.3s ease;
    outline: 1px solid #F04438;
    border-radius: 4px;
}

/* ===========================================
   ORDER CONFIRMATION PAGE
   =========================================== */

.order-confirm {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px var(--page-pad) 32px;
}

/* Back Link */
.order-confirm__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    text-decoration: none;
}

.order-confirm__back:hover {
    color: #252B37;
}

.order-confirm__back .material-symbols-rounded {
    font-size: 20px;
}

/* Header */
.order-confirm__header {
    padding: 0;
}

.order-confirm__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #181D27;
    margin: 0 0 8px 0;
}

.order-confirm__subtitle {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    margin: 0;
}

/* Success Banner */
.order-confirm__success-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.order-confirm__success-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-confirm__success-icon::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(7, 148, 85, 0.3);
    border-radius: 50%;
}

.order-confirm__success-icon::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(7, 148, 85, 0.1);
    border-radius: 50%;
}

.order-confirm__success-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-confirm__success-title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    margin: 0;
}

.order-confirm__success-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    margin: 0;
}

/* Main Card */
.order-confirm__card {
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
    padding: 24px;
}

/* Section Header */
.order-confirm__section-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 20px;
}

.order-confirm__section-title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #252B37;
    margin: 0;
}

.order-confirm__section-subtitle {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    margin: 0;
}

/* Divider */
.order-confirm__divider {
    height: 1px;
    background: #EAECF0;
}

/* Form */
.order-confirm__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Question Row */
.order-confirm__question {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 20px 0;
}

.order-confirm__question-label {
    flex: 0 0 272px;
    display: flex;
    gap: 4px;
}

.order-confirm__question-number {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
    flex-shrink: 0;
}

.order-confirm__question-text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.order-confirm__question-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Textarea Wrapper */
.order-confirm__textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-confirm__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 154px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    resize: vertical;
}

.order-confirm__textarea::placeholder {
    color: #717680;
}

.order-confirm__textarea:focus {
    outline: none;
    border-color: #252B37;
}

.order-confirm__error {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #DC2626;
    margin-top: 4px;
}

/* Textarea Footer */
.order-confirm__textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-confirm__char-count {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.order-confirm__attach-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #535862;
}

.order-confirm__attach-btn img {
    width: 16px;
    height: 16px;
}

.order-confirm__attach-btn:hover {
    color: #252B37;
}

/* File Upload Dropzone */
.order-confirm__file-upload {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    min-height: 148px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.order-confirm__file-upload:hover {
    border-color: #D5D7DA;
    background: #FAFAFA;
}

.order-confirm__file-upload--dragover {
    border-color: #252B37;
    background: #F5F5F5;
}

.order-confirm__file-upload-icon {
    width: 40px;
    height: 40px;
}

.order-confirm__file-upload-text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.order-confirm__file-upload-action {
    font-weight: 600;
    color: #1A1A4D;
}

.order-confirm__file-upload-hint {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #535862;
    margin: 0;
}

.order-confirm__file-input {
    display: none;
}

/* Attachments */
.order-confirm__attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* File Item */
.order-confirm__file-item {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.order-confirm__file-item--existing {
    align-items: center;
}

.order-confirm__file-item--existing .order-confirm__file-details {
    gap: 4px;
}

.order-confirm__file-size {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.order-confirm__file-item--existing .order-confirm__file-header {
    align-items: center;
}

.order-confirm__file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.order-confirm__file-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-confirm__file-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.order-confirm__file-name {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.order-confirm__file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-confirm__file-progress-text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.order-confirm__file-separator {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #D5D7DA;
}

.order-confirm__file-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.order-confirm__file-status--uploading {
    color: #535862;
}

.order-confirm__file-status--complete {
    color: #079455;
}

.order-confirm__file-status .material-symbols-rounded {
    font-size: 16px;
}

.order-confirm__file-status img {
    width: 15px;
    height: 15px;
}

/* Progress Bar */
.order-confirm__file-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-confirm__file-progress {
    flex: 1;
    height: 8px;
    background: #E9EAEB;
    border-radius: 4px;
    overflow: hidden;
}

.order-confirm__file-progress-bar {
    height: 100%;
    background: #4A5578;
    border-radius: 4px;
    transition: width 0.2s ease;
}

.order-confirm__file-progress-bar--complete {
    background: #4A5578;
}

.order-confirm__file-percent {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: right;
}

.order-confirm__file-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.order-confirm__file-delete img {
    width: 20px;
    height: 20px;
}

.order-confirm__file-delete:hover {
    opacity: 0.7;
}

.order-confirm__file-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Actions */
.order-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
    padding: 0;
}

/* Buttons */
.order-confirm__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.order-confirm__btn .material-symbols-rounded {
    font-size: 20px;
}

.order-confirm__btn--secondary {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.order-confirm__btn--secondary:hover {
    background: #FAFAFA;
}

.order-confirm__btn--primary {
    background: var(--color-primary, #000000);
    color: #FFFFFF;
    border: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.order-confirm__btn--primary:hover {
    background: var(--color-primary-hover, #0a0a30);
}

.order-confirm__btn--primary:disabled {
    width: 114px;
    background: #F9F9FB;
    color: #A4A7AE;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    cursor: not-allowed;
}

.order-confirm__btn--primary:disabled .material-symbols-rounded {
    color: #D5D7DA;
}

/* Responsive */
@media (max-width: 767px) {
    .order-confirm {
        padding: 16px;
    }

    .order-confirm__title {
        font-size: 32px;
        line-height: 40px;
    }

    .order-confirm__card {
        padding: 20px 16px;
    }

    .order-confirm__question {
        flex-direction: column;
        gap: 12px;
    }

    .order-confirm__question-label {
        flex: none;
    }

    .order-confirm__question-input {
        width: 100%;
    }

    .order-confirm__textarea-wrapper {
        width: 100%;
    }

    .order-confirm__textarea {
        width: 100%;
    }

    .order-confirm__file-upload {
        width: 100%;
    }

    .order-confirm__actions {
        flex-direction: column;
    }

    .order-confirm__actions .order-confirm__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .order-confirm__question {
        gap: 24px;
    }

    .order-confirm__question-label {
        flex: 0 0 200px;
    }
}

/* Payment Status Pages */
.payment-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 24px;
}

.payment-status__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 512px;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    border-radius: 16px;
    position: relative;
}

.payment-status__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 24px 24px 0;
}

.payment-status__header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-status__close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    margin: -8px -8px 0 0;
}

.payment-status__close:hover {
    background: #F5F5F5;
}

.payment-status__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    margin: 0;
}

.payment-status__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.payment-status__content {
    width: 100%;
    padding: 0 24px;
    margin-top: 20px;
}

.payment-status__image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 20px;
    background: #FAFAFA;
    border-radius: 8px;
    width: 100%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 192px;
}

.payment-status__logo {
    width: 152px;
    height: 152px;
    position: relative;
    z-index: 1;
}

.payment-status__image--scanning .payment-status__logo {
    box-shadow: 0px 4.75px 4.75px -2.375px rgba(10, 13, 18, 0.13), inset 0px -2.375px 2.375px rgba(10, 13, 18, 0.1);
    filter: drop-shadow(0px 4.75px 14.25px rgba(10, 13, 18, 0.1)) drop-shadow(0px 4.75px 9.5px rgba(10, 13, 18, 0.06));
    border-radius: 38px;
}

/* Scanning line animation */
.payment-status__image--scanning::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #5D6B98;
    box-shadow: 0 0 20px 5px rgba(93, 107, 152, 0.3);
    animation: scan 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes scan {
    0%, 100% {
        top: 20%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        top: 80%;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
}

.payment-status__logo--animated {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.payment-status__actions {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 32px 24px 24px;
}

.payment-status__btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.payment-status__btn--secondary {
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    color: #414651;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.payment-status__btn--secondary:hover {
    background: #F9FAFB;
    border-color: #A4A7AE;
}

.payment-status__btn--primary {
    background: #000020;
    border: 1px solid #000020;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.payment-status__btn--primary:hover {
    background: #0a0a30;
    border-color: #0a0a30;
}

/* Responsive */
@media (max-width: 767px) {
    .payment-status {
        padding: 16px;
        min-height: calc(100vh - 60px);
    }

    .payment-status__actions {
        flex-direction: column;
    }
}

/* Offer Detail Page */
.offer-detail-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #FDFDFD;
  border-radius: 0px 16px 0px 0px;
}

/* Header Section (gray gradient area) */
.offer-detail-page__header-section {
  padding: 40px var(--page-pad) 24px;
}

.offer-detail-page__header-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.offer-detail-page__container {
  width: 100%;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}

/* Back Button */
.offer-detail-page__back {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  text-decoration: none;
}

.offer-detail-page__back:hover {
  color: #414651;
}

.offer-detail-page__back .material-symbols-rounded {
  font-size: 20px;
}

/* Page Header */
.offer-detail-page__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offer-detail-page__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #252B37;
  margin: 0;
}

.offer-detail-page__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #414651;
  margin: 0;
}

/* Status Banner / Alert */
.offer-status-banner {
  display: flex;
  background: #FFFFFF;
  width: 100%;
  padding: 12px var(--page-pad);
}

.offer-status-banner__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.offer-status-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Outer ring */
.offer-status-banner__icon::before {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid rgba(220, 104, 3, 0.1);
  box-sizing: border-box;
}

/* Inner ring */
.offer-status-banner__icon::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid rgba(220, 104, 3, 0.3);
  box-sizing: border-box;
}

.offer-status-banner__icon .material-symbols-rounded {
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: #DC6803;
}

.offer-status-banner__content {
  display: flex;
  align-items: center;
  flex: 1;
}

.offer-status-banner__text {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
}

/* Main Content Layout */
.offer-detail-page__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-top: 24px;
  gap: 24px;
}

.offer-detail-page__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 2;
}

.offer-detail-page__sidebar {
  flex: 1;
  flex-shrink: 0;
}

/* Offer Detail Card */
.offer-detail-card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
}

/* Request Box */
.offer-detail-card__request {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
  background: #FAFAFA;
  border: 1px solid #E9EAEB;
  border-radius: 0px 8px 8px 8px;
}

.offer-detail-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
  width: fit-content;
}

.offer-detail-card__request-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-detail-card__budget {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  margin: 0;
}

.offer-detail-card__message {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #717680;
  margin: 0;
}

/* Sections */
.offer-detail-card__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer-detail-card__section-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #252B37;
  margin: 0;
}

.offer-detail-card__overview {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.offer-detail-card__divider {
  width: 100%;
  height: 1px;
  background: #E9EAEB;
}

/* Checklist */
.offer-detail-card__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.offer-detail-card__checklist-item {
  display: flex;
  align-items: center;
  padding: 2px 0;
  gap: 8px;
}

.offer-detail-card__checklist-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.offer-detail-card__checklist-item span {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

/* Footer */
.offer-detail-card__footer {
  display: flex;
  justify-content: flex-end;
}

.offer-detail-card__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #414651;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.offer-detail-card__view-btn:hover {
  background: #F9FAFB;
}

.offer-detail-card__view-btn img,
.offer-detail-card__view-btn .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Side Panel */
.offer-summary-panel {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 16px;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E9EAEB;
  box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  border-radius: 16px;
}

/* Panel Header */
.offer-summary-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offer-summary-panel__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #252B37;
  margin: 0;
}

.offer-summary-panel__id {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  background: #FAFAFA;
  border: 1px solid #E9EAEB;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #414651;
}

.offer-summary-panel__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.offer-summary-panel__copy img,
.offer-summary-panel__copy .material-symbols-rounded {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #717680;
}

/* User Info */
.offer-summary-panel__user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.offer-summary-panel__avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.offer-summary-panel__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

.offer-summary-panel__avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 200px;
  background: #F2F4F7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: #475467;
}

.offer-summary-panel__online-indicator {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 0;
  bottom: 0;
  background: #17B26A;
  border: 1.5px solid #FFFFFF;
  border-radius: 7px;
}

.offer-summary-panel__user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.offer-summary-panel__user-name {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  text-decoration: none;
}

.offer-summary-panel__user-name:hover {
  color: #181D27;
}

.offer-summary-panel__user-name .material-symbols-rounded {
  font-size: 20px;
  color: #181D27;
}

.offer-summary-panel__price {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #252B37;
}

/* Action Buttons */
.offer-summary-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer-summary-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;;
}

.offer-summary-panel__btn img,
.offer-summary-panel__btn .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.offer-summary-panel__btn--primary {
  background: #000000;
  color: #FFFFFF;
  border: none;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.offer-summary-panel__btn--primary:hover {
  background: #0a0a30;
}

.offer-summary-panel__btn--primary img {
  filter: brightness(0) invert(1);
}

.offer-summary-panel__btn--primary .material-symbols-rounded {
  color: #FFFFFF;
}

.offer-summary-panel__btn--secondary {
  background: #FFFFFF;
  color: #414651;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.offer-summary-panel__btn--secondary:hover {
  background: #F9FAFB;
}

/* Dates */
.offer-summary-panel__dates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer-summary-panel__date-row {
  display: flex;
  flex-direction: column;
}

.offer-summary-panel__date-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

.offer-summary-panel__date-value {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

/* Divider */
.offer-summary-panel__divider {
  width: 100%;
  height: 1px;
  background: #EAECF0;
}

/* Cancel Button */
.offer-summary-panel__cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #D92D20;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.offer-summary-panel__cancel-btn:hover {
  background: #FEF3F2;
}

.offer-summary-panel__cancel-btn img,
.offer-summary-panel__cancel-btn .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #D92D20;
}

/* Responsive */
@media (max-width: 1024px) {
  .offer-detail-page__header-section {
    padding: 24px var(--page-pad) 20px;
  }

  .offer-status-banner {
    padding: 12px 0;
  }

  .offer-detail-page__content {
    flex-direction: column;
    padding-top: 40px;
  }

  .offer-detail-page__main {
    min-width: 100%;
    max-width: 100%;
  }

  .offer-detail-page__sidebar {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .offer-detail-page__header-section {
    padding: 16px;
  }

  .offer-status-banner {
    padding: 12px 0;
  }

  .offer-detail-page__title {
    font-size: 32px;
    line-height: 40px;
  }

  .offer-detail-page__content {
    padding-top: 24px;
  }

  .offer-detail-card {
    padding: 16px 16px 24px;
  }

  .offer-summary-panel {
    padding: 16px 16px 12px;
  }
}

/* Seller Dashboard */

.seller-dashboard__table-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #E9EAEB;
    box-sizing: border-box;
}

.seller-dashboard__table-avatar-placeholder {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #F3F4F6;
    border: 1px solid #E9EAEB;
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #717680;
}

.seller-dashboard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: #FDFDFD;
}

.seller-dashboard__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px var(--page-pad);
    gap: 24px;
    width: 100%;
    background: #FDFDFD;
    border-radius: 0 16px 0 0;
}

/* Header */
.seller-dashboard__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.seller-dashboard__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.seller-dashboard__subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #414651;
    margin: 0;
}

/* Alert */
.seller-dashboard__alert {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.seller-dashboard__alert-icon {
    position: relative;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seller-dashboard__alert-icon::before {
    content: '';
    position: absolute;
    width: 27px;
    height: 27px;
    border: 1.67px solid #079455;
    border-radius: 50%;
    opacity: 0.3;
}

.seller-dashboard__alert-icon::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    border: 1.67px solid #079455;
    border-radius: 50%;
    opacity: 0.1;
}

.seller-dashboard__alert-icon img {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

.seller-dashboard__alert-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.seller-dashboard__alert-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.seller-dashboard__alert-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.seller-dashboard__alert-close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 8px;
}

.seller-dashboard__alert-close:hover {
    background: #F5F5F5;
}

.seller-dashboard__alert-close img {
    width: 20px;
    height: 20px;
}

/* Content Area */
.seller-dashboard__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

/* Add Service Area */
.seller-dashboard__add-service {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    height: 153px;
    background: #FFFFFF;
    border: 2px dashed #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
}

.seller-dashboard__add-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-decoration: none;
    cursor: pointer;
}

.seller-dashboard__add-btn:hover {
    background: #F9F9FB;
}

.seller-dashboard__add-icon {
    width: 20px;
    height: 20px;
}

/* Empty State */
.seller-dashboard__empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
}

.seller-dashboard__empty-pattern {
    position: absolute;
    width: 480px;
    height: 480px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image:
        linear-gradient(to right, #E9EAEB 1px, transparent 1px),
        linear-gradient(to bottom, #E9EAEB 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

.seller-dashboard__empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.seller-dashboard__empty-icon {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.seller-dashboard__empty-icon img {
    width: 28px;
    height: 28px;
}

.seller-dashboard__empty-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #535862;
    margin: 0;
}

/* Filters Bar */
.seller-dashboard__filters-bar {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.seller-dashboard__balance-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.seller-dashboard__balance-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.seller-dashboard__balance-label-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.seller-dashboard__help-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.seller-dashboard__help-icon img {
    width: 16px;
    height: 16px;
}

/* Tooltip */
.seller-dashboard__help-icon .seller-dashboard__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #0A0D12;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

.seller-dashboard__help-icon .seller-dashboard__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0A0D12;
}

.seller-dashboard__help-icon:hover .seller-dashboard__tooltip {
    opacity: 1;
    visibility: visible;
}

.seller-dashboard__balance-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #181D27;
}

.seller-dashboard__payout-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.seller-dashboard__payout-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 5px;
    gap: 6px;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.seller-dashboard__payout-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.seller-dashboard__powered-by {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #A4A7AE;
}

.seller-dashboard__stripe-logo {
    height: 14px;
    width: auto;
}

/* Services Grid */
.seller-dashboard__systems-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.seller-dashboard__system-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
    height: 152px;
    flex: 0 0 calc(20% - 7px);
}

.seller-dashboard__system-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.seller-dashboard__system-title {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #252B37;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 54px;
}

.seller-dashboard__system-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.seller-dashboard__system-menu:hover {
    background: #F5F5F5;
}

.seller-dashboard__system-menu img {
    width: 20px;
    height: 20px;
}

/* Service Menu Dropdown */
.seller-dashboard__menu-wrapper {
    position: relative;
}

.seller-dashboard__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 136px;
    padding: 4px 0;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.seller-dashboard__dropdown--open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.seller-dashboard__dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 1px 6px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.seller-dashboard__dropdown-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    width: 100%;
    border-radius: 6px;
}

.seller-dashboard__dropdown-item:hover .seller-dashboard__dropdown-item-content {
    background: #F9FAFB;
}

.seller-dashboard__dropdown-item img {
    width: 16px;
    height: 16px;
}

.seller-dashboard__dropdown-item span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    white-space: nowrap;
}

.seller-dashboard__dropdown-item--delete span {
    color: #B42318;
}

.seller-dashboard__system-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
}

.seller-dashboard__star-icon {
    width: 14px;
    height: 14px;
}

.seller-dashboard__system-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.seller-dashboard__system-price {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #181D27;
}

/* Toggle Switch */
.seller-dashboard__toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: #E9EAEB;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}

.seller-dashboard__toggle:hover {
    opacity: 0.9;
}

.seller-dashboard__toggle--active {
    background: #17B26A;
}

.seller-dashboard__toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 9999px;
    box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
    transition: transform 0.2s ease;
}

.seller-dashboard__toggle--active .seller-dashboard__toggle-knob {
    transform: translateX(20px);
}

/* Review Badge */
.seller-dashboard__review-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 6px;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #414651;
}

.seller-dashboard__declined-badge {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 2px 6px;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #414651;
}

.seller-dashboard__declined-dot {
    width: 6px;
    height: 6px;
    background: #F04438;
    border-radius: 50%;
}

.seller-dashboard__review-dot {
    width: 6px;
    height: 6px;
    background: #F79009;
    border-radius: 50%;
}

.seller-dashboard__add-system {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 153px;
    background: #FFFFFF;
    border: 2px dashed #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
}

.seller-dashboard__add-system-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 152px;
    background: #FFFFFF;
    border: 2px dashed #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
    flex: 0 0 calc(20% - 7px);
}

/* Orders Table */
.seller-dashboard__orders-table {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

#seller-orders-list {
    width: 100%;
}

.seller-dashboard__orders-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #E9EAEB;
}

.seller-dashboard__orders-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.seller-dashboard__orders-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.seller-dashboard__orders-count {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #181D27;
}

.seller-dashboard__orders-tabs {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 2px;
    gap: 2px;
    background: #F9FAFB;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.seller-dashboard__tab {
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #A4A7AE;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seller-dashboard__tab:hover {
    color: #535862;
}

.seller-dashboard__tab--active {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #252B37;
}

/* Table */
.seller-dashboard__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.seller-dashboard__table th:nth-child(1),
.seller-dashboard__table td:nth-child(1) { width: 30%; }

.seller-dashboard__table th:nth-child(2),
.seller-dashboard__table td:nth-child(2) { width: 18%; }

.seller-dashboard__table th:nth-child(3),
.seller-dashboard__table td:nth-child(3) { width: 16%; }

.seller-dashboard__table th:nth-child(4),
.seller-dashboard__table td:nth-child(4) { width: 12%; }

.seller-dashboard__table th:nth-child(5),
.seller-dashboard__table td:nth-child(5) { width: 16%; }

.seller-dashboard__table th:nth-child(6),
.seller-dashboard__table td:nth-child(6) { width: 8%; }

.seller-dashboard__table td:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-dashboard__table thead {
    background: #FFFFFF;
}

.seller-dashboard__table th {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    border-bottom: 1px solid #E9EAEB;
    white-space: nowrap;
}

.seller-dashboard__table td {
    padding: 16px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #252B37;
    border-bottom: 1px solid #E9EAEB;
}

.seller-dashboard__table tr:last-child td {
    border-bottom: none;
}

.seller-dashboard__customer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.seller-dashboard__customer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 200px;
    object-fit: cover;
}

.seller-dashboard__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
}

.seller-dashboard__status-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 8px;
    border-radius: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}

.seller-dashboard__status-badge--warning {
    background: #FFFAEB;
    border: 1px solid #FEDF89;
    color: #B54708;
}

.seller-dashboard__status-badge--success {
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    color: #067647;
}

.seller-dashboard__status-time {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

.seller-dashboard__action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.seller-dashboard__action-btn:hover {
    background: #F5F5F5;
}

.seller-dashboard__action-btn img {
    width: 36px;
    height: 36px;
}

.seller-dashboard__action-cell {
    display: flex;
    justify-content: flex-end;
}

.seller-dashboard__no-orders {
    text-align: center;
    padding: 40px 20px;
    color: #535862;
    font-family: var(--font-body);
    font-size: 14px;
}

.seller-dashboard__table .orders-badge {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 16px;
    font-weight: 500;
}

.seller-dashboard__table .orders-badge--primary {
    background: #EFF8FF;
    border: 1px solid #B2DDFF;
    color: #175CD3;
}

.seller-dashboard__table .orders-badge--error {
    background: #FEF3F2;
    border: 1px solid #FECDCA;
    color: #B42318;
}

.seller-dashboard__table .orders-badge--info {
    background: #F0F9FF;
    border: 1px solid #B9E6FE;
    color: #026AA2;
}

.seller-dashboard__table .orders-badge--warning {
    background: #FFFAEB;
    border: 1px solid #FEDF89;
    color: #B54708;
}

.seller-dashboard__table .orders-table__days-remaining {
    font-size: 12px;
    line-height: 18px;
    margin-left: 0;
}

a .orders-table__carepackage-link,
.orders-table__carepackage-link {
    color: #079455;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.15s ease-in-out;
}

a:hover .orders-table__carepackage-link,
.orders-table__carepackage-link:hover {
    color: #056a3e;
}

/* Responsive */
@media (max-width: 1024px) {
    .seller-dashboard__container {
        padding: 40px;
    }

    .seller-dashboard__header,
    .seller-dashboard__alert,
    .seller-dashboard__content,
    .seller-dashboard__filters-bar,
    .seller-dashboard__services-grid,
    .seller-dashboard__orders-table {
        max-width: 100%;
    }

    .seller-dashboard__title {
        font-size: 36px;
        line-height: 44px;
    }

    .seller-dashboard__balance-amount {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 768px) {
    .seller-dashboard__container {
        padding: 24px;
    }

    .seller-dashboard__header,
    .seller-dashboard__alert,
    .seller-dashboard__content,
    .seller-dashboard__filters-bar,
    .seller-dashboard__systems-grid,
    .seller-dashboard__orders-table {
        max-width: 100%;
    }

    .seller-dashboard__title {
        font-size: 28px;
        line-height: 36px;
    }

    .seller-dashboard__add-service {
        height: 120px;
    }

    .seller-dashboard__empty-state {
        min-height: 300px;
    }

    .seller-dashboard__empty-pattern {
        width: 320px;
        height: 320px;
    }

    .seller-dashboard__filters-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .seller-dashboard__payout-section {
        align-items: flex-start;
    }

    .seller-dashboard__balance-amount {
        font-size: 24px;
        line-height: 32px;
    }

    .seller-dashboard__systems-grid {
        flex-direction: column;
    }

    .seller-dashboard__system-card {
        width: 100%;
        flex: 0 0 auto;
    }

    .seller-dashboard__add-system-card {
        flex: 0 0 auto;
    }

    .seller-dashboard__orders-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .seller-dashboard__table {
        display: block;
        overflow-x: auto;
    }

    .seller-dashboard__table th,
    .seller-dashboard__table td {
        padding: 12px 16px;
        white-space: nowrap;
    }
}

/* Confirm Delete Modal */
.confirm-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.confirm-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    max-width: calc(100vw - 32px);
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
                0px 8px 8px -4px rgba(10, 13, 18, 0.03),
                0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    text-align: center;
}

.confirm-modal__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEF3F2;
    border-radius: 10px;
    margin-bottom: 16px;
}

.confirm-modal__icon .material-symbols-rounded {
    font-size: 24px;
    color: #D92D20;
}

.confirm-modal__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #252B37;
    margin: 0 0 4px;
}

.confirm-modal__text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0 0 24px;
}

.confirm-modal__actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.confirm-modal__btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    border: none;
}

.confirm-modal__btn--cancel {
    background: #FFFFFF;
    color: #252B37;
    border: 1px solid #D5D7DA;
}

.confirm-modal__btn--cancel:hover {
    background: #F9F9FB;
}

.confirm-modal__btn--delete {
    background: #D92D20;
    color: #FFFFFF;
}

.confirm-modal__btn--delete:hover {
    background: #B42318;
}

/* Order Detail Page Styles */

/* Page wrapper */
.order-detail-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    background: #FDFDFD;
    border-radius: 0px 16px 0px 0px;
}

/* Header Section */
.order-detail-page__header-section {
    padding: 40px var(--page-pad) 24px;
}

.order-detail-page__header-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Back Button */
.order-detail-page__back {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: #717680;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.order-detail-page__back:hover {
    color: #414651;
}

.order-detail-page__back .material-symbols-rounded {
    font-size: 20px;
}

/* Page Header */
.order-detail-page__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail-page__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.order-detail-page__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #414651;
    margin: 0;
}

/* Status Banner (full width) */
.order-detail-page__status-banner {
    display: flex;
    background: #FFFFFF;
    border-left: 1px solid #F5F5F5;
    width: 100%;
    padding: 12px var(--page-pad);
}

.order-detail-page__status-banner-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.order-detail-page__status-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* Outer ring */
.order-detail-page__status-banner-icon::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 4px solid rgba(220, 104, 3, 0.1);
    box-sizing: border-box;
}

/* Inner ring */
.order-detail-page__status-banner-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 4px solid rgba(220, 104, 3, 0.3);
    box-sizing: border-box;
}

.order-detail-page__status-banner-icon .material-symbols-rounded {
    position: relative;
    z-index: 1;
    font-size: 20px;
    color: #DC6803;
}

.order-detail-page__status-banner-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.order-detail-page__status-banner-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.order-detail-page__status-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-detail-page__status-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    background: #0E101B;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    transition: background 0.2s;
    white-space: nowrap;
}

.order-detail-page__status-banner-btn:hover {
    background: #1a1d2e;
    color: #FFFFFF;
}

.order-detail-page__status-banner-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Seller variant */
.order-detail-page__status-banner--purple {
    background: #FFFFFF;
    border-left: 1px solid #F5F5F5;
}

.order-detail-page__status-banner-icon--purple::before {
    border-color: rgba(220, 104, 3, 0.1);
}

.order-detail-page__status-banner-icon--purple::after {
    border-color: rgba(220, 104, 3, 0.3);
}

.order-detail-page__status-banner-icon--purple .material-symbols-rounded {
    color: #DC6803;
}

.order-detail-page__status-banner-btn--purple {
    background: #0E101B;
}

.order-detail-page__status-banner-btn--purple:hover {
    background: #1a1d2e;
}

/* Container */
.order-detail-page__container {
    width: 100%;
    padding: 0 var(--page-pad);
    box-sizing: border-box;
}

/* Layout grid */
.order-detail-page__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    padding-top: 24px;
}

/* Legacy classes for card content */
.order-detail {
    max-width: 1216px;
    margin: 0 auto;
    padding: 32px 32px 64px;
}

/* Back link (legacy) */
.order-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #414651;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    margin-bottom: 24px;
}

.order-detail__back:hover {
    color: #181D27;
}

/* Header (legacy) */
.order-detail__header {
    margin-bottom: 32px;
}

.order-detail__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -0.96px;
    color: #181D27;
    margin: 0 0 8px;
}

.order-detail__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #535862;
    margin: 0;
}

/* Layout */
.order-detail__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* Main content */
.order-detail__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards */
.order-detail__card {
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
    padding: 24px;
}

.order-detail__card--deliverables {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
}

.order-detail__card--deliverables .order-detail__card-title,
.order-detail__card--deliverables .order-detail__upload-area,
.order-detail__card--deliverables .order-detail__or-divider,
.order-detail__card--deliverables .order-detail__delivery-link {
    align-self: stretch;
}

.order-detail__card--deliverables .order-detail__card-title {
    margin-bottom: 0;
}

.order-detail__card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #181D27;
    margin: 0 0 16px;
}

.order-detail__overview {
    color: #535862;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.order-detail__overview p {
    margin: 0 0 16px;
}

.order-detail__overview p:last-child {
    margin-bottom: 0;
}

.order-detail__divider {
    height: 1px;
    background: #E9EAEB;
    margin: 24px 0;
}

.order-detail__section-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #181D27;
    margin: 0 0 16px;
}

/* Features list */
.order-detail__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #414651;
}

.order-detail__feature svg {
    flex-shrink: 0;
    color: #414651;
}

/* Card footer */
.order-detail__card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.order-detail__card-footer--center {
    justify-content: center;
}

.order-detail__view-service-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    color: #414651;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.order-detail__view-service-btn:hover {
    background: #F5F5F5;
    border-color: #A4A7AE;
}

.order-detail__primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #000000;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    transition: background 0.2s;
}

.order-detail__primary-btn:hover {
    background: #181D27;
    color: #FFFFFF;
}

.order-detail__primary-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Brief section */
.order-detail__brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-detail__brief-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    padding: 0;
}

.order-detail__brief-toggle-icon {
    font-size: 20px;
    transition: transform 0.2s;
}

.order-detail__brief-toggle--expanded .order-detail__brief-toggle-icon {
    transform: rotate(180deg);
}

.order-detail__brief-item--hidden {
    display: none;
}

.order-detail__brief-item {
    margin-bottom: 0;
}

.order-detail__brief-question {
    display: flex;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #181D27;
    margin-bottom: 4px;
}

.order-detail__brief-number {
    color: #181D27;
}

.order-detail__brief-answer {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #717680;
    margin: 0;
    padding-left: 16px;
}

.order-detail__brief-files {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail__brief-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.order-detail__brief-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail__brief-file-details {
    display: flex;
    flex-direction: column;
}

.order-detail__brief-file-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #181D27;
}

.order-detail__brief-file-size {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #717680;
}

.order-detail__brief-file-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #535862;
    transition: color 0.2s;
}

.order-detail__brief-file-download:hover {
    color: #181D27;
}

/* Upload area (seller) */
.order-detail__upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.order-detail__upload-area:hover {
    border-color: #D5D7DA;
    background: #FAFAFA;
}

.order-detail__upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    margin-bottom: 12px;
}

.order-detail__upload-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
    margin: 0 0 4px;
}

.order-detail__upload-link {
    color: #1A1A4D;
    font-weight: 600;
    cursor: pointer;
}

.order-detail__upload-hint {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #717680;
    margin: 0;
}

.order-detail__upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.order-detail__staged-files {
    margin-top: 16px;
}

.order-detail__staged-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail__staged-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 8px;
}

.order-detail__staged-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.order-detail__staged-item-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.order-detail__staged-item-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-detail__staged-item-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #252B37;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-detail__staged-item-size {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #717680;
}

.order-detail__staged-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: #717680;
    border-radius: 6px;
    flex-shrink: 0;
}

.order-detail__staged-item-remove:hover {
    background: #F5F5F5;
    color: #414651;
}

.order-detail__staged-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.order-detail__staged-clear {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #535862;
    background: none;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    cursor: pointer;
}

.order-detail__staged-clear:hover {
    background: #F9FAFB;
}

.order-detail__staged-send {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    background: #7A5AF8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.order-detail__staged-send:hover {
    background: #6941C6;
}

.order-detail__staged-send .material-symbols-rounded {
    font-size: 18px;
}

.order-detail__or-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    color: #717680;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.order-detail__or-divider::before,
.order-detail__or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E9EAEB;
}

.order-detail__delivery-link {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    padding: 0px 14px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.order-detail__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    border-right: none;
}

.order-detail__delivery-link .order-detail__delivery-input,
.order-detail__delivery-link input[type="text"] {
    flex: 1;
    border: none !important;
    border-left: none !important;
    outline: none !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #181D27;
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

.order-detail__delivery-input::placeholder {
    color: #717680;
}

/* Deliver Work action */
.order-detail__deliver-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.order-detail__deliver-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #000000;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    transition: background 0.2s;
}

.order-detail__deliver-btn:hover {
    background: #181D27;
    color: #FFFFFF;
}

.order-detail__deliver-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Sidebar */
.order-detail__sidebar {
    position: sticky;
    top: 32px;
    width: 320px;
    max-width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-detail__care-package {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 32px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.order-detail__care-package-header {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.order-detail__care-package-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #181D27;
    margin: 0;
}

.order-detail__care-package-desc {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.order-detail__care-package-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-detail__care-package-price-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.order-detail__care-package-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__care-package-price {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #252B37;
}

.order-detail__care-package-btn {
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #414651;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.order-detail__care-package-btn:hover {
    background: #F9FAFB;
}

/* Edit Care Package Modal */
.edit-care-package-modal {
    width: 400px;
    max-width: 400px;
    padding: 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
                0px 8px 8px -4px rgba(10, 13, 18, 0.03),
                0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.edit-care-package-modal__header {
    position: relative;
    padding: 24px 24px 20px;
}

.edit-care-package-modal__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #252B37;
    margin: 0;
}

.edit-care-package-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-care-package-modal__close:hover {
    background: #F5F5F5;
}

.edit-care-package-modal__form {
    display: flex;
    flex-direction: column;
}

.edit-care-package-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 24px;
}

.edit-care-package-modal__label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #252B37;
}

.edit-care-package-modal__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.edit-care-package-modal__prefix {
    position: absolute;
    left: 14px;
    color: #A4A7AE;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    pointer-events: none;
}

.edit-care-package-modal__input {
    width: 100%;
    height: 44px;
    padding: 10px 14px 10px 34px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    box-sizing: border-box;
}

.edit-care-package-modal__input:focus {
    outline: none;
    border-color: #A4A7AE;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.edit-care-package-modal__error {
    font-family: var(--font-body);
    font-size: 12px;
    color: #D92D20;
}

.edit-care-package-modal__actions {
    display: flex;
    gap: 12px;
    padding: 32px 24px 24px;
}

.edit-care-package-modal__cancel,
.edit-care-package-modal__save {
    flex: 1;
    height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
                inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    transition: background-color 0.15s ease;
}

.edit-care-package-modal__cancel {
    background: #FFFFFF;
    border-color: #D5D7DA;
    color: #414651;
}

.edit-care-package-modal__cancel:hover {
    background: #F9FAFB;
}

.edit-care-package-modal__save {
    background: #000000;
    color: #FFFFFF;
}

.edit-care-package-modal__save:hover {
    background: #1a1f2e;
}

.order-detail__summary {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
    border-radius: 16px;
}

.order-detail__summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-detail__summary-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #252B37;
    margin: 0;
    flex-grow: 1;
}

.order-detail__order-id {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    font-family: inherit;
    color: #414651;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    padding: 2px 6px 2px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.order-detail__copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #717680;
    transition: color 0.2s;
}

.order-detail__copy-btn:hover {
    color: #414651;
}

/* Counterparty */
.order-detail__counterparty {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail__avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.order-detail__avatar {
    width: 56px;
    height: 56px;
    border-radius: 200px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    object-fit: cover;
}

.order-detail__avatar-fallback {
    width: 56px;
    height: 56px;
    border-radius: 200px;
    background: #F3F4F6;
    border: 1px solid #E9EAEB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #414651;
    box-sizing: border-box;
}

.order-detail__online-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #17B26A;
    border: 1.5px solid #FFFFFF;
    border-radius: 7px;
}

.order-detail__counterparty-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.order-detail__counterparty-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
    text-decoration: none;
}

.order-detail__counterparty-name:hover {
    color: #414651;
    cursor: pointer;
}

.order-detail__price {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #252B37;
}

/* Message button */
.order-detail__message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    color: #414651;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.order-detail__message-btn:hover {
    background: #F5F5F5;
    border-color: #A4A7AE;
}

/* Meta info */
.order-detail__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail__meta-item {
    display: flex;
    flex-direction: column;
}

.order-detail__meta-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__meta-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #252B37;
}

/* Status stepper */
.order-detail__status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail__status-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__stepper {
    display: flex;
    flex-direction: column;
}

.order-detail__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    min-height: 46px;
}

.order-detail__step:last-child {
    min-height: auto;
}

.order-detail__step:last-child .order-detail__step-line {
    display: none;
}

.order-detail__step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
    position: relative;
}

.order-detail__step-dot {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 1.5px solid #E9EAEB;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.order-detail__step-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #E9EAEB;
    border-radius: 50%;
}

.order-detail__step-dot--active {
    width: 24px;
    height: 24px;
    background: #4A5578;
    border: none;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #5D6B98;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.order-detail__step-dot--active::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
}

.order-detail__step-content {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
    flex-grow: 1;
}

.order-detail__step:not(:last-child) .order-detail__step-content {
    padding-bottom: 22px;
}

.order-detail__step-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #252B37;
}

.order-detail__step--pending .order-detail__step-title {
    font-weight: 600;
    color: #252B37;
}

.order-detail__step-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__step-line {
    position: absolute;
    left: 11px;
    top: 24px;
    width: 2px;
    height: calc(100% - 24px);
    background: #E9EAEB;
    z-index: 0;
}

.order-detail__step-line--complete {
    background: #17B26A;
}

/* Summary divider */
.order-detail__summary-divider {
    width: 100%;
    height: 1px;
    background: #EAECF0;
}

/* Rate & Review button */
.order-detail__rate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px 14px;
    background: #000000;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.order-detail__rate-btn:hover {
    background: #181D27;
}

.order-detail__rate-btn .material-symbols-rounded {
    font-size: 20px;
    color: #FDB022;
}

/* Star icon in report button style */
.order-detail__star-icon {
    font-size: 20px;
    color: #FDB022;
}

/* Report button */
.order-detail__report-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #535862;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.order-detail__report-btn:hover {
    color: #414651;
}

/* Responsive */
@media (max-width: 1024px) {
    .order-detail-page__header-section {
        padding: 24px var(--page-pad) 20px;
    }

    .order-detail-page__layout,
    .order-detail__layout {
        grid-template-columns: 1fr;
    }

    .order-detail__sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .order-detail-page__header-section {
        padding: 16px;
    }

    .order-detail-page__status-banner-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .order-detail-page__title {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.64px;
    }
}

/* Icon styling */
.order-detail__back-icon {
    width: 20px;
    height: 20px;
    transform: rotate(180deg);
}

.order-detail__check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.order-detail__external-icon {
    width: 20px;
    height: 20px;
}

.order-detail__file-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.order-detail__download-icon {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
}

.order-detail__plus-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.order-detail__copy-icon {
    width: 16px;
    height: 16px;
}

.order-detail__chevron-icon {
    width: 12px;
    height: 12px;
}

.order-detail__message-icon {
    width: 20px;
    height: 20px;
}

.order-detail__help-icon {
    width: 20px;
    height: 20px;
}

.revision-modal__dialog {
    position: relative;
    width: min(480px, 92vw);
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    overflow: hidden;
}

.revision-modal__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 20px;
    position: relative;
}

.revision-modal__header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 32px;
}

.revision-modal__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    margin: 0;
}

.revision-modal__subtitle {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.revision-modal__close {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    position: absolute;
    width: 44px;
    height: 44px;
    right: 12px;
    top: 12px;
    border-radius: 8px;
}

.revision-modal__close .material-symbols-rounded {
    font-size: 24px;
    color: #A4A7AE;
}

.revision-modal__close:hover {
    background: #F5F5F5;
}

.revision-modal__body {
    padding: 0px 24px;
}

.revision-modal__body form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.revision-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.revision-modal__label {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
}

.revision-modal__textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #181D27;
    resize: vertical;
    box-sizing: border-box;
}

.revision-modal__textarea::placeholder {
    color: #A4A7AE;
}

.revision-modal__textarea:focus {
    outline: none;
    border-color: #474785;
    box-shadow: 0px 0px 0px 4px rgba(71, 71, 133, 0.12);
}

.revision-modal__radios {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    flex-wrap: wrap;
}

.revision-modal__radio {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
    width: auto;
    flex: none;
}

.revision-modal__radio:hover {
    border-color: #A4A7AE;
}

.revision-modal__radio:has(.revision-modal__radio-input:checked) {
    border-color: #474785;
    border-width: 2px;
}

input.revision-modal__radio-input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    border: 1.5px solid #D5D7DA !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

input.revision-modal__radio-input[type="radio"]:checked {
    border-color: #474785 !important;
    background: #474785 !important;
}

input.revision-modal__radio-input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.revision-modal__radio-label {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #252B37;
}

.revision-modal__actions {
    display: flex;
    gap: 12px;
    padding: 32px 0px 28px;
}

.revision-modal__cancel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #414651;
    cursor: pointer;
}

.revision-modal__cancel:hover {
    background: #F9FAFB;
}

.revision-modal__submit {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    height: 40px;
    background: #000000;
    border: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #FFFFFF;
    cursor: pointer;
}

.revision-modal__submit:hover {
    background: #181D27;
}

.revision-modal__submit:disabled {
    background: #E9EAEB;
    color: #A4A7AE;
    cursor: not-allowed;
    box-shadow: none;
}

/* ================================================
   Report Order Modal
   ================================================ */

.report-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.report-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.report-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 90vw;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.report-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Header */
.report-modal__header {
    position: relative;
    padding: 24px 24px 0;
}

.report-modal__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-modal__featured-icon {
    width: 48px;
    height: 48px;
}

.report-modal__featured-icon img {
    width: 100%;
    height: 100%;
}

.report-modal__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-modal__title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    margin: 0;
}

.report-modal__description {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin: 0;
}

.report-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.report-modal__close:hover {
    background: #F5F5F5;
}

.report-modal__close .material-symbols-rounded {
    font-size: 24px;
    color: #A4A7AE;
}

/* Modal Body */
.report-modal__body {
    padding: 20px 24px 0;
}

.report-modal__radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-modal__radio-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.report-modal__radio-item:hover {
    border-color: #D5D7DA;
}

.report-modal__radio-item:has(.report-modal__radio-input:checked) {
    border-color: #000000;
    background: #F5F5F5;
}

.report-modal__radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.report-modal__radio-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.report-modal__radio-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.report-modal__radio-icon img {
    width: 100%;
    height: 100%;
}

.report-modal__radio-text {
    display: flex;
    flex-direction: column;
}

.report-modal__radio-title {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.report-modal__radio-description {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
}

/* Modal Actions */
.report-modal__actions {
    display: flex;
    gap: 12px;
    padding: 32px 24px 24px;
}

.report-modal__btn {
    flex: 1;
    padding: 10px 16px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.report-modal__btn--secondary {
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    color: #414651;
}

.report-modal__btn--secondary:hover {
    background: #F5F5F5;
    border-color: #A4A7AE;
}

.report-modal__btn--primary {
    background: #000000;
    border: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    color: #FFFFFF;
}

.report-modal__btn--primary:hover {
    background: #181D27;
}

/* Textarea for cancellation modal */
.report-modal__textarea {
    width: 100%;
    min-height: 128px;
    padding: 12px 14px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    resize: vertical;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.report-modal__textarea::placeholder {
    color: #717680;
}

.report-modal__textarea:focus {
    outline: none;
    border-color: #6941C6;
    box-shadow: 0px 0px 0px 4px rgba(105, 65, 198, 0.12), 0px 1px 2px rgba(10, 13, 18, 0.05);
}

/* Single button layout */
.report-modal__actions--single {
    justify-content: stretch;
}

.report-modal__btn--full {
    width: 100%;
    flex: none;
}

/* ================================================
   Files and Deliverables Section
   ================================================ */

.order-detail__deliverables-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail__deliverable-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.order-detail__deliverable-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail__file-icon-lg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.order-detail__deliverable-file-details {
    display: flex;
    flex-direction: column;
}

.order-detail__deliverable-file-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #252B37;
}

.order-detail__deliverable-file-size {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__deliverable-file-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #717680;
    transition: color 0.2s;
}

.order-detail__deliverable-file-download:hover {
    color: #414651;
}

.order-detail__review-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-top: 16px;
}

.order-detail__revision-note {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 0px 8px 8px 8px;
    align-self: stretch;
}

.order-detail__revision-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #FFFAEB;
    border: 1px solid #FEDF89;
    border-radius: 6px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #B54708;
}

.order-detail__revision-text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #717680;
    margin: 0;
}

.order-detail__revision-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    gap: 4px;
    flex: 1;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #414651;
    cursor: pointer;
}

.order-detail__revision-btn:hover {
    background: #F9FAFB;
}

.order-detail__revision-btn .material-symbols-rounded {
    font-size: 20px;
    color: #A4A7AE;
}

.order-detail__approve-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    gap: 4px;
    flex: 1;
    height: 40px;
    background: #17B26A;
    border: none;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #FFFFFF;
    cursor: pointer;
}

.order-detail__approve-btn:hover {
    background: #079455;
}

.order-detail__approve-btn .material-symbols-rounded {
    font-size: 20px;
}

.order-detail__review-actions form {
    flex: 1;
    display: flex;
}

/* Approve Modal */
.approve-modal {
    max-width: 400px;
    padding: 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    position: relative;
}

.approve-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.approve-modal__close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: -8px -8px 0 0;
}

.approve-modal__close:hover {
    background: #F5F5F5;
}

.approve-modal__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 24px 0;
}

.approve-modal__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    margin: 0;
}

.approve-modal__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
    margin: 0;
}

.approve-modal__actions {
    display: flex;
    gap: 12px;
    padding: 32px 24px 24px;
}

.approve-modal__btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.approve-modal__btn--secondary {
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    color: #252B37;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.approve-modal__btn--secondary:hover {
    background: #F9FAFB;
}

.approve-modal__btn--primary {
    width: 100%;
    background: #17B26A;
    border: none;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.approve-modal__btn--primary:hover {
    background: #079455;
}

/* ================================================
   Billing & Invoice Section
   ================================================ */

.order-detail__billing-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    overflow: hidden;
}

.order-detail__billing-tab {
    flex: 1;
    padding: 10px 16px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.order-detail__billing-tab:first-child {
    border-right: 1px solid #E9EAEB;
}

.order-detail__billing-tab--active {
    background: #F5F5F5;
    color: #252B37;
}

.order-detail__billing-tab:hover:not(.order-detail__billing-tab--active) {
    background: #FAFAFA;
}

.order-detail__billing-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-detail__billing-content--hidden {
    display: none;
}

.order-detail__billing-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail__billing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-detail__billing-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535862;
}

.order-detail__billing-value {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #252B37;
    text-align: right;
}

.order-detail__copy-billing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    align-self: flex-end;
    padding: 8px 12px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.order-detail__copy-billing-btn:hover {
    background: #F5F5F5;
}

.order-detail__copy-billing-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Invoice file / Upload area */
.order-detail__invoice-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    margin-top: 16px;
}

.order-detail__invoice-upload {
    margin-top: 16px;
}

.order-detail__invoice-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.order-detail__invoice-upload-area:hover {
    border-color: #D5D7DA;
    background: #FAFAFA;
}


/* ================================================
   Partner Dashboard Page
   ================================================ */

.partner-dashboard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    background: #FDFDFD;
    border-radius: 0 16px 0 0;
}

.partner-dashboard__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 40px var(--page-pad);
    gap: 24px;
    width: 100%;
}

/* Header */
.partner-dashboard__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.partner-dashboard__title {
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.partner-dashboard__subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #414651;
    margin: 0;
}

/* Banner - Affiliate Link */
.partner-dashboard__banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 var(--page-pad);
    width: 100%;
    height: 64px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.partner-dashboard__banner-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

.partner-dashboard__banner-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.partner-dashboard__banner-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-dashboard__banner-icon img {
    width: 32px;
    height: 32px;
}

.partner-dashboard__banner-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
}

/* Affiliate Link Input */
.partner-dashboard__link-input {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.partner-dashboard__link-text {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    min-width: 250px;
}

.partner-dashboard__copy-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    background: #0E101B;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}

.partner-dashboard__copy-btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.partner-dashboard__copy-btn span {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

/* Content Wrapper */
.partner-dashboard__content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px var(--page-pad);
    width: 100%;
    box-sizing: border-box;
}

/* Content Area */
.partner-dashboard__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

/* Alert Card */
.partner-dashboard__alert {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;
    position: relative;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.partner-dashboard__alert-icon {
    position: relative;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-dashboard__alert-icon::before {
    content: '';
    position: absolute;
    width: 27px;
    height: 27px;
    border: 1.67px solid #079455;
    border-radius: 50%;
    opacity: 0.3;
}

.partner-dashboard__alert-icon::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    border: 1.67px solid #079455;
    border-radius: 50%;
    opacity: 0.1;
}

.partner-dashboard__alert-icon img {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

.partner-dashboard__alert-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.partner-dashboard__alert-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.partner-dashboard__alert-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #252B37;
}

.partner-dashboard__alert-close {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.partner-dashboard__alert-close:hover {
    background: #F5F5F5;
}

.partner-dashboard__alert-close img {
    width: 20px;
    height: 20px;
}

/* Empty State */
.partner-dashboard__empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
}

.partner-dashboard__empty-pattern {
    position: absolute;
    width: 480px;
    height: 480px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image:
        linear-gradient(to right, #E9EAEB 1px, transparent 1px),
        linear-gradient(to bottom, #E9EAEB 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

.partner-dashboard__empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.partner-dashboard__empty-icon {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.partner-dashboard__empty-icon img {
    width: 28px;
    height: 28px;
}

.partner-dashboard__empty-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #535862;
    margin: 0;
}

/* Stats Bar */
.partner-dashboard__stats-bar {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    width: 100%;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.partner-dashboard__balance-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.partner-dashboard__balance-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.partner-dashboard__balance-label-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.partner-dashboard__help-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.partner-dashboard__help-icon img {
    width: 16px;
    height: 16px;
}

/* Tooltip */
.partner-dashboard__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #0A0D12;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

.partner-dashboard__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0A0D12;
}

.partner-dashboard__help-icon:hover .partner-dashboard__tooltip {
    opacity: 1;
    visibility: visible;
}

.partner-dashboard__balance-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #181D27;
}

.partner-dashboard__payout-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.partner-dashboard__payout-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 5px;
    gap: 6px;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
}

.partner-dashboard__payout-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.partner-dashboard__onboarding-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.partner-dashboard__complete-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-decoration: none;
    cursor: pointer;
}

.partner-dashboard__complete-btn:hover {
    background: #F9FAFB;
}

.partner-dashboard__powered-by {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #A4A7AE;
}

.partner-dashboard__stripe-logo {
    height: 14px;
    width: auto;
}

/* Metrics Section */
.partner-dashboard__metrics-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
}

.partner-dashboard__metrics {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
}

.partner-dashboard__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.partner-dashboard__metric-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.partner-dashboard__metric-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.partner-dashboard__metric-dot--blue {
    background: #2970FF;
}

.partner-dashboard__metric-dot--green {
    background: #17B26A;
}

.partner-dashboard__metric-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.partner-dashboard__metric-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #181D27;
}

/* Chart */
.partner-dashboard__chart {
    position: relative;
    width: 100%;
    height: 260px;
    margin-top: 8px;
}

/* Orders Table */
.partner-dashboard__orders-table {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.partner-dashboard__table {
    width: 100%;
    border-collapse: collapse;
}

.partner-dashboard__table thead {
    background: #FFFFFF;
}

.partner-dashboard__table th {
    padding: 12px 24px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    border-bottom: 1px solid #E9EAEB;
}

.partner-dashboard__table td {
    padding: 16px 24px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
    border-bottom: 1px solid #E9EAEB;
}

.partner-dashboard__table tr:last-child td {
    border-bottom: none;
}

.partner-dashboard__no-orders {
    text-align: center;
    padding: 40px 20px;
    color: #535862;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
    .partner-dashboard__container {
        padding: 40px 24px;
    }

    .partner-dashboard__content-wrapper {
        padding: 24px;
    }

    .partner-dashboard__header,
    .partner-dashboard__banner-content,
    .partner-dashboard__content {
        max-width: 100%;
    }

    .partner-dashboard__banner {
        padding: 0 24px;
    }

    .partner-dashboard__banner-content {
        flex-direction: column;
        gap: 12px;
        padding: 16px 0;
    }

    .partner-dashboard__title {
        font-size: 36px;
        line-height: 44px;
    }

    .partner-dashboard__empty {
        min-height: 300px;
    }

    .partner-dashboard__empty-pattern {
        width: 320px;
        height: 320px;
    }

    .partner-dashboard__stats-bar {
        flex-direction: column;
        gap: 16px;
    }

    .partner-dashboard__payout-section {
        align-items: flex-start;
    }

    .partner-dashboard__balance-amount,
    .partner-dashboard__metric-value {
        font-size: 28px;
        line-height: 36px;
    }

    .partner-dashboard__metrics {
        gap: 32px;
    }

    .partner-dashboard__table {
        display: block;
        overflow-x: auto;
    }

    .partner-dashboard__table th,
    .partner-dashboard__table td {
        padding: 12px 16px;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .partner-dashboard__container {
        padding: 24px 16px;
    }

    .partner-dashboard__content-wrapper {
        padding: 16px;
    }

    .partner-dashboard__banner {
        padding: 0 16px;
        height: auto;
    }

    .partner-dashboard__banner-content {
        padding: 12px 0;
    }

    .partner-dashboard__title {
        font-size: 28px;
        line-height: 36px;
    }

    .partner-dashboard__link-input {
        flex-direction: column;
        height: auto;
    }

    .partner-dashboard__link-text {
        min-width: auto;
        border-bottom: 1px solid #D5D7DA;
    }

    .partner-dashboard__copy-btn {
        border-radius: 0 0 8px 8px;
    }

    .partner-dashboard__balance-amount,
    .partner-dashboard__metric-value {
        font-size: 24px;
        line-height: 32px;
    }

    .partner-dashboard__metrics {
        flex-direction: column;
        gap: 24px;
    }
}

.phone-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA !important;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    overflow: visible;
    position: relative;
}

.phone-input:focus-within {
    border-color: #A4A7AE !important;
    box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

.phone-input__dial-wrap {
    position: relative;
    flex-shrink: 0;
    height: 100%;
}

.phone-input__dial-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 12px;
    height: 100%;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #252B37;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none;
}

.phone-input__dial-code {
    font-size: 16px;
    color: #252B37;
}

.phone-input__dial-arrow {
    flex-shrink: 0;
}

.phone-input__dial-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-height: 260px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(10, 13, 18, 0.12);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.phone-input__dial-search {
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 1px solid #E9EAEB !important;
    outline: none !important;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    color: #252B37;
    background: #FFFFFF !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

.phone-input__dial-search::placeholder {
    color: #A4A7AE;
}

.phone-input__dial-options {
    overflow-y: auto;
    max-height: 210px;
}

.phone-input__dial-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 14px;
    color: #252B37;
}

.phone-input__dial-option:hover {
    background: #F5F5F5;
}

.phone-input__dial-option-code {
    color: #717680;
    font-size: 13px;
}

.phone-input .phone-input__number,
.phone-input input[type="tel"].phone-input__number {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 10px 14px 10px 12px;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
    height: 100%;
    min-width: 0;
    box-shadow: none !important;
}

.phone-input__number::placeholder {
    color: #717680;
}

.rp .become-seller__field--full {
    max-width: 512px;
}

.rp__input-wrap {
    position: relative;
    width: 100%;
}

.rp__input {
    padding-right: 44px !important;
}

.rp__eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: #717680;
}

.rp__eye .material-symbols-rounded {
    font-size: 18px;
}

.rp__hints {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    list-style: disc;
}

.rp__hints li {
    margin-bottom: 2px;
}

/* ================================================
   Stripe Onboarding Page
   ================================================ */

.stripe-onboarding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 70px var(--page-pad);
    gap: 24px;
    background: #FDFDFD;
    border-radius: 0 16px 0 0;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Back Button */
.stripe-onboarding__back {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    width: 100%;
    max-width: 100%;
}

.stripe-onboarding__back .material-symbols-rounded {
    font-size: 20px;
    color: #717680;
}

.stripe-onboarding__back-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
}

.stripe-onboarding__back:hover .material-symbols-rounded,
.stripe-onboarding__back:hover .stripe-onboarding__back-text {
    color: #414651;
}

/* Header */
.stripe-onboarding__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.stripe-onboarding__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #252B37;
    margin: 0;
}

.stripe-onboarding__subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #414651;
    margin: 0;
}

/* Card */
.stripe-onboarding__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

/* Illustration */
.stripe-onboarding__illustration {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    background: #FAFAFA;
    border-radius: 8px;
    box-sizing: border-box;
}

.stripe-onboarding__illustration img {
    max-width: 100%;
    height: auto;
}

/* Footer */
.stripe-onboarding__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.stripe-onboarding__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.stripe-onboarding__info-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #252B37;
    margin: 0;
}

.stripe-onboarding__info-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #252B37;
    margin: 0;
}

/* Buttons */
.stripe-onboarding__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    gap: 4px;
    background: #000000;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.stripe-onboarding__btn span {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.stripe-onboarding__btn:hover {
    background: #181D27;
}

/* Waiting Button (disabled state) */
.stripe-onboarding__btn--waiting {
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    box-shadow: none;
    cursor: default;
}

.stripe-onboarding__btn--waiting span {
    color: #A4A7AE;
}

.stripe-onboarding__btn--waiting:hover {
    background: #FFFFFF;
}

/* Responsive */
@media (max-width: 1024px) {
    .stripe-onboarding {
        padding: 40px;
    }

    .stripe-onboarding__header,
    .stripe-onboarding__card {
        max-width: 100%;
    }

    .stripe-onboarding__title {
        font-size: 36px;
        line-height: 44px;
    }
}

@media (max-width: 768px) {
    .stripe-onboarding {
        padding: 24px;
    }

    .stripe-onboarding__header,
    .stripe-onboarding__card {
        max-width: 100%;
    }

    .stripe-onboarding__title {
        font-size: 28px;
        line-height: 36px;
    }

    .stripe-onboarding__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .stripe-onboarding__btn {
        width: 100%;
    }

    .stripe-onboarding__info-title {
        font-size: 20px;
        line-height: 24px;
    }
}

.share-modal__dialog {
  position: relative;
  z-index: 10;
  width: min(400px, 92vw);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: #252B37;
}

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

.share-modal__title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #252B37;
  margin: 0;
}

.share-modal__close {
  background: transparent;
  border: none;
  color: #717680;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}

.share-modal__close:hover {
  background: #F5F5F5;
  color: #252B37;
}

.share-modal__body {
  display: flex;
  flex-direction: column;
}

.share-modal__text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  color: #535862;
  margin: 0 0 16px 0;
  line-height: 20px;
}

.share-modal__input-group {
  display: flex;
  gap: 12px;
}

.share-modal__input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.share-modal__link-icon {
  position: absolute;
  left: 12px;
  color: #717680;
  font-size: 20px;
}

.share-modal__input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  color: #252B37;
  background: #FFFFFF;
}

.share-modal__input:focus {
  outline: none;
  border-color: #252B37;
}

.share-modal__copy-btn {
  padding: 10px 16px;
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 8px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.share-modal__copy-btn:hover {
  background: #181D27;
  color: #FFFFFF;
}

/* Variables for easy color matching */
:root {
    --support-text-main: #0a0a30;
    --support-text-muted: #667085;
    --support-border-color: #EAECF0;
    --support-primary-color: #000000;
    --support-send-color: #475467;
}

/* Trigger Button */
.support-chat-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--support-primary-color);
    border: 1px solid var(--support-primary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    color: white;
    cursor: pointer;
    z-index: 9999;
}

.support-chat-trigger:hover {
    opacity: 0.9;
}

/* Main Widget Container */
.support-chat-widget {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 360px;
    background: white;
    border: 1px solid var(--support-border-color);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    font-family: inherit;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.support-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* Header */
.support-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--support-border-color);
}

.support-chat-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--support-text-main);
}

.support-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* Chat Body */
.support-chat-body {
    height: 380px;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: height 0.2s ease-in-out;
    /* NEW: Smooth height animation */
}


.support-chat-widget.support-expanded {
    width: 600px;
}

.support-chat-widget.support-expanded .support-chat-body {
    height: 65vh;
    /* Makes the chat taller when expanded */
}

.support-message-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.support-user-row {
    justify-content: flex-end;
}

.support-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.support-timestamp {
    font-size: 12px;
    color: var(--support-text-muted);
}

.support-bubble {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.support-bot-bubble {
    background: #ffffff;
    border: 1px solid var(--support-border-color);
    color: var(--support-text-main);
}

.support-user-bubble {
    background-color: var(--support-primary-color);
    color: white;
    border: 1px solid #000000;
}

/* Chat Footer */
.support-chat-footer {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--support-border-color);
}

#support-chat-input {
    flex: 1;
    resize: none;
    overflow-y: hidden;
    max-height: 120px;
    padding: 12px 16px;
    border-radius: 20px;
    border: 1px solid var(--support-border-color);
    background-color: #f9fafb;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
}


#support-chat-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #ffffff;
    border-color: var(--support-primary-color);
}

.support-input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 4px 0;
    background: transparent;
}

.support-input-wrapper input::placeholder {
    color: #98A2B3;
}

.support-input-wrapper:focus-within {
    border-color: var(--support-primary-color);
}

#support-send-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--support-send-color);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 12px;
}

/* TYPING INDICATOR & ANIMATION*/

.support-typing-bubble {
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: unset !important;
    line-height: 0 !important;
}

.support-typing-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 10px;
}

.support-typing-dots span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--support-text-muted);
    border-radius: 50%;
    color: transparent;
    overflow: hidden;
    text-indent: -9999px;
    animation: support-typing 1.4s infinite both;
}

.support-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.support-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}


@keyframes support-typing {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/*  FAQ SUGGESTION BUBBLES */


.support-faq-wrapper {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    overflow-x: auto;
    flex-wrap: nowrap;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.support-faq-wrapper::-webkit-scrollbar {
    display: none;
}

/* When the user is actively clicking and dragging */
.support-faq-wrapper.active {
    cursor: grabbing;
}

.support-faq-chip {
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    padding: 8px 14px;
    font-size: 13px;
    color: #344054;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

    /* KEEP ON ONE LINE */
    flex-shrink: 0;
    white-space: nowrap;
}

.support-faq-chip:hover {
    background-color: #f9fafb;
    border-color: #d0d5dd;
    color: #101828;
}

.support-faq-chip:active {
    transform: scale(0.98);
    box-shadow: none;
}
.support-badge {
    position: absolute !important; /* Forces it out of the button's layout */
    top: 0px;   /* Adjusted so it doesn't clip outside the button */
    right: 0px; 
    width: 12px !important;
    height: 12px !important;
    background-color: #EF4444 !important; 
    border-radius: 50%;
    border: 2px solid #000000;
    display: none; 
    z-index: 10;
}

.support-badge.is-visible {
    display: block !important; /* Forces it to show */
    animation: pulse-red 2s infinite;
}

/* Optional pulse animation */
@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@media (max-width: 768px) {
    .support-chat-widget {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        border: none;
    }

    .support-chat-widget.support-expanded {
        width: auto;
    }

    .support-chat-body {
        height: auto;
        flex: 1;
    }

    .support-chat-widget.support-expanded .support-chat-body {
        height: auto;
    }

    .support-chat-trigger {
        bottom: 16px;
        right: 16px;
    }
}
/* Legal Pages (Privacy, Terms, Imprint) */

.legal-wrapper {
  background: #FDFDFD;
  border-radius: 0px 16px 0px 0px;
  padding: 70px;
}

.legal-wrapper .legal__page-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0 0 24px;
  text-align: left;
}

.legal-wrapper--fixed-tabs .legal__page-title {
  border-bottom: 1px solid #E9EAEB;
  padding-bottom: 24px;
}

.legal {
  display: flex;
  gap: 32px;
}

.legal__sidebar {
  width: 240px;
  flex-shrink: 0;
}

.legal-wrapper--privacy .legal__sidebar {
  width: 200px;
}

.legal__sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 24px;
}

.legal__sidebar-link {
  display: flex;
  align-items: center;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #717680;
  text-decoration: none;
  padding: 8px 12px;
  border-left: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.legal__sidebar-link:hover {
  color: #000000;
}

.legal__sidebar-link.active {
  color: #000000;
  font-weight: 600;
  border-left-color: #000000;
}

.legal__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-wrapper .legal__section-title {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #181D27;
  margin: 0;
}

.legal-wrapper .legal__content h2,
.legal-wrapper .legal__content h3,
.legal-wrapper .legal__content h4 {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  color: #535862;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.legal-wrapper .legal__content h2 {
  margin: 20px 0 0;
  color: #181D27;
}

.legal-wrapper .legal__content > .legal__section:first-child > :first-child {
  margin-top: 0;
}

.legal-wrapper .legal__content h3 {
  margin: 12px 0 0;
}

.legal-wrapper .legal__content h4 {
  margin: 8px 0 0;
}

.legal-wrapper .legal__content h2 b {
  font-weight: 600;
  flex-shrink: 0;
}

.legal-wrapper .legal__content h3 b,
.legal-wrapper .legal__content h4 b {
  font-weight: 400;
  flex-shrink: 0;
}

.legal-wrapper .legal__content p {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #535862;
  margin: 0;
}

.legal-wrapper .legal__content ul,
.legal-wrapper .legal__content ol {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #535862;
  margin: 0;
  padding-left: 24px;
}

.legal-wrapper .legal__content li {
  margin-bottom: 4px;
}

.legal-wrapper .legal__content a {
  color: #181D27;
  text-decoration: underline;
  word-break: break-all;
}

.legal-wrapper .legal__content a:hover {
  color: #535862;
}

.legal-wrapper .legal__address {
  font-style: normal;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #535862;
  margin: 0;
}

/* Imprint page */

.imprint__divider {
  border: none;
  border-top: 1px solid #E9EAEB;
  margin: 24px 0 32px;
}

.imprint__grid {
  display: flex;
  gap: 48px;
}

.imprint__left {
  width: 200px;
  flex-shrink: 0;
}

.imprint__left .legal__address {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #181D27;
}

.imprint__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.imprint__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.imprint__label {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #717680;
}

.imprint__block p {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #181D27;
  margin: 0;
}

.legal-wrapper--fixed-tabs {
  height: calc(100vh - 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.legal-wrapper--fixed-tabs .legal {
  flex: 1;
  min-height: 0;
}

.legal-wrapper--fixed-tabs .legal__sidebar {
  align-self: flex-start;
  position: static;
}

.legal-wrapper--fixed-tabs .legal__sidebar-nav {
  position: static;
  top: auto;
}

.legal-wrapper--fixed-tabs .legal__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

@media (max-width: 768px) {
  .legal-wrapper {
    padding: 24px 16px 60px;
  }

  .legal-wrapper--fixed-tabs {
    height: auto;
    overflow: visible;
  }

  .legal-wrapper--fixed-tabs .legal__content {
    overflow-y: visible;
    padding-right: 0;
  }

  .legal {
    flex-direction: column;
  }

  .legal__sidebar {
    position: static;
    width: auto;
    margin-bottom: 24px;
  }

  .legal-wrapper .legal__page-title {
    font-size: 30px;
    line-height: 38px;
  }

  .imprint__grid {
    flex-direction: column;
    gap: 32px;
  }

  .imprint__left {
    width: auto;
  }
}

.cookie-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    /* Assumes Figma design font */
}

.cookie-settings-modal[hidden] {
    display: none !important;
}

.cookie-settings-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.cookie-settings-modal__dialog {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 16px;
    max-height: 90vh;
    overflow-y: auto;
}

.cookie-settings-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-settings-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111111;
}

.cookie-settings-modal__close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.cookie-settings-modal__close:hover {
    background-color: #f5f5f5;
    color: #333333;
}

.cookie-settings-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-settings-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cookie-settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cookie-settings-item__icon {
    color: #555555;
    font-size: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-settings-item__text {
    font-size: 15px;
    color: #333333;
}

.cookie-settings-modal__details-toggle {
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}

.cookie-settings-modal__details-toggle:hover {
    color: #111111;
}

.cookie-settings-modal__details {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
}

.cookie-settings-modal__details[hidden] {
    display: none !important;
}

.cookie-settings-details-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cookie-settings-details-label {
    font-weight: 600;
    color: #333333;
}

.cookie-settings-details-value {
    color: #555555;
    line-height: 1.4;
}

.cookie-settings-modal__footer {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.cookie-settings-modal__btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-settings-modal__btn--secondary {
    background: #ffffff;
    border: 1px solid #dddddd;
    color: #333333;
}

.cookie-settings-modal__btn--secondary:hover {
    background: #f5f5f5;
}

.cookie-settings-modal__btn--primary {
    background: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}

.cookie-settings-modal__btn--primary:hover {
    background: #222222;
}

@media (max-width: 480px) {
    .cookie-settings-modal__footer {
        flex-direction: column;
    }
}
body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background-color: var(--gray-025);

  .background-gradient {
    position: fixed;
    top: 0;
    width: calc(100% - 1.5rem);
    height: 463px;
    margin: 0.75rem 0.75rem 0;
    background: #FDFDFD;
    border-radius: 0.75rem 0.75rem 0 0;
    z-index: -1;
  }
}

.layout-no-sidebar .main,
.main--no-sidebar {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

.layout-no-sidebar #main-panel,
.main-panel--no-sidebar {
  width: 100%;
  max-width: 100%;
}

.input-with-icon,
.select-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  background-color: #fff;
}

.material-symbols-rounded {

  + input,
  + select {
    padding: 0.5625rem 0.625rem 0.5625rem 2.625rem;
  }

  &:has(+ input),
  &:has(+ select) {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    left: 0.875rem;
    font-size: 1.25rem;
    color: var(--gray-400);
  }
}

input,
select {
  min-width: 176px;
  padding: 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: 0.5rem;
  color: var(--gray-500);
}

input::placeholder {
  color: var(--gray-500);
}

select + .i-keyboard_arrow_down {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  right: 0.875rem;
  font-size: 1.25rem;
  color: var(--gray-400);
  pointer-events: none;
}

/* ===== Form fields visibility (override reboot) ===== */
/* Ensure inputs and selects are visible on light background */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea {
  background-color: #fff !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-800) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--gray-500);
}

/* Focus ring */
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gray-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 43, 55, 0.08);
}

/* Checkbox/Radio visibility */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--gray-400);
  background: #fff;
}

.form-check-input:checked,
input[type="checkbox"]:checked {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}

/* Cards used for dynamic list items */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
}

/* ===== Inactive AI System Card ===== */

.card--inactive {
  opacity: 0.65;
}

/* Grey thumbnail */
.card--inactive .card__thumbnail {
  filter: grayscale(100%) brightness(0.85);
}

/* Grey all text */
.card--inactive .card__title,
.card--inactive .card__description,
.card--inactive .card__delivery-time,
.card--inactive .card__price,
.card--inactive .card__rating span,
.card--inactive .material-symbols-rounded {
  color: var(--gray-400) !important;
}

/* Grey avatar slightly */
.card--inactive .card__avatar-img {
  filter: grayscale(100%);
}

/* ===== Auth Modal (HTMX) ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow: auto;
  border-radius: 16px;
  background: rgba(18, 18, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  letter-spacing: 0.2px;
}

.modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.modal__body {
  padding: 18px;
}

/* ===== Forms inside modal ===== */

.auth__headline {
  color: #f1f3f5;
  /* or your modal text color */
}

.modal__headline {
  color: #f1f3f5;
  /* or your modal text color */
}

.modal {
  color: #f1f3f5;
  /* light text */
}

.modal__headline {
  margin: 0 0 14px 0;
  font-size: 22px;
  font-weight: 700;
}

.validation-summary {
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.20);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.field input {
  height: 44px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.field input:focus {
  border-color: rgba(120, 150, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(120, 150, 255, 0.18);
}

.field span,
.field .field-validation-error {
  font-size: 12px;
  color: rgba(255, 120, 120, 0.9);
}

/* Buttons */

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-weight: 650;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(120, 150, 255, 1), rgba(90, 210, 255, 1));
  color: rgba(10, 10, 14, 0.95);
}

.btn-primary:hover {
  filter: brightness(1.03);
}

.btn-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.btn-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile spacing */
@media (max-width: 480px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}

/* ===== Video Lightbox ===== */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-lightbox.is-open {
  display: flex;
}

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.video-lightbox__dialog {
  position: relative;
  width: min(800px, 92vw);
  border-radius: 16px;
  background: rgba(18, 18, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  overflow: visible;
}

.video-lightbox__header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-lightbox__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.video-lightbox__close {
  appearance: none;
  border: 0;
  background: transparent;
  position: absolute;
  top: 5px;
  right: -4px;
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.video-lightbox__close:hover {
  background: transparent;
  color: #FFFFFF;
}

.video-lightbox__body {
  padding: 0;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
}

.video-lightbox__body video {
  width: 100%;
  display: block;
}