/**
 * ecommerce_styles.css
 * Shared styles for all HSWCV e-commerce pages:
 *   donations.php, donation_success.php, image_purchase.php,
 *   membership.php, online_store.php, research_request.php,
 *   series1_bulletins.php, series2_bulletins.php
 *
 * Location: public_html/ecommerce_styles.css
 * Usage: <link rel="stylesheet" href="/ecommerce_styles.css">
 */

/* ============================================================
   CARD SHADOW
   Elevated card appearance with hover lift effect.
   Used on all product/form/section cards.
   ============================================================ */
.card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* ============================================================
   BUTTON HOVER
   Subtle scale effect on interactive buttons.
   Applied to add-to-cart, submit, and action buttons.
   ============================================================ */
.btn-hover {
    transition: all 0.2s ease;
}

.btn-hover:hover:not(:disabled) {
    transform: scale(1.05);
}

/* ============================================================
   COLLAPSIBLE SECTION HEADERS
   Clickable accordion headers used throughout e-commerce pages.
   ============================================================ */
.section-header {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.section-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   DROPDOWN ARROW
   Rotating chevron icon used in collapsible section toggles.
   JavaScript adds/removes the .open class to trigger rotation.
   ============================================================ */
.dropdown-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.dropdown-arrow.open {
    transform: rotate(180deg);
}

/* ============================================================
   COLLAPSIBLE SECTION CONTENT
   CSS-only expand/collapse using max-height transition.
   JavaScript adds/removes the .open class.
   ============================================================ */
.section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.section-content.open {
    max-height: 10000px;
}

/* ============================================================
   DONATION SUCCESS PAGE
   Animated checkmark on donation_success.php.
   ============================================================ */
.success-card {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08);
}

.check-circle {
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   SERIES 1 BULLETINS
   Hover slide effect on individual bulletin checkbox rows.
   ============================================================ */
.checkbox-item {
    transition: all 0.2s ease;
}

.checkbox-item:hover {
    background-color: #f0f9ff;
    transform: translateX(4px);
}

/* ============================================================
   SERIES 2 BULLETINS
   Bulletin cover image zoom on hover, plus lightbox overlay.
   ============================================================ */
.bulletin-cover {
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulletin-cover:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lightbox.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10000;
}

.lightbox-close:hover {
    color: #f44336;
    transform: scale(1.2);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}