div.glow-dialog {
    font-family: frank-new, sans-serif;
    letter-spacing: -.025em;
    -webkit-font-smoothing: antialiased;
}
div.glow-dialog .ui-dialog-title { display: none; }
.ui-dialog .ui-dialog-content { padding: 0; }
#my-content-id div { width: 90% !important; padding: 2% 5%; }
input#get-glow-code { margin-left:5%; width:70%; border:1px solid #999; border-radius:8px; padding:10px; }
input#get-glow-code + input[type="button"] { width:22%; height:39px; background-color:#db2660; color:white; border:none; border-radius:8px; margin-left:-3%; }

.hidden {
    display:none;
}
.show {
    display:block;
}
.glow-body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px 50px;
    text-align: center;
    color: #333;
    max-width: 800px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.logo {
    margin-top: 30px;
    margin-bottom: 45px;
    text-align: center;
}
.logo img {
    width: 130px;
}
.logo2 img {
    width: 90px;
}
.glow-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.w-50 {
    width: 50%;
}
.glow-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 40px;
    text-align: left;
    min-width: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
/* "You're all set" view fills the card vertically so the dashboard button
   can sit at the bottom edge instead of floating right under the paragraph.
   JS toggles inline style.display between '' and 'none', so the inline none
   still wins when hiding the card. */
#glow-card-left-dashboard {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.img-triangles {
    position: absolute;
    top: -5px;
    width: 20px;
    height: 60px;
    right: 0px;
    transform: rotate(90deg);
}
.img-wave {
    position: absolute;
    bottom: 11px;
    width: 56px;
    height: 16px;
    left: -23px;
}

.glow-card h3 {
    margin-top: 0;
    font-size: 18px;
    color: #222;
}
.glow-card input {
    width: calc(100% - 40px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}
.glow-card .glow-button {
    margin-top: 15px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}
.glow-card a.glow-button{
    text-decoration: none;
    text-align: center;
    display: block;
}
.glow-card a.btn-pink {
    background: #E52868;
    color: #fff;
    border: 1px solid #E52868;
    font-weight: bold;
}
a.btn-pink:hover {
    color: #E52868;
    background: #fff;
    border: 1px solid #E52868;
}

.btn-text {
    font-weight: bold;
}
.btn-icon {
    margin-right: 10px;
}


.glow-card .btn-outline {
    background: #fff;
    border: 1px solid #E52868;
    color: #E52868;

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

.btn-outline svg{
    fill: #E52868;
}

.btn-outline:hover {
    background: #E52868;
    color: #fff;
}

.btn-outline:hover svg{
    fill: #fff;
}

.divider {
    margin: 40px auto;
    width: 5px;
    height: 80px;
    background: repeating-linear-gradient(to bottom, #E52868, #E52868 10px, transparent 10px, transparent 20px );
    border-radius: 3px;
}

.features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0px;
    margin-bottom: 40px;
}

.feature {
    text-align: center;
    max-width: 140px;
    display: inline-block;
    width: 100px;
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
}

.feature img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    box-shadow: 0 0 5px 1px #eee;
    border-radius: 10px;
    border: solid 1px #ddd;
}

.feature span, .feature-plus {
    font-size: 14px;
    color: #444;
    font-weight: bold;
}

.feature-plus{
    margin: 50px 5px;
}

.video {
    border-radius: 10px;
}

.video img {
    width: 100%;
    display: block;
}

.play-btn {
    position: relative;
}

.play-btn::after {
    content: "▶";
    font-size: 40px;
    color: white;
    background: #E52868;
    border-radius: 50%;
    padding: 10px 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 10px;
}

.input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 5px;
}

.input-wrapper svg {
    cursor: pointer;
    fill: #666;
}
.text-center {
    text-align: center;
    align-items: center;
}
.dots-wrapper {
    margin-bottom: 20px;
}
.dots-wrapper img {
    transform: rotate(180deg);
}
.link-glow-website {
    color:#E52868;
    text-decoration:none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.link-glow-website:hover {
    color:#E52868;
    text-decoration:none;
}
.video iframe {
    border-radius: 20px;
}
.mt-0 {
    margin-top: 0px;
}
.glow-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #eee;
    border-top-color: #E52868;
    border-radius: 50%;
    animation: glow-spin 0.75s linear infinite;
    margin: 0 auto 14px;
}
@keyframes glow-spin {
    to { transform: rotate(360deg); }
}