/* Smarsh Case Study Popup Styles */
.smarshPopupOverlay { width: 100%; height: 100%; background: rgba(255, 255, 255, 1); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.smarshPopupOverlay.active { opacity: 1; visibility: visible; }
.smarshPopupContainer { position: relative; width: 100%; max-width: 500px; background: #d6e8f5; border-radius: 16px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.9); transition: transform 0.3s ease; }
.smarshPopupOverlay.active .smarshPopupContainer { transform: scale(1); }
.smarshCloseBtn { position: absolute; top: -40px; right: 0; background: #ff008a; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; transition: all 0.2s ease; }
.smarshCloseBtn:hover { background: #e6007a; transform: scale(1.05); }
.smarshCloseBtn span { font-size: 1.125rem; line-height: 1; }
.smarshLogoSection { background: url(https://i.ibb.co/6ckHHy2R/celebration.png) no-repeat center top; background-size: contain; text-align: center; margin: -1rem -1rem 0; padding:1rem; position: relative; }
.smarshLogos { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; }
.smarshLogo { height: 28px; width: auto; }
.smarshDescription { font-size: 0.9375rem; color: #333; line-height: 1.5; margin: 0; position: relative; display: inline-block; }
.smarshForm { margin-top: 1.5rem; }
.smarshFormGroup { margin-bottom: 1.25rem; }
.smarshFormLabel { display: block; font-size: 1rem; font-weight: 500; color: #000; margin-bottom: 0.5rem; }
.smarshRequired { color: #ff008a; }
.smarshFormInput { width: 100%; padding: 0.875rem 1rem; border: 1px solid #c5d5e0; border-radius: 8px; font-size: 1rem; color: #333; background: #fff; transition: all 0.2s ease; font-family: 'Inter', sans-serif; }
.smarshFormInput:focus { outline: none; border-color: #ff008a; box-shadow: 0 0 0 3px rgba(255, 0, 138, 0.1); }
.smarshFormInput.error { border-color: #ff4444; background: #fff5f5; }
.smarshErrorMsg { color: #ff4444; font-size: 0.8125rem; margin-top: 0.375rem; display: flex; align-items: center; gap: 0.25rem; }
.smarshSubmitBtn { width: 100%; padding: 1rem; background: #ff008a; color: #fff; border: none; border-radius: 8px; font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; margin-top: 0.5rem; position: relative; overflow: hidden; }
.smarshSubmitBtn:hover:not(:disabled) { background: #e6007a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 0, 138, 0.3); }
.smarshSubmitBtn:disabled { opacity: 0.7; cursor: not-allowed; }
.smarshSubmitBtn .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: smarshSpin 0.8s linear infinite; margin-right: 0.5rem; vertical-align: middle; }
@keyframes smarshSpin { to { transform: rotate(360deg); } }
.smarshSuccessMsg { text-align: center; padding: 2rem 1rem; }
.smarshSuccessMsg .material-icons { font-size: 3rem; color: #00c853; margin-bottom: 0.5rem; }
.smarshSuccessMsg h3 { font-size: 1.5rem; color: #000; margin: 0 0 0.5rem 0; }
.smarshSuccessMsg p { font-size: 0.9375rem; color: #666; margin: 0 0 1.5rem 0; }
.smarshSuccessActions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.smarshWatchVideoBtn { width: 100%; padding: 0.875rem; background: #000; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.smarshWatchVideoBtn:hover { background: #333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.smarshClosePopupBtn { width: 100%; padding: 0.875rem; background: transparent; color: #666; border: 1px solid #ccc; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; }
.smarshClosePopupBtn:hover { background: #f0f0f0; color: #333; }
.smarshTriggerBtn { background: #ff008a; color: #fff; border: none; padding: 0.875rem 1.5rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; }
.smarshTriggerBtn:hover { background: #e6007a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 0, 138, 0.3); }
.smarshVideoOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 1); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.smarshVideoOverlay.active { opacity: 1; visibility: visible; }
.smarshVideoContainer { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transform: scale(0.9); transition: transform 0.3s ease; }
.smarshVideoOverlay.active .smarshVideoContainer { transform: scale(1); }
.smarshVideoCloseBtn { position: absolute; top: -50px; right: 0; background: #fff; color: #000; border: none; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; transition: all 0.2s ease; z-index: 10; }
.smarshVideoCloseBtn:hover { background: #ff008a; color: #fff; transform: scale(1.05); }
.smarshVideoFrame { width: 100%; height: 100%; border: none; }
@media screen and (max-width: 576px) { .smarshPopupContainer { padding: 1.75rem; margin: 1rem; } .smarshCloseBtn { top: -35px; padding: 0.375rem 1rem; font-size: 0.8125rem; } .smarshLogo { height: 24px; } .smarshFormLabel { font-size: 1rem; } .smarshVideoCloseBtn { top: -40px; padding: 0.375rem 0.875rem; font-size: 0.8125rem; } }