:root{
  --et-purple:#4a214f;
  --et-purple-dark:#321537;
  --et-gold:#c99635;
  --et-cream:#fffaf3;
  --et-border:#ead9c0;
  --et-text:#3f3540;
  --et-muted:#776b77;
}
#everthread-mvp-root *{box-sizing:border-box}
.et-app{
  max-width:1050px;margin:30px auto;padding:30px;background:var(--et-cream);
  border:1px solid var(--et-border);border-radius:24px;
  box-shadow:0 18px 45px rgba(74,33,79,.12);
  font-family:Arial,sans-serif;color:var(--et-text)
}
.et-app h2,.et-app h3{font-family:Georgia,serif;color:var(--et-purple)}
.et-header{text-align:center;margin-bottom:25px}
.et-header h2{margin:0 0 8px;font-size:36px}
.et-header p{margin:0;color:var(--et-muted);line-height:1.6}
.et-progress{display:flex;justify-content:center;gap:8px;margin:24px 0}
.et-progress span{width:55px;height:6px;background:#dfd5e1;border-radius:10px}
.et-progress span.active{background:var(--et-gold)}
.et-step{display:none}.et-step.active{display:block}
.et-package-grid,.et-memory-grid{display:grid;gap:16px}
.et-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.et-memory-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.et-card{
  padding:22px;background:#fff;border:2px solid var(--et-border);border-radius:18px;
  cursor:pointer;text-align:center;transition:.2s ease
}
.et-card:hover{transform:translateY(-3px);border-color:var(--et-gold)}
.et-card.selected{border-color:var(--et-gold);background:#fff4dc;box-shadow:0 0 0 4px rgba(201,150,53,.14)}
.et-package-title{display:block;font-family:Georgia,serif;font-size:23px;font-weight:700;color:var(--et-purple);margin-bottom:8px}
.et-price{display:block;margin-top:14px;color:#aa761b;font-size:26px;font-weight:700}
.et-memory-icon{display:block;font-size:30px;margin-bottom:10px}
.et-memory-name{font-size:14px;font-weight:700;color:var(--et-purple)}
.et-charm-heading{text-align:center;margin-bottom:20px}
.et-charm-heading h3{margin:0 0 8px;font-size:28px}
.et-form-area{margin-top:22px;padding:22px;background:#fff;border:1px solid var(--et-border);border-radius:18px}
.et-form-area label{display:block;margin-bottom:8px;font-weight:700;color:var(--et-purple)}
.et-form-area input,.et-form-area textarea{width:100%;padding:13px 14px;border:1px solid #d9cabb;border-radius:10px;font-size:15px}
.et-form-area textarea{min-height:150px;resize:vertical}
.et-help{margin-top:8px;font-size:13px;color:var(--et-muted)}
.et-btn{
  display:inline-block;padding:13px 24px;border:0;border-radius:50px;
  background:var(--et-purple);color:#fff;font-size:15px;font-weight:700;cursor:pointer
}
.et-btn:hover{background:var(--et-gold);color:var(--et-purple-dark)}
.et-btn.secondary{background:transparent;color:var(--et-purple);border:1px solid var(--et-purple)}
.et-btn.whatsapp{background:#25d366}
.et-btn:disabled{background:#d2cbd4;cursor:not-allowed}
.et-actions{display:flex;justify-content:space-between;gap:12px;margin-top:25px}
.et-record-controls{display:flex;gap:10px;flex-wrap:wrap}



.et-bracelet-stage{
  position:relative;
  width:100%;
  max-width:920px;
  margin:28px auto 18px;
  padding:24px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.98) 0%,rgba(255,248,234,.96) 42%,rgba(238,218,187,.94) 100%);
  border:1px solid rgba(201,150,53,.30);
  box-shadow:0 24px 60px rgba(80,48,28,.18),inset 0 1px 0 rgba(255,255,255,.95);
}
.et-bracelet-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,222,145,.32) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 25%,rgba(255,222,145,.28) 0 2px,transparent 3px),
    radial-gradient(circle at 74% 78%,rgba(255,255,255,.70) 0 2px,transparent 3px),
    radial-gradient(circle at 30% 80%,rgba(255,255,255,.65) 0 2px,transparent 3px);
}
.et-bracelet-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
  animation:etFloatBracelet 3.5s ease-in-out infinite;
  filter:drop-shadow(0 20px 18px rgba(66,34,24,.20));
}
@keyframes etFloatBracelet{
  0%,100%{
    transform:translateY(0) scale(1);
  }

  50%{
    transform:translateY(-16px) scale(1.015);
  }
}
.et-hotspots{
  position:absolute;
  inset:24px;
  z-index:3;
}
.et-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:12%;
  aspect-ratio:1/1;
  border:none;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  z-index:5;
  transition:.24s ease;
}
.et-hotspot:hover,.et-hotspot:focus{
  transform:translate(-50%,-50%) scale(1.10);
  background:rgba(255,215,120,.13);
  box-shadow:0 0 0 4px rgba(255,255,255,.45),0 0 26px rgba(255,190,70,.82);
  outline:none;
}
.et-preview-note{text-align:center;color:var(--et-muted);margin-top:12px;font-size:14px}

.et-modal{
  display:none;position:fixed;inset:0;z-index:999999;background:rgba(20,10,24,.78);
  padding:20px;align-items:center;justify-content:center
}
.et-modal.open{display:flex}
.et-modal-card{
  position:relative;width:min(680px,100%);max-height:88vh;overflow:auto;
  background:#fffaf4;border-radius:22px;padding:30px;text-align:center
}
.et-modal-close{
  position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--et-purple);color:#fff;cursor:pointer;font-size:20px
}
.et-modal-content img,.et-modal-content video{max-width:100%;max-height:500px;border-radius:14px}
.et-modal-content audio{width:100%}
.et-modal-content p{line-height:1.7;font-size:17px}
.et-link-box{margin:16px 0;padding:13px;background:#f4eff5;border-radius:10px;word-break:break-all;color:var(--et-purple);font-size:14px}
.et-share-box{padding:25px;background:#fff;border:1px solid var(--et-border);border-radius:18px;text-align:center}
.et-error{padding:18px;background:#fff0f0;color:#9b2727;border-radius:12px;text-align:center}
.et-recipient-intro{text-align:center;padding:12px 0 20px}
.et-recipient-intro h2{font-size:38px;margin-bottom:10px}

@media(max-width:760px){
  .et-hotspot{width:15%}
  .et-app{padding:20px 13px}
  .et-package-grid{grid-template-columns:1fr}
  .et-memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .et-header h2,.et-recipient-intro h2{font-size:29px}
  
  .et-modal-card{padding:24px 16px}
}
/* =========================================================
   EverThread Premium Memory Modal
   ========================================================= */

.et-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(28, 13, 26, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        background 0.35s ease,
        backdrop-filter 0.35s ease;
}

.et-modal.open {
    background: rgba(28, 13, 26, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.et-modal-card {
    position: relative;
    width: min(92vw, 680px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 34px;
    border: 1px solid rgba(212, 166, 83, 0.7);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(255, 225, 173, 0.35), transparent 34%),
        linear-gradient(145deg, #fffdf9 0%, #fff6ea 100%);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(213, 165, 82, 0.18);
    transform: translateY(35px) scale(0.92);
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(.2,.8,.2,1),
        opacity 0.32s ease;
}

.et-modal.open .et-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.et-modal-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        rgba(255, 225, 161, 0.8),
        rgba(128, 55, 112, 0.25),
        rgba(214, 166, 81, 0.7)
    );
    filter: blur(9px);
    opacity: 0.45;
}

.et-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(85, 22, 74, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #541846;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(74, 25, 63, 0.12);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.et-modal-close:hover {
    transform: rotate(90deg) scale(1.06);
    background: #fff;
}

#etModalTitle {
    margin: 0 52px 24px 0;
    color: #551747;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.2;
}

.et-modal-content {
    color: #3f2c38;
    font-size: 17px;
    line-height: 1.75;
}

.et-modal-content img,
.et-modal-content video {
    display: block;
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(47, 19, 40, 0.2);
}

.et-modal-content audio {
    display: block;
    width: 100%;
    margin-top: 18px;
}

.et-modal-content iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(47, 19, 40, 0.14);
}

.et-modal-content p {
    margin: 0;
    padding: 24px;
    border: 1px solid rgba(214, 169, 91, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    white-space: normal;
}

/* Charm glow and hover */

.et-hotspot {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    animation: etCharmPulse 2.8s ease-in-out infinite;
}

.et-hotspot:hover,
.et-hotspot:focus {
    transform: translate(-50%, -50%) scale(1.22);
    filter: brightness(1.15);
    box-shadow:
        0 0 0 8px rgba(255, 239, 197, 0.28),
        0 0 32px rgba(255, 213, 115, 0.95);
}

@keyframes etCharmPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 225, 152, 0.2),
            0 0 18px rgba(255, 213, 115, 0.4);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(255, 225, 152, 0),
            0 0 34px rgba(255, 213, 115, 0.85);
    }
}

/* Mobile */

@media (max-width: 600px) {
    .et-modal {
        padding: 14px;
        align-items: flex-end;
    }

    .et-modal-card {
        width: 100%;
        max-height: 90vh;
        padding: 28px 20px 24px;
        border-radius: 24px 24px 16px 16px;
        transform: translateY(60px) scale(0.98);
    }

    #etModalTitle {
        font-size: 27px;
        margin-right: 48px;
    }

    .et-modal-content {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-modal,
    .et-modal-card,
    .et-modal-close,
    .et-hotspot {
        transition: none !important;
        animation: none !important;
    }
}
/* EverThread premium memory icons */

.et-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 12px;
    border: 1px solid rgba(190, 142, 58, 0.5);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff9df 0%, #f5dfaa 48%, #c99438 100%);
    box-shadow:
        0 10px 24px rgba(126, 78, 15, 0.18),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    color: #5b194d;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.et-svg-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.et-memory:hover .et-svg-icon,
.et-memory.selected .et-svg-icon {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 14px 30px rgba(126, 78, 15, 0.28),
        0 0 0 5px rgba(218, 174, 92, 0.16);
}
.et-memory{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    cursor:pointer;
    transition:all .25s ease;
}

.et-memory:hover{
    transform:translateY(-5px);
}

.et-memory.selected{
    border:2px solid #D8A84D;
    box-shadow:0 12px 35px rgba(216,168,77,.25);
    transform:translateY(-5px);
}

.et-memory.selected .et-svg-icon {
    color: #ffffff;
    background:
        radial-gradient(circle at 35% 30%, #8c3b79 0%, #5b194d 58%, #32102b 100%);
    border-color: #d6ad60;
}

@media (max-width: 600px) {
    .et-svg-icon {
        width: 48px;
        height: 48px;
    }

    .et-svg-icon svg {
        width: 23px;
        height: 23px;
    }
}
/* EverThread memory opening loader */

.et-memory-loader{
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-align:center;
    color:#5b194d;
}

.et-memory-loader p{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    font-size:17px;
    font-style:italic;
}

.et-loader-ring{
    width:58px;
    height:58px;
    border-radius:50%;
    border:3px solid rgba(214,174,96,.25);
    border-top-color:#d6ae60;
    border-right-color:#7a2c68;
    box-shadow:
        0 0 28px rgba(214,174,96,.35),
        inset 0 0 18px rgba(255,255,255,.7);
    animation:etLoaderSpin .9s linear infinite;
}

.et-loader-ring::after{
    content:"✦";
    position:absolute;
}

@keyframes etLoaderSpin{
    to{
        transform:rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce){
    .et-loader-ring{
        animation:none;
    }
}
.et-recipient-field{
    margin-bottom:32px;
}

.et-recipient-label{
    display:block;
    margin-bottom:12px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    font-weight:700;
    color:#4D174D;
    line-height:1.3;
}

#etRecipientName{
    margin-top:0;
}