/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

* {
	transition: all 0.3s ease-in-out;
}

/* GLOBAL STYLE za custom dugme + ikonicu (auto širina po tekstu) */
.my-custom-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 72px;
  width: fit-content;      /* auto širina po sadržaju */
  max-width: 100%;
  white-space: nowrap;     /* da se tekst ne lomi */

  padding: 0 96px 0 56px;  /* desno više zbog kruga */
  border-radius: 9999px;

  background: #0b0b10;
  color: #f2f2f7;
  text-decoration: none;

  border: 1px solid rgba(190, 0, 255, 0.22);
  box-shadow:
    0 0 0 2px rgba(190, 0, 255, 0.10),
    0 0 28px rgba(190, 0, 255, 0.35),
    0 18px 60px rgba(0, 0, 0, 0.65);

  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2px;

  cursor: pointer;
  user-select: none;
  isolation: isolate;

  transition: box-shadow .25s ease, transform .25s ease, color .25s ease;
}

/* Ljubičasti “glow” oko dugmeta */
.my-custom-btn::before{
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%,
    rgba(190, 0, 255, 0.55),
    rgba(190, 0, 255, 0) 60%
  );
  filter: blur(18px);
  opacity: 0.28;
  z-index: -1;

  transition: opacity .25s ease, background .25s ease;
}

/* Ikonica kao desni ljubičasti krug */
.my-custom-btn i{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  width: 52px;
  height: 52px;
  border-radius: 9999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #b100ff;
  color: #ffffff;

  font-size: 18px;
  line-height: 1;

  box-shadow:
    0 0 22px rgba(190, 0, 255, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.55);

  transition: transform .25s ease, box-shadow .25s ease;
}

/* HOVER: senka dole-levo + tekst ista boja kao krug */
.my-custom-btn:hover{
  color: #b100ff;

  box-shadow:
    -18px 22px 70px rgba(0, 0, 0, 0.70), /* dole levo */
    0 0 36px rgba(190, 0, 255, 0.45),
    0 0 0 2px rgba(190, 0, 255, 0.14);
}

.my-custom-btn:hover::before{
  opacity: 0.36;
  background: radial-gradient(circle at 20% 80%,
    rgba(190, 0, 255, 0.60),
    rgba(190, 0, 255, 0) 60%
  );
}

.my-custom-btn:hover i{
  transform: translateY(-50%) translateX(2px);
}

/* ACTIVE (klik) */
.my-custom-btn:active{
  transform: translateY(0);
}

/* Focus (tastatura) */
.my-custom-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(190, 0, 255, 0.35),
    0 0 40px rgba(190, 0, 255, 0.40),
    0 18px 60px rgba(0, 0, 0, 0.65);
}


.gradient-heading {
  background: linear-gradient(90deg, #ffffff 0%, #444444 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.frame-fade-top {
  --fade-start: 50%;
  position: relative;
  border-radius: 32px;
}

.frame-fade-top::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #dc2751;
  border-bottom: none;
  border-radius: 32px 32px 0 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--fade-start), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 var(--fade-start), transparent 100%);
}

.frame-fade-bottom {
  position: relative;
  border-radius: 32px;
}

.frame-fade-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #dc2751;
  border-top: none;
  border-radius: 0 0 32px 32px;
  pointer-events: none;

  /* fade bočnih linija OD DOLE ka gore */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
}

.my-stroke {
  -webkit-text-stroke: 2px #c82aef;
  -webkit-text-fill-color: transparent;
}