/* ─────────────────────────────────────────────────────────────────────────────
   Presentech Donations — public stylesheet
   Neutral base styles; override with your theme's CSS variables or custom CSS.
───────────────────────────────────────────────────────────────────────────── */

/* ── CSS Variables (override in your theme) ─────────────────────────────── */
:root {
    --ptech-primary:        #1a6b3c;   /* mosque green */
    --ptech-primary-dark:   #145530;
    --ptech-primary-light:  #e8f5ee;
    --ptech-text:           #1a1a1a;
    --ptech-text-muted:     #555;
    --ptech-border:         #d5d5d5;
    --ptech-bg:             #ffffff;
    --ptech-bg-surface:     #f8f8f8;
    --ptech-radius:         10px;
    --ptech-radius-sm:      6px;
    --ptech-shadow:         0 2px 12px rgba(0,0,0,.08);
    --ptech-font:           inherit;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.ptech-grid {
    display: grid;
    gap: 1.5rem;
}
.ptech-grid--cols-1 { grid-template-columns: 1fr; }
.ptech-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ptech-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ptech-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .ptech-grid--cols-3,
    .ptech-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ptech-grid { grid-template-columns: 1fr !important; }
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.ptech-card {
    background:    var(--ptech-bg);
    border:        1px solid var(--ptech-border);
    border-radius: var(--ptech-radius);
    box-shadow:    var(--ptech-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    font-family:   var(--ptech-font);
}

.ptech-card__image img {
    width:      100%;
    height:     200px;
    object-fit: cover;
    display:    block;
}

.ptech-card__body {
    padding:        1.5rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.ptech-card__title {
    margin:      0;
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--ptech-text);
    line-height: 1.3;
}

.ptech-card__description {
    color:     var(--ptech-text-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}
.ptech-card__description p { margin: 0 0 .5rem; }
.ptech-card__description p:last-child { margin: 0; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.ptech-card__form {
    display:        flex;
    flex-direction: column;
    gap:            .875rem;
    margin-top:     auto;
}

/* ── Preset amount buttons ───────────────────────────────────────────────── */
.ptech-amounts {
    display:   flex;
    flex-wrap: wrap;
    gap:       .5rem;
}

.ptech-amount-btn {
    padding:       .5rem 1rem;
    border:        1.5px solid var(--ptech-border);
    border-radius: var(--ptech-radius-sm);
    background:    var(--ptech-bg-surface);
    color:         var(--ptech-text);
    font-size:     .95rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    border-color .15s, background .15s, color .15s;
}
.ptech-amount-btn:hover {
    border-color: var(--ptech-primary);
    background:   var(--ptech-primary-light);
    color:        var(--ptech-primary-dark);
}
.ptech-amount-btn.is-active {
    border-color: var(--ptech-primary);
    background:   var(--ptech-primary);
    color:        #fff;
}

/* ── Custom amount ───────────────────────────────────────────────────────── */
.ptech-custom-amount {
    display: none;
}
.ptech-custom-amount.is-visible {
    display: block;
}

.ptech-label {
    display:       block;
    font-size:     .85rem;
    font-weight:   500;
    color:         var(--ptech-text-muted);
    margin-bottom: .3rem;
}

.ptech-input-prefix {
    display:        flex;
    align-items:    center;
    border:         1px solid var(--ptech-border);
    border-radius:  var(--ptech-radius-sm);
    overflow:       hidden;
    background:     var(--ptech-bg);
}
.ptech-input-prefix__symbol {
    padding:         0 .75rem;
    font-size:       1rem;
    color:           var(--ptech-text-muted);
    background:      var(--ptech-bg-surface);
    border-right:    1px solid var(--ptech-border);
    user-select:     none;
}
.ptech-input-prefix .ptech-input {
    border: none;
    border-radius: 0;
    flex: 1;
}

/* ── Shared input ────────────────────────────────────────────────────────── */
.ptech-input {
    width:         100%;
    padding:       .6rem .75rem;
    border:        1px solid var(--ptech-border);
    border-radius: var(--ptech-radius-sm);
    font-size:     .95rem;
    color:         var(--ptech-text);
    background:    var(--ptech-bg);
    box-sizing:    border-box;
    transition:    border-color .15s;
}
.ptech-input:focus {
    outline:      none;
    border-color: var(--ptech-primary);
    box-shadow:   0 0 0 3px rgba(26,107,60,.12);
}

/* ── Multiplier ──────────────────────────────────────────────────────────── */
.ptech-multiplier {
    background:    var(--ptech-bg-surface);
    border:        1px solid var(--ptech-border);
    border-radius: var(--ptech-radius-sm);
    padding:       .75rem 1rem;
}
.ptech-multiplier__controls {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin:      .4rem 0;
}
.ptech-qty-btn {
    width:         36px;
    height:        36px;
    border:        1.5px solid var(--ptech-border);
    border-radius: 50%;
    background:    var(--ptech-bg);
    font-size:     1.2rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color .15s, background .15s;
}
.ptech-qty-btn:hover {
    border-color: var(--ptech-primary);
    background:   var(--ptech-primary-light);
}
.ptech-qty-display {
    font-size:   1.2rem;
    font-weight: 600;
    min-width:   28px;
    text-align:  center;
}
.ptech-multiplier__total {
    margin:    0;
    font-size: .9rem;
    color:     var(--ptech-text-muted);
}
.ptech-total-display {
    color:       var(--ptech-primary-dark);
    font-weight: 700;
}

/* ── Recurring toggle ────────────────────────────────────────────────────── */
.ptech-recurring { }

.ptech-toggle {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    cursor:      pointer;
    user-select: none;
}
.ptech-toggle input[type="checkbox"] {
    display: none;
}
.ptech-toggle__track {
    width:         40px;
    height:        22px;
    border-radius: 11px;
    background:    var(--ptech-border);
    position:      relative;
    flex-shrink:   0;
    transition:    background .2s;
}
.ptech-toggle__track::after {
    content:       '';
    position:      absolute;
    width:         16px;
    height:        16px;
    background:    #fff;
    border-radius: 50%;
    top:           3px;
    left:          3px;
    transition:    transform .2s;
    box-shadow:    0 1px 3px rgba(0,0,0,.2);
}
.ptech-toggle input:checked + .ptech-toggle__track {
    background: var(--ptech-primary);
}
.ptech-toggle input:checked + .ptech-toggle__track::after {
    transform: translateX(18px);
}
.ptech-toggle__label {
    font-size:   .9rem;
    color:       var(--ptech-text);
}

/* ── Donor fields ────────────────────────────────────────────────────────── */
.ptech-donor-fields {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.ptech-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    padding:       .75rem 1.5rem;
    border:        none;
    border-radius: var(--ptech-radius-sm);
    font-size:     1rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, transform .1s;
    text-decoration: none;
}
.ptech-btn--primary {
    background: var(--ptech-primary);
    color:      #fff;
    width:      100%;
}
.ptech-btn--primary:hover {
    background: var(--ptech-primary-dark);
}
.ptech-btn--primary:active {
    transform: scale(.98);
}
.ptech-btn:disabled {
    opacity: .65;
    cursor:  not-allowed;
}

/* ── Secure note ─────────────────────────────────────────────────────────── */
.ptech-secure-note {
    margin:     0;
    font-size:  .8rem;
    color:      var(--ptech-text-muted);
    text-align: center;
}

/* ── Error / notice ──────────────────────────────────────────────────────── */
.ptech-form-error,
.ptech-notice {
    padding:       .65rem .9rem;
    border-radius: var(--ptech-radius-sm);
    font-size:     .9rem;
    margin:        0;
}
.ptech-form-error,
.ptech-notice--error {
    background: #fdecea;
    color:      #b71c1c;
    border:     1px solid #f5c6c6;
}

/* ── Portal form ─────────────────────────────────────────────────────────── */
.ptech-portal-form {
    max-width:      420px;
}
.ptech-portal-form__form {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
    margin-top:     1rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Two-step donor drawer
───────────────────────────────────────────────────────────────────────── */

/* Step 1 wrapper — just spacing */
.ptech-step1 {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}

/* Lock body scroll when drawer open */
body.ptech-drawer-open { overflow: hidden; }

/* Drawer container — fixed overlay */
.ptech-drawer {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    display:    flex;
    align-items:flex-end;         /* panel slides up from bottom */
    justify-content: center;
    pointer-events: none;
    opacity:    0;
    transition: opacity .2s;
}
.ptech-drawer.is-open {
    pointer-events: all;
    opacity:    1;
}

/* Backdrop */
.ptech-drawer__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.45);
    cursor:     pointer;
}

/* Panel */
.ptech-drawer__panel {
    position:         relative;
    background:       #fff;
    width:            100%;
    max-width:        520px;
    max-height:       92vh;
    border-radius:    16px 16px 0 0;
    overflow-y:       auto;
    box-shadow:       0 -4px 32px rgba(0,0,0,.18);
    display:          flex;
    flex-direction:   column;
    transform:        translateY(100%);
    transition:       transform .28s cubic-bezier(.32,.72,0,1);
}
.ptech-drawer.is-open .ptech-drawer__panel {
    transform: translateY(0);
}

/* On wider screens, centre as a modal instead */
@media (min-width: 640px) {
    .ptech-drawer {
        align-items: center;
        padding:     1rem;
    }
    .ptech-drawer__panel {
        border-radius: 14px;
        max-height:    88vh;
        transform:     scale(.96) translateY(8px);
        opacity:       0;
        transition:    transform .22s cubic-bezier(.32,.72,0,1), opacity .18s;
    }
    .ptech-drawer.is-open .ptech-drawer__panel {
        transform: scale(1) translateY(0);
        opacity:   1;
    }
}

/* Header */
.ptech-drawer__header {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     1rem 1.25rem .75rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.ptech-drawer__title {
    margin:      0;
    font-size:   1.05rem;
    font-weight: 600;
    color:       #1a1a1a;
}
.ptech-drawer__close {
    background:   none;
    border:       none;
    font-size:    1.2rem;
    cursor:       pointer;
    color:        #888;
    padding:      .2rem .4rem;
    border-radius:4px;
    line-height:  1;
    transition:   color .12s, background .12s;
}
.ptech-drawer__close:hover { color: #333; background: #f0f0f0; }

/* Summary bar */
.ptech-drawer__summary {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .65rem 1.25rem;
    background:      var(--ptech-pkg-accent-light, #e8f5ee);
    font-size:       .9rem;
    flex-shrink:     0;
}
.ptech-drawer__pkg-name {
    font-weight: 600;
    color:       var(--ptech-pkg-accent-dark, #145530);
}
.ptech-drawer__amount-summary {
    font-weight: 700;
    font-size:   1.05rem;
    color:       var(--ptech-pkg-accent, #1a6b3c);
}

/* Body — scrollable field area */
.ptech-drawer__body {
    padding:         1rem 1.25rem;
    display:         flex;
    flex-direction:  column;
    gap:             .85rem;
    overflow-y:      auto;
    flex:            1;
}

/* Two-column row */
.ptech-drawer__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     .65rem;
}
@media (max-width:380px) {
    .ptech-drawer__row--2col { grid-template-columns: 1fr; }
}

/* Field wrapper */
.ptech-field {
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
}
.ptech-req { color: #dc3232; }

/* Footer */
.ptech-drawer__footer {
    padding:     .9rem 1.25rem 1.1rem;
    border-top:  1px solid #eee;
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    gap:         .5rem;
}