/* ==========================================================================
   Aidem Neumorphic Feature Cards
   Dedicated widget stylesheet extracted from deferred-widgets.css.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════

   NEUMORPHIC FEATURE CARDS  —  .afc-*   (v0.7 — fully responsive)

   Colours: scoped <style> CSS vars per breakpoint (output by widget render())

   Layout:  Elementor responsive controls + selectors (override defaults here)

   Typo:    Group_Control_Typography selectors (override defaults here)

   ═══════════════════════════════════════════════════════════════════════════ */



/* ── Wrapper — CSS var defaults (overridden by widget <style> block) ─────── */

.afc-wrap {

  --afc-bg:          #ebf5fc;

  --afc-sh-light:    #ffffff;

  --afc-sh-dark:     #ceced1;

  --afc-num-color:   rgba(0,0,0,0.05);

  --afc-num-size:    9rem;

  --afc-img-size:    110px;

  --afc-title-color: #777;

  --afc-text-color:  #777;

  --afc-btn-bg:      #8C5FF5;

  --afc-btn-color:   #fff;

  display: block;

  width:   100%;

  padding: 40px 0;

}



/* ── Grid — gap overridden by Elementor responsive selector ──────────────── */

.afc-grid {

  display:         flex;

  justify-content: center;

  align-items:     flex-start;

  flex-wrap:       wrap;

  gap:             30px;

  padding:         40px 20px;

}



/* ── Card — width/height overridden by Elementor responsive selector ─────── */

.afc-card {

  position:      relative;

  width:         350px;

  height:        480px;

  background:    var(--afc-bg);

  border-radius: 15px;

  border:        1px solid rgba(255,255,255,0.70);

  border-color:  color-mix(in srgb, var(--afc-sh-light, #ffffff) 82%, transparent);

  box-shadow:    16px 18px 34px rgba(0,0,0,0.22),

                -12px -12px 28px rgba(255,255,255,0.78),

                 inset 2px 2px 4px rgba(255,255,255,0.86),

                 inset -2px -2px 5px rgba(0,0,0,0.06);

  will-change:   transform, opacity;

}



/* ── Inner — absolute inset, flex center ────────────────────────────────── */

.afc-inner {

  position:        absolute;

  top:             20px;

  left:            20px;

  right:           20px;

  bottom:          20px;

  background:      var(--afc-bg);

  box-shadow:      inset 8px 8px 18px rgba(0,0,0,0.075),

                   inset -8px -8px 18px rgba(255,255,255,0.90),

                   0 12px 24px rgba(0,0,0,0.055);

  border-radius:   19px;

  display:         flex;

  justify-content: center;

  align-items:     center;

  overflow:        visible;

}



/* ── Image circle — position/size overridden by Elementor responsive ─────── */

.afc-img-area {

  position:        absolute;

  top:             15px;

  left:            15px;

  width:           var(--afc-img-size, 110px);

  height:          var(--afc-img-size, 110px);

  border-radius:   50%;

  background:      var(--afc-bg);

  box-shadow:      -5px -5px 11px rgba(255,255,255,0.92),

                    6px  7px  14px rgba(0,0,0,0.16),

                    inset 1px 1px 2px rgba(255,255,255,0.80);

  display:         flex;

  align-items:     center;

  justify-content: center;

  z-index:         2;

}



.afc-img-inner {

  width:         calc(100% - 12px);

  height:        calc(100% - 12px);

  border-radius: 50%;

  overflow:      hidden;

}



.afc-img-inner img {

  width:         100%;

  height:        100%;

  object-fit:    cover;

  border-radius: 50%;

  display:       block;

}



/* ── Content ─────────────────────────────────────────────────────────────── */

.afc-content {

  padding:    20px;

  text-align: center;

  width:      100%;

}



/* When an image circle is present, push content down to clear it.

   --afc-img-size is kept in sync by the img_size responsive control selector. */

.afc-content.has-image {

  padding-top: calc(var(--afc-img-size, 110px) + 20px);

}



/* ── Number watermark — top/right/font-size overridden by Elementor ──────── */

.afc-num {

  position:       absolute;

  top:            70px;

  right:          15px;

  font-size:      var(--afc-num-size, 9rem);

  font-weight:    900;

  line-height:    1;

  color:          var(--afc-num-color) !important;

  pointer-events: none;

  user-select:    none;

  margin:         0;

  z-index:        0;

}



/* ── Title — font-size/weight overridden by Group_Control_Typography ─────── */

.afc-title {

  position:    relative;

  z-index:     1;

  font-size:   1.8em;

  font-weight: 700;

  color:       var(--afc-title-color) !important;

  margin:      0 0 10px !important;

  display:     block !important;

}



/* ── Body text ────────────────────────────────────────────────────────────── */

.afc-text {

  font-size:   1em;

  font-weight: 300;

  line-height: 1.6;

  color:       var(--afc-text-color) !important;

  margin:      0 !important;

  display:     block !important;

}



/* ── Button — neumorphic profile-card style ──────────────────────────────── */

.afc-btn {

  position:        relative;

  display:         inline-block !important;

  padding:         12px 28px !important;

  background:      var(--afc-btn-bg) !important;

  background-color: var(--afc-btn-bg) !important;

  background-image: linear-gradient(145deg, var(--afc-btn-bg), var(--afc-btn-bg)) !important;

  background-image: linear-gradient(145deg, color-mix(in srgb, var(--afc-btn-bg) 88%, #ffffff), color-mix(in srgb, var(--afc-btn-bg) 86%, #000000)) !important;

  margin-top:      15px !important;

  border-radius:   50px !important;

  color:           var(--afc-btn-color) !important;

  text-decoration: none !important;

  font-weight:     400;

  font-size:       1em;

  border:          none !important;

  cursor:          pointer;

  box-shadow:      -4px -4px 10px rgba(255,255,255,0.76),

                    6px  7px 14px rgba(0,0,0,0.22),

                    inset 1px 1px 2px rgba(255,255,255,0.34),

                    inset -2px -2px 4px rgba(0,0,0,0.18) !important;

}



/* ── Responsive defaults ─────────────────────────────────────────────────── */

@media (max-width: 736px) {

  .afc-card { width: 100%; }

  .afc-grid { padding: 20px 16px; gap: 20px; }

}