/* ==========================================================================
   EC Variant Swatches v5.0 – Frontend Styles
   CSS-variable driven: swatch edge borders, section margins, text-align.
   ========================================================================== */

/* ==========================================================================
   METAL SWATCHES
   ========================================================================== */

.ecvs-metal-type {
   margin-top: var(--ecvs-metal-mt, 0px);
   margin-bottom: var(--ecvs-metal-mb, 16px);
   overflow: visible;
   text-align: var(--ecvs-text-align, left);
}

.ecvs-metal-label {
   font-size: inherit;
   margin-bottom: 0.5em;
}

.ecvs-swatches {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   overflow: visible;
   /* Respect text-align for inline-flex */
   justify-content: var(--ecvs-justify, flex-start);
}

/* ─── Individual swatch ────────────────────────────────────────────── */
.ecvs-swatch {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--ecvs-swatch-size, 34px);
   height: var(--ecvs-swatch-size, 34px);
   border-radius: var(--ecvs-swatch-radius, 50%);
   /* Individual edge borders for swatches */
   border-top: var(--ecvs-swatch-bt, 2px) solid transparent;
   border-right: var(--ecvs-swatch-br, 2px) solid transparent;
   border-bottom: var(--ecvs-swatch-bb, 2px) solid transparent;
   border-left: var(--ecvs-swatch-bl, 2px) solid transparent;
   padding: var(--ecvs-swatch-gap, 3px);
   cursor: pointer;
   transition: transform 0.2s ease;
   text-decoration: none !important;
   outline: none;
   box-sizing: border-box;
   overflow: visible;
   flex-shrink: 0;
}

.ecvs-swatch:hover {
   transform: scale(1.15);
   text-decoration: none !important;
}

.ecvs-swatch:focus-visible {
   outline: 2px solid var(--ecvs-brand, #2d2c6f);
   outline-offset: 2px;
}

/* Active swatch — show border on edges */
.ecvs-swatch--active {
   border-top-color: var(--ecvs-swatch-border-color, #333);
   border-right-color: var(--ecvs-swatch-border-color, #333);
   border-bottom-color: var(--ecvs-swatch-border-color, #333);
   border-left-color: var(--ecvs-swatch-border-color, #333);
}

.ecvs-swatch--active:hover {
   cursor: default;
   transform: none;
}

/* Color circle */
.ecvs-swatch__color {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: var(--ecvs-swatch-radius, 50%);
   border: 1px solid rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
}

/* Image swatch */
.ecvs-swatch__image {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: var(--ecvs-swatch-radius, 50%);
   object-fit: cover;
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-sizing: border-box;
}

/* Tooltip */
.ecvs-swatch__tooltip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   background: #333;
   color: #fff;
   font-size: 11px;
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 4px;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s, visibility 0.2s;
   z-index: 10;
   line-height: 1.3;
}

.ecvs-swatch__tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid transparent;
   border-top-color: #333;
}

.ecvs-swatch:hover .ecvs-swatch__tooltip {
   opacity: 1;
   visibility: visible;
}


/* ==========================================================================
   DIAMOND TYPE BUTTONS
   ========================================================================== */

.ecvs-diamond-type {
   margin-top: var(--ecvs-diamond-mt, 0px);
   margin-bottom: var(--ecvs-diamond-mb, 16px);
   overflow: visible;
   text-align: var(--ecvs-text-align, left);
}

.ecvs-diamond-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   overflow: visible;
   padding-bottom: 2px;
}

.ecvs-diamond-btn-wrap {
   position: relative;
   display: inline-flex;
   overflow: visible;
}

.ecvs-diamond-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 20px;
   font-size: 13px;
   font-weight: var(--ecvs-btn-font-weight, 400);
   font-family: inherit;
   line-height: 1.4;
   letter-spacing: 0.3px;
   border-radius: 0;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s;
   outline: none;
   text-transform: none;
   white-space: nowrap;
   box-sizing: border-box;
   border-top: var(--ecvs-btn-border-top, 1px) solid transparent;
   border-right: var(--ecvs-btn-border-right, 1px) solid transparent;
   border-bottom: var(--ecvs-btn-border-bottom, 1px) solid transparent;
   border-left: var(--ecvs-btn-border-left, 1px) solid transparent;
   overflow: visible;
   margin-bottom: 2px;
}

.ecvs-diamond-btn--active {
   background-color: var(--ecvs-brand, #2d2c6f);
   color: #ffffff;
   border-top-color: var(--ecvs-brand, #2d2c6f);
   border-right-color: var(--ecvs-brand, #2d2c6f);
   border-bottom-color: var(--ecvs-brand, #2d2c6f);
   border-left-color: var(--ecvs-brand, #2d2c6f);
}

.ecvs-diamond-btn--active:hover {
   background-color: var(--ecvs-brand-hover, #23225a);
   border-top-color: var(--ecvs-brand-hover, #23225a);
   border-right-color: var(--ecvs-brand-hover, #23225a);
   border-bottom-color: var(--ecvs-brand-hover, #23225a);
   border-left-color: var(--ecvs-brand-hover, #23225a);
}

.ecvs-diamond-btn--disabled {
   background-color: #ffffff;
   color: var(--ecvs-brand, #2d2c6f);
   border-top-color: var(--ecvs-brand, #2d2c6f);
   border-right-color: var(--ecvs-brand, #2d2c6f);
   border-bottom-color: var(--ecvs-brand, #2d2c6f);
   border-left-color: var(--ecvs-brand, #2d2c6f);
   cursor: not-allowed;
   opacity: 0.55;
}

.ecvs-diamond-btn--disabled:hover {
   opacity: 0.75;
}

/* Tooltip inside disabled button */
.ecvs-btn-tooltip {
   position: absolute;
   bottom: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%);
   background: #333;
   color: #fff;
   font-size: 12px;
   font-weight: 400;
   padding: 6px 12px;
   border-radius: 4px;
   white-space: normal;
   width: 220px;
   line-height: 1.5;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s, visibility 0.2s;
   z-index: 20;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   text-align: center;
}

.ecvs-btn-tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 6px solid transparent;
   border-top-color: #333;
}

.ecvs-diamond-btn--disabled:hover .ecvs-btn-tooltip {
   opacity: 1;
   visibility: visible;
}


/* ==========================================================================
   RING SIZE (inline)
   ========================================================================== */

.ecvs-ring-size {
   margin-top: var(--ecvs-ring-mt, 0px);
   margin-bottom: var(--ecvs-ring-mb, 16px);
   overflow: visible;
   text-align: var(--ecvs-text-align, left);
}

.ecvs-ring-size__row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   overflow: visible;
   padding-bottom: 2px;
}

.ecvs-ring-size__label {
   white-space: nowrap;
   font-size: inherit;
}

/* Styled dropdown */
.ecvs-ring-size__select-wrap {
   position: relative;
   display: inline-block;
   overflow: visible;
}

.ecvs-styled-select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: #fff;
   color: var(--ecvs-brand, #2d2c6f);
   border-top: var(--ecvs-btn-border-top, 1px) solid var(--ecvs-brand, #2d2c6f);
   border-right: var(--ecvs-btn-border-right, 1px) solid var(--ecvs-brand, #2d2c6f);
   border-bottom: var(--ecvs-btn-border-bottom, 1px) solid var(--ecvs-brand, #2d2c6f);
   border-left: var(--ecvs-btn-border-left, 1px) solid var(--ecvs-brand, #2d2c6f);
   border-radius: 0;
   height: var(--ecvs-dd-height, 36px);
   padding: var(--ecvs-dd-padding-v, 6px) calc(var(--ecvs-dd-padding-h, 12px) + 24px) var(--ecvs-dd-padding-v, 6px) var(--ecvs-dd-padding-h, 12px);
   font-size: var(--ecvs-dd-font-size, 13px);
   font-weight: var(--ecvs-btn-font-weight, 400);
   font-family: inherit;
   line-height: 1;
   cursor: pointer;
   outline: none;
   min-width: 180px;
   transition: border-color 0.2s;
   box-sizing: border-box;
   margin-bottom: 2px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%232d2c6f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--ecvs-dd-padding-h, 12px) center;
   background-size: 10px 6px;
}

.ecvs-styled-select:focus {
   box-shadow: 0 0 0 1px var(--ecvs-brand, #2d2c6f);
}

.ecvs-styled-select:hover {
   border-top-color: var(--ecvs-brand-hover, #23225a);
   border-right-color: var(--ecvs-brand-hover, #23225a);
   border-bottom-color: var(--ecvs-brand-hover, #23225a);
   border-left-color: var(--ecvs-brand-hover, #23225a);
}

/* Size guide link */
.ecvs-size-guide-link {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--ecvs-brand, #2d2c6f);
   text-decoration: none !important;
   font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   transition: color 0.2s;
}

.ecvs-size-guide-link:hover {
   color: var(--ecvs-brand-hover, #23225a);
   text-decoration: underline !important;
}

.ecvs-size-guide-link svg {
   flex-shrink: 0;
}


/* ==========================================================================
   AJAX LOADING
   ========================================================================== */

.ecvs-loading {
   opacity: 0.5;
   pointer-events: none;
   transition: opacity 0.15s;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 640px) {
   .ecvs-swatches {
      gap: 6px;
   }

   .ecvs-diamond-btn {
      padding: 6px 14px;
      font-size: 12px;
   }

   .ecvs-styled-select {
      min-width: 160px;
   }

   .ecvs-btn-tooltip {
      width: 180px;
      font-size: 11px;
   }
}


/* ==========================================================================
   AVADA OVERRIDES
   ========================================================================== */

.single-product .ecvs-swatch,
.single-product .ecvs-swatch:visited,
.single-product .ecvs-swatch:focus {
   color: transparent;
   text-decoration: none !important;
}

/* Prevent clipping */
.fusion-woo-product-content .ecvs-metal-type,
.fusion-woo-product-content .ecvs-diamond-type,
.fusion-woo-product-content .ecvs-ring-size,
.product .summary .ecvs-metal-type,
.product .summary .ecvs-diamond-type,
.product .summary .ecvs-ring-size,
.fusion-column-wrapper,
.fusion-builder-column,
.fusion-layout-column {
   overflow: visible !important;
}