/* Responsive Design (Scoped to .wpd-donate-widget) */

@media (max-width:767px){
	html body .wpd-donate-widget #wpd-personal-form .wpd-form-row{
		display:block !important;
	}
}
@media (max-width:419px){
	html body .wpd-donate-widget .wpd-amount-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
    }
	html body .wpd-donate-widget .wpd-donation-type-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
}
@media (max-width: 480px) {
    html body .wpd-donate-widget .wpd-step-container {
        padding: 8px !important;
    }
    
    html body .wpd-donate-widget .wpd-form-card {
        padding: 16px !important;
    }
    
    html body .wpd-donate-widget .wpd-form-title {
        font-size: 20px !important;
        padding-top: 0px !important;
    }
    
    html body .wpd-donate-widget .wpd-quick-donation-options {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    html body .wpd-donate-widget .wpd-quick-option-icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    html body .wpd-donate-widget .wpd-quick-option-icon svg {
        width: 60px !important;
        height: 60px !important;
    }
    
    html body .wpd-donate-widget .wpd-form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    html body .wpd-donate-widget .wpd-title-group {
        order: 1 !important;
    }
    
    html body .wpd-donate-widget .wpd-form-group:nth-child(2) {
        order: 2 !important;
    }
    
    html body .wpd-donate-widget .wpd-form-group:nth-child(3) {
        order: 3 !important;
    }
    
    html body .wpd-donate-widget .wpd-frequency-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    html body .wpd-donate-widget .wpd-frequency-btn {
        width: calc((100% - 4px) / 2) !important;
    }
    
    html body .wpd-donate-widget .wpd-action-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-top: 32px !important;
        margin-bottom: 32px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    html body .wpd-donate-widget .wpd-back-btn {
        width: 20% !important;
        height: 50px !important;
    }
    
    html body .wpd-donate-widget .wpd-donate-btn,
    html body .wpd-donate-widget .wpd-continue-btn,
    html body .wpd-donate-widget .wpd-payment-submit-btn {
        width: 80% !important;
        height: 50px !important;
    }
    
    html body .wpd-donate-widget .wpd-gift-aid-info {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    html body .wpd-donate-widget .wpd-gift-aid-amount {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    html body .wpd-donate-widget .wpd-current-amount, 
    html body .wpd-donate-widget .wpd-gift-aid-amount, 
    html body .wpd-donate-widget .wpd-gift-aid-value, 
    html body .wpd-donate-widget .wpd-arrow {
        font-size: 18px !important;
    }
    
    html body .wpd-donate-widget .wpd-arrow {
        transform: none !important;
    }
    
    html body .wpd-donate-widget .wpd-confirmation-details {
        padding: 24px 16px !important;
    }
    
    html body .wpd-donate-widget .wpd-detail-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    html body .wpd-donate-widget .wpd-detail-row strong {
        font-size: 14px !important;
    }
    
    html body .wpd-donate-widget .wpd-detail-row span {
        font-size: 14px !important;
    }
    
    html body .wpd-donate-widget .wpd-social-share-buttons {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    
    html body .wpd-donate-widget .wpd-social-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

@media (min-width: 420px) and (max-width: 599px){
	html body .wpd-donate-widget #wpd-personal-form .wpd-form-row{
		grid-template-columns: 1fr 2fr 2fr !important;
	}
	html body .wpd-donate-widget #wpd-personal-form .wpd-form-row.wpd-phone-input-email-group{
		grid-template-columns: 2fr 2fr !important;
	}
}

@media (min-width: 420px) and (max-width: 767px){
	html body .wpd-donate-widget .wpd-amount-buttons {
        grid-template-columns: repeat(3, 1fr) !important;
    }
	html body .wpd-donate-widget .wpd-donation-type-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }
	html body .wpd-donate-widget .wpd-country-code-select{
		width:70px !important;
	}
}

/* Small Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    html body .wpd-donate-widget .wpd-step-container {
        padding: 12px !important;
    }
    
    html body .wpd-donate-widget .wpd-form-card {
        padding: 15px !important;
    }
    
    html body .wpd-donate-widget .wpd-donation-type-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    html body .wpd-donate-widget .wpd-amount-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
    
    html body .wpd-donate-widget .wpd-form-row {
        grid-template-columns: 1fr 1fr;
    }
    
    html body .wpd-donate-widget .wpd-action-buttons {
        gap: 16px;
    }
    
    html body .wpd-donate-widget .wpd-back-btn {
        width: 30%;
    }
    
    html body .wpd-donate-widget .wpd-donate-btn,
    html body .wpd-donate-widget .wpd-continue-btn,
    html body .wpd-donate-widget .wpd-payment-submit-btn {
        width: 70%;
    }
}

@media (max-width:599px){
	html body .wpd-donate-widget .wpd-form-card{
		box-shadow:none !important;
		padding:20px !important;
	}
	html body .wpd-donate-widget #wpd-custom-amount{
		width: 100% !important;
	}
	html body .wpd-donate-widget #wpd-personal-form .wpd-action-buttons{
		flex-direction: row !important;
	}
	html body .wpd-donate-widget #wpd-personal-form .wpd-form-select{
		padding-right: 22px !important;
		min-width: 16px !important;
	}
}
@media (max-width:767px){
	html body .wpd-donate-widget .wpd-amount-title,
	html body .wpd-donate-widget #wpd-personal-details-form .wpd-form-subtitle{
		font-size: 1.25rem !important;
	}
	
	html body .wpd-donate-widget .wpd-amount-description{
		text-align:center !important;	
	}
	html body .wpd-donate-widget #wpd-personal-details-form .wpd-form-title{
		margin-bottom:0px !important;
	}
}

/* Large Tablets and Small Desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    html body .wpd-donate-widget .wpd-step-container {
        padding: 16px;
    }
    
    html body .wpd-donate-widget .wpd-form-card {
        padding: 24px;
    }
    
    html body .wpd-donate-widget .wpd-form-row {
        grid-template-columns: 1fr 2fr 2fr;
    }
    
    html body .wpd-donate-widget .wpd-action-buttons {
        gap: 24px;
    }
    
    html body .wpd-donate-widget .wpd-back-btn {
        width: 20%;
    }
    
    html body .wpd-donate-widget .wpd-donate-btn,
    html body .wpd-donate-widget .wpd-continue-btn,
    html body .wpd-donate-widget .wpd-payment-submit-btn {
        width: 80%;
    }
}

/* Large Desktops */
@media (min-width: 1025px) {
    html body .wpd-donate-widget .wpd-step-container {
        max-width: 625px !important;
    }
	
	html body .wpd-donate-widget #wpd-personal-details-form{
		 max-width: 610px !important;
	}
	
	html body .wpd-donate-widget #wpd-payment-form{
		 max-width: 490px !important;
	}
    
    html body .wpd-donate-widget .wpd-form-card {
        padding: 32px;
    }
    
    html body .wpd-donate-widget .wpd-form-title {
        font-size: 28px;
    }
    
    html body .wpd-donate-widget .wpd-amount-title {
        font-size: 24px;
    }
    
    html body .wpd-donate-widget .wpd-amount-description {
        font-size: 18px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    html body .wpd-donate-widget .wpd-quick-option-icon svg,
    html body .wpd-donate-widget .wpd-logo,
    html body .wpd-donate-widget .wpd-gift-aid-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 600px) {
    html body .wpd-donate-widget .wpd-step-container {
        padding: 8px;
        min-height: auto;
    }
    
    html body .wpd-donate-widget .wpd-form-card {
        padding: 16px;
    }
    
    html body .wpd-donate-widget .wpd-form-title {
        padding-top: 16px;
        margin-bottom: 16px;
    }
    
    html body .wpd-donate-widget .wpd-action-buttons {
        margin-top: 24px;
        margin-bottom: 24px;
    }
}

/* Print Styles */
@media print {
    html body .wpd-donate-widget .wpd-app-container {
        background: white;
    }
    
    html body .wpd-donate-widget .wpd-form-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    html body .wpd-donate-widget .wpd-action-buttons,
    html body .wpd-donate-widget .wpd-back-btn,
    html body .wpd-donate-widget .wpd-donate-btn,
    html body .wpd-donate-widget .wpd-continue-btn,
    html body .wpd-donate-widget .wpd-payment-submit-btn {
        display: none;
    }
    
    html body .wpd-donate-widget .wpd-step-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html body .wpd-donate-widget * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Accessibility - High Contrast */
@media (prefers-contrast: high) {
    html body .wpd-donate-widget .wpd-form-card {
        border: 2px solid #000;
    }
    
    html body .wpd-donate-widget .wpd-donation-type-btn,
    html body .wpd-donate-widget .wpd-amount-btn,
    html body .wpd-donate-widget .wpd-frequency-btn {
        border-width: 2px;
    }
    
    html body .wpd-donate-widget .wpd-form-input,
    html body .wpd-donate-widget .wpd-form-select {
        border-width: 2px;
    }
}

/* ── iPhone / iOS Devices Exclusive Responsive Overrides ── */
@supports (-webkit-touch-callout: none) {
    html body .wpd-donate-widget select:not(.wpd-currency-select),
    html body .wpd-donate-widget .wpd-campaign-select,
    html body .wpd-donate-widget .wpd-form-select,
    html body .wpd-donate-widget .wpd-country-code-select,
    html body .wpd-donate-widget input[type="text"],
    html body .wpd-donate-widget input[type="email"],
    html body .wpd-donate-widget input[type="tel"],
    html body .wpd-donate-widget input[type="number"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: #ffffff !important;
        color: #22282b !important;
        border: 1px solid #a0a0a0 !important;
        border-radius: 8px !important;
        font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html body .wpd-donate-widget select:not(.wpd-currency-select),
    html body .wpd-donate-widget .wpd-campaign-select,
    html body .wpd-donate-widget .wpd-form-select,
    html body .wpd-donate-widget .wpd-country-code-select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 16px !important;
        padding-right: 40px !important;
        cursor: pointer !important;
    }

    html body .wpd-donate-widget .wpd-currency-select,
    html body .wpd-donate-widget #wpd-currency-select {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    html body .wpd-donate-widget select option,
    html body .wpd-donate-widget .wpd-campaign-select option,
    html body .wpd-donate-widget .wpd-form-select option {
        background-color: #ffffff !important;
        color: #22282b !important;
        font-size: 16px !important;
        font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        padding: 10px !important;
    }
}