/* ------------------------------------------
   ADD ARTWORK PAGE
------------------------------------------- */

.add-artwork-page {
    padding-bottom: var(--breve);
    background-color: var(--bg);
}

/* Header Section */
.add-artwork-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.add-artwork-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 540;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mb);
    margin: 0;
}

.add-artwork-back {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mb-70);
    text-decoration: none;
    transition: color 0.2s ease;
}

.add-artwork-back:hover {
    color: var(--mb);
}

/* Form Container */
.add-artwork-form {
    display: flex;
    flex-direction: column;
    gap: var(--minim);
    max-width: 600px;
}

/* Image Preview */
.add-artwork-image-preview-container {
    margin-bottom: var(--crotchet);
}

.add-artwork-image-preview {
    display: block;
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.add-artwork-image-preview[hidden] {
    display: none;
}

/* Upload Area */
.add-artwork-upload-area {
    margin-bottom: var(--crotchet);
}

.add-artwork-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 192px;
    height: 192px;
    border: 2px dashed var(--mb-70);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: transparent;
}

.add-artwork-upload-label[hidden] {
    display: none;
}


.add-artwork-upload-label:hover {
    border-color: var(--mb);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Has image variant - smaller change button */
/* Change Image Button */
.add-artwork-change-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mb-70);
    padding: var(--quaver) var(--crotchet);
    margin-top: var(--quaver);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: transparent;
}

.add-artwork-change-btn[hidden] {
    display: none;
}

.add-artwork-change-btn:hover {
    border-color: var(--mb);
    background-color: rgba(0, 0, 0, 0.02);
}

.add-artwork-change-text {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mb-70);
    transition: color 0.2s ease;
}

.add-artwork-change-btn:hover .add-artwork-change-text {
    color: var(--mb);
}

/* Has image variant - for backwards compatibility */
.add-artwork-upload-label--has-image {
    width: auto;
    height: auto;
    border: 1px solid var(--mb-70);
    padding: var(--quaver) var(--crotchet);
    margin-top: var(--quaver);
}

.add-artwork-upload-label--has-image:hover .add-artwork-change-text {
    color: var(--mb);
}


.add-artwork-upload-icon {
    color: var(--mb-70);
    transition: color 0.2s ease;
}

.add-artwork-upload-label:hover .add-artwork-upload-icon {
    color: var(--mb);
}

.add-artwork-file-input {
    display: none;
}


/* Fields Container */
.add-artwork-fields {
    display: flex;
    flex-direction: column;
    gap: var(--minim);
}

/* Field Wrapper */
.add-artwork-field {
    display: flex;
    flex-direction: column;
    gap: var(--quaver);
}

/* Labels */
.add-artwork-label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 540;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dc-greys-900);
}

/* Inputs */
.add-artwork-input {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--mb);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--mb-70);
    padding: var(--quaver) 0;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
}

.add-artwork-input::placeholder {
    color: var(--mb-70);
}

.add-artwork-input:focus {
    border-bottom-color: var(--mb);
}

/* Purpose/Exhibition Field */
.add-artwork-field--purpose {
    gap: 20px;
}

.add-artwork-purpose-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px;
}

.add-artwork-purpose-hint {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--mb-70);
}

/* Toggle Switch */
.add-artwork-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--crotchet);
}

.add-artwork-toggle-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--mb-70);
    transition: color 0.2s ease;
}

.add-artwork-toggle-label.active {
    color: var(--mb);
    font-weight: 500;
}

.add-artwork-toggle {
    position: relative;
    width: 44px;
    height: 22px;
    background-color: #E8E6E1;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease;
}

.add-artwork-toggle[aria-pressed="true"] {
    background-color: #3B3933;
}

.add-artwork-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: #3B3933;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.add-artwork-toggle[aria-pressed="true"] .add-artwork-toggle-knob {
    transform: translateX(22px);
    background-color: #fff;
}

/* Purpose Detail (shown when toggle is on) */
.add-artwork-purpose-detail {
    margin-top: var(--quaver);
}

/* Submit Section */
.add-artwork-submit {
    margin-top: var(--crotchet);
    display: flex;
    justify-content: flex-end;
}


.add-artwork-submit-btn,
input[type="submit"].add-artwork-submit-btn {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mb);
    background-color: transparent;
    border: 1px solid var(--mb);
    padding: 12px 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.add-artwork-submit-btn:hover,
input[type="submit"].add-artwork-submit-btn:hover {
    background-color: var(--mb);
    color: var(--shw);
}


/* Responsive */
@media (max-width: 640px) {
    .add-artwork-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--crotchet);
    }

    .add-artwork-upload-label {
        width: 160px;
        height: 160px;
    }

    .add-artwork-purpose-header {
        flex-direction: column;
        gap: var(--quaver);
    }
}

/* Custom Select Dropdown Component */
.custom-select {
    position: relative;
    display: block;
    /* changed from inline-block to block for full width */
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* space-between to push arrow to right */
    gap: 8px;
    padding: var(--quaver) 0;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mb-70);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    /* Matching .add-artwork-input */
    color: var(--mb);
    transition: border-color 0.2s ease;
    width: 100%;
    text-transform: none;
    /* Changed to match inputs, or keep uppercase? Input is not uppercase */
}

/* Override triggers to match input style exactly if needed, 
   but original requirement said "use same style [as schedule video call]".
   Schedule video call styles:
   font-weight: 500
   text-transform: uppercase
   letter-spacing: 0.05em
   border: none (it seems it was standalone)
   
   However, here we are in a form with underlined inputs.
   The user said "how dropdown's look. including the box."
   
   Wait, the schedule video call dropdowns are BOXES (bordered), while add-artwork inputs are UNDERLINED.
   The user said "I want to change how dropdown's look. including the box."
   This implies they want the BOXED look for dropdowns even if other inputs are underlined?
   OR they want the dropdown functionality but styled to match the current page (underlined)?
  position: relative;
  display: block;
  width: 100%;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--quaver) 0;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mb-70);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--mb);
  transition: border-color 0.2s ease;
  width: 100%;
  text-transform: uppercase; /* Matching schedule call style usually implies uppercase for selects */
border-radius: 0;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus {
    border-bottom-color: var(--mb);
    outline: none;
}

.custom-select-trigger[aria-expanded="true"] {
    border-bottom-color: var(--mb);
    color: var(--mb);
}

.custom-select-trigger svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.custom-select-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.custom-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 100%;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--mb-70);
    border-top: none;
    border-radius: 0 0 4px 4px;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.custom-select-menu.open {
    max-height: 240px;
    overflow-y: auto;
    visibility: visible;
}

/* Custom scrollbar for the dropdown */
.custom-select-menu::-webkit-scrollbar {
    width: 6px;
}

.custom-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-menu::-webkit-scrollbar-thumb {
    background: var(--mb-70);
    border-radius: 3px;
}

.custom-select-menu::-webkit-scrollbar-thumb:hover {
    background: var(--mb);
}

.custom-select-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--dc-greys-900);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.custom-select-option:hover,
.custom-select-option:focus {
    background-color: rgba(0, 0, 0, 0.05);
    outline: none;
}

.custom-select-option.selected {
    color: var(--mb);
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.02);
}

.custom-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}