/* shared_components.css */

body.ui-system {
    font-family: var(--ui-font);
    font-size: var(--ui-font-base);
    font-weight: var(--ui-weight-normal);
}

body.ui-system :is(.page-title, .services-title, .inquiry-title, .confirm-title, .forgot-title) {
    font-size: var(--ui-font-2xl);
    font-weight: var(--ui-weight-bold);
}

body.ui-system :is(.section-title, .detail-section-title, .modal-header h3) {
    font-size: var(--ui-font-lg);
    font-weight: var(--ui-weight-bold);
}

body.ui-system :is(.page-subtitle, .services-subtitle, .inquiry-subtitle, .confirm-subtitle, .header-subtitle, .forgot-subtitle) {
    font-size: var(--ui-font-base);
    font-weight: var(--ui-weight-normal);
}

body.ui-system :is(.form-group label, .input-group label, .inq-field-wrap label, .field-label, .filter-label, .filter-inline-label) {
    font-size: var(--ui-font-sm);
    font-weight: var(--ui-weight-semibold);
}

body.ui-system :is(
.inq-input, .checkout-input, .search-input, .filter-input, .filter-select,
.period-select, .tracking-input, .form-select, .sort-select, .rating-select,
.product-search-input, .category-search-input, .add-category-input,
.select-box, .editor-textarea, select, .review-upload-form textarea,
.input-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.input-group select, .input-group textarea,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
.form-group select, .form-group textarea
) {
    min-height: var(--ui-control-height);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
    padding-left: var(--ui-input-padding-left, var(--ui-control-padding-x));
    padding-right: var(--ui-input-padding-right, var(--ui-control-padding-x));
    border: 1.5px solid var(--ui-field-border, var(--ui-border));
    border-radius: var(--ui-control-radius);
    background-color: var(--ui-field-background, var(--ui-surface));
    color: var(--ui-field-text, var(--ui-text));
    box-shadow: var(--ui-field-shadow, none);
    font-family: var(--ui-font);
    font-size: var(--ui-font-base);
    font-weight: var(--ui-weight-normal);
    line-height: 1.4;
    outline: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

body.ui-system :is(input, textarea)::placeholder {
    color: var(--ui-text-muted);
    font-family: var(--ui-font);
    font-size: var(--ui-font-base);
    font-weight: var(--ui-weight-normal);
    opacity: 1;
}

body.ui-system :is(input, select, textarea, .select-box, .editor-textarea):focus {
    --ui-field-border: var(--ui-green);
    --ui-field-background: #f9fbf9;
    --ui-field-shadow: var(--ui-shadow-focus);
    border-color: var(--ui-green);
    background-color: #f9fbf9;
    box-shadow: var(--ui-shadow-focus);
}

body.ui-system :is(input, select, textarea, .select-box, .editor-textarea):focus-visible {
    outline: 2px solid var(--ui-green);
    outline-offset: 2px;
}

body.ui-system :is(input, select, textarea):disabled {
    --ui-field-background: var(--ui-background);
    --ui-field-text: var(--ui-text-muted);
    background-color: var(--ui-background);
    color: var(--ui-text-muted);
    cursor: not-allowed;
}

body.ui-system :is(input, textarea)[readonly] {
    --ui-field-background: var(--ui-background);
    background-color: var(--ui-background);
}

body.ui-system :is(input, textarea, select)[aria-invalid="true"] {
    --ui-field-border: #c0392b;
    border-color: #c0392b;
}

body.ui-system select {
    --ui-input-padding-right: 38px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d5a27' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px;
    cursor: pointer;
}

body.ui-system select[multiple] {
    background-image: none;
    --ui-input-padding-right: 13px;
}

body.ui-system :is(.search-wrap, .search-wrapper, .search-box):has(> .search-icon) {
    --ui-input-padding-left: 40px;
    --ui-input-padding-right: 36px;
}

body.ui-system :is(.search-wrap, .search-wrapper, .search-box) > .search-icon {
    left: 13px;
    width: 16px;
    text-align: center;
    pointer-events: none;
}

body.ui-system .password-wrapper {
    --ui-input-padding-right: 44px;
}

body.ui-system :is(
.admin-card, .main-container, .metric-card, .kpi-card, .chart-card, .graph-card,
.page-card, .product-card, .product-main-card, .random-card, .preview-card,
.inquiry-form-card, .history-card, .confirm-card, .maintenance-card,
.order-summary-card, .service-hero-card, .login-container, .tx-queues a
) {
    box-shadow: var(--ui-shadow-card);
}

body.ui-system :is(
.metric-card, .kpi-card, .chart-card, .graph-card, .product-card, .random-card,
.service-hero-card, .card-hover-lift, .tx-queues a
):hover {
    box-shadow: var(--ui-shadow-card-hover);
}

body.ui-system :is(.modal-content, .confirm-modal, .confirm-modal-box, .product-dropdown, .checkboxes-container) {
    box-shadow: var(--ui-shadow-overlay);
}