/* ===================================
   PRENOČIŠČA DEŽMAN - RESPONSIVE STYLES
   =================================== */

/* ===================================
   EXTRA LARGE DEVICES (1200px and up)
   =================================== */
@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max-width);
    }
    
    h1 {
        font-size: 56px;
    }
    
    h2 {
        font-size: 42px;
    }
    
    .hero-title {
        font-size: 64px;
    }
    
    .hero-subtitle {
        font-size: 24px;
    }
}

/* ===================================
   LARGE DEVICES (992px - 1199px)
   =================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    h1 {
        font-size: 44px;
    }
    
    h2 {
        font-size: 34px;
    }
    
    h3 {
        font-size: 26px;
    }
    
    .hero-title {
        font-size: 52px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .stat-number {
        font-size: 48px;
    }
    
    .room-card .card-img-top {
        height: 250px;
    }
}

/* ===================================
   MEDIUM DEVICES (768px - 991px) - TABLETS
   =================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --section-padding: 60px;
    }
    
    /* Typography */
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 30px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    h4 {
        font-size: 20px;
    }
    
    body {
        font-size: 15px;
    }
    
    /* Header */
    .navbar-nav .nav-link {
        padding: 8px 12px !important;
        font-size: 14px;
    }
    
    .navbar-brand img {
        max-height: 50px;
    }
    
    /* Hero */
    .hero-title {
        font-size: 42px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-slider .swiper-button-next,
    .hero-slider .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    
    .hero-slider .swiper-button-next::after,
    .hero-slider .swiper-button-prev::after {
        font-size: 16px;
    }
    
    /* Features */
    .feature-item i {
        font-size: 32px;
    }
    
    .feature-item p {
        font-size: 14px;
    }
    
    /* Room Cards */
    .room-card .card-img-top {
        height: 220px;
    }
    
    .room-card .card-title {
        font-size: 20px;
    }
    
    .room-card .card-text {
        font-size: 14px;
    }
    
    /* Stats */
    .stat-number {
        font-size: 42px;
    }
    
    .stats-section p {
        font-size: 16px;
    }
    
    /* Page Header */
    .page-header {
        padding: 60px 0 40px;
    }
    
    .page-header h1 {
        font-size: 36px;
    }
    
    .page-header .lead {
        font-size: 18px;
    }
    
    /* Room Details */
    .room-details .col-lg-8,
    .room-details .col-lg-4 {
        margin-bottom: 30px;
        position: static !important;
    }
    
    .booking-sidebar {
        position: static;
    }
    
    /* Hide contact info on mobile (footer CTA handles it), keep "Nazaj na vse sobe" button */
    .room-details .col-lg-4 .contact-sidebar h3,
    .room-details .col-lg-4 .contact-sidebar .text-muted,
    .room-details .col-lg-4 .contact-sidebar .mb-3 {
        display: none !important;
    }
    
    .room-details .col-lg-4 .contact-sidebar {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Contact */
    .contact-info,
    .contact-form {
        padding: 30px;
    }
    
    /* Footer */
    footer {
        padding: 50px 0 20px;
    }
    
    footer h5 {
        font-size: 18px;
    }
    
    footer ul li {
        font-size: 14px;
    }
}

/* ===================================
   SMALL DEVICES (576px - 767px) - LANDSCAPE PHONES
   =================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --section-padding: 50px;
    }
    
    /* Typography */
    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 26px;
    }
    
    h3 {
        font-size: 22px;
    }
    
    h4 {
        font-size: 18px;
    }
    
    body {
        font-size: 14px;
    }
    
    /* Header */
    .top-bar {
        font-size: 12px;
        padding: 8px 0;
    }
    
    .navbar {
        padding: 10px 0;
    }
    
    .navbar-brand img {
        max-height: 45px;
    }
    
    /* Mobile Menu */
    .navbar-collapse {
        background-color: var(--primary-white);
        padding: 20px;
        margin-top: 10px;
        border-radius: 8px;
        box-shadow: var(--shadow-md);
    }
    
    .navbar-nav .nav-link {
        padding: 12px 15px !important;
        border-bottom: 1px solid var(--light-gray);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    .navbar-nav .nav-link::after {
        display: none;
    }
    
    .dropdown-menu {
        box-shadow: none;
        margin-top: 0;
        padding-left: 20px;
    }
    
    /* Hero */
    .hero-slider {
        height: 70vh;
    }
    
    .hero-slide {
        height: 70vh;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .hero-slider .btn {
        padding: 10px 25px;
        font-size: 14px;
    }
    
    .hero-slider .swiper-button-next,
    .hero-slider .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
    
    .hero-slider .swiper-button-next::after,
    .hero-slider .swiper-button-prev::after {
        font-size: 14px;
    }
    
    /* Features */
    .features-bar {
        padding: 40px 0;
    }
    
    .feature-item {
        padding: 15px;
    }
    
    .feature-item i {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .feature-item p {
        font-size: 13px;
    }
    
    /* Room Cards */
    .room-card .card-img-top {
        height: 200px;
    }
    
    .room-card .card-body {
        padding: 20px;
    }
    
    .room-card .card-title {
        font-size: 18px;
    }
    
    .room-card .card-text {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .room-card .btn {
        padding: 8px 20px;
        font-size: 13px;
    }
    
    /* Stats */
    .stats-section {
        padding: 50px 0;
    }
    
    .stat-number {
        font-size: 36px;
    }
    
    .stats-section p {
        font-size: 14px;
    }
    
    /* Page Header */
    .page-header {
        padding: 50px 0 30px;
    }
    
    .page-header h1 {
        font-size: 32px;
    }
    
    .page-header .lead {
        font-size: 16px;
    }
    
    /* Room Details */
    .room-image img {
        height: 300px;
        object-fit: cover;
    }
    
    .room-features h3,
    .room-amenities h3,
    .room-included h3 {
        font-size: 20px;
    }
    
    .room-features li {
        padding: 10px 0;
        font-size: 14px;
    }
    
    .booking-sidebar {
        position: static;
        padding: 25px;
    }
    
    .booking-sidebar h3 {
        font-size: 20px;
    }
    
    /* Hide contact info on mobile (footer CTA handles it), keep "Nazaj na vse sobe" button */
    .room-details .col-lg-4 .contact-sidebar h3,
    .room-details .col-lg-4 .contact-sidebar .text-muted,
    .room-details .col-lg-4 .contact-sidebar .mb-3 {
        display: none !important;
    }
    
    .room-details .col-lg-4 .contact-sidebar {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Wellness */
    .wellness-features li {
        font-size: 15px;
    }
    
    .pricing-table {
        padding: 25px;
    }
    
    .pricing-table li {
        font-size: 15px;
        padding: 12px 0;
    }
    
    /* Contact */
    .contact-info,
    .contact-form {
        padding: 25px;
    }
    
    .contact-info h3,
    .contact-form h3 {
        font-size: 20px;
    }
    
    .contact-form .form-control {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* Contact CTA */
    .contact-cta {
        padding: 40px 0;
    }
    
    .contact-cta h2 {
        font-size: 24px;
    }
    
    .contact-cta .btn {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
    
    /* Footer */
    footer {
        padding: 40px 0 20px;
    }
    
    footer h5 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    footer p {
        font-size: 13px;
    }
    
    footer ul li {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .social-links a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    /* Scroll to Top */
    .scroll-to-top {
        width: 45px;
        height: 45px;
        font-size: 18px;
        bottom: 20px;
        right: 20px;
    }
}

/* ===================================
   EXTRA SMALL DEVICES (less than 576px) - PHONES
   =================================== */
@media (max-width: 575.98px) {
    :root {
        --section-padding: 40px;
    }
    
    /* Typography */
    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    h3 {
        font-size: 20px;
    }
    
    h4 {
        font-size: 16px;
    }
    
    body {
        font-size: 14px;
    }
    
    /* Header */
    .top-bar {
        font-size: 11px;
        padding: 6px 0;
    }
    
    .top-bar .col-md-6:first-child {
        text-align: center;
        margin-bottom: 5px;
    }
    
    .top-bar .col-md-6:last-child {
        text-align: center;
    }
    
    .language-switcher a {
        padding: 3px 8px;
        font-size: 11px;
    }
    
    .navbar {
        padding: 8px 0;
    }
    
    .navbar-brand img {
        max-height: 40px;
    }
    
    /* Mobile Menu */
    .navbar-collapse {
        background-color: var(--primary-white);
        padding: 15px;
        margin-top: 10px;
        border-radius: 8px;
        box-shadow: var(--shadow-md);
    }
    
    .navbar-nav .nav-link {
        padding: 12px 15px !important;
        border-bottom: 1px solid var(--light-gray);
        font-size: 14px;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    .navbar-nav .nav-link::after {
        display: none;
    }
    
    .dropdown-menu {
        box-shadow: none;
        margin-top: 0;
        padding-left: 15px;
    }
    
    .dropdown-item {
        padding: 8px 15px;
        font-size: 13px;
    }
    
    /* Hero */
    .hero-slider {
        height: 60vh;
        min-height: 400px;
    }
    
    .hero-slide {
        height: 60vh;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .hero-slider .btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .hero-slider .swiper-pagination {
        bottom: 20px !important;
    }
    
    .hero-slider .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    .hero-slider .swiper-pagination-bullet-active {
        width: 20px;
    }
    
    .hero-slider .swiper-button-next,
    .hero-slider .swiper-button-prev {
        display: none;
    }
    
    /* Features */
    .features-bar {
        padding: 30px 0;
    }
    
    .feature-item {
        padding: 10px;
    }
    
    .feature-item i {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .feature-item p {
        font-size: 12px;
    }
    
    /* Accommodation Preview */
    .accommodation-preview {
        padding: 40px 0;
    }
    
    .accommodation-preview h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .accommodation-preview .lead {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    /* Room Cards */
    .room-card {
        margin-bottom: 20px;
    }
    
    .room-card .card-img-top {
        height: 180px;
    }
    
    .room-card .card-body {
        padding: 15px;
    }
    
    .room-card .card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .room-card .card-text {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .room-card .btn {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    /* VIP Wellness Section */
    .vip-wellness-section {
        padding: 40px 0;
    }
    
    .vip-wellness-section h2 {
        font-size: 24px;
    }
    
    .vip-wellness-section .lead {
        font-size: 14px;
    }
    
    /* Stats */
    .stats-section {
        padding: 40px 0;
    }
    
    .stat-item {
        margin-bottom: 30px;
    }
    
    .stat-number {
        font-size: 32px;
    }
    
    .stats-section p {
        font-size: 13px;
    }
    
    /* Map */
    .map-section {
        padding: 40px 0;
    }
    
    .map-section h2 {
        font-size: 24px;
    }
    
    /* Page Header */
    .page-header {
        padding: 40px 0 30px;
    }
    
    .page-header h1 {
        font-size: 28px;
    }
    
    .page-header .lead {
        font-size: 14px;
    }
    
    /* Room Details */
    .room-details {
        padding: 40px 0;
    }
    
    .room-image img {
        height: 250px;
        object-fit: cover;
    }
    
    .room-description h2 {
        font-size: 24px;
    }
    
    .room-description .lead {
        font-size: 14px;
    }
    
    .room-features h3,
    .room-amenities h3,
    .room-included h3 {
        font-size: 18px;
    }
    
    .room-features li {
        padding: 10px 0;
        font-size: 13px;
    }
    
    .booking-sidebar {
        position: static;
        padding: 20px;
        margin-top: 30px;
    }
    
    .booking-sidebar h3 {
        font-size: 18px;
    }
    
    .booking-sidebar .btn {
        font-size: 13px;
        padding: 10px 15px;
    }
    
    /* Hide contact info on mobile (footer CTA handles it), keep "Nazaj na vse sobe" button */
    .room-details .col-lg-4 .contact-sidebar h3,
    .room-details .col-lg-4 .contact-sidebar .text-muted,
    .room-details .col-lg-4 .contact-sidebar .mb-3 {
        display: none !important;
    }
    
    .room-details .col-lg-4 .contact-sidebar {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Wellness Page */
    .wellness-content {
        padding: 40px 0;
    }
    
    .wellness-content h2 {
        font-size: 24px;
    }
    
    .wellness-content .lead {
        font-size: 14px;
    }
    
    .wellness-features li {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .wellness-features i {
        font-size: 16px;
    }
    
    .pricing-table {
        padding: 20px;
    }
    
    .pricing-table h2 {
        font-size: 24px;
    }
    
    .pricing-table li {
        font-size: 14px;
        padding: 10px 0;
    }
    
    /* Coffee Page */
    .coffee-content {
        padding: 40px 0;
    }
    
    .coffee-content h2 {
        font-size: 24px;
    }
    
    .coffee-content .lead {
        font-size: 14px;
    }
    
    .coffee-content h5 {
        font-size: 16px;
    }
    
    .coffee-content .text-muted {
        font-size: 12px;
    }
    
    .coffee-content .d-flex.align-items-center {
        flex-wrap: nowrap;
    }
    
    .coffee-content .d-flex.align-items-center > div:first-child {
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
    }
    
    .coffee-content .d-flex.align-items-center > div:first-child i {
        font-size: 1.25rem;
    }
    
    /* Contact Page */
    .contact-content {
        padding: 40px 0;
    }
    
    .contact-info,
    .contact-form {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .contact-info h3,
    .contact-form h3 {
        font-size: 18px;
    }
    
    .contact-form .form-label {
        font-size: 13px;
    }
    
    .contact-form .form-control {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .contact-form .btn {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    /* Contact CTA */
    .contact-cta {
        padding: 30px 0;
    }
    
    .contact-cta h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .contact-cta .btn {
        display: block;
        width: 100%;
        margin: 8px 0;
        font-size: 14px;
        padding: 12px 20px;
    }
    
    /* Footer */
    footer {
        padding: 30px 0 15px;
    }
    
    footer .col-lg-3,
    footer .col-md-6 {
        margin-bottom: 25px;
    }
    
    footer h5 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    footer p {
        font-size: 12px;
        line-height: 1.6;
    }
    
    footer ul li {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    footer hr {
        margin: 25px 0 15px;
    }
    
    footer .text-center {
        text-align: center;
    }
    
    .social-links a {
        width: 32px;
        height: 32px;
        font-size: 13px;
        margin-right: 8px;
    }
    
    /* Scroll to Top */
    .scroll-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
        bottom: 15px;
        right: 15px;
    }
    
    /* Remove hover effects on touch devices */
    .room-card:hover,
    .feature-item:hover,
    .wellness-features li:hover,
    .pricing-table li:hover {
        transform: none;
    }
    
    .room-card:hover .card-img-top {
        transform: none;
    }
    
    .vip-wellness-section img:hover {
        transform: none;
    }
    
    /* Buttons full width on mobile */
    .btn {
        width: 100%;
    }
    
    .btn.me-3 {
        margin-right: 0 !important;
    }
    
    /* Reduce spacing */
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ===================================
   VERY SMALL DEVICES (less than 400px)
   =================================== */
@media (max-width: 399px) {
    .hero-title {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 13px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .room-card .card-img-top {
        height: 160px;
    }
    
    .feature-item i {
        font-size: 20px;
    }
    
    .feature-item p {
        font-size: 11px;
    }
}

/* ===================================
   LANDSCAPE ORIENTATION
   =================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slider {
        height: 80vh;
    }
    
    .hero-slide {
        height: 80vh;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    a,
    a:visited {
        text-decoration: underline;
        color: #000;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .navbar,
    .hero-slider,
    .contact-cta,
    footer,
    .scroll-to-top,
    .map-section {
        display: none;
    }
}