/* 
=========================================================================
=
 1. CORE CONTAINER GRID ENGINE (Shared Responsive Layout)
 
=========================================================================
= */
.participant-grid,
.exposure-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile First: 1 column vertical stack */
    gap: 24px;
    padding: 24px 0;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 600px) {
    .participant-grid,
    .exposure-grid-layout { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 24px;
    }
}
@media (min-width: 992px) {
    .participant-grid,
    .exposure-grid-layout { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px; 
    }
}

/* 
=========================================================================
=
 2. SUCCESS STORIES & VIDEO HIGHLIGHTS CARDS (Text Overlay Layout)
 
=========================================================================
= */
.participant-card {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Clean Tourze subtle curves */
    overflow: hidden;
    display: block;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer; /* Keeps a pointer indicator so users know it is interactive */
}

/* UPDATED: Changed from a.participant-card:hover to target standard div elements */
.participant-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.participant-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* FIXED: Lightened grey gradient for a softer, more balanced overlay appearance */
    background: linear-gradient(to top, rgba(17, 17, 17, 0.8) 0%, rgba(17, 17, 17, 0.35) 50%, rgba(17, 17, 17, 0) 100%) !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.participant-info {
    padding: 24px 30px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left !important;
}

.participant-name {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff !important;
    text-align: left !important;
    padding-left: 0 !important; /* Strips any browser/theme indents */
}

.event-name {
    margin: 0 !important; /* Forces out theme-injected layout margins */
    padding-left: 0 !important; /* FIX: Strips theme-injected padding pushing text right */
    font-size: 0.875rem;
    font-weight: 500;
    color: #f3f4f6;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    text-align: left !important;
    display: block !important;
}

/* 
=========================================================================
=
 NEW: BRIEF DESCRIPTION HOVER ENGINE
 
=========================================================================
= */
/* Default resting state: completely hidden and collapsed */
.participant-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease-in-out, margin-top 0.4s ease;
    text-align: left !important;
    padding-left: 0 !important;
}

/* Typography styles for description paragraph text */
.participant-description p {
    margin: 0 !important; 
    padding: 0 !important; /* Double down safety check to align flush left */
    font-size: 0.9rem;
    line-height: 1.4;
    color: #e5e7eb; /* Balanced contrast text color */
    font-weight: 400;
    text-align: left !important;
}

/* Hover state engine: smoothly reveals height and slides in text opacity */
.participant-card:hover .participant-description {
    max-height: 150px; /* Safe boundary wrapper clearance allocation */
    opacity: 1;
    margin-top: 10px;
}

/* 
=========================================================================
 3. BRIEF DESCRIPTION HOVER & WYSIWYG LAYOUT ENGINE
========================================================================= */
/* Default resting state: completely hidden and collapsed */
.participant-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease-in-out, margin-top 0.4s ease;
    text-align: left !important;
    padding-left: 0 !important;
}

/* Hover state engine: smoothly reveals height and locks a boundary limit */
.participant-card:hover .participant-description {
    max-height: 180px;         /* FIX: Caps the maximum height so text cannot stretch off the card */
    opacity: 1;
    margin-top: 10px;
    overflow-y: auto;          /* FIX: Activates vertical scrolling for overflowing descriptions */
    -ms-overflow-style: none;  /* FIX: Hides native scrollbar track for Internet Explorer/Edge */
    scrollbar-width: none;     /* FIX: Hides native scrollbar track for Firefox */
}

/* FIX: Hides native scrollbars for Chrome, Safari, and Opera to maintain flawless card aesthetics */
.participant-description::-webkit-scrollbar {
    display: none;
}

/* Format paragraphs automatically produced by the WYSIWYG engine */
.participant-description p {
    margin: 0 !important; 
    padding: 0 !important; 
    font-size: 0.9rem;
    line-height: 1.4;
    color: #e5e7eb; 
    font-weight: 400;
    text-align: left !important;
}

/* Create clean separation for text wraps or line breaks */
.participant-description p:not(:last-child) {
    margin-bottom: 6px !important;
}

/* Format lists if users build them inside the editor */
.participant-description ul, 
.participant-description ol {
    margin: 6px 0 0 0 !important;
    padding-left: 18px !important;
    text-align: left !important;
}

.participant-description li {
    font-size: 0.85rem;
    color: #e5e7eb;
    line-height: 1.3;
    margin-bottom: 4px;
    text-align: left !important;
}

/* ==========================================================================
   3. MEDIA EXPOSURE CARDS (Strict Fixed Heights Layout)
   ========================================================================== */

.exposure-card-flat {
    position: relative;
    background-color: #ffffff !important; 
    border: 1px solid #eef0f2;
    border-radius: 8px;
    overflow: hidden;
    height: 400px !important; 
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

a.exposure-card-flat:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* RESTORED: Standard class target selector replaces the temporary ID tracker wildcard */
.exposure-card-image {
    width: 100% !important;
    
    /* Strict fixed height footprint */
    height: 240px !important; 
    flex-shrink: 0 !important; 
    
    /* Image layout configurations */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: block !important;
}

/* Bottom Section: The Text Container Block */
.exposure-card-content {
    height: 160px !important; 
    flex-shrink: 0 !important;
    padding: 20px 24px;
    background-color: #ffffff !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Typography styles */
.exposure-card-title {
    margin: 8px 0 0 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #111111 !important; 
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exposure-card-content .media-date {
    color: #666666 !important;
}

.exposure-tag-styled {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    backdrop-filter: none;
}

.exposure-card-flat.pg-hidden-card { display: none !important; }
.exposure-card-flat.pg-revealed-card { animation: pgFadeIn 0.5s ease forwards; }

/* ==========================================================================
   4. METADATA WRAPPERS & BILINGUAL TYPOGRAPHY FILTERS
   ========================================================================== */

.media-meta-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.media-tag {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
}

.media-date {
    font-size: 0.8rem;
    color: #e5e7eb;
    font-weight: 500;
    opacity: 0.85;
}

.media-date.date-tc {
    letter-spacing: 0.04em;
    font-family: "PingFang HK", "Helvetica Neue", "Microsoft JhengHei", STHeiti, sans-serif;
}

.media-date.date-en {
    letter-spacing: 0.01em;
}

/* ==========================================================================
   5. VIEW MORE VISIBILITY UTILITIES & TOGGLES
   ========================================================================== */

.participant-card.pg-hidden-card,
.exposure-card-flat.pg-hidden-card { 
    display: none !important; 
}

.participant-card.pg-revealed-card,
.exposure-card-flat.pg-revealed-card { 
    animation: pgFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; 
}

@keyframes pgFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.pg-action-wrapper { text-align: center; padding: 30px 0 10px 0; width: 100%; }
.pg-btn {
    background-color: #111111; color: #ffffff; border: none; padding: 14px 36px;
    font-size: 0.95rem; font-weight: 600; border-radius: 4px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: background-color 0.25s, transform 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.pg-btn:hover { background-color: #2a2a2a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pg-no-posts { text-align: center; padding: 50px; color: #777777; font-family: sans-serif; }

/* ==========================================================================
   1. Main Form Parent Container & Wrapper Centering
   ========================================================================== */

/* Target the absolute outer wrapper wrapper */
div#wcdp.wc-donation-platform {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important; /* Set your desired maximum layout width here */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
}

/* Style the actual form inside the centered container */
div#wcdp.wc-donation-platform form.wcdp-choose-donation {
    width: 100% !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    padding: 30px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   Tourze Lite Theme Integration & Pure CSS "Other" Toggle Fix
   ========================================================================== */

/* 1. Main Form Parent Container & Centering */
div#wcdp.wc-donation-platform {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
}

/* 2. Form Box Structure */
div#wcdp.wc-donation-platform form.wcdp-choose-donation {
    width: 100% !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    padding: 30px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* 3. Horizontal Grid for Donation Amounts */
.wcdp-choose-donation ul.wcdp_amount {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 12px !important;
}

/* Hide the native browser circle radio buttons */
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 4. Style Radio Labels as Clickable Modern Buttons */
.wcdp-choose-donation ul.wcdp_amount li .wcdp-button-label,
.wcdp-choose-donation ul.wcdp_amount li .wcdp_label_custom_amount {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 15px 10px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
    margin: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Button Hover State */
.wcdp-choose-donation ul.wcdp_amount li:hover .wcdp-button-label,
.wcdp-choose-donation ul.wcdp_amount li:hover .wcdp_label_custom_amount {
    border-color: #ff5a5f !important;
    background-color: #fff8f8 !important;
}

/* Button Selected State (When radio input is checked) */
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp-button-label,
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp_label_custom_amount {
    border-color: #ff5a5f !important;
    background-color: #ff5a5f !important;
    color: #ffffff !important;
}

/* 5. Pure CSS Hidden Logic for the "Other" Numeric Field */
.wcdp-choose-donation .wcdp_label_custom_amount {
    flex-direction: column !important;
    gap: 5px !important;
}

/* CRITICAL: Hide the custom numeric text wrapper by default */
.wcdp-choose-donation .wcdp_cu_field {
    display: none !important; 
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    width: 100% !important;
    margin-top: 5px !important;
}

/* CRITICAL: Pure CSS engine to show the field only when the specific "Other" radio is checked */
.wcdp-choose-donation input.wcdp_value_other:checked + .wcdp_label_custom_amount .wcdp_cu_field {
    display: flex !important; 
}

/* Format the custom typing field inside the highlighted block */
.wcdp-choose-donation input.wcdp-donation-amount {
    border: none !important;
    padding: 4px 5px !important;
    width: 100% !important;
    font-weight: 600 !important;
    outline: none !important;
    background: transparent !important;
    color: #334155 !important;
}

/* 6. Main Action Button Styles */
.wcdp-choose-donation .button.wcdp-button {
    background-color: #ff5a5f !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 14px 35px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.wcdp-choose-donation .button.wcdp-button:hover {
    background-color: #e04449 !important;
    box-shadow: 0 5px 15px rgba(255, 90, 95, 0.3) !important;
}

.wcdp-choose-donation .button-row {
    text-align: right !important;
    margin-top: 25px !important;
}

/* ==========================================================================
   Input Focus & Autofill Color Core Override (Removes Green Backgrounds)
   ========================================================================== */

/* 1. Remove background shifts when clicking or selecting text input fields */
.wcdp-choose-donation input.wcdp-donation-amount:focus,
.wcdp-choose-donation input.wcdp-donation-amount:active,
.wcdp-choose-donation input:focus {
    background-color: transparent !important; /* Forces background to stay clear */
    outline: none !important;                  /* Removes native browser highlight rings */
    box-shadow: none !important;                /* Eliminates any inner shadows */
}

/* 2. Overwrite browser autofill hooks (Which default to yellow/green tints) */
.wcdp-choose-donation input:-webkit-autofill,
.wcdp-choose-donation input:-webkit-autofill:hover, 
.wcdp-choose-donation input:-webkit-autofill:focus,
.wcdp-choose-donation input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important; /* Replaces internal color box with solid white */
    box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #334155 !important;             /* Ensures typography text color remains dark gray */
}

/* 3. Strip text highlighting selection color inside the custom container */
.wcdp-choose-donation input.wcdp-donation-amount::selection {
    background-color: rgba(255, 90, 95, 0.2) !important; /* Soft Tourze Lite pink instead of solid green */
    color: #334155 !important;
}


/* ==========================================================================
   Forced WooCommerce Price Span Background Strip (Fixes Green Clicking)
   ========================================================================== */

/* 1. Strip backgrounds and borders from the currency text wrapper completely */
.wcdp-choose-donation .woocommerce-Price-amount,
.wcdp-choose-donation .woocommerce-Price-amount *,
.wcdp-choose-donation label .amount,
.wcdp-choose-donation label span {
    background: transparent !important;       /* Destroys any green color block layers */
    background-color: transparent !important; /* Re-enforces transparent behavior */
    border: none !important;                  /* Strips accidental outline boundaries */
    box-shadow: none !important;              /* Removes focus box-shadows */
}

/* 2. Maintain white text colors only when a button item is actively checked */
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp-button-label .woocommerce-Price-amount,
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp-button-label .woocommerce-Price-currencySymbol {
    color: #ffffff !important;                /* Forces numbers to stay white on your colored button */
    background: transparent !important;
}

/* 3. Maintain standard dark text colors when the button is resting unclicked */
.wcdp-choose-donation ul.wcdp_amount li .wcdp-button-label .woocommerce-Price-amount,
.wcdp-choose-donation ul.wcdp_amount li .wcdp-button-label .woocommerce-Price-currencySymbol {
    color: #334155 !important;                /* Dark gray text to match Tourze typography */
}

/* ==========================================================================
   Remove Checked Box Visual Indicators & Symbols
   ========================================================================== */

/* 1. Force-hide default radio elements even when actively checked */
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Strip any check icon symbols injected via pseudo-elements */
.wcdp-choose-donation ul.wcdp_amount li .wcdp-button-label::before,
.wcdp-choose-donation ul.wcdp_amount li .wcdp-button-label::after,
.wcdp-choose-donation ul.wcdp_amount li .wcdp_label_custom_amount::before,
.wcdp-choose-donation ul.wcdp_amount li .wcdp_label_custom_amount::after,
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp-button-label::before,
.wcdp-choose-donation ul.wcdp_amount li input[type="radio"]:checked + .wcdp-button-label::after {
    content: none !important;      /* Destroys any icon characters like checkmarks */
    display: none !important;      /* Hides the element container entirely */
    background: none !important;   /* Strips any background image shapes */
    border: none !important;       /* Removes indicator outline boxes */
}

/* ==========================================================================
   WooCommerce Container Layout Centering Wrapper
   ========================================================================== */

/* Target the wrapper element directly to clear full-site editing alignment blocks */
div.woocommerce:has(#wcdp) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
}

/* Alternate flex centering rule if your layout structure uses block-grid rows */
div.woocommerce:has(.wcdp-choose-donation) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
}

/* ==========================================================================
   Payment Gateway Privacy Notice Duplication Fix
   ========================================================================== */

/* Target the plain text privacy notice inside the payment gateway box */
.woocommerce-privacy-policy-text {
    display: none;
}

/* ==========================================================================
   Donor Details & Checkout Layout Column Centering Reset
   ========================================================================== */

/* 1. Neutralize the grid wrapper structure completely */
form.woocommerce-checkout #customer_details,
form.woocommerce-checkout .col2-set {
    display: block !important;
    width: 100% !important;
    max-width: 700px !important; /* Limits field width so inputs look elegant */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
}

/* 2. Force the Donor Details section to fill the centered block full width */
form.woocommerce-checkout .col-1 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

/* 3. Drop the empty col-2 out of the spatial calculation so it does not displace layout */
form.woocommerce-checkout .col-2 {
    display: none !important; /* Obliterates the empty second column space allocation */
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Ensure First Name and Last Name inputs scale cleanly down the middle */
form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
}

form.woocommerce-checkout .form-row-first,
form.woocommerce-checkout .form-row-last {
    width: 48% !important; /* Keeps First/Last name side-by-side but evenly sized */
}

form.woocommerce-checkout .form-row-wide {
    width: 100% !important; /* Forces addresses, email, and phone to take full width */
}

/* 5. Center the sub-headings ("Donor details" & "Your donation") */
form.woocommerce-checkout h3#order_review_heading,
form.woocommerce-checkout .woocommerce-billing-fields h3 {
    text-align: center !important;
    width: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* 6. Center the Checkout Table & Payment Module Box */
form.woocommerce-checkout #order_review,
form.woocommerce-checkout #payment {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.wp-block-woocommerce-cart-link {
    display: none;
}

/* Overwrites theme defaults to explicitly style invalid layout states */
.woocommerce-checkout .form-row.woocommerce-invalid input#billing_phone {
    border: 2px solid #cc0000 !important;
    background-color: #fff6f6 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Silently hide backend placeholder text markers */
.woocommerce-error li:contains("__SILENT_ERR__") {
    display: none !important;
}