:root {
    --gold: #FF4500;
    --soft-gold: #FF7E45;
    --black: #FFFFFF;
    --soft-black: #F8F9FA;
    --soft-gray: #F5F5F5;
    --white: #FFFFFF;
    --true-black: #000000; /* Added true black color */
}

body {
    background-color: var(--white);
    color: var(--soft-black);
}

.navbar {
    background-color: var(--gold); /* Lava Orange */
}

.navbar-brand, .nav-link {
    color: #FFFFFF !important; /* Changed to white */
}

.nav-link:hover {
    color: #F0F0F0 !important; /* Slightly darker white for hover */
}

.btn-primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--soft-black);
}

.btn-primary:hover {
    background-color: var(--soft-gold);
    border-color: var(--soft-gold);
    color: var(--soft-black);
}

.card {
    border: 1px solid var(--soft-gray);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    background-color: var(--soft-gray);
    color: var(--soft-black);
    border-bottom: 2px solid var(--gold);
}

.card-title {
    color: var(--gold);
}

.form-control {
    background-color: var(--soft-gray);
    border: 1px solid var(--soft-gray);
    color: var(--true-black) !important; /* Changed to true black with !important */
}

.form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(255, 69, 0, 0.25);
    color: var(--true-black) !important; /* Ensure text stays black when focused */
}

/* Make placeholders black */
::placeholder {
    color: var(--true-black) !important;
    opacity: 0.7 !important;
}

/* Specific browser implementations for placeholders */
::-webkit-input-placeholder {
    color: var(--true-black) !important;
    opacity: 0.7 !important;
}

::-moz-placeholder {
    color: var(--true-black) !important;
    opacity: 0.7 !important;
}

:-ms-input-placeholder {
    color: var(--true-black) !important;
    opacity: 0.7 !important;
}

:-moz-placeholder {
    color: var(--true-black) !important;
    opacity: 0.7 !important;
}

.form-select {
    background-color: var(--soft-gray);
    border: 1px solid var(--soft-gray);
    color: var(--true-black) !important; /* Changed to true black with !important */
}

.form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(255, 69, 0, 0.25);
    color: var(--true-black) !important; /* Ensure text stays black when focused */
}

/* Style dropdown options */
select option {
    color: var(--true-black) !important;
    background-color: var(--white);
}

/* Style for dropdown arrow */
select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-label {
    color: var(--true-black) !important;
}

.form-check-input {
    border-color: var(--true-black) !important;
}

.form-check-input:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

.input-group-text {
    background-color: var(--soft-gray);
    border: 1px solid var(--soft-gray);
    color: var(--true-black) !important;
}

input[type="date"], 
input[type="time"], 
input[type="datetime-local"] {
    color: var(--true-black) !important;
}

input[type="file"]::file-selector-button {
    background-color: var(--soft-gray);
    color: var(--true-black) !important;
    border: 1px solid var(--soft-gray);
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--gold);
    color: var(--white) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    color: var(--true-black) !important;
}

.table {
    color: var(--soft-black);
}

.table thead th {
    background-color: var(--soft-gray);
    color: var(--soft-black);
}

.carousel-caption {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--gold) !important;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: var(--gold);
    border-radius: 50%;
}

.carousel-indicators button {
    background-color: var(--gold) !important;
}

.pagination .page-link {
    background-color: var(--soft-gray);
    border-color: var(--gold);
    color: var(--soft-black);
}

.pagination .page-link:hover {
    background-color: var(--gold);
    color: var(--soft-black);
}

.pagination .active .page-link {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--soft-black);
}

/* Custom animations */
.btn, .nav-link, .card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.3);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--soft-gold);
}

/* Product cards */
.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-title {
    color: var(--soft-black);
    font-weight: bold;
}

.product-price {
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Admin section */
.admin-sidebar {
    background-color: var(--soft-black);
    color: var(--soft-gray);
}

.admin-sidebar .nav-link {
    color: var(--soft-gray) !important;
}

.admin-sidebar .nav-link:hover {
    color: var(--gold) !important;
    background-color: var(--black);
}

/* Pagination */
.page-link {
    color: var(--soft-black);
}

.page-item.active .page-link {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--soft-black);
}

/* Alert messages */
.alert-success {
    background-color: var(--soft-gray);
    border-color: var(--gold);
    color: var(--soft-black);
}

/* Star Rating System */
.rating-stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating input {
    display: none;
}

.star-rating label {
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0 0.1rem;
    transition: all 0.3s ease;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--gold);
    transform: scale(1.2);
}

.star-rating label:hover i,
.star-rating label:hover ~ label i,
.star-rating input:checked ~ label i {
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
}

/* Review items styling */
.review-item {
    transition: all 0.3s ease;
}

.review-item:hover {
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.2);
    transform: translateY(-2px);
}

/* Product rating display on cards */
.product-rating {
    display: flex;
    align-items: center;
}

.product-rating i {
    margin-right: 2px;
}

/* Gold outline button */
.btn-outline-gold {
    color: var(--gold);
    background-color: transparent;
    border-color: var(--gold);
    transition: all 0.3s ease;
}

.btn-outline-gold:hover {
    color: var(--soft-black);
    background-color: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 69, 0, 0.3);
}

.btn-outline-gold:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.25);
}

/* Text color utility classes */
.text-gold {
    color: var(--gold) !important;
}

/* Mobile cart button styling */
@media (max-width: 767.98px) {
    .mobile-cart-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }
}

/* Rating modal styling */
.modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal-header .btn-close-white {
    color: var(--gold);
    opacity: 0.8;
}

.modal-header .btn-close-white:hover {
    opacity: 1;
}

/* RTL Support for Farsi Language */
html[dir="rtl"] .btn i {
    margin-right: 0;
    margin-left: 0.25rem;
}

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

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

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

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

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

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

html[dir="rtl"] .product-rating i {
    margin-right: 0;
    margin-left: 2px;
}

html[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

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

/* Fix for comment submit button in RTL */
html[dir="rtl"] button i.fas.fa-paper-plane {
    transform: scaleX(-1);
}

/* Additional RTL fixes for advertisements */
html[dir="rtl"] .carousel-caption {
    text-align: right !important;
}

html[dir="rtl"] .carousel-control-prev {
    right: 0;
    left: auto;
    transform: scaleX(-1);
}

html[dir="rtl"] .carousel-control-next {
    left: 0;
    right: auto;
    transform: scaleX(-1);
}

/* Specific fixes for advertisement captions in RTL mode */
html[dir="rtl"] .advertisement-caption {
    text-align: right !important;
    direction: rtl !important;
    /* Ensure the caption stays centered in RTL mode */
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

html[dir="rtl"] .advertisement-title,
html[dir="rtl"] .advertisement-description {
    text-align: center !important;
}

/* Additional styling for advertisement captions */
.advertisement-caption {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    text-align: center !important;
    z-index: 10;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 5px !important;
}

/* Ensure RTL mode keeps caption at the bottom */
html[dir="rtl"] .advertisement-caption {
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}

.advertisement-title {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.8rem !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.advertisement-description {
    font-family: 'Poppins', sans-serif !important;
    color: white !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 1.1rem !important;
}

/* RTL Support for TOORKAN */
body.rtl {
    direction: rtl;
    text-align: right;
}

body.ltr {
    direction: ltr;
    text-align: left;
}

/* Advertisement specific RTL fixes */
body.rtl .advertisement-container,
body.rtl .advertisement-text {
    text-align: right !important;
}

body.ltr .advertisement-container,
body.ltr .advertisement-text {
    text-align: left !important;
}

/* Force center alignment for specific elements regardless of language */
.advertisement-center {
    text-align: center !important;
}

/* Fix for Bootstrap columns in RTL mode */
body.rtl .row {
    direction: rtl;
}

body.rtl .text-md-end {
    text-align: left !important;
}

body.rtl .text-md-start {
    text-align: right !important;
}

/* Fix for form elements in RTL mode */
body.rtl .form-control {
    text-align: right;
}

/* Fix for input groups in RTL mode */
body.rtl .input-group > .form-control:not(:last-child),
body.rtl .input-group > .custom-select:not(:last-child) {
    border-radius: 0 0.25rem 0.25rem 0;
}

body.rtl .input-group > .input-group-append > .btn,
body.rtl .input-group > .input-group-append > .input-group-text,
body.rtl .input-group > .input-group-prepend:not(:first-child) > .btn,
body.rtl .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-radius: 0.25rem 0 0 0.25rem;
}
