/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Mar 21 2026 | 10:13:19 */
 /* CSS Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-blue: #124f90;
            --secondary-blue: #232F58;
            --accent-red: #ce122d;
            --text-color: #232F58;
            --background-soft: #f5f7fa;
            --background-white: #ffffff;
            --shadow-light: 0 4px 14px rgba(0, 0, 0, 0.04);
            --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.06);
            --shadow-strong: 0 8px 28px rgba(0, 0, 0, 0.08);
            --border-radius: 16px;
            --border-radius-large: 24px;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-soft);
        }
        
        .container-fluid {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Section */
        .hero-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
            padding: 80px 0 100px 0;
            margin-bottom: 60px;
        }
        
        .hero-content {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .main-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            color: var(--primary-blue);
            margin-bottom: 20px;
        }
        
        .main-subtitle {
            font-size: 1.25rem;
            color: #5a6c84;
            font-weight: 400;
            margin-bottom: 40px;
        }
        
        /* Content Sections */
        .content-section {
            padding: 0px 0;
        }
        
        .content-box {
            background: var(--background-white);
            border-radius: var(--border-radius-large);
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: var(--shadow-medium);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .content-box:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-strong);
        }
        
        .section-title {
            font-size: 2rem;
            font-weight: 600;
            color: var(--secondary-blue);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 40px;
            background-color: var(--primary-blue);
            margin-right: 15px;
            border-radius: 2px;
        }
        
        .subtitle {
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--primary-blue);
            margin-bottom: 20px;
        }
        
        /* Card Layouts */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .card {
            background: var(--background-white);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-light);
            transition: all 0.3s ease;
            border: 1px solid #e8ecf1;
        }
        
        .card:hover {
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-blue);
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-blue) 0%, #1766ae 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: white;
            font-size: 24px;
        }
        
        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--secondary-blue);
            margin-bottom: 15px;
        }
        
        .card-content {
            color: #5a6c84;
            line-height: 1.6;
        }
        
        /* Quote Section */
        .quote-box {
            background: #e8f2fc;
            border-radius: var(--border-radius);
            padding: 30px;
            margin: 20px 0;
            border-left: 5px solid var(--primary-blue);
        }
        
        .quote-text {
            font-style: italic;
            font-size: 1.1rem;
            color: var(--secondary-blue);
            margin-bottom: 10px;
        }
        
        .quote-source {
            font-size: 0.9rem;
            color: var(--primary-blue);
            font-weight: 500;
        }
        
        /* Revision Product Section */
        .revision-product-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            margin-top: 40px;
        }
        
        .revision-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        
        .feature-card {
            background: linear-gradient(135deg, var(--primary-blue) 0%, #1766ae 100%);
            color: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-medium);
            transition: transform 0.2s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-3px);
        }
        
        .feature-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: white;
        }
        
        .feature-description {
            font-size: 0.95rem;
            opacity: 0.9;
            line-height: 1.5;
        }
        
        .revision-product-image {
            text-align: right;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .product-image-container {
            position: relative;
            display: inline-block;
            height: 100%;
            width: 100%;
        }
        
        
        
        .product-image {
            width: 100%;
            height: 500px;
            object-fit: contain;
            background-color: #242f57;
            border-radius: var(--border-radius-large);
            box-shadow: var(--shadow-strong);
            transition: transform 0.3s ease;
        }
        
        /* Responsive Images for Mobile */
        .mobile-image {
            width: 100%;
            height: auto;
            aspect-ratio: 3/2;
        }
        
        @media (hover: hover) {
            .product-image:hover {
                transform: scale(1.05);
            }
        }
        
        /* Discover More Section */
        .discover-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .discover-card {
            background: var(--background-white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: all 0.3s ease;
            border: 1px solid #e8ecf1;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .discover-card:hover {
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-blue);
            transform: translateY(-5px);
        }
        
        .discover-image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        
        .discover-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .discover-content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .discover-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--secondary-blue);
            margin-bottom: 15px;
        }
        
        .discover-description {
            color: #5a6c84;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
        }
        
        .learn-more-button {
            display: inline-block;
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: var(--shadow-light);
            background: white;
            color: var(--primary-blue);
            margin-top: auto;
            align-self: flex-start;
        }
        
        .discover-card:hover .learn-more-button {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }
        
        /* List Styles */
        .styled-list {
            list-style: none;
            margin-left: 0;
        }
        
        .styled-list li {
            padding-left: 30px;
            position: relative;
            margin-bottom: 12px;
        }
        
        .styled-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--primary-blue);
            font-weight: 600;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #2d5aad 0%, #5b88d1 100%);
            color: white;
            padding: 60px 0;
            border-radius: var(--border-radius-large);
            margin: 60px auto;
            text-align: center;
            box-shadow: var(--shadow-strong);
        }
        
        .cta-title {
            font-size: 2.25rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: white;
        }
        
        .cta-text  {
    font-size: 1.125rem;
    margin-bottom: 40px;
    opacity: 0.95;
    padding-left: 15px;
    padding-right: 15px;
}
        
        .btn {
            display: inline-block;
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: var(--shadow-light);
        }
        
        .btn-primary {
            background: white;
            color: var(--primary-blue);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }
        
        .btn-light {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.8);
        }
        
        .btn-light:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Warning Alert */
        .alert-warning {
            background-color: #fff4e5;
            border: 1px solid #ffe3b3;
            color: var(--secondary-blue);
            padding: 20px;
            border-radius: var(--border-radius);
            margin: 20px 0;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .main-title {
                font-size: 2.5rem;
            }
        
            .content-box {
                padding: 30px;
            }
        
            .section-title {
                font-size: 1.5rem;
            }
        
            .card-grid,
            .features-grid {
                grid-template-columns: 1fr;
            }
        
            .cta-title {
                font-size: 1.75rem;
            }
            
            .revision-product-section {
                grid-template-columns: 1fr;
            }
            
            .revision-features {
                grid-template-columns: 1fr;
            }
            
            .desktop-image {
                display: none;
            }
            
            .mobile-product-image {
                display: block;
            }
            
            .product-image {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                transition: none;
            }
            
            .product-image:hover {
                transform: none;
            }
            
            .zoom-preview {
                width: 90vw;
                height: 90vw;
                max-width: 400px;
                max-height: 400px;
                left: 50%;
                transform: translateX(-50%);
                top: 10%;
            }
        }
        
        @media (max-width: 480px) {
            .container-fluid {
                padding: 0 20px;
            }
        
            .main-title {
                font-size: 2rem;
            }
        
            .content-box {
                padding: 20px;
            }
        }
        
        /* Product indicator */
        .product-tag {
            display: inline-block;
            background: var(--accent-red);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 20px;
        }
        
        /* Desktop Image Zoom Styles */
        .image-zoom-container {
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius-large);
        }
        
        .zoom-lens {
            position: absolute;
            display: none;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid #000;
            border-radius: 50%;
            cursor: move;
            pointer-events: none;
        }

        .zoom-controls:hover ~ .zoom-lens {
            display: none !important;
        }
        
        .zoom-controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: none; /* Zoom butonları gizlendi ama zoom fonksiyonu aktif */
            flex-direction: column;
            gap: 8px;
            z-index: 10;
        }
        
        .zoom-in, .zoom-out {
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            transition: all 0.2s ease;
        }
        
        .zoom-in:hover, .zoom-out:hover {
            background: white;
            color: var(--primary-blue);
        }
        
        .zoom-preview {
            position: absolute;
            display: none;
            width: 400px;
            height: 400px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-strong);
            top: 0;
            right: calc(100% + 20px);
            background-size: auto;
            background-repeat: no-repeat;
            z-index: 20;
        }
        
        /* Mobile Image Zoom Styles */
        .mobile-image-wrapper {
            position: relative;
        }
        
        .mobile-zoom-toggle {
            display: none; /* Mobilde yakınlaştırma butonunu gizle */
        }
        
        .mobile-zoom-toggle:hover {
            background: white;
        }
        
        .mobile-zoom-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
        }
        
        .mobile-zoom-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .mobile-zoom-header {
            padding: 20px;
            text-align: right;
        }
        
        .mobile-zoom-close {
            background: none;
            border: none;
            color: white;
            font-size: 36px;
            cursor: pointer;
            padding: 0;
            width: 48px;
            height: 48px;
        }
        
        .mobile-zoom-wrapper {
            flex: 1;
            overflow: auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-zoomed-image {
            max-width: 100%;
            max-height: 100%;
            background: #242f57;
            transition: transform 0.2s ease;
            object-fit: contain;
        }
        
        .mobile-zoom-controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        /* Mobile product image */
        .mobile-product-image {
            display: none;
            text-align: center;
            margin: 30px 0;
            order: -1;
        }
        
        /* Mobil cihazlarda gösterme */
        @media (max-width: 768px) {
            .mobile-product-image {
                display: block !important;
            }
        }
        
        .mobile-product-image .product-image {
            width: 100%;
            height: auto;
            max-width: 100%;
            aspect-ratio: 3/2;
            border-radius: var(--border-radius-large);
        }

/* Reference section styles */
.references-list {
    padding-left: 2rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.references-list li {
    margin-bottom: 1rem;
    color: #333;
}

.references-list a {
    color: #1a73e8;
    text-decoration: none;
    word-break: break-word;
}

.references-list a:hover {
    text-decoration: underline;
}

.hidden-reference {
    display: none;
}

.load-more-container {
    text-align: center;
    margin: 2rem 0;
}

#load-more-references {
    padding: 0.5rem 1.5rem;
    background-color: transparent;
    border: 1px solid #1a73e8;
    color: #1a73e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#load-more-references:hover {
    background-color: #1a73e8;
    color: white;
}

#load-more-references.hidden {
    display: none;
}

/*NEW PAGE DEVICE SUPPORT*/

/* New CSS Rules Added */

/* New Variable */
:root {
    --caution-text-color: #5a6c84; /* Color for caution text */
}

/* Important Warning Box (Blue Tones) */
.pdf-important-warning {
    background-color: #e8f2fc; /* Light blue background */
    border: 1px solid #adccec; /* Medium blue border */
    color: var(--primary-blue); /* Main blue text */
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    border-left: 5px solid var(--primary-blue); /* Accent color */
}
.pdf-important-warning strong {
    color: var(--secondary-blue); /* Darker blue for strong text */
}

/* Video Grid Styles */
.pdf-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pdf-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.pdf-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* "How to Use Your Penile Implant" Section Styles */
.how-to-use-instructions-grid { 
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column */
    gap: 20px; 
    margin-bottom: 20px; 
}

@media (min-width: 768px) { /* Tablet and up: two columns */
    .how-to-use-instructions-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.how-to-use-instruction-box {
    background-color: #f9f9f9; /* Distinct light background */
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Arrange content vertically */
}
.how-to-use-instruction-box .subtitle{
    margin-top: 0; /* Remove top margin for subtitle inside the box */
}

.how-to-use-image-container {
    margin-top: 20px;
    text-align: center; /* Center image and buttons below it */
}
.how-to-use-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    cursor: pointer; /* Indicate clickable for Lightbox */
    max-height: 300px; /* Maximum height for images inside the box */
}
.how-to-use-image-container .blurred {
    filter: blur(10px); /* Initial blur */
    transition: filter 0.3s ease-in-out;
}
.how-to-use-image-container .unblurred {
    filter: blur(0);
}

.age-consent-container {
    margin: 10px 0;
    font-size: 0.9em;
    color: #555;
    text-align: center; /* Center checkbox and text */
}
.age-consent-container label {
    margin-left: 5px;
    vertical-align: middle; /* Vertically align text with checkbox */
}
.age-consent-container input[type="checkbox"] {
    vertical-align: middle; /* Vertically align checkbox with text */
}

.how-to-use-button-container { /* New container to center the "Show Image" button */
    text-align: center;
    margin-top: 10px;
}

.how-to-use-button {
    padding: 8px 15px;
    font-size: 0.9em;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; /* Add some space between button and checkbox */
    transition: background-color 0.2s ease;
    display: inline-block; /* For centering with text-align */
}
.how-to-use-button:hover {
    background-color: var(--secondary-blue);
}
.how-to-use-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.enlarge-button-container { /* Container for "Enlarge Image" button, centering it */
    margin-top: 10px;
    text-align: center;
}

/* Patient Support Materials Grid Styles */
.pdf-patient-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3-column grid */
    gap: 30px;
    margin-top: 20px;
}

.pdf-patient-material-card { /* Similar to .card but specific to this section */
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid #e8ecf1;
    display: flex;
    flex-direction: column;
}
.pdf-patient-material-card:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-blue);
}
.pdf-patient-material-card .card-title {
    font-size: 1.1rem; /* Slightly smaller if needed */
}

/* Airport Security Information Icon Style */
.airport-info-icon {
    font-size: 1.5em;
    margin-right: 10px;
    color: var(--primary-blue);
}

/* Resources and Manuals Grid Styles */
.resources-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 30px;
}
@media (min-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr 1fr; /* 2-column grid */
    }
}
.resource-card { /* Similar to .card but specific to this section */
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid #e8ecf1;
}
.resource-card .subtitle {
    margin-top: 0; /* Remove top margin for subtitle inside the card */
    font-size: 1.15rem;
}

/* Additional Information Section Styles */
.additional-info-box {
    background-color: var(--background-soft); /* Slightly different background */
    padding: 30px;
    border-radius: var(--border-radius);
    border-left: 5px solid var(--primary-blue);
}
.additional-info-box p, .additional-info-box .caution-text {
    margin-bottom: 15px;
}
.additional-info-box a {
    color: var(--primary-blue);
    font-weight: 500;
}
.additional-info-box a:hover {
    text-decoration: underline;
}
.additional-info-box .subtitle {
     margin-top: 0;
     margin-bottom: 15px;
}

/* Caution Text Style ("*Caution:") */
.caution-text {
    font-size: 0.85rem; /* Slightly smaller */
    color: var(--caution-text-color); /* Softer color */
    font-style: normal; /* Not italic */
}
.caution-text em { /* If it contains <em>, keep italic */
    font-style: italic;
}

/* Reference List Numbering Styles */
.references-list {
    padding-left: 0; /* Remove default padding if using custom counter */
    font-size: 0.9rem;
    line-height: 1.5;
    list-style-type: none; /* Remove default bullets/numbers */
    counter-reset: ref-counter; /* Initialize custom counter */
}
.references-list li {
    margin-bottom: 1rem;
    color: #333;
    padding-left: 2.5em; /* Space for custom number */
    position: relative; /* For positioning pseudo-element */
}
.references-list li::before {
    content: counter(ref-counter) ". "; /* Display counter and a dot */
    counter-increment: ref-counter; /* Increment counter for each li */
    position: absolute;
    left: 0;
    font-weight: bold;
    color: var(--primary-blue); /* Or any color you prefer */
    width: 2em; /* Provide enough space for the number */
    text-align: left; /* Align number to the left */
}
/* .references-list a, .hidden-reference, .load-more-container, #load-more-references styles
   were similarly present in your original CSS file, so they are not relisted here,
   but .references-list and li::before have been updated for numbering. */
.how-to-use-instruction-box {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .how-to-use-image-container {
            margin-top: auto;
        }
        
        .how-to-use-instructions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            align-items: stretch;
        }
        
        @media (max-width: 768px) {
            .how-to-use-instructions-grid {
                grid-template-columns: 1fr;
            }
        }