/* Import Cinzel font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');

/* Base page styling */
.gothic-page-container {
    min-height: 100vh;
    color: var(--gothic-white);
    padding: 2rem 0;
}

/* Page headers */
.page-header {
    margin-bottom: 3rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--gothic-red);
    text-shadow: 2px 2px 4px var(--shadow-dark);
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

/* Form controls */
.gothic-form-control {
    background: var(--gothic-dark-gray);
    border: 2px solid var(--gothic-light-gray);
    color: var(--gothic-white);
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    .gothic-form-control:focus {
        background: var(--gothic-gray);
        border-color: var(--gothic-red);
        color: var(--gothic-white);
        box-shadow: 0 0 0 0.2rem rgba(var(--gothic-red), 0.3);
        outline: none;
    }

    .gothic-form-control::placeholder {
        color: var(--gothic-silver);
        opacity: 0.7;
    }

    .gothic-form-control option {
        background: var(--gothic-dark-gray);
        color: var(--gothic-white);
    }

/* Labels */
.gothic-form-label {
    font-weight: 600;
    color: var(--gothic-white);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

    .gothic-form-label.required::after {
        content: ' *';
        color: var(--gothic-red);
        font-weight: bold;
    }

/* Buttons */
.gothic-btn {
    background: linear-gradient(145deg, var(--gothic-red), #8B0000);
    color: var(--gothic-white);
    border: 2px solid var(--gothic-red);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

    .gothic-btn:hover {
        background: linear-gradient(145deg, #8B0000, var(--gothic-red));
        color: var(--gothic-white);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
        border-color: #8B0000;
    }

    .gothic-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .gothic-btn:disabled {
        background: var(--gothic-light-gray);
        border-color: var(--gothic-light-gray);
        color: var(--gothic-silver);
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

        .gothic-btn:disabled:hover {
            transform: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

/* Secondary button variant */
.darkThemeBtn {
    background: linear-gradient(145deg, var(--gothic-dark-gray), var(--gothic-gray));
    border-color: var(--gothic-light-gray);
    color: var(--gothic-white);
}

    .darkThemeBtn:hover {
        background: linear-gradient(145deg, var(--gothic-light-gray), var(--gothic-gray));
        border-color: var(--gothic-silver);
        color: var(--gothic-white);
    }

/* Form sections */
.gothic-form-section {
    background: var(--gothic-gray);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--shadow-dark);
    border: 1px solid var(--gothic-light-gray);
    margin-bottom: 2rem;
}

/* Form validation */
.gothic-form-control.is-invalid {
    border-color: var(--gothic-red);
    box-shadow: 0 0 0 0.2rem rgba(var(--gothic-red), 0.25);
}

.invalid-feedback {
    color: var(--gothic-red);
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Text areas */
textarea.gothic-form-control {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Custom number inputs */
input[type="number"].gothic-form-control {
    -moz-appearance: textfield;
}

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

.lineIconButton{
    margin-top:8px;
    height:32px;
}

.lineIconImage {
    margin-top: -10px;
    min-width: 14px;
}




/* Responsive design for shared elements */
@media (max-width: 768px) {
    .gothic-page-container {
        padding: 1rem 0;
    }

    .page-title {
        font-size: 2rem;
    }

    .gothic-form-section {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .page-title {
        font-size: 1.75rem;
    }

    .gothic-form-section {
        padding: 1rem;
    }

    .gothic-btn {
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
    }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gothic-dark-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--gothic-light-gray);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gothic-silver);
    }