/***
=============================================
    Donate button and popup
    Loaded after header-responsive.css so these win.

    The button lives in the sticky menu bar; the popup is a Bootstrap 4
    modal (bootstrap.css is imported by style.css, bootstrap.min.js is
    loaded with the rest of the template scripts) restyled to match the
    template rather than Bootstrap's defaults.
=============================================
***/


/***
=============================================
    The button in the menu bar
=============================================
***/

.mainmenu-area.style-two .mainmenu-donate {
    padding: 19px 15px 19px 0;
}

/* The menu bar has to hold six items, the button and the green phone block
   on one 1140px row, so the item padding is trimmed to make room for the
   button rather than letting it wrap onto a second line. */
.mainmenu-area.style-two .main-menu .navigation li {
    padding: 22px 18px;
}

.donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 300ms ease;
}

.donate-btn .fa {
    font-size: 14px;
}

/* The background comes from .thm-bg-clr so the colour switcher keeps the
   button in step with the rest of the theme; hover only lifts it. */
.donate-btn:hover,
.donate-btn:focus {
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.donate-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}


/*** Medium desktops: the six menu items, the button and the green phone
     block have to share a 960px container. ***/
@media only screen and (min-width: 992px) and (max-width: 1199px) {

.mainmenu-area.style-two .main-menu .navigation li {
    padding: 22px 10px;
}
.mainmenu-area.style-two .mainmenu-donate {
    padding: 20px 10px 20px 0;
}
.donate-btn {
    padding: 9px 16px;
    font-size: 14px;
}

}


/*** Tablet and below: the menu bar is one row - hamburger on the left,
     the green "Talk to Us" block on the right. The button sits beside the
     hamburger, in the gap between the two. ***/
@media only screen and (max-width: 991px) {

.mainmenu-area.style-two .mainmenu-donate {
    position: absolute;
    top: 0;
    left: 78px;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0;
    float: none !important;
}
.mainmenu-area.style-two .mainmenu-middle {
    max-width: calc(100% - 225px);
}

}


/*** Phones: the phone block drops to its own line under the bar, which
     frees the right-hand end of the bar for the button. ***/
@media only screen and (max-width: 575px) {

.mainmenu-area.style-two .mainmenu-donate {
    top: 0;
    right: 15px;
    left: auto;
    height: 64px;
}
.mainmenu-area.style-two .mainmenu-middle {
    max-width: 100%;
}
.donate-btn {
    padding: 9px 20px;
    font-size: 14px;
}

}


/***
=============================================
    The popup
=============================================
***/

.donate-modal .modal-dialog {
    padding: 15px;
}

/* Bootstrap centres the dialog by stretching it to the viewport height, which
   crops the top of a dialog taller than the screen. Small screens stack the
   two panels, so there the dialog is pinned to the top and scrolls instead. */
@media only screen and (max-width: 991px) {
    .donate-modal .modal-dialog-centered {
        align-items: flex-start;
    }
}

.donate-modal .modal-content {
    border: none;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.donate-modal .modal-header {
    align-items: center;
    padding: 22px 30px;
    background: #1d1d1d;
    border: none;
    border-radius: 6px 6px 0 0;
}

.donate-modal .modal-title {
    margin: 0;
    color: #ffffff;
    font-family: 'Philosopher', sans-serif;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
}

.donate-modal .modal-header .close {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    opacity: 0.7;
    text-shadow: none;
    transition: opacity 300ms ease;
}

.donate-modal .modal-header .close:hover,
.donate-modal .modal-header .close:focus {
    color: #ffffff;
    opacity: 1;
}

.donate-modal .modal-body {
    padding: 28px 30px 30px;
}

.donate-intro {
    margin: 0 0 22px;
    color: #666666;
    font-size: 15px;
    line-height: 26px;
}

/* Two panels side by side on desktop, stacked from tablet down. Each panel
   keeps its own height: M-Pesa carries two rows against the bank's seven. */
.donate-channels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.donate-channel {
    flex: 1 1 260px;
    min-width: 0;
    padding: 20px 22px;
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.donate-channel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d6d6d6;
    color: #222222;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}

.donate-channel-title .fa {
    font-size: 20px;
}

.donate-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.donate-rows li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 7px 0;
}

.donate-rows li + li {
    border-top: 1px solid #ececec;
}

.donate-row-label {
    color: #777777;
    font-size: 14px;
    line-height: 22px;
}

.donate-row-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Account numbers read as data, so they get a monospace face and are
   allowed to break rather than widen the panel on a narrow screen. */
.donate-row-value strong {
    color: #222222;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
    word-break: break-word;
}

.donate-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 3px 10px;
    background: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 20px;
    color: #777777;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    transition: all 300ms ease;
}

.donate-copy:hover {
    border-color: #bbbbbb;
    color: #222222;
}

.donate-copy.is-copied {
    border-color: #026500;
    color: #026500;
}

.donate-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px dashed #d6d6d6;
    color: #777777;
    font-size: 14px;
    line-height: 24px;
}

@media only screen and (max-width: 575px) {

.donate-modal .modal-dialog {
    padding: 10px;
}
.donate-modal .modal-header {
    padding: 18px 20px;
}
.donate-modal .modal-title {
    font-size: 22px;
    line-height: 28px;
}
.donate-modal .modal-body {
    padding: 22px 20px 24px;
}
.donate-channel {
    padding: 16px 16px;
}
.donate-rows li {
    display: block;
}
.donate-row-label {
    display: block;
}

}