/** Common style **/

.donate-button {
    display: inline-block;
    background-color: #4AA5D4;
    color: #FFFFFF;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1em;
    /* margin-top: 20px; */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.donate-button:hover {
    background-color: #2E88B9;
    color: #FFFFFF;
}

#submit-donate-button {
    width: 100%;
    display: inline-block;
    background-color: #FF7043;
    color: #FFFFFF;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1em;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

#submit-donate-button:hover {
    background-color: orangered;
}

#submit-donate-button:disabled {
    background-color: #ccc;
    color: #1A237E;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.error-message,
.success-message {
    padding: 10px 20px;
    margin-top: 15px;
    border-radius: 5px;
    display: none;
    text-align: center;
}

.error-message {
    color: #b00020;
    background-color: #ffe6e6;
    border: 1px solid #b00020;
}

.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}


/**
 * One Time Popup Form
 */
/* Overlay */
.grownex-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.grownex-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Popup Card */
.grownex-popup-content {
    background: #fff;
    padding: 40px 35px 30px 35px;
    border-radius: 18px;
    width: 380px;
    max-width: 95%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 1.25, 0.5, 1), opacity 0.5s ease;
}

.grownex-popup-overlay.active .grownex-popup-content {
    transform: scale(1);
    opacity: 1;
}

/* Close Button */
.grownex-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 24px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.grownex-close:hover {
    color: #DA2738;
    transform: rotate(90deg);
}

/* Heading */
.grownex-popup-content h3 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    /* text color */
}

/* Floating label inputs */
.input-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.input-wrapper input {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #fff;
    color: #1f2937;
}

.input-wrapper label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 5px;
    color: #aaa;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Move label on focus or input */
.input-wrapper input:focus+label,
.input-wrapper input:not(:placeholder-shown)+label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    color: #DA2738;
}

/* Input focus border */
.input-wrapper input:focus {
    border-color: #DA2738;
    box-shadow: 0 0 8px rgba(218, 39, 56, 0.2);
}

/* Button */
#grownex-form button {
    display: block;
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: #DA2738;
    /* primary solid color */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(218, 39, 56, 0.3);
}

#grownex-form button:hover {
    background: #b21f2d;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(218, 39, 56, 0.4);
}

/* Success/Error Message */
#grownex-message {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    transition: all 0.3s ease;
}

.campaign-image-wrapper {
    max-width: 1440px;
}

/**
 * Read More Button for Campaign Description
 */
.gn-description-wrapper {
    position: relative;
    margin-bottom: 6px;
    /* .gn-read-more-btn below is a plain inline-block <button> with no
     * width/position of its own -- it just sits at the start of its line,
     * which is left by default. text-align on this wrapper moves it to
     * the right without touching .gn-description-content (a full-width
     * block, unaffected by a parent's text-align). */
    text-align: right;
}

.gn-description-content {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.gn-description-content.collapsed {
    max-height: 300px;
    position: relative;
}

.gn-description-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

.gn-description-content.expanded {
    max-height: 5000px;
}

.gn-read-more-btn {
    display: none;
    margin-top: 12px;
    color: #03196E;
    border-radius: 6px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gn-read-more-btn:hover {
    text-decoration: underline;
}

.gn-read-more-btn.visible {
    display: inline-block;
}

@media (max-width: 768px) {
    .gn-read-more-btn {
        margin-top: 6px;
        font-size: 17px;
    }
}

/* mobile bottom sheet cart styles */
.single-campaign-cart-wrapper {
    background-color: #03196E;
}

.upsell-wrapper .upsell-swiper .swiper-pagination {
    display: none;
}

/* Campaign Slider Image */
.campaign-slider-img {
    height: 700px;
}

@media (max-width: 768px) {
    .campaign-slider-img {
        height: auto;
    }
}

.color-bg-red {
    background-color: #DA2738;
}

/* Product Goal Progress Bar */
.grownex-product-progress {
    margin: 12px 0;
}

.grownex-product-progress .progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.grownex-product-progress .progress-stats .raised {
    color: #059669;
}

.grownex-product-progress .progress-stats .remaining {
    color: #DA2738;
}

.grownex-product-progress .progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: visible;
    /* Changed to visible so text can show */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grownex-product-progress .progress-bar-fill {
    height: 100%;
    width: 0;
    /* Initial width */
    background: linear-gradient(90deg, #DA2738, #c52131);
    border-radius: 9999px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(218, 39, 56, 0.4);
}

.grownex-product-progress .progress-remaining {
    text-align: center;
}

.grownex-product-progress .progress-bar-text {
    color: #DA2738;
    font-weight: 700;
    font-size: 14px;
}

.grownex-product-progress .progress-complete .progress-bar-text {
    color: #059669;
}

@media (max-width: 768px) {
    .grownex-product-progress .progress-stats .raise,
    .grownex-product-progress .progress-bar-text,
    .grownex-product-progress .progress-stats .raised,
    span.goal {
        font-size: 11px;
    }

    .grownex-product-progress .progress-stats {
        margin-bottom: 0;
    }

    .grownex-product-progress{
        margin: 2px;
    }
    .mobile-toggle{
        margin-bottom: 4px!important;
    }
}

/* Product card title row (layout-two/two-backup/three.php): flex row with
 * the product title <h3> first, then a collapse-toggle chevron SVG,
 * positioned by justify-content: space-between -- title lands at the
 * row's start (left), icon at its end (right), regardless of text-align.
 * Reverse just this row's own two children so the title lands on the
 * right and the icon on the left. */
.mobile-toggle {
    flex-direction: row-reverse;
}

/* Desktop "Donate Now" button below each product card (layout-two/three.php,
 * .mobile-extra wrapper). The <a> inside has no width of its own -- it's a
 * plain inline element that sits at the start of its line, so even though
 * its wrapper is full-width, the button itself hugs the left edge (its own
 * `text-center` only centers text inside the button, not the button within
 * its parent). text-align on the wrapper moves the whole button right. */
.mobile-extra {
    text-align: right;
}

/* Zakat Calculator (/zakat-calculator/, grownex-zakat-calculator.php)
 * "Assets" and "Liabilities" field labels: plain <label> tags -- the base
 * RTL rule (main.css) deliberately doesn't include `label` in its tag
 * list (labels routinely wrap a checkbox/radio + text in a flex row
 * elsewhere, where text-align would be meaningless), so these two never
 * picked up any alignment and just used the browser default (left). The
 * Nisab radio labels right above them are untouched -- they're already
 * `text-center` on purpose. */
label[for="assets"],
label[for="liabilities"] {
    text-align: right;
}

/* #mobile_cart_wrapper (layout-one/two/two-backup/three.php, template-
 * qurabni-2026.php, template-qurabni-al-aqsa.php) -- the mobile sticky
 * donation cart sheet. Every row below is `flex justify-between` (or a
 * `w-full`-lacking single-child row), positioned by DOM order/flex-start
 * regardless of text-align, same recurring issue as everywhere else on
 * the site.
 *
 * Collapsed header: item-count+"Checkout" label group (1st child, left)
 * vs subtotal+chevron group (2nd child, right) -- swap so the label
 * reads on the right and the amount+chevron sit on the left. */
.single-campaign-cart-wrapper {
    flex-direction: row-reverse;
}

/* "X Items" count line -- single child, so it just hugs flex-start (left)
 * with nothing to justify against; push it to the row's end instead. */
.flex.justify-between.items-center.mb-3.pt-1 {
    justify-content: flex-end;
}

/* JS-rendered cart line item (grownex-shopping-cart.js, mobile-cart-item
 * variant only -- NOT .cart-item's other, already-handled desktop-popup
 * variant): details block (1st child, left) vs remove button (2nd
 * child, right) -- swap so remove sits on the left, details on the right. */
.cart-item.mobile-cart-item {
    flex-direction: row-reverse;
}

/* Within that details block: product name (1st child, left) vs price
 * (2nd child, right) -- swap so the name reads on the right, price on
 * the left, matching every other name/price pairing fixed elsewhere. */
.flex.items-center.justify-between.gap-2.w-full {
    flex-direction: row-reverse;
}