/**
 * Islamic Donation UI - Wizard Styles
 *
 * @package    Islamic_Donation_UI
 * @since      1.0.0
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --idui-donate-button: #d64045;
  --idui-donate-button-hover: #aa3236;
  --idui-primary: var(--primary-color);
  --idui-primary-hover: #00a857;
  --idui-primary-dark: #0a2540;
  --idui-secondary: #6c757d;
  --idui-success: #28a745;
  --idui-danger: #dc3545;
  --idui-warning: #ffc107;
  --idui-border: #dae0e4;
  --idui-bg: #ffffff;
  --idui-bg-light: #f8fafc;
  --idui-text: #061e4b;
  --idui-text-muted: #aab0b9;
  --idui-shadow: 0 4px 20px rgba(10, 37, 64, 0.08);
  --idui-radius: 12px;
  --idui-radius-sm: 10px;
  --idui-radius-xs: 6px;
  --idui-transition: all 0.3s ease;
}

/* ============================================
   Wizard/Form Containers
   ============================================ */
.idui-checkout-wizard,
.idui-donation-wrapper,
.idui-checkout-wrapper {
  margin: 0 auto;
  font-family: Poppins;
}

/* ============================================
   Steps
   ============================================ */
.idui-step {
  display: none;
}

.idui-step.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: idui-fadeIn 0.4s ease;
}

@keyframes idui-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step Header */
.idui-step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 45px;
  width: 100vw;
  background-color: var(--primary-color-v6);
}

.idui-step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
}

.idui-confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}

.idui-confirmation > p {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  color: var(--accent-color);
}

.idui-step-subtitle {
  margin: 0;
  margin-bottom: 16px;
  color: var(--secondary-color);
  font-size: 14px;
  text-align: center;
}

/* Step Content */
.idui-step-content {
  width: 100%;
  max-width: 500px;
  padding: 24px;
}

/* Step Footer */
.idui-step-footer {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  display: flex;
  gap: 15px;
}

.idui-step-footer .idui-btn-primary {
  flex: 1;
}

.idui-step-footer-actions {
  display: flex;
  gap: 15px;
  width: 100%;
  align-items: center;
}

.idui-step-footer-actions .idui-btn-secondary {
  white-space: nowrap;
}

.idui-step-footer-actions .idui-btn-primary {
  flex: 1;
}

/* Empty Cart State */
.idui-checkout-empty {
  text-align: center;
  padding: 60px 20px;
}

.idui-checkout-empty p {
  font-size: 18px;
  color: var(--idui-text-muted);
  margin-bottom: 20px;
}

/* ============================================
   Donation Type Tabs
   ============================================ */
.idui-donation-type-tabs {
  display: flex;
  border-bottom: 2px solid var(--idui-border);
  margin-bottom: 20px;
}

.idui-tab {
  flex: 1;
  padding: 12px;
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--idui-text-muted) !important;
  cursor: pointer;
  position: relative;
  transition: var(--idui-transition);
}

.idui-tab.active {
  color: var(--accent-color) !important;
  font-weight: 900 !important;
}

.idui-tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-color);
}

.idui-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Form-level donation type tabs (for additional forms) */
.idui-form-type-tabs {
  display: flex;
  border-bottom: 2px solid var(--idui-border);
  margin-bottom: 15px;
}

.idui-form-tab {
  flex: 1;
  padding: 10px;
  background: none !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--idui-text-muted) !important;
  cursor: pointer;
  position: relative;
  transition: var(--idui-transition);
}

.idui-form-tab:hover {
  color: var(--accent-color) !important;
}

.idui-form-tab.active {
  color: var(--accent-color) !important;
  font-weight: 900 !important;
}

.idui-form-tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-color);
}

.idui-form-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tagline */
.idui-donation-tagline {
  text-align: center;
  color: var(--secondary-color);
  font-size: 15px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* ============================================
   Amount Buttons
   ============================================ */
.idui-amount-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.idui-amount-btn {
  flex: 1;
  padding: 14px 10px;
  border: 2px solid #dae0e4 !important;
  border-radius: 12px !important;
  color: white !important;
  background-color: white !important;
  font-size: 16px;
  font-weight: 700 !important;
  color: var(--secondary-colour) !important;
  cursor: pointer;
  transition: var(--idui-transition);
  height: 52px;
}

.idui-amount-btn:hover {
  border-color: var(--accent-color);
}

.idui-amount-btn.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: white !important;
  font-weight: 900 !important;
}

/* Package Description */
.idui-package-description {
  background-color: var(--idui-gray-100);
  border-radius: var(--idui-radius);
  padding: 12px 15px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--idui-text);
}

.idui-package-desc-name {
  font-weight: 700;
  color: var(--secondary-color);
}

.idui-package-desc-text {
  color: var(--secondary-color) !important;
}

/* Custom Amount Input */
.idui-custom-amount {
  display: flex;
  align-items: center;
  border: 2px solid var(--idui-border);
  border-radius: var(--idui-radius);
  background-color: white;
  padding: 0 15px;
  margin-bottom: 20px;
  transition: var(--idui-transition);
}

.idui-currency-symbol {
  font-size: 18px;
  font-weight: 600;
  color: var(--idui-text-muted);
  padding-right: 10px;
  border-right: 1px solid var(--idui-border);
}

.idui-amount-input {
  flex: 1;
  border: none;
  font-size: 24px;
  font-weight: 700;
  color: var(--idui-text);
  padding: 12px 0;
  outline: none !important;
  background: white !important;
  border: none !important;
}

.idui-amount-input::-webkit-outer-spin-button,
.idui-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   Form Fields
   ============================================ */
.idui-form-field {
  margin-bottom: 15px;
}

.idui-form-field:last-of-type {
  margin-bottom: 0;
}

.idui-form-row {
  margin-bottom: 20px;
}

.idui-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.idui-form-row-3 {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 15px;
}

.idui-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-color);
  margin-bottom: 8px;
}

.idui-label .required {
  color: var(--idui-danger);
}

.idui-input,
.idui-select {
  width: 100%;
  height: 52px;
  padding: 8px 20px !important;
  border: 1.5px solid var(--idui-border) !important;
  border-radius: var(--idui-radius) !important;
  background-color: white !important;
  color: var(--secondary-color) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-style: SemiBold;
  transition: var(--idui-transition);
  -webkit-appearance: none;
}

.idui-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px;
}

.idui-input:focus,
.idui-select:focus {
  outline: none;
  border-color: var(--idui-primary);
  box-shadow: 0 0 0 3px rgba(0, 199, 103, 0.1);
}

.idui-input:read-only {
  background: var(--idui-bg-light);
  color: var(--idui-text-muted);
}

/* Section Divider */
.idui-section-divider {
  margin: 25px 0 15px 0;
  padding-top: 20px;
  border-top: 1px solid var(--idui-border);
}

.idui-section-divider h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
}

/* ============================================
   Checkboxes
   ============================================ */
.idui-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  line-height: 1.5;
}

.idui-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.idui-checkbox-custom {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--idui-border);
  border-radius: 5px;
  background: var(--idui-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--idui-transition);
}

.idui-checkbox:checked + .idui-checkbox-custom {
  border-color: var(--accent-color);
}

.idui-checkbox:checked + .idui-checkbox-custom::after {
  content: " ";
  background-image: url("data:image/svg+xml,%3csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 7.82091V7.30239C0.131056 6.76714 1.02462 5.79462 1.52025 5.61302C1.98253 5.44337 2.49484 5.51266 2.88562 5.81374L6.25735 9.15424L15.1811 0.234287C15.6767 -0.0835151 16.2939 -0.0811256 16.7776 0.260571C17.5353 0.798205 18.4337 1.83763 17.7712 2.78626C14.1303 6.53297 10.4249 10.2438 6.68864 13.895C6.29547 14.0837 5.85941 14.0121 5.55441 13.7086C4.00318 11.9499 1.95631 10.3681 0.45274 8.59749C0.247816 8.35615 0.104845 8.12437 0.00238284 7.82091H0Z' fill='%2300D66F'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--accent-color);
  font-weight: bold;
  width: 80%;
  height: 60%;
}

.idui-checkbox-text {
  font-size: 14px;
  color: var(--idui-text);
}

.idui-checkbox-text a {
  color: var(--idui-primary);
  text-decoration: underline;
}

.idui-checkbox-highlight {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.idui-cart-drawer-section .idui-checkbox-highlight {
  margin-top: 0;
}

.idui-checkbox-highlight > .idui-checkbox-text {
  font-weight: 700;
  font-size: 11px;
}

/* ============================================
   Buttons
   ============================================ */
.idui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none !important;
  border-radius: var(--idui-radius-sm) !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--idui-transition);
  text-decoration: none;
}

.idui-btn-primary {
  background: var(--accent-color) !important;
  color: white !important;
  font-weight: 900 !important;
  font-size: 24px !important;
}

.idui-btn-primary:hover {
  background: var(--accent-color) !important;
  transform: translateY(-1px);
}

.idui-btn-outline {
  background: transparent;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
}

.idui-btn-outline:hover {
  background: #00d66f13 !important;
}

.idui-btn-add {
  background: transparent !important;
  color: var(--accent-color) !important;
  border: 1.5px solid var(--accent-color) !important;
  border-radius: var(--idui-radius-xs) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  margin: 20px 0;
  padding: 6px 8px !important;
  text-transform: uppercase;
}

.idui-btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}

.idui-btn-icon {
  font-size: 14px;
}

.idui-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.idui-btn.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: idui-spin 0.8s linear infinite;
  margin-left: 8px;
}

@keyframes idui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Gift Aid Section
   ============================================ */
.idui-gift-aid-section {
  margin-top: 25px;
}

.idui-gift-aid-content {
  margin-top: 8px;
}

.idui-gift-aid-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.idui-gift-aid-logo {
  height: 40px;
}

.idui-gift-aid-amount {
  font-size: 26px;
  color: var(--idui-text);
}

.idui-gift-aid-total {
  color: var(--accent-color);
  font-weight: 700;
}

.idui-gift-aid-description {
  font-size: 13px;
  color: var(--idui-text);
  margin-bottom: 15px;
}

.idui-gift-aid-note {
  font-size: 12px;
  color: var(--idui-text-muted);
  margin-top: 15px;
}

.idui-gift-aid-content .idui-checkbox-text {
  font-size: 11px;
}

/* ============================================
   Extra Acts Section (Step 2)
   ============================================ */
.idui-extra-acts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.idui-extra-act-card {
  border: 1px solid var(--primary-color);
  border-radius: var(--idui-radius-sm);
  background-color: var(--primary-color-v6);
  overflow: hidden;
  transition: var(--idui-transition);
  cursor: pointer;
}

.idui-extra-act-label {
  display: block;
  cursor: pointer;
}

.idui-extra-act-checkbox {
  position: absolute;
  opacity: 0;
}

.idui-extra-act-content {
  display: flex;
  align-items: stretch;
  padding: 20px;
  gap: 15px;
}

.idui-extra-act-image {
  width: 30%;
  border-radius: var(--idui-radius-sm) !important;
  object-fit: cover;
  flex-shrink: 0;
}

.idui-extra-act-info {
  flex: 1;
}

.idui-extra-act-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--secondary-color);
}

.idui-extra-act-description {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #6e7481;
}

.idui-extra-act-check-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.idui-extra-act-amount {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Extra acts quantity picker */
.idui-extra-act-qty-wrap {
  margin-left: auto;
}

.idui-extra-act-qty-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary-color);
  cursor: pointer;
}

.idui-extra-act-qty {
  width: 44px;
  padding: 3px 5px;
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius-xs);
  font-size: 13px;
  text-align: center;
}

.idui-extra-act-qty:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.idui-extra-act-qty:focus {
  border-color: var(--accent-color);
  outline: none;
}

.idui-extra-act-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--idui-border);
  border-radius: 5px;
  background: var(--idui-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--idui-transition);
}

.idui-extra-act-card.selected .idui-extra-act-check {
  border-color: var(--accent-color);
}

.idui-extra-act-card.selected .idui-extra-act-check::after {
  content: " ";
  background-image: url("data:image/svg+xml,%3csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 7.82091V7.30239C0.131056 6.76714 1.02462 5.79462 1.52025 5.61302C1.98253 5.44337 2.49484 5.51266 2.88562 5.81374L6.25735 9.15424L15.1811 0.234287C15.6767 -0.0835151 16.2939 -0.0811256 16.7776 0.260571C17.5353 0.798205 18.4337 1.83763 17.7712 2.78626C14.1303 6.53297 10.4249 10.2438 6.68864 13.895C6.29547 14.0837 5.85941 14.0121 5.55441 13.7086C4.00318 11.9499 1.95631 10.3681 0.45274 8.59749C0.247816 8.35615 0.104845 8.12437 0.00238284 7.82091H0Z' fill='%2300D66F'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--accent-color);
  font-weight: bold;
  width: 80%;
  height: 60%;
}

/* Mini Cart */
.idui-mini-cart {
  background: var(--idui-bg-light);
  border-radius: var(--idui-radius-sm);
  padding: 15px;
  margin-top: 20px;
}

.idui-mini-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.idui-mini-cart-label {
  color: var(--idui-text-muted);
  font-size: 14px;
}

.idui-mini-cart-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--idui-text);
}

/* ============================================
   Cart Summary (Step 4)
   ============================================ */
.idui-cart-summary {
  background: var(--idui-bg-light);
  border-radius: var(--idui-radius);
  padding: 20px;
  margin-bottom: 20px;
}

.idui-cart-summary h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
}

.idui-cart-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--idui-border);
  gap: 10px;
}

.idui-cart-item:last-child {
  border-bottom: none;
}

.idui-cart-item-info {
  flex: 1;
}

.idui-cart-item-title {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--idui-text);
}

.idui-cart-item-meta {
  display: block;
  font-size: 12px;
  color: var(--idui-text-muted);
}

.idui-cart-item-amount {
  font-weight: 700;
  color: var(--idui-text);
}

.idui-cart-item-remove {
  border: none !important;
  background: transparent !important;
  color: #ff0000 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--idui-transition);
}

.idui-cart-item-remove:hover {
  transform: scale(1.1);
}

.idui-cart-totals {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid var(--idui-border);
}

.idui-cart-total-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.idui-cart-grand-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--idui-text);
  padding-top: 10px;
  border-top: 1px solid var(--idui-border);
  margin-top: 5px;
}

/* Marketing & Terms */
.idui-marketing-section,
.idui-terms-section {
  margin-top: 40px;
}

.idui-marketing-section h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
}

/* Donation Note Section */
.idui-donation-note-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--idui-border);
}

.idui-field-description {
  font-size: 13px;
  color: var(--idui-text-muted);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.idui-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px 20px !important;
  border: 1.5px solid var(--idui-border) !important;
  border-radius: var(--idui-radius) !important;
  background-color: white !important;
  color: var(--secondary-color) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: var(--idui-transition);
  -webkit-appearance: none;
}

.idui-textarea:focus {
  outline: none;
  border-color: var(--idui-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 199, 103, 0.1);
}

.idui-textarea::placeholder {
  color: var(--idui-text-muted);
  font-weight: 400;
}

/* Payment Gateway */
.idui-payment-gateway-section h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
}

.idui-gateway-group {
  margin-bottom: 15px;
}

.idui-gateway-label {
  display: block;
  font-size: 13px;
  color: var(--idui-text-muted);
  margin-bottom: 8px;
}

/* ============================================
   Error States
   ============================================ */
.idui-input.error,
.idui-select.error {
  border-color: var(--idui-danger);
}

.idui-error-message {
  color: var(--idui-danger);
  font-size: 12px;
  margin-top: 5px;
}

.idui-global-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 12px 15px;
  border-radius: var(--idui-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
}

.idui-global-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  padding: 12px 15px;
  border-radius: var(--idui-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
}

/* ============================================
   Donation Form Items
   ============================================ */
.idui-donation-form-item {
  position: relative;
  background: var(--primary-color-v6);
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius);
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 8px;
}

.idui-donation-form-item:first-child {
  border: none;
  padding: 0;
  margin-top: 0;
  background: none;
}

.idui-remove-form {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgb(255, 0, 72) !important;
  background: white !important;
  color: rgb(255, 0, 72) !important;
  border-radius: 50% !important;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--idui-transition);
  z-index: 10;
  padding: 0 !important;
}

.idui-remove-form:hover {
  background: #c82333;
  transform: scale(1.1);
}

.idui-btn-add-to-cart {
  width: 100%;
  margin-top: 15px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 600px) {
  .idui-form-row-2,
  .idui-form-row-3 {
    grid-template-columns: 1fr;
  }

  .idui-step-footer {
    flex-direction: column-reverse;
  }

  .idui-progress-step .idui-step-label {
    display: none;
  }
}

/* ============================================
   Marketing Section - Step 4
   ============================================ */
.idui-marketing-section {
  margin-bottom: 25px;
}

.idui-marketing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.idui-marketing-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary-color);
}

.idui-info-icon {
  color: var(--idui-text-muted);
  cursor: help;
  font-size: 14px;
}

/* ============================================
   Donation Details Summary - Step 4
   ============================================ */
.idui-donation-details-summary {
  background: var(--idui-bg-light);
  border-radius: var(--idui-radius);
  padding: 24px;
  margin-top: 40px;
}

.idui-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--idui-primary);
  margin-bottom: 16px;
}

/* Cart Item */
.idui-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px dashed var(--idui-border);
}

.idui-cart-item:first-child {
  border-top: 1px dashed var(--idui-border);
}

.idui-cart-item:last-child {
  border-bottom: none;
}

.idui-cart-item-content {
  flex: 1;
}

.idui-cart-item-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 4px;
}

.idui-cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idui-cart-item-details span {
  font-size: 12px;
  color: #6e7481;
  line-height: 1.4;
}

.idui-cart-item-admin-tip .idui-cart-item-details span {
  font-size: 13px;
}

.idui-cart-item-admin-tip .idui-cart-item-details strong {
  color: var(--idui-text);
}

.idui-cart-item-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 16px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

/* Cart item quantity picker */
.idui-cart-item-quantity {
  display: flex;
  align-items: center;
  margin: 6px 0;
}

.idui-cart-item-quantity label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-color);
}

.idui-quantity-input,
.idui-extra-act-qty {
  width: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius-xs);
  background-color: white !important;
  font-size: 14px;
  text-align: center;
}

.idui-quantity-input:focus,
.idui-extra-act-qty:focus {
  border-color: var(--accent-color);
  outline: none;
}

.idui-cart-item-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 4px;
}

.idui-qty-indicator {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.9em;
  margin-left: 0.3em;
}

.idui-cart-item-frequency {
  font-weight: 400;
  font-size: 12px;
}

.idui-cart-item-remove {
  background: none;
  border: none;
  color: #e74c3c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
  width: min-content;
  padding: 0 !important;
}

.idui-cart-item-remove:hover {
  opacity: 0.7;
}

/* GiftAid Info Row */
.idui-summary-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px dashed var(--idui-border);
}

.idui-summary-info-label {
  font-size: 14px;
  color: var(--secondary-color);
}

.idui-summary-info-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--idui-text);
}

/* Total Section */
.idui-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 16px;
  border-top: 1px dashed var(--idui-border);
}

.idui-summary-total-label {
  font-size: 22px;
  font-weight: 700;
  color: var(--idui-text);
}

.idui-summary-total-values {
  text-align: right;
}

.idui-summary-total-line {
  font-size: 18px;
  font-weight: 700;
  color: var(--idui-text);
  margin-bottom: 4px;
}

.idui-summary-total-line:last-child {
  margin-bottom: 0;
}

.idui-total-frequency {
  font-weight: 400;
  color: var(--idui-text-muted);
}

/* ============================================
   Full-width Button
   ============================================ */
.idui-btn-full {
  width: 100% !important;
  justify-content: center;
}

/* ============================================
   Create Account Checkbox - Step 3
   ============================================ */
.idui-password-fields {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--idui-border);
}

/* ============================================
   Email Validation Checkmark
   ============================================ */
.idui-input-validated {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300c767' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.idui-input-validated:invalid,
.idui-input-validated:placeholder-shown {
  background-image: none;
  padding-right: 12px;
}

/* ============================================
   Zakat Section - Step 1
   ============================================ */
.idui-zakat-section {
  margin: 20px 0;
}

/* ============================================
   Tip/Admin Fee Section - Step 1
   ============================================ */
.idui-tip-section {
  margin: 15px 0;
}

/* ============================================
   Phone Input with Dial Code
   ============================================ */
.idui-phone-input {
  display: flex;
  gap: 10px;
}

.idui-dial-code-select {
  width: 100px;
  flex-shrink: 0;
}

.idui-dial-code-wrap {
  position: relative;
  width: 100px;
  flex-shrink: 0;
}

.idui-dial-code-wrap .idui-dial-code-select {
  width: 100%;
  color: transparent !important;
}

.idui-dial-code-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.idui-phone-input .idui-input {
  flex: 1;
}

/* ============================================
   Form Field Sizes
   ============================================ */
.idui-form-field-small {
  max-width: 112px;
}

/* ============================================
   Thank You Page
   ============================================ */
.idui-thankyou {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
  font-family: Poppins, sans-serif;
}

/* Success Header */
.idui-thankyou-header {
  text-align: center;
  margin-bottom: 30px;
}

.idui-thankyou-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  color: var(--idui-success, #28a745);
}

.idui-thankyou-icon svg {
  width: 100%;
  height: 100%;
}

.idui-thankyou-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--idui-text);
  margin: 0 0 10px;
}

.idui-thankyou-subtitle {
  font-size: 16px;
  color: var(--idui-text-muted);
  margin: 0;
}

/* Share Section */
.idui-thankyou-share {
  margin-bottom: 30px;
}

.idui-thankyou-share button,
.idui-thankyou-share a {
  padding: 14px;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.idui-share-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-color);
  text-align: center;
  margin: 0 0 15px;
}

.idui-btn-copy {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--idui-primary);
  border-radius: var(--idui-radius);
  background: transparent;
  color: var(--idui-primary);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: var(--idui-transition);
}

.idui-btn-copy:hover {
  background: var(--idui-primary);
  color: white;
}

.idui-btn-copy svg {
  flex-shrink: 0;
}

.idui-share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.idui-btn-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e6e6e6 !important;
  border-radius: var(--idui-radius);
  background: white;
  color: var(--idui-text);
  text-decoration: none;
  transition: var(--idui-transition);
}

.idui-btn-share:hover {
  border-color: var(--idui-text-muted);
  background: var(--idui-bg-light);
}

.idui-btn-share svg {
  flex-shrink: 0;
}

/* Donation Details Card */
.idui-thankyou-card {
  background: var(--idui-bg-light);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
}

.idui-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--idui-primary);
  margin: 0 0 24px;
}

.idui-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.idui-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--idui-border);
}

.idui-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.idui-detail-row.idui-detail-total {
  padding-top: 0;
}

.idui-detail-label {
  font-size: 14px;
  color: #384860;
}

.idui-detail-row.idui-detail-total .idui-detail-value {
  font-size: 20px;
}

.idui-detail-value {
  font-size: 15px;
  font-weight: 700;
  color: #384860;
  text-align: right;
}

.idui-detail-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--idui-primary-dark);
}

.idui-detail-frequency {
  font-weight: 400;
  font-size: 15px;
}

.idui-detail-ref {
  font-family: monospace;
  letter-spacing: 0.5px;
}

.idui-payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
}

.idui-payment-method svg {
  flex-shrink: 0;
}

/* Email Note */
.idui-thankyou-email-note {
  text-align: center;
  font-size: 14px;
  color: var(--idui-text-muted);
  margin-bottom: 24px;
}

/* Action Buttons */
.idui-thankyou-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.idui-thankyou-actions .idui-btn {
  text-align: center;
  padding: 14px 20px;
  font-size: 15px;
  text-decoration: none;
}

.idui-btn-secondary {
  background: white;
  color: var(--idui-text);
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius);
  transition: var(--idui-transition);
}

.idui-btn-secondary:hover {
  background: var(--idui-bg-light);
  border-color: var(--idui-text-muted);
}

/* Error State */
.idui-thankyou-error {
  text-align: center;
  padding: 60px 20px;
}

.idui-thankyou-error h2 {
  font-size: 24px;
  color: var(--idui-text);
  margin: 0 0 10px;
}

.idui-thankyou-error p {
  color: var(--idui-text-muted);
  margin: 0 0 24px;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .idui-thankyou-title {
    font-size: 24px;
  }

  .idui-thankyou-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Donate Button Shortcode
   ============================================ */
.idui-proceed-button,
.idui-donate-button {
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  border-radius: var(--idui-radius-sm);
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: var(--idui-transition);
  line-height: 1.1rem;
}

/* Primary style (default) */
.idui-donate-button--primary {
  background-color: var(--idui-donate-button);
  color: #fff;
  border: 2px solid var(--idui-donate-button);
}

.idui-proceed-button {
  background-color: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
}

.idui-donate-button--primary:hover,
.idui-donate-button--primary:focus {
  background-color: var(--idui-donate-button-hover);
  border-color: var(--idui-donate-button-hover);
  color: #fff;
}

.idui-proceed-button:hover,
.idui-proceed-button:focus {
  background-color: var(--idui-primary-hover);
  border-color: var(--idui-primary-hover);
  color: #fff;
}

/* Secondary style (outline) */
.idui-donate-button--secondary {
  background-color: transparent;
  color: var(--idui-donate-button);
  border: 2px solid var(--idui-donate-button);
  width: 100%;
}

.idui-donate-button--secondary:hover,
.idui-donate-button--secondary:focus {
  background-color: var(--idui-donate-button);
  color: #fff;
}

/* ============================================
   Project Filter Shortcode
   ============================================ */
.idui-project-filter {
  margin-bottom: 24px;
}

.idui-project-filter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.idui-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

/* Search Input */
.idui-filter-search {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.idui-input-group {
  display: flex;
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius-sm);
  background: var(--idui-bg);
}

.idui-filter-input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  font-size: 14px;
  outline: none;
  background: transparent;
}

.idui-filter-input:focus {
  outline: none;
}

.idui-filter-search-btn {
  padding: 12px 16px;
  background: var(--accent-color, var(--idui-primary));
  color: #fff;
  border: none;
  cursor: pointer;
  transition: var(--idui-transition);
}

.idui-filter-search-btn:hover {
  background: var(--idui-primary-hover);
}

/* Filter Dropdown Wrapper */
.idui-filter-dropdown-wrapper {
  position: relative;
}

.idui-filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--idui-bg);
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--idui-text);
  cursor: pointer;
  transition: var(--idui-transition);
  position: relative;
}

.idui-filter-toggle:hover {
  border-color: var(--accent-color, var(--idui-primary));
}

.idui-filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--idui-danger);
  border: 2px solid var(--idui-bg);
  border-radius: 50%;
}

/* Filter Dropdown Panel */
.idui-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  background: var(--idui-bg);
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius);
  box-shadow: var(--idui-shadow);
  padding: 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.idui-filter-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Filter Groups */
.idui-filter-group {
  margin-bottom: 16px;
}

.idui-filter-group:last-of-type {
  margin-bottom: 20px;
}

.idui-filter-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--idui-text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.idui-filter-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--idui-border);
  border-radius: var(--idui-radius-xs);
  font-size: 14px;
  color: var(--idui-text);
  background: var(--idui-bg);
  cursor: pointer;
  transition: var(--idui-transition);
}

.idui-filter-select:focus {
  outline: none;
  border-color: var(--accent-color, var(--idui-primary));
}

.idui-filter-group-row {
  display: flex;
  gap: 12px;
}

.idui-filter-half {
  flex: 1;
}

/* Filter Actions */
.idui-filter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--idui-border);
}

.idui-filter-clear {
  font-size: 14px;
  color: var(--idui-text-muted);
  text-decoration: none;
  transition: var(--idui-transition);
}

.idui-filter-clear:hover {
  color: var(--idui-danger);
}

.idui-filter-apply {
  padding: 10px 20px;
  background: var(--accent-color, var(--idui-primary));
  color: #fff;
  border: none;
  border-radius: var(--idui-radius-xs);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--idui-transition);
}

.idui-filter-apply:hover {
  background: var(--idui-primary-hover);
}

/* Loading State */
.idui-filter-loading {
  display: none;
  text-align: center;
  padding: 40px;
}

.idui-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--idui-border);
  border-top-color: var(--accent-color, var(--idui-primary));
  border-radius: 50%;
  animation: idui-spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes idui-spin {
  to {
    transform: rotate(360deg);
  }
}

.idui-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .idui-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .idui-filter-search {
    max-width: none;
  }

  .idui-filter-dropdown-wrapper {
    width: 100%;
  }

  .idui-filter-toggle {
    width: 100%;
    justify-content: center;
  }

  .idui-filter-dropdown {
    left: 0;
    right: 0;
    min-width: auto;
  }
}

/* ============================================
   Cart Button & Drawer
   ============================================ */

/* Cart Button */
.idui-cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--idui-transition);
  color: #ffffff !important;
  background: transparent !important;
}

.idui-cart-button svg {
  width: 20px;
  height: 19px;
}

/* Cart Badge */
.idui-cart-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  background-color: #dc3545;
  border-radius: 9px;
  line-height: 1;
}

/* Cart Drawer Overlay */
.idui-cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 99998;
}

.idui-cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.logged-in.admin-bar .idui-cart-drawer-overlay,
.logged-in.admin-bar .idui-cart-drawer {
  padding-top: 30px;
}

/* Cart Drawer */
.idui-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background-color: var(--idui-bg, #ffffff);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 99999;
  display: flex;
  flex-direction: column;
}

.idui-cart-drawer.active {
  transform: translateX(0);
}

/* Drawer Header */
.idui-cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--idui-border);
  background-color: var(--idui-bg-light, #f8fafc);
}

.idui-cart-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--idui-text, #061e4b);
}

.idui-cart-drawer-close {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: white !important;
  border: 1px solid var(--idui-text-muted, #6c757d) !important;
  border-radius: 50% !important;
  cursor: pointer;
  color: var(--idui-text-muted, #6c757d) !important;
  transition: var(--idui-transition);
}

.idui-cart-drawer-close:hover {
  background-color: var(--idui-text-muted, #6c757d) !important;
  color: white !important;
}

.logged-in.admin-bar .idui-cart-drawer-close {
  top: 38px;
}

/* Drawer Content */
.idui-cart-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.idui-cart-drawer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--idui-text-muted);
  font-size: 14px;
}

.idui-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--idui-border);
  border-top-color: var(--idui-primary);
  border-radius: 50%;
  animation: idui-spin 0.8s linear infinite;
}

@keyframes idui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Cart Drawer Empty State */
.idui-cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.idui-cart-drawer-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--idui-text-muted);
  opacity: 0.5;
}

.idui-cart-drawer-empty-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--idui-text);
}

.idui-cart-drawer-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--idui-text-muted);
}

/* Cart Drawer Sections */
.idui-cart-drawer-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--idui-border);
}

.idui-cart-drawer-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.idui-cart-drawer-section-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cart Items in Drawer */
.idui-cart-drawer .idui-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px;
  background-color: var(--idui-bg-light);
  border-radius: var(--idui-radius-sm);
  margin-bottom: 8px;
  position: relative;
  transition: var(--idui-transition);
}

.idui-cart-drawer .idui-cart-item.idui-loading {
  opacity: 0.5;
  pointer-events: none;
}

.idui-cart-drawer .idui-cart-item:last-child {
  margin-bottom: 0;
}

.idui-cart-drawer .idui-cart-item-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--idui-radius-xs);
  overflow: hidden;
}

.idui-cart-drawer .idui-cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idui-cart-drawer .idui-cart-item-info {
  flex: 1;
  min-width: 0;
}

.idui-cart-drawer .idui-cart-item-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
  display: block;
}

.idui-cart-drawer .idui-cart-item-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.idui-cart-drawer .idui-cart-item-location,
.idui-cart-drawer .idui-cart-item-category {
  font-size: 12px;
  color: var(--idui-text-muted);
  display: block;
}

.idui-cart-drawer .idui-cart-item-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-primary);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.idui-cart-drawer .idui-cart-item-frequency {
  font-size: 11px;
  font-weight: 400;
  color: var(--idui-text-muted);
}

.idui-cart-drawer .idui-cart-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--idui-text-muted);
  transition: var(--idui-transition);
}

.idui-cart-drawer .idui-cart-item-remove:hover {
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--idui-danger);
}

/* Extra Acts in Drawer */
.idui-cart-drawer .idui-extra-act-card {
  padding: 12px;
  border-radius: var(--idui-radius-sm);
}

/* Gift Aid & Tip in Drawer */
.idui-cart-drawer .idui-gift-aid-section,
.idui-cart-drawer .idui-tip-section {
  padding: 12px;
  background-color: var(--idui-bg-light);
  border-radius: var(--idui-radius-sm);
}

/* Cart Totals in Drawer */
.idui-cart-drawer-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--idui-text);
}

.idui-cart-drawer-total-row:last-child {
  margin-bottom: 0;
}

.idui-cart-drawer-total-row.grand-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--idui-border);
  font-size: 16px;
  font-weight: 700;
}

.idui-cart-drawer-total-row .label {
  color: var(--idui-text-muted);
}

.idui-cart-drawer-total-row .value {
  font-weight: 600;
}

.idui-cart-drawer-total-row.grand-total .value {
  color: var(--idui-primary);
}

/* Cart Drawer Summary (shared component styles) */
.idui-cart-drawer-summary {
  margin-bottom: 16px;
  background: var(--idui-bg-light);
  border-radius: var(--idui-radius);
  padding: 12px;
  margin-bottom: 40px;
}

.idui-cart-drawer-summary .idui-summary-items {
  margin-bottom: 0;
}

.idui-cart-drawer-frequency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--idui-border);
}

.idui-cart-drawer-frequency .idui-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.idui-cart-drawer-frequency .idui-drawer-donation-frequency-select {
  width: auto;
  min-width: 132px;
  max-width: 160px;
  height: 24px;
  min-height: 24px;
  padding: 0 28px 0 8px !important;
  border-radius: 6px !important;
  background-size: 16px;
  background-position: right 6px center;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 22px;
}

.idui-cart-drawer-summary .idui-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  background-color: var(--idui-bg-light);
  border-radius: var(--idui-radius-sm);
  margin-bottom: 8px;
}

.idui-cart-drawer-summary .idui-cart-item:last-child {
  margin-bottom: 0;
}

.idui-cart-drawer-summary .idui-cart-item-content {
  flex: 1;
  min-width: 0;
}

.idui-cart-drawer-summary .idui-cart-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
  margin-bottom: 4px;
}

.idui-cart-drawer-summary .idui-cart-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--idui-text-muted);
}

.idui-cart-drawer-summary .idui-cart-item-details span {
  display: inline;
}

.idui-cart-drawer-summary .idui-cart-item-details span:not(:last-child)::after {
  content: " · ";
  margin-left: 4px;
}

.idui-cart-drawer-summary .idui-cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.idui-cart-drawer-summary .idui-cart-item-price {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.idui-cart-drawer-summary .idui-cart-item-frequency {
  font-size: 11px;
  font-weight: 400;
}

.idui-cart-drawer-summary .idui-cart-item-remove {
  font-size: 10px;
  font-weight: 600;
  color: var(--idui-text-muted);
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--idui-transition);
}

.idui-cart-drawer-summary .idui-cart-item-remove:hover {
  color: var(--idui-danger);
}

.idui-cart-drawer-summary .idui-cart-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--idui-text-muted);
}

/* Cart Drawer Section Titles */
.idui-cart-drawer-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--idui-text);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Extra Acts in Drawer - Compact Style */
.idui-cart-drawer .idui-extra-acts-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idui-cart-drawer .idui-extra-act-card {
  padding: 0;
  border-radius: var(--idui-radius-sm);
  background-color: var(--idui-bg-light);
  border: 1px solid var(--idui-border);
}

.idui-cart-drawer .idui-extra-act-card.selected {
  border-color: var(--idui-primary);
  background-color: rgba(var(--idui-primary-rgb), 0.05);
}

.idui-cart-drawer .idui-extra-act-label {
  cursor: pointer;
}

.idui-cart-drawer .idui-extra-act-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.idui-cart-drawer .idui-extra-act-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--idui-radius-xs);
  flex-shrink: 0;
}

.idui-cart-drawer .idui-extra-act-info {
  flex: 1;
  min-width: 0;
}

.idui-cart-drawer .idui-extra-act-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--idui-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idui-cart-drawer .idui-extra-act-description {
  font-size: 12px;
  color: var(--idui-text-muted);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idui-cart-drawer .idui-extra-act-check-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.idui-cart-drawer .idui-extra-act-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--idui-border);
  border-radius: 3px;
  transition: var(--idui-transition);
}

.idui-cart-drawer .idui-extra-act-card.selected .idui-extra-act-check {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.idui-cart-drawer .idui-extra-act-amount {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

.idui-cart-drawer .idui-extra-act-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.idui-cart-drawer .idui-no-extras {
  font-size: 13px;
  color: var(--idui-text-muted);
  text-align: center;
  padding: 16px;
}

/* Gift Aid in Drawer - Compact Style */
.idui-cart-drawer .idui-gift-aid-section {
  padding: 12px;
  background-color: var(--idui-bg-light);
  border-radius: var(--idui-radius-sm);
}

.idui-cart-drawer .idui-gift-aid-logo-container {
  flex-shrink: 0;
}

.idui-cart-drawer .idui-gift-aid-logo {
  width: 100px;
  height: auto;
}

.idui-cart-drawer .idui-gift-aid-content {
  width: 100%;
}

.idui-cart-drawer .idui-gift-aid-amount {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.idui-cart-drawer .idui-gift-aid-description {
  font-size: 12px;
  margin-bottom: 10px;
}

.idui-cart-drawer .idui-checkbox-label {
  font-size: 12px;
}

.idui-cart-drawer .idui-gift-aid-note {
  font-size: 11px;
  margin-top: 8px;
}

/* Tip Section in Drawer - Compact Style */
.idui-cart-drawer .idui-tip-section .idui-checkbox-label {
  font-size: 13px;
}

/* Drawer Footer */
.idui-cart-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--idui-border);
  background-color: var(--idui-bg);
}

.idui-cart-drawer-totals {
  margin-bottom: 12px;
}

.idui-cart-drawer-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.idui-cart-drawer-total-row .label {
  font-size: 14px;
  color: var(--idui-text-muted);
}

.idui-cart-drawer-total-row .value {
  font-size: 16px;
  font-weight: 600;
  color: var(--idui-text);
}

.idui-cart-drawer-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.idui-cart-drawer-checkout:disabled,
.idui-cart-drawer-checkout.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 480px) {
  .idui-cart-drawer {
    max-width: 100%;
  }
}

/* Body scroll lock when drawer is open */
body.idui-cart-drawer-open {
  overflow: hidden;
}