/* Nook — forms and buttons */

.form label {
    display: block;
    margin-bottom: 1.2rem;
}

#review-rating-star-count-wrap[hidden] {
    display: none !important;
}

.form input[type="text"],
.form input[type="search"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="url"],
.form input[type="number"],
.form textarea,
.form select {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.8rem 1.04rem;
    border: 1px solid #d4d4d8;
    border-radius: 6px;
    font: inherit;
}

.form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form button,
.button {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border: none;
    border-radius: 6px;
    background: var(--color-highlight);
    color: #000;
    color: var(--color-highlight-text);
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
}

.form button.secondary,
button.secondary {
    background: #71717a;
}

.form-actions {
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

.nav-link-mode-form {
    margin-bottom: 2.4rem;
}

.form-actions-end {
    margin-left: auto;
}

.inline-form {
    display: inline;
    margin: 0;
}

.link-button {
    background: none;
    border: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

/* file-input dropzone */

.file-input-label {
    display: block;
    margin-bottom: 1.2rem;
}

.form .file-input-label {
    margin-bottom: 1.2rem;
}

.file-input {
    margin-top: 0.4rem;
}

.file-input-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-input-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 11.2rem;
    padding: 2rem 1.6rem;
    border: 2px dashed #d4d4d8;
    border-radius: 8px;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-input-dropzone:hover {
    border-color: #a1a1aa;
    background: #f4f4f5;
}

.file-input-dropzone:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

.file-input-dropzone.is-dragover {
    border-color: var(--color-highlight);
    background: color-mix(in srgb, var(--color-highlight) 8%, #fafafa);
}

.file-input-icon {
    width: 3.2rem;
    height: 3.2rem;
    color: #71717a;
}

.file-input-prompt {
    color: #52525b;
    font-size: 1.52rem;
}

.file-input-filename {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-hint {
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.file-input.has-file .file-input-prompt {
    font-size: 1.36rem;
}

.trash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: center;
    margin-top: 2rem;
}

.trash-actions .trash-empty-form {
    margin: 0 0 0 auto;
}