/**
 * Vlastní barevné schéma pro SPA web
 * Přepisuje Bootstrap CSS proměnné
 */

:root {
    /* Nové barvy */
    --color1: #ffae8c;  /* Světle oranžová - primární barva */
    --color2: #fff75d;  /* Žlutá - sekundární/accent barva */
    --color3: #3f0e03;  /* Tmavě hnědá - tmavý text, tmavé pozadí */
    --color4: #908279;  /* Šedohnědá - sekundární texty */
    --color5: #fffaf2;  /* Velmi světlá krémová - světlé pozadí */
    
    /* Přepis Bootstrap proměnných */
    --bs-primary: var(--color1);
    --bs-primary-rgb: 255, 174, 140;
    --bs-secondary: var(--color4);
    --bs-secondary-rgb: 144, 130, 121;
    --bs-dark: var(--color3);
    --bs-dark-rgb: 63, 14, 3;
    --bs-light: var(--color5);
    --bs-light-rgb: 255, 250, 242;
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    
    /* Textové barvy pro lepší čitelnost */
    --text-primary: var(--color3);
    --text-secondary: var(--color4);
    --text-light: var(--color5);
    --text-on-dark: var(--color5);
    --text-on-primary: var(--color3);
}

/* Obecné úpravy pro čitelnost */
body {
    background-color: var(--color5);
    color: var(--text-primary);
}

/* Tlačítka */
.btn-primary {
    background-color: var(--color1);
    border-color: var(--color1);
    color: var(--color3);
}

.btn-primary:hover {
    background-color: var(--color4);
    border-color: var(--color4);
    color: var(--color5);
}

.btn-primary-outline-0 {
    background-color: var(--color1);
    color: var(--color3) !important;
}

.btn-primary-outline-0:hover {
    background-color: var(--color4);
    color: var(--color5) !important;
}

.btn-light-outline-0 {
    color: var(--color1) !important;
}

.btn-light-outline-0:hover {
    background-color: var(--color1);
    color: var(--color3) !important;
}

/* Topbar */
.topbar {
    background: var(--color3) !important;
    color: var(--color5);
}

.topbar a {
    color: var(--color5) !important;
}

.topbar a:hover {
    color: var(--color2) !important;
}

/* Navbar */
.navbar {
    background-color: var(--color5) !important;
}

.navbar .navbar-nav .nav-link {
    color: var(--text-primary);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--color1);
}

.navbar-brand h1 {
    color: var(--color1);
}

/* Texty */
.text-primary {
    color: var(--color1) !important;
}

.text-secondary {
    color: var(--color4) !important;
}

.text-dark {
    color: var(--color3) !important;
}

.text-white {
    color: var(--color5) !important;
}

/* Pozadí */
.bg-primary {
    background-color: var(--color1) !important;
}

.bg-secondary {
    background-color: var(--color4) !important;
}

.bg-dark {
    background-color: var(--color3) !important;
}

.bg-light {
    background-color: var(--color5) !important;
}

/* Services */
.services {
    background-color: var(--color5);
}

.services .services-item {
    background-color: var(--color5);
    border-color: var(--color1);
}

.services .services-item:hover {
    background: var(--color1) !important;
    border-color: var(--color4) !important;
}

.services .services-item:hover .services-content p,
.services .services-item:hover .services-content h3 {
    color: var(--color3);
}

.services .services-item:hover .services-content a.btn {
    background: var(--color3);
    color: var(--color5) !important;
}

.services .services-item:hover .services-content a.btn:hover {
    background: var(--color4);
    color: var(--color5) !important;
}

/* Pricing sekce */
.pricing {
    background: var(--color3) !important;
}

.pricing h1,
.pricing p {
    color: var(--color5) !important;
}

/* Kupóny na price.php */
#coupons {
    background: var(--color3) !important;
}

#coupons h1,
#coupons p {
    color: var(--color5) !important;
}

.pricing-item .pricing-content {
    background: var(--color5) !important;
}

.pricing-item .pricing-content h1,
.pricing-item .pricing-content h5 {
    color: var(--color3) !important;
}

.pricing-item .pricing-content p {
    color: var(--text-primary) !important;
}

/* Tabulka ceníku */
.table-primary {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
}

.table-primary th {
    color: var(--color3) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 174, 140, 0.1);
}

/* Footer */
.footer {
    background: var(--color3) !important;
}

.footer .footer-item a,
.footer .footer-item p {
    color: var(--color5);
}

.footer .footer-item a:hover {
    color: var(--color1) !important;
}

.footer .footer-item h4 {
    color: var(--color5);
}

.footer .text-muted {
    color: var(--color4) !important;
}

.footer .text-white {
    color: var(--color5) !important;
}

/* Copyright */
.copyright {
    background: var(--color3) !important;
    border-top-color: rgba(255, 250, 242, 0.2) !important;
}

.copyright .text-light,
.copyright a {
    color: var(--color5) !important;
}

.copyright .text-white {
    color: var(--color5) !important;
}

/* Appointment formulář */
.appointment-form {
    background: linear-gradient(rgba(63, 14, 3, 0.6), rgba(63, 14, 3, 0.6)) !important;
}

.appointment-form h1,
.appointment-form p,
.appointment-form label {
    color: var(--color5) !important;
}

/* Text v polích appointment formuláře - bílý pro čitelnost na tmavém pozadí */
.appointment-form .form-control,
.appointment-form .form-select,
.appointment-form input,
.appointment-form select,
.appointment-form textarea,
.appointment-form input[type="text"],
.appointment-form input[type="email"],
.appointment-form input[type="tel"],
.appointment-form input[type="date"],
.appointment-form input[type="time"] {
    color: #ffffff !important;
}

.appointment-form .form-control::placeholder,
.appointment-form .form-select::placeholder,
.appointment-form input::placeholder,
.appointment-form textarea::placeholder,
.appointment-form input[type="text"]::placeholder,
.appointment-form input[type="email"]::placeholder,
.appointment-form input[type="tel"]::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Selecty v appointment formuláři - bílý text, ale bílé pozadí pro dropdown */
.appointment-form .form-select option {
    background-color: #ffffff !important;
    color: var(--color3) !important;
}

/* Labely v appointment formuláři */
.appointment-form .form-label,
.appointment-form label,
.appointment-form .small {
    color: var(--color5) !important;
}

/* Text v info o variantě */
.appointment-form #variant-info,
.appointment-form #variant-info *,
.appointment-form #variant-info span {
    color: var(--color5) !important;
}

/* Všechny texty v appointment formuláři */
.appointment-form .text-white,
.appointment-form input.text-white,
.appointment-form select.text-white,
.appointment-form textarea.text-white {
    color: #ffffff !important;
}

/* Input date a time - bílý text */
.appointment-form input[type="date"],
.appointment-form input[type="time"] {
    color: #ffffff !important;
}

.appointment-form input[type="date"]::-webkit-calendar-picker-indicator,
.appointment-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.appointment-time {
    background: linear-gradient(rgba(255, 250, 242, 0.3), rgba(255, 250, 242, 0.3)) !important;
}

.appointment-time h1,
.appointment-time p {
    color: var(--color3) !important;
}

/* Formulářové prvky */
.form-control,
.form-select {
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color1);
    box-shadow: 0 0 0 0.25rem rgba(255, 174, 140, 0.25);
}

/* Badge */
.badge.bg-primary {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
}

.badge.bg-secondary {
    background-color: var(--color4) !important;
    color: var(--color5) !important;
}

.badge.bg-success {
    background-color: #10b981 !important;
}

.badge.bg-warning {
    background-color: var(--color2) !important;
    color: var(--color3) !important;
}

.badge.bg-danger {
    background-color: #ef4444 !important;
}

.badge.bg-info {
    background-color: #3b82f6 !important;
}

/* Card */
.card {
    background-color: var(--color5);
    border-color: rgba(255, 174, 140, 0.2);
}

.card-header {
    background-color: var(--color1);
    color: var(--color3);
    border-color: var(--color1);
}

/* Breadcrumb */
.bg-breadcrumb {
    background: linear-gradient(rgba(63, 14, 3, 0.7), rgba(63, 14, 3, 0.7)), url(../img/appointment-background.jpg) !important;
}

.bg-breadcrumb h3,
.bg-breadcrumb .text-white {
    color: var(--color5) !important;
}

.breadcrumb-item a {
    color: var(--color5);
}

.breadcrumb-item.active {
    color: var(--color2);
}

/* Carousel */
#carouselId .carousel-indicators li.active {
    background: var(--color1);
    border-color: var(--color1);
}

/* About sekce */
.about {
    background-color: var(--color5);
}

/* Selecty v rezervačním formuláři - zachovat bílé pozadí pro čitelnost */
#appointment-service,
#appointment-variant,
#appointment-service-index,
#appointment-variant-index {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--color3) !important;
}

#appointment-service option,
#appointment-variant option,
#appointment-service-index option,
#appointment-variant-index option {
    background-color: #ffffff;
    color: var(--color3);
}

#appointment-service:focus,
#appointment-variant:focus,
#appointment-service-index:focus,
#appointment-variant-index:focus {
    border-color: var(--color1) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 174, 140, 0.25);
}

/* Linky */
a {
    color: var(--color1);
}

a:hover {
    color: var(--color4);
}

/* Alert */
.alert-primary {
    background-color: rgba(255, 174, 140, 0.2);
    border-color: var(--color1);
    color: var(--color3);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #065f46;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #991b1b;
}

/* Table */
.table-hover > tbody > tr:hover > td {
    background-color: rgba(255, 174, 140, 0.1);
}

/* Admin panel - zachovat původní barvy */
.admin-sidebar {
    /* Admin panel má vlastní barvy, necháme je */
}

/* Specifické úpravy pro lepší čitelnost */
.pricing-content .display-4 {
    color: var(--color3) !important;
}

.pricing-content h5 {
    color: var(--color1) !important;
}

/* Text v pricing sekci na index.php */
.pricing h1.text-white {
    color: var(--color5) !important;
}

/* Spinner v pricing sekci */
.pricing .spinner-border {
    color: var(--color5) !important;
}

/* Text v pricing carousel */
.pricing-carousel .text-white {
    color: var(--color5) !important;
}

/* Border pro pricing content */
.pricing-content {
    border-color: var(--color1) !important;
}

/* Hover efekty */
.pricing-item:hover .pricing-content {
    border-color: var(--color4) !important;
}

/* Linky v pricing */
.pricing-content a {
    color: var(--color3) !important;
}

.pricing-content a:hover {
    background-color: var(--color4) !important;
    color: var(--color5) !important;
}

/* Table text */
.table td,
.table th {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
}

/* Badge text */
.badge {
    color: var(--color3) !important;
}

.badge.bg-warning {
    color: var(--color3) !important;
}

/* Alert text */
.alert {
    color: var(--text-primary);
}

/* Form control text */
.form-control,
.form-select {
    color: var(--text-primary) !important;
}

/* Navbar toggle */
.navbar-toggler {
    border-color: var(--color1);
}

.navbar-toggler .fa-bars {
    color: var(--color1);
}

/* Border top v navbar */
.navbar-nav.border-top {
    border-color: rgba(255, 174, 140, 0.2) !important;
}

/* Další úpravy pro čitelnost */
.text-muted {
    color: var(--color4) !important;
}

/* Hover stavy */
.btn:hover {
    opacity: 0.9;
}

/* Active stavy */
.nav-link.active {
    color: var(--color1) !important;
    font-weight: 600;
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--color1) !important;
}

/* Carousel buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--color1);
    border-radius: 50%;
}

/* Services item border */
.services-item.border-primary {
    border-color: var(--color1) !important;
}

/* Pricing carousel navigation */
.pricing-carousel .owl-nav .owl-prev:hover,
.pricing-carousel .owl-nav .owl-next:hover {
    color: var(--color1) !important;
}

/* Contact section */
.contact-form {
    background: rgba(255, 250, 242, 0.9) !important;
}

/* Appointment time background */
.appointment-time {
    color: var(--color3) !important;
}

.appointment-time h1,
.appointment-time p {
    color: var(--color3) !important;
}

.appointment-time .text-dark {
    color: var(--color3) !important;
}

/* Select dropdown arrow */
.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='%233f0e03' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Input placeholder */
.form-control::placeholder,
.form-select::placeholder {
    color: var(--color4);
    opacity: 0.7;
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--color1);
    box-shadow: 0 0 0 0.25rem rgba(255, 174, 140, 0.25);
}

/* Disabled states */
.form-control:disabled,
.form-select:disabled {
    background-color: rgba(255, 250, 242, 0.5);
    color: var(--color4);
}

/* Link colors in content */
.content a,
p a {
    color: var(--color1);
    text-decoration: none;
}

.content a:hover,
p a:hover {
    color: var(--color4);
    text-decoration: underline;
}

/* Inline styly - přepis pro inline style atributy */
[style*="color: white"],
[style*="color: white;"] {
    color: var(--color5) !important;
}

[style*="background: var(--bs-primary)"],
[style*="background:var(--bs-primary)"] {
    background: var(--color1) !important;
}

[style*="background: var(--bs-dark)"],
[style*="background:var(--bs-dark)"] {
    background: var(--color3) !important;
}

/* Text v topbaru */
.topbar .text-light {
    color: var(--color5) !important;
}

.topbar .text-primary {
    color: var(--color2) !important;
}

/* Border pro ikony v topbaru */
.topbar .btn-square {
    border-color: var(--color5) !important;
    color: var(--color5) !important;
}

.topbar .btn-square:hover {
    background-color: var(--color1) !important;
    border-color: var(--color1) !important;
    color: var(--color3) !important;
}

/* Carousel caption text */
.carousel-caption h4,
.carousel-caption h1,
.carousel-caption p {
    color: var(--color3) !important;
}

/* About sekce */
.about {
    background-color: var(--color5);
}

/* Services sekce */
.services {
    background-color: var(--color5);
}

/* Pricing sekce - texty */
.pricing h1,
.pricing .display-4,
.pricing p,
.pricing .fs-5 {
    color: var(--color5) !important;
}

/* Footer texty */
.footer .text-secondary {
    color: var(--color4) !important;
}

.footer .text-muted {
    color: var(--color4) !important;
}

/* Breadcrumb */
.breadcrumb-item a {
    color: var(--color5);
}

.breadcrumb-item.active {
    color: var(--color2);
}

/* Table hover */
.table-hover tbody tr:hover td {
    background-color: rgba(255, 174, 140, 0.1) !important;
}

/* Form labels */
.form-label {
    color: var(--text-primary);
}

/* Card body text */
.card-body {
    color: var(--text-primary);
}

/* Pricing item text */
.pricing-item .pricing-content {
    color: var(--text-primary) !important;
    background-color: var(--color5) !important;
}

.pricing-item .pricing-content .text-muted {
    color: var(--color4) !important;
}

/* Všechny texty v pricing-content musí být tmavé */
.pricing-item .pricing-content p,
.pricing-item .pricing-content h1,
.pricing-item .pricing-content h5,
.pricing-item .pricing-content .display-4,
.pricing-item .pricing-content small,
.pricing-item .pricing-content .text-dark {
    color: var(--color3) !important;
}

.pricing-item .pricing-content .text-primary {
    color: var(--color1) !important;
}

.pricing-item .pricing-content .text-muted {
    color: var(--color4) !important;
}

/* H1 v pricing-content */
.pricing-item .pricing-content h1.display-4 {
    color: var(--color3) !important;
}

.pricing-item .pricing-content h1.display-4 small {
    color: var(--color4) !important;
}

/* H5 v pricing-content */
.pricing-item .pricing-content h5 {
    color: var(--color1) !important;
}

/* Specifické styly pro kupóny na price.php - sekce #coupons */
#coupons .pricing-content,
#coupons .pricing-item .pricing-content {
    background-color: var(--color5) !important;
}

#coupons .pricing-content *,
#coupons .pricing-item .pricing-content * {
    color: var(--color3) !important;
}

#coupons .pricing-content .text-primary,
#coupons .pricing-item .pricing-content .text-primary,
#coupons .pricing-content .fa-check.text-primary,
#coupons .pricing-item .pricing-content .fa-check.text-primary {
    color: var(--color1) !important;
}

#coupons .pricing-content .text-muted,
#coupons .pricing-item .pricing-content .text-muted,
#coupons .pricing-content h1.display-4 small,
#coupons .pricing-item .pricing-content h1.display-4 small {
    color: var(--color4) !important;
}

#coupons .pricing-content h5,
#coupons .pricing-item .pricing-content h5 {
    color: var(--color1) !important;
}

#coupons .pricing-content h1.display-4,
#coupons .pricing-item .pricing-content h1.display-4 {
    color: var(--color3) !important;
}

#coupons .pricing-content p,
#coupons .pricing-item .pricing-content p {
    color: var(--color3) !important;
}

