/* ===== PAGE-STYLES.CSS (CORRECTED FOR UNIFORM BUTTONS) ===== */
/* All other layout styles remain the same – only button colors updated */

/* ===== PRICING BOX STYLES ===== */
.pricing-box { 
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6; 
    border-radius: 8px; 
    padding: 20px; 
    margin-top: 25px;
    margin-bottom: 35px;
}
.pricing-box .price { 
    font-size: 28px; 
    font-weight: bold; 
    color: #343a40; 
    margin-bottom: 15px; 
}

/* ===== PRODUCT HIGHLIGHTS STYLES ===== */
.product-details .product-highlights p { 
    line-height: 1.6;
    margin-bottom: 40px; 
}

/* ===== PRODUCT DESCRIPTION STYLES ===== */
.product-details .product-full-description p { 
    margin-top: 20px;
    line-height: 1.6;
    font-size: 16px;
    color: #495057;
}

/* ===== IMPORTANT NOTE STYLES ===== */
.additional-info {
    font-size: 16px;
    background-color: #fffbe6; 
    border-left: 5px solid #ffe58f;
    padding: 15px 15px 20px 15px;
    border-radius: 8px; 
    margin: 40px 0; 
}
.additional-info p:first-child { 
    margin-top: 0; 
}

/* ===== MODAL STYLES ===== */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: rgba(0,0,0,0.6); 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
    -webkit-animation: fadeIn 0.3s; 
    animation: fadeIn 0.3s; 
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
.modal-content { 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    max-width: 340px; 
    width: 90%; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
}
.modal-content h3 { 
    margin-top: 0; 
    font-size: 18px; 
}
.modal-content input, .modal-content textarea { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 10px; 
    margin: 8px 0; 
    border-radius: 5px; 
    border: 1px solid #ccc; 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
}
.modal-content input[readonly] { 
    background-color: #f0f0f0; 
    cursor: not-allowed; 
}
#form-error-message { 
    color: #e74c3c; 
    font-size: 14px; 
    margin-top: 10px; 
    text-align: center; 
}
.thank-you-content { 
    text-align: center; 
}
.thank-you-content h2 { 
    color: #27ae60; 
    margin-top: 0; 
}

/* ===== IMAGE GALLERY STYLES ===== */
.main-display { 
    position: relative; 
    width: 100%; 
    padding-top: 100%; 
    overflow: hidden; 
}
.main-display img, 
.main-display iframe, 
.main-display video { 
    position: absolute; 
    border: 1px solid #dee2e6;
    border-radius: 8px;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
	background: #000;
}

/* ===== QUANTITY & PRICING STYLES ===== */
.quantity-selector { 
    margin-top: 2px; 
    font-family: Arial, sans-serif; 
}
.quantity-controls { 
    display: flex; 
    align-items: center; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    width: fit-content; 
    margin-top: 5px; 
}
#qty-minus { 
    border-right: 1px solid #ccc; 
    border-radius: 4px 0 0 4px; 
}
#qty-plus { 
    border-left: 1px solid #ccc; 
    border-radius: 0 4px 4px 0; 
}
.qty-display { 
    padding: 5px 15px; 
    font-size: 16px; 
}
.total-price-container { 
    margin-top: 15px; 
    margin-bottom: 15px; 
    font-size: 22px; 
    font-weight: bold; 
    color: #0264a5; 
}
.total-price-container span { 
    font-size: 16px; 
    font-weight: normal;
    margin-bottom: 3px;
    color: #333; 
    display: block; 
}
.cta-button.no-price { 
    margin: 25px 0; 
}

/* ===== INFO MODAL (ABOUT BentaPH) ===== */
.info-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9998;
}
.info-modal-content {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    max-width: 420px;
    width: 96%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.info-modal-content h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #0264a5;
    font-size: 18px;
}
.info-modal-content p {
    margin: 6px 0;
    line-height: 1.5;
}
.info-modal-content ul {
    margin: 8px 0;
    padding-left: 18px;
}
.info-modal-content li {
    margin-bottom: 4px;
}

/* ============================================= */
/* UNIFORM BUTTON STYLES – consistent with style.css */
/* Overrides all previous button colors            */
/* ============================================= */

/* Quantity buttons */
.qty-btn {
    background-color: #f8f9fa !important;
    color: #1e2a3a !important;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 12px;
    transition: all 0.2s ease;
}
.qty-btn:hover {
    background-color: #2c7da0 !important;
    color: #ffffff !important;
}

/* Modal buttons (Send Order, Close) */
.modal-content button,
.close-modal-btn {
    background-color: #f8f9fa !important;
    color: #1e2a3a !important;
    border: none;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}
.modal-content button:hover,
.close-modal-btn:hover {
    background-color: #2c7da0 !important;
    color: #ffffff !important;
}

/* Info modal button (Got it!) */
.info-modal-content button {
    background-color: #f8f9fa !important;
    color: #1e2a3a !important;
    border: none;
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}
.info-modal-content button:hover {
    background-color: #2c7da0 !important;
    color: #ffffff !important;
}

/* Action buttons (Create Page, Share Page, Random Page) 
   – these will only take effect if you remove inline styles from generate.php */
.action-btn {
    background-color: #f8f9fa !important;
    color: #1e2a3a !important;
    transition: all 0.2s ease;
}
.action-btn:hover {
    background-color: #2c7da0 !important;
    color: #ffffff !important;
}

/* Other items section */
.other-items-section {
    text-align: center;
}
.other-items-section a {
    background-color: none;
    color: #1e2a3a;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.other-items-section a:hover {
    background-color: #2c7da0;
    color: white;
    text-decoration: none;
}