/* ---- RTL container ---- */
.rtl-form { direction: rtl; }

/* text alignment */
.rtl-form .form-group,
.rtl-form label,
.rtl-form .invalid-feedback,
.rtl-form .valid-feedback { text-align: right; }

/* bootstrap-like feedback always visible when added */
.rtl-form .invalid-feedback,
.rtl-form .valid-feedback {
    display: block;           /* ensure it shows without .was-validated */
    margin-top: .25rem;
    font-size: .875rem;
    line-height: 1.3;
}

/* colors (Bootstrap-compatible) */
.rtl-form .invalid-feedback { color: #dc3545; }
.rtl-form .valid-feedback   { color: #198754; }

/* red border for invalid inputs */
.rtl-form .is-invalid,
.rtl-form .is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.1);
}

/* green border for valid inputs (optional) */
.rtl-form .is-valid,
.rtl-form .is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 .25rem rgba(25,135,84,.1);
}

/* ---- intl-tel-input RTL fixes ---- */
.rtl-form .iti { width: 100%; direction: rtl; }
.rtl-form .iti--separate-dial-code .iti__selected-flag {
    right: 0; left: auto;     /* move flag block to the right */
}
.rtl-form .iti--separate-dial-code input.iti__tel-input {
    padding-right: 88px !important; /* leave room for dial code block */
    padding-left: .75rem;
    text-align: left;                  /* keep digits LTR for readability */
    direction: ltr;                    /* numbers flow correctly */
}

/* make error message for phone appear below the whole iti block */
.rtl-form .iti + .invalid-feedback { margin-top: .35rem; }

/* input groups: message under the whole group */
.rtl-form .input-group + .invalid-feedback { margin-top: .35rem; }



/* remove Bootstrap's invalid/valid background icons */
.rtl-form .form-control.is-invalid,
.rtl-form .was-validated .form-control:invalid,
.rtl-form .form-select.is-invalid,
.rtl-form .was-validated .form-select:invalid,
.rtl-form .form-control.is-valid,
.rtl-form .was-validated .form-control:valid {
    background-image: none !important;
    background-repeat: unset !important;
    background-position: unset !important;
    background-size: unset !important;
    padding-right: .75rem; /* reclaim space Bootstrap reserved for the icon */
}

/* phone input inside intl-tel-input */
.rtl-form .iti .iti__tel-input.is-invalid,
.rtl-form .iti .iti__tel-input.is-valid {
    background-image: none !important;
    padding-right: 88px !important; /* keep room for dial code block */
}

/* keep the red/green borders from earlier fix */
.rtl-form .is-invalid,
.rtl-form .is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.1);
}
.rtl-form .is-valid,
.rtl-form .is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 .25rem rgba(25,135,84,.1);
}

.rtl-form .invalid-feedback {
    margin-top: .5rem;
    margin-bottom: .75rem;
    padding-top: .25rem;          /* so the line isn’t glued to text */
    border-top: 1px solid rgba(220,53,69,.15); /* faint line */
}

/* keep consistency for phone/input-groups */
.rtl-form .iti + .invalid-feedback,
.rtl-form .input-group + .invalid-feedback {
    margin-top: .5rem;
    margin-bottom: .75rem;
    padding-top: .25rem;
    border-top: 1px solid rgba(220,53,69,.15);
}

/* more space between input and error text */
.rtl-form .invalid-feedback {
    margin-top: .75rem;      /* was .25/.5 — increase gap */
    margin-bottom: 1rem;     /* extra room before next field */
    padding-top: 0;          /* no internal padding needed */
    border-top: 0 !important;/* kill any separator line */
}

/* keep phone/input-group consistent */
.rtl-form .iti + .invalid-feedback,
.rtl-form .input-group + .invalid-feedback {
    margin-top: .75rem;
    margin-bottom: 1rem;
    padding-top: 0;
    border-top: 0 !important;
}

/* base vertical rhythm */
.rtl-form .form-group { margin-bottom: 1rem; }

/* when a field is invalid, add more room so the next label never crowds it */
.rtl-form .form-group.has-error { margin-bottom: 1.5rem; }

/* error text spacing (keeps phone/email labels apart) */
.rtl-form .form-group > .invalid-feedback {
    margin-top: .75rem;
    margin-bottom: .5rem;
}

/* keep intl-tel-input tidy (input remains LTR for digits) */
.rtl-form .iti { direction: rtl; width: 100%; }
.rtl-form .iti--separate-dial-code .iti__selected-flag { right: 0; left: auto; }
.rtl-form .iti--separate-dial-code input.iti__tel-input {
    direction: ltr; text-align: left;
    padding-right: 88px !important;
}

/* tighter rhythm for errors */
.rtl-form .form-group { margin-bottom: .875rem; }          /* was 1rem */
.rtl-form .form-group.has-error { margin-bottom: 1.1rem; }  /* was 1.5rem */

/* error text spacing */
.rtl-form .form-group > .invalid-feedback {
    margin-top: .5rem;      /* was .75rem */
    margin-bottom: .4rem;   /* was .5–1rem */
}

/* keep phone/input-group consistent */
.rtl-form .iti + .invalid-feedback,
.rtl-form .input-group + .invalid-feedback {
    margin-top: .5rem;
    margin-bottom: .4rem;
}

/* Make the dial-code panel transparent and merge with the input */
.rtl-form .iti--separate-dial-code .iti__flag-container,
.rtl-form .iti--separate-dial-code .iti__selected-flag {
    background: transparent !important;   /* kill the gray */
    box-shadow: none !important;
}

/* Some themes add a hover bg—kill it too */
.rtl-form .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background: transparent !important;
}

/* Ensure full height and nice rounding like the input */
.rtl-form .iti--separate-dial-code .iti__selected-flag {
    height: 100%;
    border-radius: 12px 0 0 12px;         /* LTR layout */
}

/* If your flag block is on the RIGHT (RTL layout), use this instead: */
.rtl-form .rtl-flag-right .iti--separate-dial-code .iti__selected-flag {
    border-radius: 0 12px 12px 0;
}

/* Keep the input background white and spacing correct */
.iti input.iti__tel-input {
    background-color: #fff;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag, .iti--separate-dial-code .iti__selected-flag {
    background: unset!important;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.permission-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
}
.permission-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(204, 108, 82, 0.5);
}
.permission-category {
    background: rgba(204, 108, 82, 0.1);
    border-left: 3px solid #CC6C52;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.permission-category h4 {
    color: #CC6C52;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.permission-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.permission-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #CC6C52;
}
.permission-checkbox label {
    cursor: pointer;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}
.select-all-category {
    background: rgba(204, 108, 82, 0.2);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.select-all-category input {
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.select-all-category label {
    font-weight: 600;
    color: #CC6C52;
    margin: 0;
    cursor: pointer;
}

/* Add this to your styles or in a <style> tag */

/* Input fields - default state */

/* Placeholder color */
.form-control::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Input fields - focused state */
.form-control:focus {
    background-color: white !important;
    color: #333 !important;
    border-color: #CC6C52 !important;
    box-shadow: 0 0 0 0.2rem rgba(204, 108, 82, 0.25) !important;
}

/* Placeholder when focused */
.form-control:focus::placeholder {
    color: #999 !important;
    opacity: 0.7 !important;
}

/* Textarea specific */
textarea.form-control {
    background-color: white !important;
    color: #333 !important;
}

textarea.form-control:focus {
    background-color: white !important;
    color: #333 !important;
}

textarea.form-control::placeholder {
    color: #999 !important;
}

.nav-tabs-orders {
    border-bottom: 2px solid #a97061;
    margin-bottom: 1.5rem;
}
.nav-tabs-orders .nav-link {
    color: #6c757d;
    border: none;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    position: relative;
}
.nav-tabs-orders .nav-link:hover {
    color: #92a1ae;
    border-color: transparent;
}
.nav-tabs-orders .nav-link.active {
    color: #CC6C52;
    background-color: transparent;
    border-bottom: 3px solid #CC6C52;
}
.tab-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
}

.mt-30 {
    margin-top: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.message-card {
    background: #1a1d29;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.message-header {
    border-bottom: 1px solid #2d3142;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.message-content {
    background: #13151f;
    padding: 20px;
    border-radius: 6px;
    margin: 15px 0;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.info-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #2d3142;
}
.info-row:last-child {
    border-bottom: none;
}
.info-label {
    font-weight: 600;
    color: #8b92a7;
    min-width: 150px;
    font-size: 13px;
}
.info-value {
    color: #fff;
    font-size: 14px;
}
.status-badge-large {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 600;
}
.reply-section {
    background: #13151f;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}
.admin-reply-box {
    background: #1a1d29;
    border-left: 4px solid #28a745;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}
.attachment-box {
    background: #13151f;
    padding: 15px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.action-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-reply {
    background: #007bff;
    color: white;
}
.btn-reply:hover {
    background: #0056b3;
}
.btn-close-msg {
    background: #6c757d;
    color: white;
}
.btn-close-msg:hover {
    background: #545b62;
}
.btn-delete {
    background: #dc3545;
    color: white;
}
.btn-delete:hover {
    background: #c82333;
}