.title {
	text-align: center;
}

.rowpad {
 padding-right: 3%;
 padding-left: 3%;
 

}

.img-responsive-center {
    margin: 0 auto;
}

.shareicon {
	border: 0px;
}

.shareIconBg-1 {background: #2281CF;}
.shareIconBg-2 {background: #64D448;}
.shareIconBg-3 {background: #3B5998;}
.shareIconBg-4 {background: #00ACED;}
.shareIconBg-5 {background: #CB2027;}
.shareIconBg-6 {background: #1fda27;}
.shareIconBg-7 {background: #ff9800;}
.shareIconBg-8 {background: #607d8b;}

.couponCode {
    font-size: 24px;
}.couponCodeLabel {
    font-size: 24px;
}

.errorMessageContainer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.errorMessageTitle {
    color:#dd5575;
    margin-top: 25px;
}

.errorMessageDescription {
    margin: 15px;
    text-align: center;
}

/* MFA-29016 Refer A Friend V2 — slim ticket card
   Side bites via radial-gradient masks; minimal border (no drop-shadow). */
:root {
    --rfv2-page-bg: #ffffff;
    --rfv2-card-bg: #ffffff;
    --rfv2-card-border: #d0d0d8;
    --rfv2-notch-r: 10px;
    --rfv2-text: #000000;
    --rfv2-share-bg: #4338CA;
    --rfv2-share-fg: #ffffff;
    --lg-body-font-family: "Manrope", sans-serif;
    --lg-body-font-size: 14px;
    --lg-body-line-height: 1.4;
}

html:has(.refer-friend-v2-body),
.refer-friend-v2-body {
    background: var(--rfv2-page-bg) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.refer-friend-v2-body.rfv2-preview {
    overflow: hidden !important;
}

.refer-friend-v2-body.rfv2-live {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Kill Bootstrap .container gutters on iOS WebView — small inset so notches aren't clipped */
.refer-friend-v2-body > .container.refer-friend-v2,
.refer-friend-v2.container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

.refer-friend-v2 {
    background: var(--rfv2-page-bg);
    min-height: 0;
    height: auto;
    box-sizing: border-box;
}

.rfv2-card {
    position: relative;
    margin: 0 auto;
    max-width: none;
    width: 100%;
    background: transparent;
    /* Explicitly kill any inherited / cached drop-shadow */
    filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.rfv2-stub {
    background: var(--rfv2-card-bg);
}

/* Top stub: punch circles at bottom-left / bottom-right + minimal border */
.rfv2-stub-top {
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--rfv2-card-border);
    border-bottom: none;
    -webkit-mask-image:
        radial-gradient(circle var(--rfv2-notch-r) at 0 100%, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px)),
        radial-gradient(circle var(--rfv2-notch-r) at 100% 100%, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px));
    -webkit-mask-size: 51% 100%;
    -webkit-mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-image:
        radial-gradient(circle var(--rfv2-notch-r) at 0 100%, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px)),
        radial-gradient(circle var(--rfv2-notch-r) at 100% 100%, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px));
    mask-size: 51% 100%;
    mask-position: 0 0, 100% 0;
    mask-repeat: no-repeat;
}

/* Bottom stub: matching punches + minimal border */
.rfv2-stub-bottom {
    border-radius: 0 0 20px 20px;
    border: 1px solid var(--rfv2-card-border);
    border-top: none;
    -webkit-mask-image:
        radial-gradient(circle var(--rfv2-notch-r) at 0 0, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px)),
        radial-gradient(circle var(--rfv2-notch-r) at 100% 0, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px));
    -webkit-mask-size: 51% 100%;
    -webkit-mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-image:
        radial-gradient(circle var(--rfv2-notch-r) at 0 0, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px)),
        radial-gradient(circle var(--rfv2-notch-r) at 100% 0, transparent 0, transparent var(--rfv2-notch-r), #000 calc(var(--rfv2-notch-r) + 0.5px));
    mask-size: 51% 100%;
    mask-position: 0 0, 100% 0;
    mask-repeat: no-repeat;
}

/* Image flush with card edges (no inset padding) */
.rfv2-illustration {
    padding: 0;
    text-align: center;
    overflow: hidden;
    border-radius: 19px 19px 0 0;
}

.rfv2-illustration img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    background: #f7efe6;
}

/* Title + referrer reward — left aligned, black */
.rfv2-title-block {
    padding: 14px 16px 0;
    text-align: left;
}

.rfv2-title-block h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--rfv2-text);
}

.rfv2-reward-text {
    margin: 6px 0 0;
    font-family: var(--lg-body-font-family);
    font-size: var(--lg-body-font-size);
    font-weight: 400;
    line-height: var(--lg-body-line-height);
    color: var(--rfv2-text);
    text-align: left;
}

.rfv2-reward-text p,
.rfv2-benefit-text p {
    margin: 0 0 0.35em;
}

.rfv2-reward-text p:last-child,
.rfv2-benefit-text p:last-child {
    margin-bottom: 0;
}

.rfv2-reward-text ul,
.rfv2-benefit-text ul,
.rfv2-reward-text ol,
.rfv2-benefit-text ol {
    margin: 0.25em 0 0.25em 1.1em;
    padding: 0;
    text-align: left;
}

.rfv2-benefit {
    padding: 12px 16px 16px;
    text-align: left;
}

.rfv2-benefit-text {
    margin: 0;
    font-family: var(--lg-body-font-family);
    font-size: var(--lg-body-font-size);
    line-height: var(--lg-body-line-height);
    /* One shade lighter than title/reward black */
    color: #555555;
    text-align: left;
}

/* Dashed tear on the masked join + rim rings for cutout borders */
.rfv2-divider {
    position: relative;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.rfv2-dash {
    position: absolute;
    left: calc(var(--rfv2-notch-r) + 8px);
    right: calc(var(--rfv2-notch-r) + 8px);
    top: 0;
    border: 0;
    border-top: 1.5px dashed #c0c0cc;
    transform: translateY(-50%);
}

/* Hollow circles clipped to the card-side half → bordered ticket bite */
.rfv2-notch-ring {
    position: absolute;
    top: 50%;
    width: calc(var(--rfv2-notch-r) * 2);
    height: calc(var(--rfv2-notch-r) * 2);
    margin-top: calc(var(--rfv2-notch-r) * -1);
    border-radius: 50%;
    border: 1px solid var(--rfv2-card-border);
    background: transparent;
    box-sizing: border-box;
    z-index: 3;
}

.rfv2-notch-ring-left {
    left: calc(var(--rfv2-notch-r) * -1);
    /* keep the half that sits inside the card */
    clip-path: inset(0 0 0 50%);
    -webkit-clip-path: inset(0 0 0 50%);
}

.rfv2-notch-ring-right {
    right: calc(var(--rfv2-notch-r) * -1);
    clip-path: inset(0 50% 0 0);
    -webkit-clip-path: inset(0 50% 0 0);
}

.rfv2-preview-chrome,
.rfv2-live-chrome {
    padding: 18px 16px 20px;
}

/* Preview-only: block interaction without relying on disabled UA styling */
.rfv2-preview-chrome {
    pointer-events: none;
}

.rfv2-preview-chrome .form-group,
.rfv2-live-chrome .form-group {
    margin-bottom: 12px;
}

.rfv2-preview-chrome .form-control,
.rfv2-live-chrome .form-control {
    border-radius: 8px;
    border-color: #d8d8e0;
    font-size: 16px;
    height: auto;
    padding: 10px 12px;
    background-color: #fff;
    color: #111827;
}

/*
 * Preview chrome must look like live inputs (white), not Bootstrap/UA disabled gray.
 * Use :disabled / [disabled] / [readonly] — Beat Bootstrap .form-control[disabled] (#eee).
 */
.rfv2-preview-chrome .form-control:disabled,
.rfv2-preview-chrome .form-control[disabled],
.rfv2-preview-chrome .form-control[readonly] {
    background-color: #fff !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827;
    opacity: 1 !important;
    cursor: default;
    box-shadow: none;
}

.rfv2-preview-chrome .form-control:disabled::placeholder,
.rfv2-preview-chrome .form-control[disabled]::placeholder,
.rfv2-preview-chrome .form-control[readonly]::placeholder,
.rfv2-preview-chrome .form-control:disabled::-webkit-input-placeholder,
.rfv2-preview-chrome .form-control[disabled]::-webkit-input-placeholder,
.rfv2-preview-chrome .form-control[readonly]::-webkit-input-placeholder {
    color: #9a9aab !important;
    -webkit-text-fill-color: #9a9aab;
    opacity: 1 !important;
}

/* Hide legacy V1 headings inside the V2 ticket (My details / Send offer now) */
.rfv2-live-chrome h3 {
    display: none !important;
}

.rfv2-live-chrome .rowpad {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

.rfv2-live-chrome .row {
    margin-left: 0;
    margin-right: 0;
}

/* Channel icons stay in DOM for offer URLs; hidden until share fallback */
.rfv2-share-channels > .row {
    display: none;
}

.rfv2-share-channels.rfv2-channels-visible > .row {
    display: block;
    margin-top: 12px;
}

/*
 * Beat Bootstrap .btn / :hover / :active / [disabled] and WebKit UA disabled wash-out.
 * Do NOT require .refer-friend-v2-body ancestor — mobile layout used to drop that body class,
 * which left only Bootstrap gray .btn. Prefer hard-coded #4338CA (CSS var as secondary).
 */
.btn.rfv2-share-btn,
.btn.rfv2-share-btn:hover,
.btn.rfv2-share-btn:focus,
.btn.rfv2-share-btn:active,
.btn.rfv2-share-btn:active:focus,
.btn.rfv2-share-btn:active:hover,
.btn.rfv2-share-btn.active,
.btn.rfv2-share-btn:disabled,
.btn.rfv2-share-btn[disabled],
.btn.rfv2-share-btn[disabled]:hover,
.btn.rfv2-share-btn[disabled]:focus,
.btn.rfv2-share-btn[disabled]:active,
.btn.rfv2-share-btn.disabled,
fieldset[disabled] .btn.rfv2-share-btn,
.refer-friend-v2-body .btn.rfv2-share-btn,
.refer-friend-v2 .btn.rfv2-share-btn {
    background: var(--rfv2-share-bg, #4338CA) !important;
    background-color: var(--rfv2-share-bg, #4338CA) !important;
    background-image: none !important;
    border-color: var(--rfv2-share-bg, #4338CA) !important;
    color: var(--rfv2-share-fg, #ffffff) !important;
    -webkit-text-fill-color: var(--rfv2-share-fg, #ffffff) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    padding: 14px;
    border-radius: 8px;
    margin-top: 8px;
}

.btn.rfv2-share-btn:disabled,
.btn.rfv2-share-btn[disabled],
.btn.rfv2-share-btn.disabled,
.rfv2-preview-chrome .btn.rfv2-share-btn {
    cursor: default;
}

.rfv2-share-btn-live {
    cursor: pointer;
    pointer-events: auto;
}

.lb-video-link {
    position: relative;
    display: inline-block;
}

.lb-video-link-overlay {
    display: inline-block;
    height: 60px;
    left: 50%;
    top: 38%;
    margin-left: -43px;
    position: absolute;
    width: 85px;
    z-index: 20;
    vertical-align: middle;
    cursor: pointer;
}