/* ShafaPump Premium Glass FAQ - 2026 Style (Optimized and Compact) */
.gfaq {
  /* Brand tokens */
  --g-blue: #384b70;
  --g-red: #b8001f;
  --g-text: #0b1b35;
  --g-muted: #5d6b82;
  --g-glass: rgba(255, 255, 255, .65);
  --g-line: rgba(31, 111, 255, .12);

  /* Radiuses */
  --g-radius: 16px; /* Reduced radius for a tighter look */
  --g-box-radius: 10px; /* radius of the whole FAQ container */

  /* Spacing - Adjusted for compactness */
  --g-pad-y: 18px; /* Reduced vertical padding */
  --g-pad-x: 15px; /* Reduced horizontal padding */

  direction: rtl;
  font-family: inherit;
  position: relative;
  width: 100%;
  box-sizing: border-box;

  padding: var(--g-pad-y) var(--g-pad-x) !important;
  border: 1px solid rgba(56, 75, 112, .1); /* Slightly lighter border */
  border-radius: var(--g-box-radius);
  box-shadow: 0 10px 30px rgba(11, 27, 53, .05); /* Softer shadow */
  overflow: hidden; /* clips background to rounded corners */

  /* Base fill */
  background:
    radial-gradient(circle at 10% 20%, rgba(31, 111, 255, .06), transparent 40%), /* Muted gradients */
    radial-gradient(circle at 90% 80%, rgba(255, 45, 85, .06), transparent 40%),
    rgba(255, 255, 255, .95) !important; /* Slightly less opaque background */
}

/* Header - Adjusted margins and sizes */
.gfaq__head {
  text-align: center;
  margin: 0 0 18px 0 !important; /* Adjusted margin */
}

.gfaq__title {
  font-size: 25px !important; /* Reduced font size */
  line-height: 1.3; /* Adjusted line height */
  font-weight: 600; /* Kept bold */
  margin: 0 0 6px 0 !important; /* Reduced margin below title */
  color: var(--g-text);
}
.gfaq__title span { color: var(--g-blue); }

.gfaq__sub {
  color: #54595F;
  font-size: 13px; /* Reduced font size */
  line-height: 1.7; /* Adjusted line height */
  max-width: 500px;
  margin: 0 auto !important;
}

/* List - Tighter gap */
.gfaq__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Tighter gap between items */
}

/* Item Card - Subtle Hover/Open effects */
.gfaq__item {
  background: var(--g-glass);
  backdrop-filter: blur(15px); /* Slightly less blur */
  -webkit-backdrop-filter: blur(15px);

  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);

  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .03); /* Softer shadow */
  overflow: hidden !important;
  position: relative;
}

/* Hover Effect */
.gfaq__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(56, 75, 112, .1); /* Softer hover shadow */
  background-color: #f8fcff !important; /* Slightly lighter on hover */
}

/* Open State */
.gfaq__item.is-open {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .05); /* Deeper shadow when open */
}

/* Gradient border layer - kept minimal */
.gfaq__item.is-open::before,
.gfaq__item:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--g-blue), var(--g-red));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Content Layer */
.gfaq__item > * {
  position: relative;
  z-index: 1;
}

/* Question Area - Compact spacing */
.gfaq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* Reduced gap */
  padding: 14px 16px; /* Reduced padding */
  border: none;
  background: none;
  cursor: pointer;
  text-align: right;
  box-sizing: border-box;
}

.gfaq__qtext {
  font-size: 14px; /* Slightly smaller question text */
  line-height: 1.6; /* Adjusted line height */
  font-weight: 600;
  color: var(--g-text);
}

/* Plus/Minus Icon - Smaller size */
.gfaq__icon-box {
  width: 30px; /* Smaller icon box */
  height: 30px;
  border-radius: 50%;
  background: #f0f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: .3s;
  flex: 0 0 30px; /* Fixed size */
}
.gfaq__icon-box::before,
.gfaq__icon-box::after {
  content: "";
  position: absolute;
  width: 10px; /* Smaller icon lines */
  height: 1.5px; /* Smaller icon lines */
  background: var(--g-blue);
  border-radius: 1px;
  transition: .3s;
}
.gfaq__icon-box::after { transform: rotate(90deg); }

.gfaq__item.is-open .gfaq__icon-box { background: #fff1f3; } /* Pinkish background when open */
.gfaq__item.is-open .gfaq__icon-box::after { transform: rotate(0deg); opacity: 0; }
.gfaq__item.is-open .gfaq__icon-box::before { background: var(--g-red); }

/* Answer Area - Compacted */
.gfaq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .2s ease; /* Faster transition */
  opacity: 0;
}
.gfaq__item.is-open .gfaq__a {
  max-height: 600px; /* Kept max-height */
  opacity: 1;
}
.gfaq__a-inner {
  padding: 0 16px 14px; /* Reduced padding */
  color: #54595F;
  line-height: 1.8; /* Adjusted line height */
  font-size: 13.5px; /* Slightly smaller answer text */
}

/* Tags/Chips - Smaller font */
.gfaq__tag {
  background: rgba(255, 45, 85, .06);
  color: var(--g-red);
  font-size: 10.5px; /* Smaller font */
  padding: 1px 8px; /* Reduced padding */
  border-radius: 100px;
  margin-right: 10px;
  font-weight: 600;
}

/* Footer Help Area - Adjusted spacing and sizes */
.gfaq__footer {
  max-width: 900px;
  margin: 20px auto 0; /* Reduced top margin */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* Reduced gap */
  padding: 12px 15px; /* Reduced padding */
  background: rgba(255, 255, 255, .7); /* Slightly more transparent */
  border-radius: 12px; /* Less rounded */
  border: 1px solid var(--g-line);
  box-sizing: border-box;
}
.gfaq__help-info { display: flex; align-items: center; gap: 10px; } /* Reduced gap */
.gfaq__help-icon {
  width: 38px; /* Smaller icon */
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--g-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* Smaller icon font size */
}
.gfaq__help-title { font-weight: 700; font-size: 14px; display: block; } /* Smaller title */
.gfaq__help-sub { font-size: 12px; color: var(--g-muted); } /* Kept sub size */

.gfaq__btn {
  background: #b8001f;
  color: #fff !important;
  padding: 8px 18px; /* Reduced padding */
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px; /* Smaller font size */
  transition: .3s;
  white-space: nowrap;
}
.gfaq__btn:hover { background: var(--g-red); transform: scale(1.02); }

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .gfaq__title{
    font-size:20px !important;
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gfaq__title{
    font-size:19px !important;
  }
  .gfaq {
    padding: 20px 15px !important; /* Further reduced padding on mobile */
  }
  .gfaq__q {
    padding: 12px 14px; /* Further reduced question padding */
  }
  .gfaq__a-inner {
    padding: 0 14px 12px; /* Further reduced answer padding */
  }
  .gfaq__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: 10px; /* More rounded footer on mobile */
  }
  .gfaq__help-info {
    flex-direction: column;
  }
  .gfaq__btn {
    width: 100%;
    text-align: center;
  }
}