/**
 * Bezel Component
 * 
 * A standardized circular bezel container used for:
 * - Logo display (login page, signup page)
 * - Sign in button (login page)
 * 
 * Dimensions: 130px outer container, 115px inner core
 * With gold ring on ::before and inner dark ring on ::after
 */

/* ============================================
   BASE BEZEL CONTAINER
   ============================================ */

.bezel {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  /* Force own compositing layer to prevent Safari clipping 
     when parent has backdrop-filter + border-radius */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.bezel__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115px;
  height: 115px;
  border-radius: var(--cert-radius-full);
  z-index: 1;
  background: linear-gradient(
    145deg,
    var(--cert-color-bg-secondary) 0%,
    var(--cert-color-bg-tertiary) 50%,
    var(--cert-color-bg-primary) 100%
  );
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.05),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Outer gold bezel ring */
.bezel__core::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--cert-radius-full);
  border: 2px solid var(--cert-color-gold);
  box-shadow: 
    0 0 20px var(--cert-color-gold-glow),
    inset 0 0 10px var(--cert-color-gold-glow-subtle);
  pointer-events: none;
}

/* Inner dark bezel ring */
.bezel__core::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: var(--cert-radius-full);
  border: 1px solid var(--cert-color-bg-deepest);
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 -1px 3px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

/* ============================================
   BEZEL CONTENT - Logo or Button Text
   ============================================ */

.bezel__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image inside bezel */
.bezel__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(224, 182, 71, 0.35)) drop-shadow(0 10px 30px rgba(224, 182, 71, 0.25));
  transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2;
}

/* Hover state for logo */
.bezel:hover .bezel__logo,
.dashboard-card:hover .bezel__logo,
.signup-card:hover .bezel__logo,
.login-card:hover .bezel__logo {
  filter: drop-shadow(0 0 25px rgba(224, 182, 71, 0.45)) drop-shadow(0 12px 40px rgba(224, 182, 71, 0.35));
  transform: translate(-50%, -46%) scale(1.02);
}

/* Button text inside bezel */
.bezel__text {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

/* ============================================
   BEZEL BUTTON VARIANT
   ============================================ */

.bezel--button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bezel--button .bezel__core {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bezel--button:hover .bezel__core {
  transform: translate(-50%, -50%) scale(1.02);
}

.bezel--button:hover .bezel__core::before {
  box-shadow: 
    0 0 25px var(--cert-color-gold-glow),
    inset 0 0 15px var(--cert-color-gold-glow-subtle);
}

.bezel--button:focus {
  outline: none;
}

.bezel--button:focus .bezel__core::before {
  box-shadow: 
    0 0 30px var(--cert-color-gold-glow),
    inset 0 0 20px var(--cert-color-gold-glow-subtle);
}

/* ============================================
   FALLBACK (when logo fails to load)
   ============================================ */

.bezel__fallback {
  display: none;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--cert-color-gold) 0%, var(--cert-color-gold-dark) 100%);
  border-radius: var(--cert-radius-full);
  align-items: center;
  justify-content: center;
}

.bezel__fallback i {
  color: var(--cert-color-navy);
  font-size: 3rem;
}

/* ============================================
   RESPONSIVE - Consistent across all breakpoints
   ============================================ */

@media (max-width: 768px) {
  .bezel {
    width: 130px;
    height: 130px;
  }
  
  .bezel__core {
    width: 115px;
    height: 115px;
  }
}

@media (max-width: 576px) {
  .bezel {
    width: 130px;
    height: 130px;
  }
  
  .bezel__core {
    width: 115px;
    height: 115px;
  }
}