/* 1. BRAND COLORS & TYPOGRAPHY */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Ubuntu:wght@400;700&display=swap');

:root {
    --iaok-maroon: #491213;
    --iaok-saffron: #FF9933;
    --iaok-blue: #7FB3D5; /* The color of your cancel button */
}

body, .wa-gadget, .wa-gadget *, .u-field-label, .fieldLabel, .label {
    font-family: 'Ubuntu', sans-serif !important;
}

/* 2. KILL THE BLUE SQUARES (GALLERY FIX) */
/* Targets the specific list items and anchor tags causing the blue boxes */
.photoAlbumView ul.thumbnails li,
.photoAlbumView ul.thumbnails li a,
.photoAlbumView ul.thumbnails li div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;
}

.photoAlbumView ul.thumbnails li img {
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border: 3px solid #fff !important; /* Adds a clean white border instead of blue */
    transition: 0.3s ease !important;
}

.photoAlbumView ul.thumbnails li:hover img {
    transform: translateY(-5px) scale(1.03) !important;
    border-color: var(--iaok-saffron) !important;
}

/* 3. VOLUNTEER FORM ALIGNMENT (THE "NUCLEAR" FIX) */
/* This forces the legacy table structure to act like a modern stack */

/* Hide the ugly "Subscription form" text */
.wa-gadget-form .formHeader, 
.wa-gadget-form h3.wa-gadget-title,
.wa-gadget-form .formHeaderTitle {
    display: none !important;
}

/* Force Table to Stack */
.wa-gadget-form table, 
.wa-gadget-form tbody, 
.wa-gadget-form tr, 
.wa-gadget-form td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border: none !important;
}

/* Style the Labels (First Name, Email, etc) */
.wa-gadget-form td.left, 
.wa-gadget-form .fieldLabel,
.wa-gadget-form label {
    padding: 15px 0 5px 0 !important;
    font-weight: 700 !important;
    color: var(--iaok-maroon) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

/* Modernize Input Fields */
.wa-gadget-form input[type="text"], 
.wa-gadget-form input[type="email"],
.wa-gadget-form textarea {
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. BUTTONS */
/* Styling the Submit and Cancel buttons to match your theme */
input[type="submit"], .wa-button, .u-btn {
    background-color: var(--iaok-maroon) !important;
    border-radius: 50px !important;
    padding: 14px 35px !important;
    transition: 0.3s !important;
}

/* If you want the Cancel button to stay blue but look modern */
.wa-gadget-form .footer .cancel, 
button[id*="cancel"] {
    background-color: var(--iaok-blue) !important;
    border-radius: 4px !important; /* Keep it square-ish like your screenshot or change to 50px */
}

/* 5. MOBILE CLEANUP */
@media (max-width: 768px) {
    .wa-gadget-form { padding: 0px !important; }
    .photoAlbumView ul.thumbnails { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
    }
}