.emaillog .modal-header {
    padding-top: 16px;
    padding-bottom: 16px;
    background: var(--color-blue-900);
    display: flex;
    justify-content: center;
    align-items: center;
}
.emaillog .modal-title {
    text-align: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}
.modal-content {

    width: 100%;
    margin: 20px auto;
    box-shadow: 0px 0px 80px var(--color-slate-900);
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.emaillog .modal-body {
    padding: 0px;
}
.modal-header, .container-main, .bottom-bar {
    padding-left: 6%;
    padding-right: 6%;
}
.container-main {
    padding-top: 24px;
    padding-bottom: 32px;
    background: var(--color-core-white);
    /* Border kept for visual fidelity */
    border-left: 1px solid var(--color-slate-200); 
    border-right: 1px solid var(--color-slate-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.sub-heading {
    text-align: center;
    color: var(--color-slate-800);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

/* Input and Button Container (Desktop/Tablet: Side-by-Side) */
.input-button-container {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 8px;
}

/* Email Input Wrapper */
.email-input-wrapper {
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    height: 46px; 
    padding-left: 8px;
    background: var(--color-core-white);
    border-radius: 8px;
    border: 1px solid #D0D5DD;
}

.icon-mail {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.icon-placeholder {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M2.49984 2.5H17.4998C17.9601 2.5 18.3332 2.8731 18.3332 3.33333V16.6667C18.3332 17.1269 17.9601 17.5 17.4998 17.5H2.49984C2.0396 17.5 1.6665 17.1269 1.6665 16.6667V3.33333C1.6665 2.8731 2.0396 2.5 2.49984 2.5ZM16.6665 6.0316L10.0597 11.9483L3.33317 6.01328V15.8333H16.6665V6.0316ZM3.75939 4.16667L10.0514 9.71833L16.2507 4.16667H3.75939Z" fill="%23667085"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.email-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0 9px 0 0; 
    font-size: 16px;
    line-height: 24px;
    background: transparent;
}

.email-input::placeholder {
    color: var(--color-text-placeholder);
}

/* Submit Button Styling */
.submit-button {
    height: 46px;
    min-width: 100px;
    padding: 8px 16px; 
    background: var(--colours-Blue-600, #2563EB);
    border-radius: 8px;
    border: 1px solid var(--color-blue-600);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: white;
}

.button-text {
    color: var(--color-core-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.arrow-placeholder {
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;  
    transform: rotate(45deg);
    box-sizing: border-box;
}

/* Bottom Bar Styling */
.bottom-bar {
    padding-top: 16px;
    padding-bottom: 16px;
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.decline-text {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px
}








/* Custom CSS Variables (Based on design interpretation) */
:root {
  --colours-Blue-900: #1E3A8A;
  --colours-Blue-600: #2563EB;
  --colours-Slate-900: #0F172A;
  --colours-Slate-200: #E2E8F0;
  --colours-Core-White: white;
}

/* Base Pop-up Container */
.PopUp {
  width: 512px;
  box-shadow: 0px 0px 80px #0F172A;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* Assumed to be centered or placed by a parent container */
}

/* Top Bar Styling */
.TopBar {
  align-self: stretch;
  padding: 24px 32px;
  background: var(--colours-Blue-900);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.UseThisCodeAtCheckout {
  text-align: center;
  color: var(--colours-Core-White);
  font-size: 20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  line-height: 24px;
}

/* Main Body Container */
.Container_Body {
  align-self: stretch;
  padding: 32px;
  background: var(--colours-Core-White);
  border-left: 1px var(--colours-Slate-200) solid;
  border-right: 1px var(--colours-Slate-200) solid;
  border-bottom: 1px var(--colours-Slate-200) solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.Container_Content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Coupon Code and Copy Button Row */
.Container_CouponAction {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.Container_CouponInput {
  flex: 1 1 0; /* Takes up available space */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.Options {
  align-self: stretch;
  min-height: 46px;
  padding: 16px 8px;
  background: white;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  outline: 1px #D0D5DD solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.Container_TextContent {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: none!important;
}
.CouponCode:focus-visible {
    border: none !important; 
    outline: none !important; 
}

.CouponCode {
  align-self: stretch;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center horizontally within the flex item */
  color: var(--colours-Slate-900) !important;
  font-size: 25px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 3.20px;
}

/* Copy Button Styling */
.Component3_Copy {
  align-self: stretch;
  min-width: 100px;
  padding: 8px 8px 8px 12px;
  background: var(--colours-Slate-900);
  border-radius: 8px;
  outline: 1px var(--colours-Slate-900) solid;
  outline-offset: -1px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #fff;
}

.Text_Copy {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: var(--colours-Core-White);
  font-size: 16px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  line-height: 24px;
}

.Icon_Copy {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
  /* Icon details would be handled by SVG or font icon library */
}

/* Book Now Button Styling */
.Component3_BookNow {
  align-self: stretch;
  height: 46px;
  min-width: 100px;
  padding: 8px 8px 8px 12px;
  background: var(--colours-Blue-600);
  border-radius: 8px;
  outline: 1px var(--colours-Blue-600) solid;
  outline-offset: -1px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.Text_BookNow {
  flex: 1 1 0;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: var(--colours-Core-White);
  font-size: 16px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  line-height: 24px;
}

.Icon_Arrow {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
  /* Icon details would be handled by SVG or font icon library */
}

/* Placeholder for the inner-icon (for the arrow in Book Now) */
/* This is a simple representation of a right arrow */
.Icon_Arrow::after {
   content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 7.5px;
    top: 5px;
    border: 2px solid white;
    border-left: none;
    border-top: none;
    transform: rotate(-45deg);
    box-sizing: border-box;
}

/* Placeholder for the inner-icon (for the file/copy icon) */
/* This is a simple representation of a file copy icon */
.Icon_Copy::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 16.67px;
    left: 2.50px;
    top: 1.67px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17" viewBox="0 0 15 17" fill="none"><path fill="white" d="M3.333 3.333V0.833c0-.46.373-.833.833-.833h10c.46 0 .833.373.833.833v11.667c0 .46-.373.833-.833.833H11.667v2.5c0 .46-.375.833-.833.833H.839c-.46 0-.838-.37-.838-.833v-11.67c0-.46.375-.833.839-.833H3.333zM1.669 5v10h8.33V5H1.669zm3.33-1.67h6.667v10H13.33V1.67H5z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    /* This is a simplification; a real icon would use an SVG path */
}

#couponCodeInput {
    border: none !important;
}
@media screen and (max-width: 768px) {
    .CouponCode {
        font-size: 18px;

    }
    .Options {
        padding: 10px 0px 10px 0px
    }
    
}