/* Button System
   Prefix: btn-
   Usage: Always combine base class .btn with a variant class
*/

/* Base Button
   Always use as base: <button class="btn btn-primary"> */
.btn {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-family: OpenSans-Regular;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
}

.btn-confirmation {
    padding: 8px 16px;
    background: #eee;
    color: #444;
    border-radius: 4px;
}
.btn-confirmation:hover {
    background: #999;
    color: #fff;
}
/* Button Variants */
.btn-primary {
    background-color: #4a90e2;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #357abd;
    }

.btn-secondary {
    background-color: #555;
    color: #fff;
}

    .btn-secondary:hover {
        background-color: #333;
    }

.btn-outline {
    border: 1px solid currentColor;
    color: #4a90e2;
}

    .btn-outline:hover {
        background-color: #f5f9ff;
        color: #357abd;
    }

.btn-danger {
    color: #dc3545;
}

    .btn-danger:hover {
        background-color: #ffebee;
    }

.btn-ghost {
    color: #555;
}

    .btn-ghost:hover {
        background-color: #f8f9fa;
        color: #333;
    }

/* Button Sizes */
.btn--small {
    padding: 4px 8px;
    font-size: 0.85em;
}

.btn--large {
    padding: 12px 24px;
    font-size: 1em;
}

/* Button States */
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Special Buttons */
.quantity-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #777;
    border-radius: 4px;
}

    .btn-quantity:hover {
        background-color: #ccc;
        color: #333;
    }

    .btn-quantity.delete-mode {
        color: #dc3545;
    }

        .btn-quantity.delete-mode:hover {
            background-color: #fff5f5;
        }

/* Button Icons */
img.button-icon {
    width: 18px;
}
/* Action Buttons (CRUD operations) */

.crud-action-btn {
    
    text-align: center;
    height: auto;
    font-size: 1em;
    padding: 12px 12px;
    border-radius: 4px;
    background: #777;
    color: #fff;
}
.crud-action-btn:hover {
    background: #222;
}
.crud-action-btn.delete {
    background-color: transparent!important;
    margin: 2px 0;
    
}
.crud-action-btn.delete:hover {
    background: #555!important;
    color: #fff;
}
.crud-action-btn:hover {
    background: #555;
    color: #fff;
}

.crud.crud-action-btn.back {
    width: 100px;
    padding: 10px 16px;
    background: salmon;
}

.btn-action {
    width: fit-content;
    padding: 8px 16px;
    color: #555;
    background-color: transparent;
}

    .btn-action:hover {
        background-color: #666;
        color: #fff;
    }

    .btn-action.edit:hover {
        color: #0066cc;
        background-color: #e6f0ff;
    }

    .btn-action.delete:hover {
        color: #dc3545;
        background-color: #ffebee;
    }

/* Button Groups */
.btn-group {
    display: flex;
    gap: 5px;
}

.btn-group--end {
    justify-content: flex-end;
}

.btn-group--center {
    justify-content: center;
}

/* Full-width Button */
.btn--full {
    width: 100%;
}

/* Button with Icon */
.btn--icon {
    gap: 8px;
}

.btn--icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .btn-group {
        flex-wrap: wrap;
    }

    .btn-action {
        flex: 1;
        text-align: center;
        min-width: 120px;
    }

    /* Allow buttons to stack on mobile when needed */
    .btn-group--stack-mobile {
        flex-direction: column;
    }

        .btn-group--stack-mobile .btn {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .btn {
        padding: 6px 12px;
    }

    .btn--large {
        padding: 10px 20px;
    }
}
/* Identity-specific button styles */
.identity-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-family: OpenSans-Regular;
    font-size: 0.9em;
    background-color: transparent;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .identity-nav-button:hover {
        background-color: #f8f9fa;
        color: #4a90e2;
    }

/* Identity form action buttons */
.identity-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Identity verification badge button */
.identity-verify-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #4a90e2;
    border-radius: 12px;
    font-size: 0.85em;
    color: #4a90e2;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .identity-verify-button:hover {
        background: #e6f0ff;
    }

/* Identity danger zone buttons */
.identity-danger-button {
    color: #dc3545;
    border: 1px solid #dc3545;
}

    .identity-danger-button:hover {
        background: #ffebee;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .identity-form-actions {
        flex-direction: column;
    }

        .identity-form-actions .btn {
            width: 100%;
        }
}

/* Personal Data Page Specific Styles */

/* Banner Styles */
.profile-info-banner {
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border-left: 4px solid #666;
    border-radius: 4px;
}

    .profile-info-banner p {
        color: #666;
        font-size: 0.95em;
        line-height: 1.5;
        margin: 0;
    }

.profile-warning-banner {
    padding: 15px 20px;
    margin-bottom: 30px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}

    .profile-warning-banner p {
        color: #856404;
        font-weight: 500;
        margin: 0;
    }

/* Button Group Spacing */
.profile-section .btn-group {
    margin-top: 30px;
}

    .profile-section .btn-group form {
        margin: 0;
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .profile-section .btn-group {
        width: 100%;
    }

    .profile-section .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .profile-info-banner,
    .profile-warning-banner {
        margin: 15px 0;
        padding: 12px 15px;
    }

    .profile-section .btn-group {
        margin-top: 20px;
    }
}
/* Button System
   Prefix: identity-button-
   Usage: Always combine base class with a variant class
*/

/* Base Button */
.identity-button {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-family: OpenSans-Regular;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
}

/* Button Variants */
.identity-button-primary {
    background-color: #4a90e2;
    color: #fff;
}

    .identity-button-primary:hover {
        background-color: #357abd;
    }

.identity-button-secondary {
    background-color: #555;
    color: #fff;
}

    .identity-button-secondary:hover {
        background-color: #333;
    }

.identity-button-outline {
    border: 1px solid currentColor;
    color: #4a90e2;
}

    .identity-button-outline:hover {
        background-color: #f5f9ff;
        color: #357abd;
    }

/* Action Buttons */
.identity-button-action {
    padding: 6px 12px;
    font-size: 0.85em;
    color: #666;
}

    .identity-button-action.view:hover {
        background-color: #f5f5f5;
        color: #333;
    }

    .identity-button-action.edit {
        color: #0066cc;
    }

        .identity-button-action.edit:hover {
            background-color: #e6f0ff;
        }

    .identity-button-action.delete {
        padding: 8px;
        color: #333;
        background-color: transparent!important;
    }

        .identity-button-action.delete:hover {
            background-color: #ffebee;
        }

/* Button Sizes */
.identity-button--small {
    padding: 4px 8px;
    font-size: 0.85em;
}

.identity-button--large {
    padding: 12px 24px;
    font-size: 1em;
}

/* Button States */
.identity-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Groups */
.identity-button-group {
    display: flex;
    gap: 5px;
}

.identity-button-group--end {
    justify-content: flex-end;
}

.identity-button-group--center {
    justify-content: center;
}

/* Full-width Button */
.identity-button--full {
    width: 100%;
}

/* Button with Icon */
.identity-button--icon {
    gap: 8px;
}

.identity-button--icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

/* Navigation Button */
.identity-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #555;
}

    .identity-nav-button:hover {
        background-color: #f8f9fa;
        color: #4a90e2;
    }

/* Form Action Buttons */
.identity-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

select.identity-form-input {
    padding: 3px 8px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .identity-button-group {
        flex-wrap: wrap;
    }

    .identity-button-group--stack-mobile {
        flex-direction: column;
    }

        .identity-button-group--stack-mobile .identity-button {
            width: 100%;
        }

    .identity-form-actions {
        flex-direction: column;
    }

        .identity-form-actions .identity-button {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .identity-button {
        padding: 6px 12px;
    }

    .identity-button--large {
        padding: 10px 20px;
    }
}