/* Общие стили */

body {

    font-family: 'Aldhabi';

    background-color: #f8f9fa;

    color: #0a0a0a;

}



.navbar {


    background-color:  #701074 !important;

    color: #fff !important;

    font-weight: 1.2rem;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    padding: 0.8rem 1rem;

}



.navbar-brand img{

    width: 75px;

}



.nav-link {

    color: #f1e9e9 !important;


    background-color:  #701074;

    font-size: 1.2rem;

    padding: 0.5rem 1rem;

    transition: background-color 0.3s ease, color 0.3s ease;

}



.nav-link:hover {


    background-color: #be1ac4;;

    color: #0b0b0b;

    border-radius: 5px;

}



.navbar-button {


    background-color: #be1ac4;

    /* background-color: #107778; */

    color: #f2ebeb;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 5px;

    transition: background-color 0.3s ease;

    cursor: pointer;

    font-size: 1.2rem;



}



.navbar-button:hover {


    background-color: #861c8a;

    color: #fff;

    text-decoration-line: none;

}



.navbar-text {

    color: #fff;

    font-size: 1rem;

    margin-right: 10px;

    text-decoration-line: none;

}



.jumbotron {

    font-family: 'Aldhabi';

    background-size: cover; /* Растягивает изображение на всю область */

    background-position: center; /* Центрирует изображение */

    background-repeat: no-repeat; /* Запрещает повторение изображения */

    color: #011613;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    padding: 230px 0;

    margin-bottom: 20px;

    width: 100%; /* Занимает всю ширину */

    min-height: 82vh; /* Минимальная высота — весь экран */

    display: flex;

    align-items: center; /* Вертикальное выравнивание контента */

    justify-content: center; /* Горизонтальное выравнивание контента */

    position: relative; /* Для корректного позиционирования */

}



.jumbotron .container {

    position: relative; /* Для корректного позиционирования контента */

    z-index: 1; /* Поднимаем контент над фоном */

}



.jumbotron p {

    font-size: 2rem;

    margin: 60px;

}



.card {

    transition: transform 0.3s ease;

    border: none;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.card:hover {

    transform: translateY(-10px);


    background-color: #f7e2f4;

}



.card-img-top {

    height: 200px;

    object-fit: cover;

}



.card-body {

    padding: 1.5rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.card-title {

    font-size: 1.5rem;

    font-weight: bold;

}



.card-text {

    font-size: 1rem;

    color: #282626;

}



.card-body .btn {

    margin-top: auto;

}



.btn-primary {


    background-color: #be1ac4;

    border: none;

    padding: 0.75rem 1.5rem;

    font-size: 1.5rem;

    border-radius: 5px;

    color: #0f0e0e;

}



.btn-primary:hover {


    background-color:  #59105c;

}



footer{



    color: #333333;

    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

    font-size: 1.2rem;

    padding: 2rem 0;



}



.bg-sea-wave {


    background-color:  #701074;

    text-align: left;

}



footer p h5 {

    margin: 0.5rem 0;

}



/* Новые стили для home.html */



/* Hero-секция */

.jumbotron-home {
    background-image: url("../hoito/pictures/etusivu3.46175779d3cd.jpg");
    background-size: cover; /* Лучше использовать cover вместо contain для заполнения пространства */
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
    align-items: center;
    color: #0f0e0e;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    justify-content: flex-start;
    padding: 5% 5%; /* Уменьшил вертикальный padding */
    width: 100%;
    display: flex;
    transition: all 0.3s ease;
    position: relative; /* Добавил для лучшего позиционирования */
}

.container-home {
    padding: 3rem;
    border-radius: 10px;
    max-width: 500px;
    text-align: center;
    margin: 0;
    position: relative; /* Для z-index */
    z-index: 1; /* Чтобы текст был поверх фона */
}

/* Исправленные медиа-запросы */
@media (max-width: 1200px) {
    .jumbotron-home h1 {
        font-size: 10rem; /* Уменьшение размера для больших планшетов */
        display: flex;
    }
}

@media (max-width: 992px) {
    .jumbotron-home {
        padding: 5% 10%;
        background-size: cover;
    }
    
    .jumbotron-home h1 {
        font-size: 10rem; /* Уменьшенный размер для планшетов */
    }
    
    .jumbotron-home p {
        font-size: 1.5rem;
        display: flex;
    }
    
    .container-home {
        max-width: 80%;
        
    }
}

@media (max-width: 768px) {
    .jumbotron-home {
        padding: 5%;
        min-height: 50vh;
        justify-content: center;
    }
    
    .jumbotron-home h1 {
        font-size: 5rem; /* Правильный размер для мобильных */
        margin-bottom: 1rem;
    }
    
    .jumbotron-home p {
        font-size: 1.2rem;
    }
    
    .container-home {
        max-width: 100%;
        padding: 1.5rem; 
    }
}

@media (max-width: 480px) {
    .jumbotron-home h1 {
        font-size: 3.5rem; /* Дополнительное уменьшение для маленьких экранов */
    }
    
    .jumbotron-home p {
        font-size: 1rem;
    }
}

.jumbotron-home h1 {
    font-size: 20rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2; /* Добавил для лучшей читаемости */
    transition: font-size 0.3s ease; /* Плавное изменение размера */
}

.jumbotron-home p {
    font-size: 1.75rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    display: flex;
}

/* Palvelut */

.services-section {

    margin-top: 3rem;

    margin-bottom: 3rem;

}



.services-section h2 {

    font-size: 2.5rem;

    font-weight: bold;

    margin-bottom: 1.5rem;

}



.services-section .card {

    margin-bottom: 1.5rem;

}



/* Tietoa meistä */

.about-section {

    background-color: #f8f9fa;

    padding: 3rem 0;

}



.about-section h2 {

    font-size: 2.5rem;

    font-weight: bold;

    margin-bottom: 1.5rem;

}



.about-section img {

    border-radius: 10px;

}



.about-section p {

    font-size: 1.1rem;

    line-height: 1.6;

}



/* Yhteystiedot */

.contact-section {

    margin-top: 3rem !important;

    margin-bottom: 3rem;

}



.contact-section h2 {

    margin-top: 0;

    font-size: 2.5rem;

    font-weight: bold;

    margin-bottom: 1.5rem;

}



.contact-section p {

    font-size: 1.1rem;

    line-height: 1.6;

}

.lead strong {

    font-weight: bold;

}

/* Основной стиль формы */

.login-form {

    max-width: 400px;

    margin: 50px auto;

    background: #f9f9f9;

    padding: 25px;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

}



/* Otsikko */

.login-form h2 {

    margin-bottom: 15px;

    font-size: 22px;

    color: #333;

}



/* Muodon kentä*/

.login-form input {

    width: 100%;

    padding: 10px;

    margin: 8px 0;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 16px;

}



/* Кнопки */

/* .button {

    width: 100%;

    padding: 12px;

    background: #63edb6;

    color: rgb(11, 11, 11);

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    

} */





/* signup tyyli */



/* Стиль для формы регистрации */

.signup-form {

    max-width: 500px;

    margin: 50px auto;

    padding: 30px;

    background: #f3d9f5;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.signup-form h2 {

    font-size: 2rem;

    text-align: center;

    margin-bottom: 20px;

}



.signup-form .form-group {

    margin-bottom: 20px;

}



.signup-form .form-group label {

    font-weight: bold;

    display: block;

    margin-bottom: 5px;

}



.signup-form .form-group input {

    width: 100%;

    padding: 10px;

    font-size: 1rem;

    border: 1px solid #ccc;

    border-radius: 5px;

}



.signup-form .button {

    width: 100%;

    padding: 12px;


    background: #be1ac4;

    color: #fff;

    border: none;

    border-radius: 5px;

    font-size: 1.1rem;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.signup-form .button a {



    color: #fff;



}



.signup-form .button:hover  {


    background-color: #be1ac4;

}








.jumbotron-contact {

    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../hoito/pictures/jalat1.31a5f0303771.png");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 120px 0; /* Increased padding */
    margin-bottom: 40px; /* Increased margin for spacing */
    position: relative;

}



.jumbotron-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;



    height: 100%;


    background: rgba(0, 0, 0, 0.4); /* Darker overlay for better contrast */


    z-index: 1; /* Ensure it's under the text */

}



.jumbotron-content {


    position: relative;


    z-index: 2;


    display: flex;


    flex-direction: column;


    justify-content: center; /* Vertically center the content */


    align-items: center; /* Horizontally center the content */


    height: 70%;


    text-align: center; /* Ensure text is aligned properly */


    padding: 0 20px; /* Add padding so text doesn't touch the edges */

}




.jumbotron-content h1 {


    


    font-size: 4.5rem; /* Larger title */


    font-weight: bold;


    margin-bottom: 20px;


    text-align: center;


    max-width: 90%; /* Allow the text to wrap instead of getting cut off */


}



.jumbotron-content p {


    font-size: 1.5rem; /* Adjusted font size for paragraph */


    font-weight: normal;


    text-align: center;


    max-width: 700px; /* Limit paragraph width for better readability */


    margin: 0 auto; /* Center paragraph */


}



.card {

    border: none;

    border-radius: 10px;

    font-size: 1.2rem;

}



.shadow-sm {

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.contact-form .form-control {

    font-size: 1.2rem;

    padding: 10px;

}



.contact-form .btn {

    font-size: 1.2rem;

    padding: 10px;

}

/* Appointment styles */

/* hoito/static/hoito/css/styles.css */
.date-selector {
    gap: 10px;
    margin-bottom: 20px;
}

.time-slot-btn {
    min-width: 120px;
}

.booking-summary {
    position: sticky;
    top: 20px;
}

.jumbotron-home h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.jumbotron-home p {
    font-size: 1.75rem;
}

.date-slots {
    transition: opacity 0.3s ease;
}

.date-slots:not([style*="display: block"]) {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Hero section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url("../hoito/pictures/etusivu.18bddb76617e.png");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 120px 0;
    margin-bottom: 40px;
}


.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Service card */
.service-card {
    border-radius: 12px;
    border: none;
}

.service-title {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.service-description {
    color: #7f8c8d;
    line-height: 1.6;
}

.service-meta {
    padding: 12px 0;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
}

/* Date picker */
.date-picker {
    display: flex;
    /* gap: 1px; Увеличиваем промежуток между днями */
    overflow-x: auto;
    /* padding: 15px 10px; Добавляем отступы по краям */
    /* margin: 20px 0; */
    scrollbar-width: thin; /* Для красивого скролла */
}

.date-box {
    min-width: 75px; /* Немного увеличиваем ширину */
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px; /* Более скруглённые углы */
    cursor: pointer;
    transition: all 0.3s;
    flex: 0 0 auto; /* Чтобы ширина адаптировалась */
    margin: 0 5px; /* Промежуток между днями */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Лёгкая тень */
}

.date-box button {
    background-color: #be1ac4;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.5rem;
    border-radius: 5px;
    color: #0f0e0e;
    transition: all 0.3s;
}

.date-box.active button,
.date-box button:hover,
.date-box.selected {
    background-color: #59105c !important;
    color: white !important;
    border-color: #59105c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.date-box.today {
    border: 2px solid #59105c;
}

.weekday {
    font-size: 0.9rem;
    text-transform: uppercase;
}

.day {
    font-size: 1.4rem;
    font-weight: bold;
}

.month {
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Time slots */
.time-slots-container {
    min-height: 400px;
    position: relative;
}

.time-slots-placeholder {
    text-align: center;
    padding: 40px 0;
    color: #95a5a6;
}

.slot-date-header {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.time-slot-btn {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s;
}

.time-slot-btn:hover {
    border-color: #59105c;
}

.time-slot-btn.selected {
    background: #59105c !important;
    color: white !important;
    border-color: #59105c;
}

.slot-time {
    display: block;
    font-weight: bold;
    font-size: 1.1rem;
}

.slot-available {
    font-size: 0.8rem;
    color: #178645;
}

.time-slot-btn.selected .slot-available {
    color: rgba(255, 255, 255, 0.8);
}

/* Booking card */
.booking-card {
    border-radius: 12px;
    border: none;
}

.selected-slot-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.selected-slot-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
}

.selected-date {
    font-size: 1.1rem;
    font-weight: 500;
}

.selected-time {
    font-size: 1.3rem;
    font-weight: 700;
    color: #59105c !important;
}

.selected-time-display,
.selected-time-display h5 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #59105c !important;
}

/* Buttons */
.btn-primary {
    background-color: #be1ac4 !important;
    border-color: #59105c !important;
    color: white;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #59105c !important;
    border-color: #59105c !important;
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(190, 26, 196, 0.5) !important; 
}




.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(190, 26, 196, 0.5) !important; /* Фиолетовая тень вместо синей */
}



.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    background-color: #59105c;
    border-color: #59105c;
    color: white;
}

.btn-primary:disabled {
    background-color: #be1ac4;
    border-color: #47104a;
    opacity: 0.7;
}

/* Card headers */
.card-header.bg-primary {
    background-color: #be1ac4 !important;
    border-bottom: 2px solid #3a0a3d;
}

.card-header.bg-primary .fa-edit {
    color: #ffffff;
}

/* Selected service styles */
.selected-service-card {
    background-color: #fdfcff;
    border: 1px solid #e2d9f3;
    border-radius: 1rem;
}

.bg-purple {
    background-color: #be1ac4 !important;
    color: black;
}

.service-name {
    font-weight: 600;
    color: #59105c;
}

/* Calendar date styles */
.weekday-s,
.day-s,
.month-s {
    font-size: 22px;
    font-weight: bold;
    color: #59105c;
    text-transform: uppercase;
}

.icon-clock-custom {
    color: #be1ac4 !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .date-box {
        flex: 0 0 60px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 80px 0;
    }
}
.messages-container {
    position: fixed;
    top: 80px;  /* Ниже навбара */
    right: 20px;
    z-index: 1100;  /* Выше других элементов */
    max-width: 400px;
}

:root {
    --bs-primary: #59105C;
    --bs-primary-rgb: 89, 16, 92;
  }

  

.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

/* .toast-top-right {
    top: 30%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 9999;
} */