/* High quality image rendering */
img {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic; /* IE */
}

.header-banner-image,
.mobile-hero-bg-image,
.tabacs-title-image,
.tabacs-subtitle-image,
.header-logo,
.mobile-header-logo {
    image-rendering: -webkit-optimize-contrast; /* Chrome, Safari */
    image-rendering: crisp-edges;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/inter.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/inter.ttf') format('truetype'); /* Assuming inter.ttf covers semibold, bold as well or use specific files if available */
    font-weight: 600; /* semibold */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/inter.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/inter.ttf') format('truetype');
    font-weight: 500; /* medium */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/inter_italic.ttf') format('truetype');
    font-weight: normal; /* Assuming inter_italic.ttf is for normal italic */
    font-style: italic;
}

/* Basic Reset & Global Styles */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif; /* Default to Inter */
    box-sizing: border-box;
    background-color: #F2F2F2; /* AppColors.BackgroundLight */
    color: #1E1E1E; /* AppColors.TextPrimary */
    overflow-x: auto;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.app-container {
    max-width: 1200px; /* Desktop view centered */
    margin: 0 auto;
    background-color: #FFFFFF; /* AppColors.Background */
    /* Add more styling for the overall container if needed */
}

/* Sections styling placeholders */
#app-header {
    height: 400px; /* Matches Compose */
    background-color: #fff; /* Assuming a base color or it might be transparent if banner covers all */
    position: relative; /* For z-indexing and absolute positioning of children */
    overflow: hidden; /* To contain the banner image if it's larger */
}

#app-main-content {
    padding-top: 0px; /* Example padding */
    padding-bottom: 0px; /* Example padding */
}

#app-footer {
    /* Styles for footer */
}

/* Header Styles */
.header-top-row {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns items to the bottom of the row */
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
    position: relative; /* For z-index if needed over banner */
    z-index: 2;
}

.header-logo {
    height: 30px;
    width: auto;
}

/* Align language switcher to the right */
.language-switcher {
    display: flex;
    justify-content: flex-end;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.language-switcher-current,
.mobile-language-indicator {
    width: 101px;
    text-align: center;
    color: #862733;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    justify-content: right;
    display: flex;
    align-items: center;
}

.language-arrow {
    margin-left: 4px;
    width: 12px; /* Adjust as per ic_language_arrow.svg */
    height: 12px;
}

.language-dropdown {
    position: absolute;
    top: 100%; /* Position below the switcher */
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 10;
    min-width: 80px;
}

.language-dropdown-item {
    width: 100%;
    text-align: center;
    color: #862733;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    padding: 8px 12px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: background 0.2s;
}

.language-dropdown-item:hover {
    background-color: #f0f0f0;
}

.header-main-banner {
    height: 299px;
    width: 100%;
    position: relative; /* For positioning overlay and title box */
}

.header-banner-image {
    width: 100%;
    height: 271px; /* As per Box height in Compose */
    object-fit: cover; /* Equivalent to ContentScale.Crop */
    object-position: bottom center; /* Equivalent to Alignment.BottomCenter */
    display: block; /* Remove extra space below image */
}

.header-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 271px; /* Same height as the banner image it overlays */
    display: flex;
    z-index: 0; /* Below title box, above banner image if it had transparency */
}

.overlay-column-left {
    flex: 1;
    background-color: rgba(200, 18, 41, 0.478); /* Approximation of 0x7AC81229 */
}

.overlay-column-right {
    flex: 1;
    /* No background, transparent */
}

.header-title-box {
    position: absolute;
    bottom: 0; /* Aligns to the bottom of header-main-banner */
    left: 50%;
    transform: translateX(-50%);
    width: 272px;
    height: 105px;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Approximation of shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Above banner and overlay */
}

.tabacs-title-image,
.tabacs-subtitle-image {
    /* Adjust margin/padding as needed for spacing between them */
    /* max-width: 90%; ensure they fit */
}

/* Responsive adjustments for header */
@media (max-width: 768px) {
    #app-header {
        height: auto; /* Allow height to adjust for mobile if needed */
    }
    .header-top-row {
        padding-left: 15px;
        padding-right: 15px;
        height: 80px; /* Example adjustment */
    }
    .header-logo {
        height: 20px;
    }
    .header-main-banner {
        height: auto; /* Adjust banner height if necessary */
    }
    .header-banner-image {
        height: 200px; /* Example: Smaller banner image */
    }
     .header-banner-overlay {
        height: 200px; /* Match banner image height */
    }
    .header-title-box {
        width: 90%;
        max-width: 272px; /* Keep max width but allow shrink */
        height: auto;
        padding: 10px 0; /* Adjust padding */
        /* The title box might need to be smaller or its content rescaled */
    }
    .tabacs-title-image,
    .tabacs-subtitle-image {
        max-width: 80%; /* Ensure images scale down */
        height: auto;
    }
}

/* Responsive adjustments - Placeholder */
@media (max-width: 768px) {
    .app-container {
        width: 100%;
        padding: 0 15px; /* Adjust padding for mobile */
    }
    #app-main-content {
        padding: 15px 0 0 0; /* Only top padding, other sides 0 */
        /* The specific padding-left and padding-right for #app-main-content in mobile view is handled below */
    }
}

/* AuthText Section Styles */
#auth-text-section {
    /* The padding-top is handled by HomeView's Column structure in Compose. */
    /* We will add margin/padding to this section container directly in the main layout if needed, */
    /* or rely on the padding of #app-main-content */
    display: flex; /* For centering the inner .auth-text-content */
    justify-content: center;
    align-items: center;
}

.auth-text-content {
    width: 448px; /* From Compose */
    height: 95px; /* From Compose */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Add border or background if visible in original app */
}

.auth-text-bold {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700; /* Bold */
    color: #862733; /* AppColors.TextSecondary */
    margin: 0 0 4px 0; /* Spacing between texts */
    text-align: center;
}

.auth-text-normal {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400; /* Normal */
    color: #862733; /* AppColors.TextSecondary */
    margin: 0;
    text-align: center;
}

/* Responsive adjustments for AuthText */
@media (max-width: 768px) {
    .auth-text-content {
        width: 90%; /* Allow to shrink on mobile */
        max-width: 448px;
        height: auto; /* Adjust height automatically */
    }
    .auth-text-bold {
        font-size: 15px; /* Slightly smaller font for mobile */
    }
    .auth-text-normal {
        font-size: 13px; /* Slightly smaller font for mobile */
    }
}

.is-mobile .auth-text-bold {
    font-size: 20px;
    color: #862733;
    margin-bottom: 2px;
}
.is-mobile .auth-text-normal {
    font-size: 16px;
    color: #862733;
    margin-top: 0;
}

/* TransportTobaccoSection Styles are now maintained in desktop/transport.css and mobile/transport.css */

.transport-tobacco-content {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Changed to center all elements */
    align-items: stretch;
    cursor: pointer;
    padding: 0 15px;
    height: 100%;
    width: 100%;
    position: relative;
    gap: 8px; /* Added gap between elements */
}

.transport-icon-column {
    display: flex;
    justify-content: center; /* Changed to center */
    align-items: flex-start;
    width: 48px;
    min-width: 48px;
  
}

.transport-text-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 1 auto; /* Changed to fit content */
    padding: 0 8px;
}

.mobile-transport-text-column {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto; /* Changed from flex: 1 to fit content */
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
    text-align: left;
    min-width: 0; /* Allow content to determine width */
    max-width: fit-content; /* Ensure it doesn't grow beyond content */
}

.mobile-transport-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1E1E1E;
    line-height: 1.1;
    white-space: nowrap; /* Prevent text wrapping */
}

.mobile-transport-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 1.1;
    margin-top: 0.25rem;
    white-space: nowrap; /* Prevent text wrapping */
}

.transport-arrow-column {
 
    justify-content: center; /* Changed to center */
    align-items: flex-end;
    width: 32px;
    min-width: 32px;
    padding-bottom: 14px;
}

.transport-icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

.transport-arrow-icon {
    width: 18px;
    height: 18px;
    margin: 0;
}

.transport-title-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the title row content */
    width: 100%; /* Ensure full width for centering */
}

.transport-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600; /* SemiBold */
    color: #1E1E1E; /* AppColors.TextPrimary */
}

.transport-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal */
    color: #1E1E1E; /* AppColors.TextPrimary */
    margin-top: 4px;
    display: flex; /* To align text span and arrow icon */
    align-items: center; /* To vertically align text span and arrow icon */
    justify-content: center; /* Center the description content */
    width: 100%; /* Ensure full width for centering */
}

/* MapSection Styles */
#map-section {
    width: 100%; /* fillMaxWidth */
    /* padding-top is handled by HomeView structure */
}

.map-section-container {
    width: 100%;
    height: 608px; /* From Compose */
    background-color: #FFBF3E; /* AppColors.Primary */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Matches Arrangement.SpaceBetween */
    align-items: center; /* Matches horizontalAlignment */
}

.map-top-row, .map-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1; /* Distributes space for weight(1f) behavior */
    padding: 10px 0; /* Some padding for top/bottom rows */
}

.map-bottom-row {
    cursor: pointer;
}

.map-arrow-location-icon {
    width: 30px; /* From Compose */
    height: 30px;
    margin-right: 16px;
}

.map-findus-text p {
    margin: 2px 0;
    color: #1E1E1E; /* AppColors.TextPrimary - should be visible on Yellow BG */
}

.map-findus-message1 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600; /* SemiBold */
    line-height: 18px;
    /* color: #1E1E1E; Inherited */
}

.map-findus-message2 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700; /* Bold */
    line-height: 18px;
    /* color: #1E1E1E; Inherited */
}

.map-iframe-container {
    width: 100%;
    height: 480px; /* From Compose */
    background-color: #FFFFFF;
}

.map-iframe-container iframe {
    display: block; /* Removes potential extra space under iframe */
}

.map-location-icon {
    width: 20px;  /* From Compose */
    height: 24px; /* From Compose */
    margin-right: 24px;
    filter: brightness(0%); /* Attempt to make location.png black */
}

.map-address-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600; /* SemiBold */
    color: #1E1E1E; /* AppColors.TextPrimary */
    text-decoration: underline;
}

/* Responsive adjustments for MapSection */
@media (max-width: 768px) {
    .map-section-container {
        height: auto; /* Adjust height for content */
    }
    .map-iframe-container {
        height: 300px; /* Smaller map on mobile */
    }
    .map-findus-message1 {
        font-size: 14px;
    }
    .map-findus-message2 {
        font-size: 16px;
    }
    .map-address-text {
        font-size: 14px;
        text-align: left; /* Align text to left instead of center */
        padding: 0 10px;
    }
    .map-location-icon {
        margin-right: 10px;
    }
    .map-arrow-location-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
}

/* Footer Styles */
#app-footer {
    /* HomeView doesn't add padding to the Footer itself, it's just placed. */
    /* Any overall spacing would be from app-container or a wrapper. */
}

.footer-container {
    height: 156px; /* From Compose */
    background-color: #FFFFFF; /* AppColors.Background */
    display: flex;
    flex-direction: column;
}

.footer-top-row {
    flex-grow: 1; /* For weight(1f) behavior */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-official-message {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600; /* SemiBold */
    color: #1E1E1E; /* AppColors.TextPrimary */
    margin: 0;
}

.footer-bottom-row {
    height: 56px; /* From Compose */
    background-color: #FFFCF7; /* AppColors.FooterBackground */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-icon {
    width: 30px; /* AppDimensions.IconSize */
    height: 30px; /* AppDimensions.IconSize */
}

.footer-logo-cmt {
    height: 30px; /* AppDimensions.IconSize */
    /* Width will be auto based on aspect ratio */
    margin-left: 48px; /* AppDimensions.SpacingXXLarge */
}

/* Responsive adjustments for Footer */
@media (max-width: 768px) {
    .footer-container {
        height: auto; /* Adjust height */
    }
    .footer-top-row {
        padding: 15px 0;
    }
    .footer-official-message {
        font-size: 13px;
    }
    .footer-bottom-row {
        height: auto;
        padding: 10px 0;
        flex-direction: row; /* Keep items in a row */
        justify-content: center; /* Center items horizontally */
    }
    .footer-icon {
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 10px; /* Add right margin for spacing */
    }
    .footer-logo-cmt {
        margin-left: 10px; /* Reduce margin when space is tight */
    }
}

/* Mobile footer specific styles */
@media (max-width: 480px) {
    .mobile-footer-layout {
        display: flex;
        flex-direction: column;
        background-color: #FFFFFF;
    }
    
    .mobile-footer-top-row {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 15px 0;
    }
    
    .mobile-footer-official-message {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1E1E1E;
        margin: 0;
    }
    
    .mobile-footer-bottom-bar {
        height: 56px;
        background-color: #FFFCF7; /* Same as desktop footer background */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .mobile-footer-icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    
    .mobile-footer-cmt-logo {
        height: 30px;
        margin-left: 10px;
    }
}

/* Main content structure from HomeView */
#app-main-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* For Alignment.CenterHorizontally */
    width: 100%;
}

#app-footer {
    /* No specific top margin for footer in desktop from HomeView itself, */
    /* its spacing comes from being after MapSection. */
    /* It is inside the main content column. */
     width: 100%; /* Ensure it can be centered if content is narrower */
}

/* Details Page Specific Styles */
.details-page-content {
    /* Padding for top/bottom of the page content can be added here or on app-container */
    padding-top: 20px;
}

/* TransportTobaccoSection - No Borders Variant */
.transport-tobacco-section-no-borders.transport-tobacco-content-container {
    width: 100%; /* Ensure the section itself is full-width */
    height: 96px; /* Updated height from Figma definition */
    background-color: #FFBF3E; 
    border-top: none;
    border-bottom: none;
    margin-top: 20px; /* Add margin since back button is gone */
}

/* Spacing for details page based on DetailsDesktopView - adjusted since back button is gone */
/* 
#back-button-container + .transport-tobacco-section-no-borders {
    margin-top: 78px;
}
*/

.transport-tobacco-section-no-borders + #country-webview-sections-container {
    margin-top: 78px; /* AppDimensions.SpacingXXXXLarge */
}

#country-webview-sections-container + #more-info-text-container {
    margin-top: 64px; /* AppDimensions.SpacingXXXLarge */
}

/* Remove horizontal padding for the inner content div specifically on the details page */
#transport-tobacco-section-details .transport-tobacco-content {
    padding-left: 0;
    padding-right: 0;
    align-items: center; /* Vertically center icon and text column */
}

#transport-tobacco-section-details .transport-description {
    color: #000000; /* Black, as per Figma */
    /* Other styles from .transport-description will also apply */
}

/* This rule is now combined and moved below 
#transport-tobacco-section-details .transport-icon {
    align-self: flex-start; 
    margin-top: 18px; 
}
*/

/* Combined rule for icon alignment in both Home and Details views */
#transport-tobacco-section .transport-icon,
#transport-tobacco-section-details .transport-icon {
    align-self: flex-start; /* Align icon to the top within its flex item space */
    margin-top: 14px; /* Adjust vertical alignment */
}

.description-arrow-icon {
    width: 12px; 
    height: 12px; 
    margin-left: 5px;
    filter: brightness(0%); /* Make icon black if source is light */
}

/* MoreInfoText Styles (Placeholder, will be refined when content is added) */
#more-info-text-container {
    width: 100%;
}

/* Country WebView Sections */
#country-webview-sections-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the country sections if they are narrower than container */
    gap: 32px; /* Spacing between country sections - AppDimensions.SpacingLarge * 2 or similar */
    width: 100%;
}

.country-section {
    width: 597px; /* AppDimensions.ContentWidth from Compose */
    max-width: 100%; /* Responsive */
    /* padding: 16px 0; Already handled by padding in DetailsDesktopView modifier / gap */
}

.country-header-details {
    display: flex;
    align-items: flex-start; /* Align flag top with text block */
    margin-bottom: 24px; /* AppDimensions.SpacingXLarge */
}

.country-flag-icon {
    width: 20px; /* AppDimensions.FlagWidth */
    height: 12px; /* AppDimensions.FlagHeight */
    margin-right: 8px; /* AppDimensions.SpacingMedium */
    margin-top: 2px; /* Slight adjustment to align with text visually */
}

.country-info {
    display: flex;
    flex-direction: column;
    width: calc(100% - 28px); /* Full width minus flag width and margin */
    overflow: hidden; /* Prevent overflow */
}

.country-name-details {
    font-family: 'Inter', sans-serif;
    font-size: 16px; /* Figma: 16px */
    font-weight: 500; /* Figma: 500, Compose countryTitle is SemiBold (600) */
    color: #1E1E1E;
    margin: 0 0 4px 0; /* AppDimensions.SpacingSmall */
}

.country-url-link {
    font-family: 'Inter', sans-serif;
    font-size: 11px; /* Figma: 11px */
    font-weight: 400; /* Figma: 400 */
    color: #1E1E1E; /* Normal text color for "accede al link:" text */
    text-decoration: none;
    display: block; /* Make it a block element */
    word-wrap: break-word; /* Allow breaking long words */
    overflow-wrap: break-word; /* Modern version of word-wrap */
    max-width: 100%; /* Ensure it doesn't exceed parent width */
}

.country-url-link:hover .country-url-actual {
    text-decoration: none; /* Remove underline on hover */
}

.country-url-actual {
    color: #0066cc; /* Standard link blue color */
    text-decoration: underline; /* Always underlined */
    word-break: break-all; /* Break words at any character */
}

.tobacco-limits-table {
    margin-bottom: 16px; /* AppDimensions.SpacingLarge */
}

.limits-table-header {
    background-color: #F2F2F2; /* AppColors.BackgroundLight */
    padding: 6px 8px; /* vertical 6.dp, horizontal AppDimensions.SpacingMedium */
    margin-bottom: 4px; /* Spacing before first item */
}

.limits-table-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600; /* SemiBold - from limitsTitle style */
    color: #1E1E1E;
}

.limit-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px; /* vertical 4.dp, horizontal AppDimensions.SpacingMedium */
}

.limit-item-name,
.limit-item-quantity {
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* limitsText style */
    font-weight: 400; /* Normal - from limitsText style */
    color: #1E1E1E;
    line-height: 18px;
}

.limit-item-quantity {
    font-weight: 500; /* Medium - from limitsText.copy(fontWeight = FontWeight.Medium) */
}

.limit-divider {
    border: none;
    border-top: 0.5px solid #CCCCCC; /* AppColors.DividerColor */
    margin: 0; /* Reset margin for hr */
}

.country-iframe-container iframe {
    width: 100%;
    height: 226px; /* Figma screenshot height */
    border: 1px solid #CCCCCC; /* A light border for the iframe */
}

/* MoreInfoText Styles */
#more-info-text-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center its content */
    width: 100%; /* Take full width to allow centering of inner box */
    margin-bottom: 40px; /* Spacing below disclaimer based on Figma structure */
}

.more-info-bordered-box {
    width: 100%; /* Make borders span full width */
    max-width: 100%;
    padding: 20px 0; /* Vertical padding inside the box */
    border-top: 1.8px solid #862733;
    border-bottom: 1.8px solid #862733;
    margin-bottom: 40px; 
    display: flex; /* Added to center the content wrapper */
    justify-content: center; /* Added to center the content wrapper */
    /* flex-direction: column; From original, not needed if child is centered */
    /* align-items: flex-start; From original, now handled by wrapper */
}

.more-info-content-wrapper {
    width: 597px; /* Constrain the actual text content */
    max-width: 100%; /* Responsive */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text to start, as before */
}

.more-info-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px; /* Figma: 11px, Compose: 14px */
    font-weight: 700; /* Bold */
    color: #862733;
    margin: 0 0 10px 0; /* Figma: Spacer(modifier = Modifier.height(10.dp)) */
}

.more-info-url {
    font-family: 'Inter', sans-serif;
    font-size: 11px; /* Figma: 11px, Compose: 14px */
    font-weight: 500; /* Figma: 500, Compose: 400 */
    color: #862733;
    text-decoration: underline;
    display: inline-block; /* Allows max-width to work */
    max-width: 100%; /* Ensure it stays within container */
    overflow-wrap: break-word; /* Allow breaking long words */
    word-break: break-all; /* Break words at any character if needed */
    white-space: normal; /* Allow text to wrap */
}
.more-info-url:hover {
    text-decoration: none;
}

.more-info-disclaimer {
    font-family: 'Inter', sans-serif; /* For italic, ensure Inter Italic is loaded and selected if needed */
    font-style: italic; /* If inter_italic.ttf is correctly assigned for italic style */
    font-size: 11px; /* Figma: 11px, Compose: 12px */
    font-weight: 300; /* Figma: 300 (Light). Regular Inter Italic might be 400. */
    color: #000000;
    width: 597px; /* AppDimensions.ContentWidth */
    max-width: 100%;
    text-align: left;
    line-height: 1.5;
}

/* Responsive Adjustments for Details Page Content */
@media (max-width: 768px) {
    .country-section {
        width: 100%; /* Fill width on mobile */
        /* padding: 12px 0; from DetailsMobileView */
    }
    .more-info-bordered-box, .more-info-disclaimer {
        width: 100%;
        padding-left: 15px; /* Add some padding for text content */
        padding-right: 15px;
    }
    .more-info-bordered-box {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* Spacing for details page mobile - adjusted since back button is gone */
    /*
    #back-button-container + .transport-tobacco-section-no-borders {
        margin-top: 24px; 
    }
    */
    .transport-tobacco-section-no-borders + #country-webview-sections-container {
        margin-top: 24px; 
    }
    #country-webview-sections-container + #more-info-text-container {
        margin-top: 24px; 
    }
    .country-header-details {
        margin-bottom: 16px; /* Slightly less for mobile */
    }
    .tobacco-limits-table {
        margin-bottom: 12px; /* Slightly less for mobile */
    }
}

/* Rule added by previous step, should be removed as it's now combined and moved up 
#transport-tobacco-section .transport-icon, #transport-tobacco-section-details .transport-icon {
    align-self: flex-start; 
    margin-top: 18px; 
}
*/

/* === Narrow Mobile Styles (max-width: 480px) === */
@media (max-width: 480px) {

    #map-section {
        margin-top: 95px; /* Approx from Figma: 848px top - ~753px transport end */
        /* Background and dimensions will be handled specifically below */
    }

    /* --- Mobile Header Styles (Home Page) --- */
    #app-header {
        height: auto; /* Allow content to define height */
        background-color: transparent; /* Figma has complex bg, not a single color */
        overflow: visible; /* Allow shadow from title box if needed */
    }

    .mobile-header-layout {
        position: relative; /* For positioning of hero elements */
        width: 100%;
    }

    .mobile-header-top-bar {
        height: 60px; /* Adjusted from Figma 100px to be more proportional for 440px width, original was for 1080px context */
        background-color: #FFFCF7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px; /* Match main content padding */
        position: relative; /* To ensure it's on top of hero bg if hero extends upwards */
        z-index: 10;
    }

    .mobile-header-logo {
        height: 20px; /* Adjusted from Figma 30px */
        width: auto;
    }

    .mobile-language-indicator {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        color: #862733;
    }

    .mobile-lang-arrow {
        margin-left: 4px;
    }

    .mobile-hero-section {
        position: relative;
        width: 100%; /* Full width of the 440px viewport */
        height: 368px; /* Updated to correctly position title box based on Figma */
        overflow: hidden; /* To contain bg image */
    }

    .mobile-hero-bg-image {
        position: absolute;
        top: -123px; /* Updated to match Figma screen top relative positioning */
        left: 50%;
        transform: translateX(-50%);
        width: auto; 
        height: 375px; /* Adjusted from Figma 655px for a much smaller hero area */
        min-width: 100%; /* Ensure it covers the area */
        object-fit: cover;
        z-index: 1;
    }

    .mobile-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%; /* Figma shows red overlay on left half */
        height: 252px;
        background: rgba(199, 64, 18, 0.48);
        z-index: 2;
    }

    .mobile-title-box-container { /* This is the white box Rectangle 5 in Figma */
        position: absolute;
        bottom: 90px; /* Position slightly above bottom to match desktop */
        left: 50%;
        transform: translateX(-50%);
        width: 272px;
        height: 105px; /* As per Figma */
        background-color: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 3;
        padding: 10px;
    }
    
    .mobile-title-box-container .tabacs-title-image,
    .mobile-title-box-container .tabacs-subtitle-image {
        max-width: 90%;
        height: auto;
    }
    
    /* Mobile language dropdown */
    .mobile-language-dropdown {
        position: absolute;
        background-color: #FFFFFF;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1000;
        overflow: hidden;
    }

    .mobile-language-item {
        padding: 8px 12px;
        cursor: pointer;
        color: #862733;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
    }

    .mobile-language-item:hover {
        background-color: #f0f0f0;
    }

    .mobile-transport-title {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #1E1E1E;
        line-height: 1.1;
    }
    .mobile-transport-description {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #1E1E1E;
        line-height: 1.1;
        margin-top: 0.25rem;
    }
} 

@media (max-width: 768px) {
    .transport-icon {
        align-self: flex-start !important; /* Changed to align to top */
        margin-top: 14px !important; /* Added top margin to match the text column */
        margin-bottom: 0 !important;
    }
    #transport-tobacco-section-details .transport-icon {
        align-self: flex-start !important; /* Changed to align to top */
        margin-top: 14px !important; /* Added top margin to match the text column */
        margin-bottom: 0 !important;
    }
} 

#transport-tobacco-section-details .transport-icon {
    margin-top: 17px;
} 

.is-mobile .transport-title {
    font-size: 19px;
    color: #1E1E1E;
    font-weight: 600;
    margin-bottom: 2px;
} 

.is-mobile .transport-description {
    font-size: 16px;
    color: #1E1E1E;
    margin-top: 6px;
    line-height: 1.4;
} 

.mobile-transport-title {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #1E1E1E;
        line-height: 1.1;
}

.mobile-transport-description {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #1E1E1E;
        line-height: 1.1;
        margin-top: 0.25rem;
}

/* Mobile language dropdown - Extracted from script.js */
.mobile-language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1000;
}

.mobile-language-item {
    padding: 8px 12px;
    cursor: pointer;
    color: #862733;
}

.mobile-language-item:hover {
    background-color: #f0f0f0;
}

/* Map error handling - Extracted from script.js */
.map-error-visible {
    display: block;
    text-align: center;
    padding: 20px;
}

.map-iframe-hidden {
    display: none;
}

.map-error {
    display: none;
    text-align: center;
    padding: 20px;
}

/* Transport icon styling - Extracted from script.js */
.transport-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 48px;
    min-width: 48px;
    padding-top: 0.5rem;
}

.transport-icon-mobile {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    margin: 0;
    align-self: flex-start;
}

.transport-arrow-rotated {
    transform: rotate(180deg);
    align-self: flex-end;
    margin: 0;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    filter: brightness(0); /* Added to make the arrow black */
}

/* Specific rotation for details page arrow */
#transport-tobacco-section-details .transport-arrow-rotated {
    transform: rotate(270deg);
}

.transport-arrow-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 32px;
    padding-bottom: 14px;
    min-width: 32px;
    height: 100%;
}

@media (max-width: 768px) {
    .mobile-transport-text-column {
        flex: 0 1 auto !important; /* Changed from flex: 1 to fit content */
        padding: 0 0px !important;
        min-width: 0 !important;
        max-width: fit-content !important;
    }
}

.is-mobile .transport-tobacco-content {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    height: 90px;
    width: 100%;
    padding: 0;
    gap: 8px;
}

.is-mobile .transport-icon-column {
    width: 48px;
    min-width: 48px;
    padding-top: 14px;
    justify-content: center;
}

.is-mobile .transport-text-column {
    flex: 0 1 auto;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.is-mobile .transport-arrow-column {
    width: 32px;
    min-width: 32px;
    padding-bottom: 14px;
    justify-content: center;
}

.is-mobile .transport-title-row {
    justify-content: center;
}

.is-mobile .transport-title {
    font-size: 19px;
    color: #1E1E1E;
    font-weight: 600;
    margin-bottom: 2px;
}

.is-mobile .transport-description {
    font-size: 16px;
    color: #1E1E1E;
    margin-top: 6px;
    line-height: 1.4;
    text-align: left;
}

.is-mobile .transport-icon {
    align-self: flex-start;
    margin-top: 14px;
    margin-bottom: 0;
}

.is-mobile .transport-arrow-icon {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Mobile Transport Tobacco Section - No Borders Variant */
.is-mobile .transport-tobacco-section-no-borders {
    height: 96px;
    background-color: #FFBF3E;
    border-top: none;
    border-bottom: none;
}

.is-mobile .transport-tobacco-section-no-borders .transport-tobacco-content {
    padding-left: 0;
    padding-right: 0;
}

/* Hide aircraft icon on details page for mobile devices only */
@media (max-width: 768px) {
    #transport-tobacco-section-details .transport-icon-wrapper,
    #transport-tobacco-section-details .transport-icon-column {
        display: none;
    }
    
    /* Add more left padding to text column when icon is hidden */
    #transport-tobacco-section-details .mobile-transport-text-column {
        padding-left: 15px;
    }
    
    /* Left-align content for mobile details page */
    body.is-mobile #transport-tobacco-section-details .transport-tobacco-content {
        justify-content: flex-start;
        padding-left: 20px;
    }
    
    /* Adjust spacing for the text column */
    body.is-mobile #transport-tobacco-section-details .mobile-transport-text-column {
        margin-left: 10px;
    }
    
    /* Center arrow vertically for mobile details page */
    body.is-mobile #transport-tobacco-section-details .transport-arrow-container {
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        padding-bottom: 0;
    }
    
    /* Make the arrow bigger for mobile details page */
    body.is-mobile #transport-tobacco-section-details .transport-arrow-rotated {
        display: none; /* Hide arrow completely */
    }
    
    /* Hide the container for the arrow in mobile details view */
    body.is-mobile #transport-tobacco-section-details .transport-arrow-container {
        display: none;
    }
}

.transport-arrow-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 32px;
    padding-bottom: 14px;
    min-width: 32px;
    height: 100%;
}