/* RTL (Right-to-Left) Styles for Arabic Language */

/* Basic RTL Support */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Bootstrap RTL Adjustments */
html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid {
    direction: rtl;
}

html[dir="rtl"] .row {
    direction: rtl;
}

/* Navigation RTL */
html[dir="rtl"] .navbar {
    direction: rtl;
}

html[dir="rtl"] .navbar-nav {
    direction: rtl;
}

html[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .navbar-toggler {
    margin-left: 0;
    margin-right: auto;
}

/* Dropdown RTL */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* Cards RTL */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .card-header {
    text-align: right;
}

html[dir="rtl"] .card-body {
    text-align: right;
}

html[dir="rtl"] .card-footer {
    text-align: right;
}

/* Button Groups RTL */
html[dir="rtl"] .btn-group {
    direction: rtl;
}

html[dir="rtl"] .btn-group > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

html[dir="rtl"] .btn-group > .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

/* Form Controls RTL */
html[dir="rtl"] .form-control {
    text-align: right;
}

html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .form-check {
    text-align: right;
    padding-left: 0;
    padding-right: 1.25rem;
}

html[dir="rtl"] .form-check-input {
    margin-left: 0;
    margin-right: -1.25rem;
}

html[dir="rtl"] .form-check-label {
    padding-left: 0;
    padding-right: .5rem;
}

/* List Groups RTL */
html[dir="rtl"] .list-group-item {
    text-align: right;
}

/* Breadcrumb RTL */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-right: 0;
    padding-left: .5rem;
}

/* Pagination RTL */
html[dir="rtl"] .pagination {
    direction: rtl;
}

html[dir="rtl"] .page-link {
    text-align: center;
}

/* Margin and Padding RTL */
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }

html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }

html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* Text Alignment RTL */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

/* Float RTL */
html[dir="rtl"] .float-left {
    float: right !important;
}

html[dir="rtl"] .float-right {
    float: left !important;
}

/* Border Radius RTL */
html[dir="rtl"] .rounded-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

html[dir="rtl"] .rounded-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

/* Station Detail Page RTL Specific */
html[dir="rtl"] .station-btn {
    margin-left: 0;
    margin-right: .5rem;
}

html[dir="rtl"] .station-thumbnail {
    margin-right: 0;
    margin-left: .75rem;
}

html[dir="rtl"] .related-station-link {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .playlist-item {
    text-align: right;
}

html[dir="rtl"] .review-item {
    border-right: 3px solid #007bff;
    border-left: none;
    padding-right: 1rem;
    padding-left: 0;
}

html[dir="rtl"] .rating-stars {
    direction: rtl;
}

html[dir="rtl"] .rating-stars .star {
    margin-left: 5px;
    margin-right: 0;
}

/* Footer RTL */
html[dir="rtl"] footer {
    text-align: right;
}

html[dir="rtl"] footer .social-links a {
    margin-right: 0;
    margin-left: 1rem;
}

/* Player RTL */
html[dir="rtl"] #globalPlayer {
    direction: rtl;
}

html[dir="rtl"] #globalPlayer .controls {
    direction: rtl;
}

html[dir="rtl"] #globalPlayer .info {
    text-align: right;
}

/* Modal RTL */
html[dir="rtl"] .modal-header {
    text-align: right;
}

html[dir="rtl"] .modal-body {
    text-align: right;
}

html[dir="rtl"] .modal-footer {
    direction: rtl;
    justify-content: flex-start;
}

html[dir="rtl"] .modal-footer .btn {
    margin-left: 0;
    margin-right: .25rem;
}

/* Custom RTL Adjustments */
html[dir="rtl"] .d-flex {
    direction: rtl;
}

html[dir="rtl"] .justify-content-between {
    flex-direction: row-reverse;
}

html[dir="rtl"] .align-items-center {
    direction: rtl;
}

/* Search Form RTL */
html[dir="rtl"] .input-group {
    direction: rtl;
}

html[dir="rtl"] .input-group .form-control {
    text-align: right;
}

html[dir="rtl"] .input-group-append {
    order: -1;
}

html[dir="rtl"] .input-group-prepend {
    order: 1;
}

/* Language Selector RTL */
html[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: .255em;
}

/* Responsive RTL Adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .navbar-collapse {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-nav .nav-link {
        text-align: right;
    }
}

/* Station Info Card RTL */
html[dir="rtl"] .main-station-card {
    text-align: right;
}

html[dir="rtl"] .main-station-card h1 {
    text-align: right;
}

html[dir="rtl"] .main-station-card .btn-group {
    direction: rtl;
}

/* Comments Section RTL */
html[dir="rtl"] .comments-card textarea {
    text-align: right;
}

html[dir="rtl"] .comments-card .form-group label {
    text-align: right;
}

/* Embed Code RTL */
html[dir="rtl"] #embed-code {
    text-align: left; /* Keep embed code left-to-right */
    direction: ltr;
}

/* Statistics RTL */
html[dir="rtl"] .stats-item {
    text-align: right;
}

/* Genre Tags RTL */
html[dir="rtl"] .badge {
    margin-left: .5rem;
    margin-right: 0;
}

/* Loading Indicator RTL */
html[dir="rtl"] .spinner-border {
    margin-left: .5rem;
    margin-right: 0;
}

/* Close Button RTL */
html[dir="rtl"] .close {
    float: left;
}

/* Progress Bar RTL (if any) */
html[dir="rtl"] .progress-bar {
    direction: ltr; /* Keep progress direction consistent */
}

/* Table RTL */
html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* Alert RTL */
html[dir="rtl"] .alert {
    text-align: right;
}

html[dir="rtl"] .alert-dismissible .close {
    left: 0;
    right: auto;
}

/* Basic RTL Support */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Bootstrap RTL Adjustments */
html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid {
    direction: rtl;
}

html[dir="rtl"] .row {
    direction: rtl;
}

/* Navigation RTL */
html[dir="rtl"] .navbar {
    direction: rtl;
}

html[dir="rtl"] .navbar-nav {
    direction: rtl;
}

html[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .navbar-toggler {
    margin-left: 0;
    margin-right: auto;
}

/* Dropdown RTL */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* Cards RTL */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .card-header {
    text-align: right;
}

html[dir="rtl"] .card-body {
    text-align: right;
}

html[dir="rtl"] .card-footer {
    text-align: right;
}

/* Button Groups RTL */
html[dir="rtl"] .btn-group {
    direction: rtl;
}

html[dir="rtl"] .btn-group > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

html[dir="rtl"] .btn-group > .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

/* Form Controls RTL */
html[dir="rtl"] .form-control {
    text-align: right;
}

html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .form-check {
    text-align: right;
    padding-left: 0;
    padding-right: 1.25rem;
}

html[dir="rtl"] .form-check-input {
    margin-left: 0;
    margin-right: -1.25rem;
}

html[dir="rtl"] .form-check-label {
    padding-left: 0;
    padding-right: .5rem;
}

/* List Groups RTL */
html[dir="rtl"] .list-group-item {
    text-align: right;
}

/* Breadcrumb RTL */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-right: 0;
    padding-left: .5rem;
}

/* Pagination RTL */
html[dir="rtl"] .pagination {
    direction: rtl;
}

html[dir="rtl"] .page-link {
    text-align: center;
}

/* Margin and Padding RTL */
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }

html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }

html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* Text Alignment RTL */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

/* Float RTL */
html[dir="rtl"] .float-left {
    float: right !important;
}

html[dir="rtl"] .float-right {
    float: left !important;
}

/* Border Radius RTL */
html[dir="rtl"] .rounded-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

html[dir="rtl"] .rounded-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

/* Station Detail Page RTL Specific */
html[dir="rtl"] .station-btn {
    margin-left: 0;
    margin-right: .5rem;
}

html[dir="rtl"] .station-thumbnail {
    margin-right: 0;
    margin-left: .75rem;
}

html[dir="rtl"] .related-station-link {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .playlist-item {
    text-align: right;
}

html[dir="rtl"] .review-item {
    border-right: 3px solid #007bff;
    border-left: none;
    padding-right: 1rem;
    padding-left: 0;
}

html[dir="rtl"] .rating-stars {
    direction: rtl;
}

html[dir="rtl"] .rating-stars .star {
    margin-left: 5px;
    margin-right: 0;
}

/* Footer RTL */
html[dir="rtl"] footer {
    text-align: right;
}

html[dir="rtl"] footer .social-links a {
    margin-right: 0;
    margin-left: 1rem;
}

/* Player RTL */
html[dir="rtl"] #globalPlayer {
    direction: rtl;
}

html[dir="rtl"] #globalPlayer .controls {
    direction: rtl;
}

html[dir="rtl"] #globalPlayer .info {
    text-align: right;
}

/* Modal RTL */
html[dir="rtl"] .modal-header {
    text-align: right;
}

html[dir="rtl"] .modal-body {
    text-align: right;
}

html[dir="rtl"] .modal-footer {
    direction: rtl;
    justify-content: flex-start;
}

html[dir="rtl"] .modal-footer .btn {
    margin-left: 0;
    margin-right: .25rem;
}

/* Custom RTL Adjustments */
html[dir="rtl"] .d-flex {
    direction: rtl;
}

html[dir="rtl"] .justify-content-between {
    flex-direction: row-reverse;
}

html[dir="rtl"] .align-items-center {
    direction: rtl;
}

/* Search Form RTL */
html[dir="rtl"] .input-group {
    direction: rtl;
}

html[dir="rtl"] .input-group .form-control {
    text-align: right;
}

html[dir="rtl"] .input-group-append {
    order: -1;
}

html[dir="rtl"] .input-group-prepend {
    order: 1;
}

/* Language Selector RTL */
html[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: .255em;
}

/* Responsive RTL Adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .navbar-collapse {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-nav .nav-link {
        text-align: right;
    }
}

/* Station Info Card RTL */
html[dir="rtl"] .main-station-card {
    text-align: right;
}

html[dir="rtl"] .main-station-card h1 {
    text-align: right;
}

html[dir="rtl"] .main-station-card .btn-group {
    direction: rtl;
}

/* Comments Section RTL */
html[dir="rtl"] .comments-card textarea {
    text-align: right;
}

html[dir="rtl"] .comments-card .form-group label {
    text-align: right;
}

/* Embed Code RTL */
html[dir="rtl"] #embed-code {
    text-align: left; /* Keep embed code left-to-right */
    direction: ltr;
}

/* Statistics RTL */
html[dir="rtl"] .stats-item {
    text-align: right;
}

/* Genre Tags RTL */
html[dir="rtl"] .badge {
    margin-left: .5rem;
    margin-right: 0;
}

/* Loading Indicator RTL */
html[dir="rtl"] .spinner-border {
    margin-left: .5rem;
    margin-right: 0;
}

/* Close Button RTL */
html[dir="rtl"] .close {
    float: left;
}

/* Progress Bar RTL (if any) */
html[dir="rtl"] .progress-bar {
    direction: ltr; /* Keep progress direction consistent */
}

/* Table RTL */
html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* Alert RTL */
html[dir="rtl"] .alert {
    text-align: right;
}

html[dir="rtl"] .alert-dismissible .close {
    left: 0;
    right: auto;
}