:root {
   --g: #12be84;
   --i: #082f68;
   --m: #536b88;
   --l: #d7e3f0
 }

 * {
   box-sizing: border-box
 }

 body {
   min-height: 100vh;
   /*background: linear-gradient(145deg, #f7fafc, #edf5f5);*/
   color: var(--navy);
   font-family: Inter, system-ui, -apple-system, sans-serif;
 }

 html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

 /* Login */

 .login-shell {
   max-width: 970px;
   background: rgba(255, 255, 255, .92);
   border: 1px solid #eef2f5;
   border-radius: 28px;
   /* box-shadow: 0 12px 32px rgba(8, 47, 104, .08); */
    align-items: center;
    margin: auto;
    margin-top: 72px;
    padding: 20px;
 }

 .logo {
   width: min(360px, 50%);
   height: auto
 }

 .headline {
   /* font-size: clamp(1.3rem, 2.5vw, 2rem); */
   font-size: 16px;
   letter-spacing: -.045em;
   color: var(--navy);
 }

 .green {
   color: var(--green)
 }

 .otp-btn {
   background: linear-gradient(100deg, #02b978, #03a96e);
   border: 0;
   font-size: 18px;
 }


 @media(max-width:575.98px) {
   .login-shell {
     border-radius: 20px
   }
   .otp-btn {
     font-size: 1.15rem
   }
 }

 /*my event  */
 .name-icon {
   width: 32px;
   height: 32px;
   display: inline-grid;
   place-items: center;
   background: #dff1e6;
   color: var(--g);
   font-weight: 850;
   border-radius: 50%;
   margin-right: 9px;
   font-size: 14px;
 }

 .name-icon {
   background: #e7f3ff !important;
   color: #0d82d2 !important
 }

 /* share event */
 .close {
   float: right;
   color: var(--m);
   font-size: 22px
 }

 .eyebrow {
   color: var(--g);
   font-size: 12px;
   font-weight: 850;
   letter-spacing: 1px
 }

 .dialog {
   max-width: 570px;
   background: #fff;
   border-radius: 20px;
   margin: auto;
   padding: 20px;
   box-shadow: 0 24px 70px #15392722
 }

 .dialog h1 { 
   font-size: 27px;
   letter-spacing: -.055em;
   margin: 7px 0;
 }

 .dialog>p {
   color: var(--m)
 }

 .event {
   display: flex;
   gap: 12px;
   background: #f6f9f7;
   /* padding: 13px; */
   padding: 13px 0px;
   margin: 21px 0 0;
 }

 .event small {
   display: block;
   color: var(--m);
   margin-top: 2px
 }

 .label {
   font-size: 14px;
   font-weight: 800;
   display: block;
   margin: 20px 0 8px
 }

 @media (max-width:480px) {
   .cover-event {
     height: 150px !important;
     width: 120px !important;
   }
 }

 .cover-event {
   width: 150px;
   height: 150px;
   ;
 }

 .cover-event img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

 .event,
 .message {
   background: #f4f9ff !important
 }

 .message b {
   color: var(--i)
 }

 .foot-event {
   text-align: center;
   color: var(--m);
   font-size: 13px;
   margin-top: 21px
 }


 .sharegrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px
 }

 .method {
   border: 1px solid var(--l);
   border-radius: 12px;
   text-align: center;
   padding: 13px 5px;
   font-size: 12px;
   font-weight: 800
 }

 .method i {
   display: block;
   font-size: 20px;
   font-style: normal;
   margin-bottom: 5px
 }

 .wa {
   color: #168a46
 }

 .message {
   background: #f6f9f7;
   border: 1px solid var(--l);
   border-radius: 11px;
   padding: 13px;
   color: #4c5e55;
   font-size: 14px;
 }

 .copy {
   display: flex;
   gap: 8px
 }

 .copy input {
   flex: 1;
   border: 1px solid #cbd7cf;
   border-radius: 9px;
   padding: 11px;
   color: var(--m)
 }

 .capacity {
   display: flex;
   justify-content: space-between;
   background: #f4f9ff;
   border: 1px solid var(--l);
   border-radius: 11px;
   padding: 13px;
   color: #4c5e55;
   font-size: 14px;
 }

 .response-op {
   background: #f4f9ff;
   border: 1px solid var(--l);
   border-radius: 11px;
   padding: 13px;
   color: #4c5e55;
   font-size: 14px;
 }

 .response-op p {
   font-size: 14px;
 }

 .plus-ones {
   background: #eaf8f4 !important;
   border: 1px solid #12be84 !important;
   border-radius: 11px;
   padding: 13px;
   color: #4c5e55;
   font-size: 14px;
 }

 .plus-ones i {
   color: green;
   font-size: 20px;
 }

 .capacity span {
   color: green;
   font-weight: 500;
 }

 .start-txt {
   font-size: 16px;
 }

 .desc {
   font-size: 14px;
 }

 .more {
   text-decoration: none;
   font-size: 20px;
   background: #f0f5f9;
   padding: 5px 12px;
   border-radius: 50%;
 }

 .brand-event {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .brand-event h2 {
   font-size: 18px;
   line-height: 1.5;
   color: #052c65;
 }

 .wp-btn-event {
   border: 0;
   border-radius: 9px;
   padding: 8px 14px;
   background: var(--g);
   color: #fff;
   background: linear-gradient(100deg, #02b978, #03a96e) !important;
   border: 0 !important;
   font-size: 16px;
 }

 .wp-btn-event a {
   text-decoration: none;
   color: white;
 }

 @media(max-width:610px) {
   .dialog {
     margin: 0;
     border-radius: 0;
     min-height: 100vh;
     padding: 20px
   }

   .sharegrid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 /* create event basic */

 /* :root {
  --g: #0e7a52;
  --i: #18231f;
  --m: #68766f;
  --l: #dfe7e1
} */

 /* body {
   margin: 0;
   background: #f7f9f7;
   color: var(--i);
   font: 15px/1.45 Inter, Arial, sans-serif;
 } */

 .btn {
   border: 0;
   border-radius: 10px;
   margin-top: 18px;
   padding: 14px;
   background: var(--g);
   color: white;
   font-weight: 850
 }

 .btn {
   background: linear-gradient(135deg, #13c887, #0d91df) !important;
 }

 .wrap {
   max-width: 980px;
   margin: auto;
   padding: 28px
 }

 .top {
   display: flex;
   justify-content: space-between;
   align-items: center
 }

 .brand:after {
   content: none !important;
 }

 .brand-logo {
   display: block;
   width: 150px;
   height: auto;
   max-height: 80px;
   object-fit: contain;
   object-position: left center;
 }

 .outline {
   background: #fff;
   border: 1px solid var(--l);
   color: var(--i)
 }

 .card {
   background: #fff;
   border: 1px solid var(--l);
   border-radius: 18px;
   /* padding: 32px; */
   padding: 20px;
 }

 .card h1 {
   font-size: 27px;
   letter-spacing: -.05em;
   margin: 0; 
 }

 .card>p {
   color: var(--m);
   /* margin: 6px 0 28px */
   margin: 6px 0 10px
 }

 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
 }

 .field {
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-weight: 750;
   font-size: 15px;
 }

 .field.full {
   grid-column: 1/-1
 }

 .field input,
 .field textarea {
   border: 1px solid #ccd8d0;
   border-radius: 9px;
   padding: 11px;
   /* font: inherit */
   font-size: 16px !important;
   font-weight: 750;
   /* width: 100%;
   box-sizing: border-box; */
 }

 .field input:focus,
 .field textarea:focus {
   border: 1px solid #12be84;
   box-shadow: 0 0 0 3px #dff7e8;
   outline: none;
   /* width: 100%;
   box-sizing: border-box; */
 }

 .field textarea {
   height: 92px;
 }

 .upload {
   border: 1.5px dashed #b7cbbd;
   border-radius: 11px;
   background: #f9fcfa;
   display: grid;
   place-items: center;
   text-align: center;
   color: var(--m);
   font-weight: 500
 }

 .file-upload__label {
   display: block;
   cursor: pointer;
   width: 100%;
 }

 .upload-product-img a {
   text-decoration: none;
 }

 .upload-product-img {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0px 0px 10px;
   text-align: center;
 }

 .file-upload {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   margin: 0 auto 12px auto;
 }

 .file-upload input[type="file"] {
   display: none;
 }

 .media-grid .preview-item {
   position: relative;
   width: 80px;
   height: 80px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #ddd;
   margin-bottom: 10px;
 }

 .media-grid .preview-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .media-grid .preview-item .remove-img {
   position: absolute;
   top: 3px;
   right: 3px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   font-size: 11px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .choice.on {
   border-color: #12be84 !important;
   background: #eaf8f4 !important
 }

 .choice {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px;
   border: 1px solid var(--l);
   border-radius: 11px;
   margin: 8px 0
 }

 .choice.on {
   border-color: var(--g);
   background: #effaf3
 }

 .choice small {
   display: block;
   color: var(--m);
   font-weight: 500;
   margin-top: 2px
 }

 .toggle {
   width: 38px;
   height: 22px;
   background: var(--g);
   border-radius: 20px;
   padding: 3px
 }

 .toggle:after {
   content: "";
   display: block;
   width: 16px;
   height: 16px;
   background: white;
   border-radius: 50%;
   margin-left: 16px
 }

 .choice.on {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 /* Toggle container */
 .switch {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 28px;
 }

 /* Hide default checkbox */
 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }

 /* Toggle background */
 .slider {
   position: absolute;
   inset: 0;
   cursor: pointer;
   background: #ccc;
   border-radius: 30px;
   transition: 0.3s;
   height: 22px;
   width: 38px;
 }

 /* Toggle circle */
 .slider::before {
   content: "";
   position: absolute;
   width: 16px;
   height: 16px;
   left: 2px;
   top: 3px;
   background: white;
   border-radius: 50%;
   transition: 0.3s;
 }

 /* ON state */
 .switch input:checked+.slider {
   /* background: #08795b; */
   background: linear-gradient(135deg, #13c887, #0d91df) !important;
 }

 /* Move circle when ON */
 .switch input:checked+.slider::before {
   transform: translateX(22px);
   left: -3px;
 }

 .new_choice b {
   font-size: 14px;
 }

 .new_choice small {
   font-size: 13px;
 }

 .add_res {
   font-size: 14px;
   font-weight: 700;
 }

 /* .new_btn a {
      text-decoration: none;
      color: #082f68 !important;
    }  */

 .foot {
   display: flex;
   justify-content: space-between;
   margin-top: 23px
 }

 .out {
   background: #fff !important;
   color: #082f68 !important;
   border-color: #d7e3f0 !important
 }

 @media (max-width:480px) {
   .brand-logo {
     width: 115px;
   }

   .choice-grid {
     gap: 0px !important;
   }

   .top {
     justify-content: center;
   }

   .brand-logo {
     min-height: 70px;
   }
 }

 @media(max-width:600px) {
   .wrap {
     padding: 18px
   }

   .step {
     font-size: 0
   }

   .steps {
     margin: 28px 0
   }

   .card {
     padding: 20px
   }

   .grid {
     grid-template-columns: minmax(0, 1fr);
     gap: 10px;
   }

   .top .outline {
     display: none
   }
 }

 /*Invalid */

 .page-invalid {
   max-width: 680px;
   margin: auto;
   background: #fff;
   min-height: 100vh;
   padding: 100px 20px;
 }

 .invalid-msg {
   padding: 80px 30px;
   background: #fff;

 }

 /* Event page */
 .event-card {
   background: #fff;
   border: 1px solid var(--l);
   padding: 20px;
   border-radius: 9px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 }

 .event-card h3 {
   color: #092e67;
 }

 .header-two h2 { 
   font-size:27px;

 }

 .event-img img {
   height: 100px;
   width: 160px;
 }

 .wp-btn {
   background: linear-gradient(100deg, #02b978, #03a96e) !important;
   border: 0 !important;
 }

 .wp-btn a {
   text-decoration: none;
   color: white;
 }

 @media (max-width:480px) {
   .event-img img {
     width: 140px;
   }

   .event-card {
     padding: 11px 13px;
     gap: 10px;
   }

   .event-card p {
     font-size: 14px;
   }

   .event-btns button {
     font-size: 14px;
   }
 }

 .bar {
   height: 6px;
   width: 100px;
   background: #e9efeb;
   border-radius: 6px;
   margin-top: 5px
 }

 .bar i {
   display: block;
   background: var(--g);
   height: 100%;
   border-radius: inherit
 }

 .bar i {
   background: linear-gradient(135deg, #13c887, #0d91df) !important
 }

 .add_res {
   font-size: 14px;
   font-weight: 700;
 }

 .new_btn a {
   text-decoration: none;
   color: #082f68 !important;
 }

 .event-details {
   line-height: 1.8;
 }

 .event-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .event-badge {
   background-color: #ff0000a8 !important;
   padding: 6px 12px;
   font-size: 14px;
 }

 /* Public Event */

 .page {
   max-width: 680px;
   margin: auto;
   background: #fff;
   min-height: 100vh;
   /* box-shadow: 0 18px 55px #15392716; */
 }

 /* .page {
      box-shadow: 0 18px 55px #082f6817
    } */

 .content {
   padding: 20px;
 }

 .privacy {
   text-align: center;
   color: var(--m);
   font-size: 12px
 }

 @media(max-width:680px) {
   .cover {
     height: 220px
   }

   .content {
     padding: 20px
   }

   .content h1 {
     font-size: 32px
   }
 }

 .answer {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   text-align: left;
   padding: 15px;
   border: 1px solid #ccd8d0;
   background: #fff;
   border-radius: 12px;
   margin: 9px 0;
   font-weight: 850;
   cursor: pointer;
   box-sizing: border-box;
   font-size: 14px;
 }

 .answer input {
   display: none;
 }

 /* Selected answer */
 .answer:has(input:checked) {
   border-color: #198754;
   background: #f0fff5;
 }

 .popup-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9999;
   align-items: center;
   justify-content: center;
 }

 .popup-box {
   max-height: 90vh;
   overflow: hidden;
   position: relative;
   width: 90%;
   max-width: 500px;
   background: #fff;
   padding: 22px;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .popup-box p {
   font-size: 14px;
 }

 .popup-box h3 {
   font-size: 20px;
 }

 .close-btn {
   position: absolute;
   top: 10px;
   right: 15px;
   border: 0;
   background: none;
   font-size: 20px;
   cursor: pointer;
 }

 th {
   text-align: left;
   color: #77857e;
   font-size: 13px;
   letter-spacing: .7px;
   padding: 8px;
 }

 tbody,
 td {
   font-size: 14px;
   padding: 8px;
 }

 .table-scroll {
   width: 100%;
   max-height: 350px;
   overflow-y: auto;
   overflow-x: auto;
   margin-top: 15px;
 }

 .table-scroll thead {
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 2;
 }

 .table-scroll th {
   padding: 10px;
   text-align: left;
 }

 .table-scroll td {
   padding: 10px;
 }

 .cover-public {
   position: relative;
   min-height: 280px;
   background-color: #eee;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 16px 16px 0 0;
 }

 .cover-public::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.15),
       rgba(0, 0, 0, 0.35));
       /* background: linear-gradient(135deg,#082f68,#108ee3 52%,#15c888 53%,#0ba779)!important; */
   border-radius: inherit;
 }

 .cover-public .pill,
 .cover-public .share {
   position: absolute;
   z-index: 2;
 }

 .cover-public .pill {
   top: 15px;
   left: 15px;
 }

 .cover-public .share {
   top: 15px;
   right: 15px;
 }

 .pill {
   position: absolute;
   top: 18px;
   background: #ffffffde;
   border: 0;
   border-radius: 99px;
   padding: 8px 12px;
   font-size: 12px;
   font-weight: 850
 }

 .pill {
   left: 18px
 }

 .share {
   right: 18px;
   border-radius: 50%;
   font-size: 18px;
   background: #ffffffde;
   border: none;
   padding: 8px 12px;
 }

 .guest-number {
   color: #082f68;
   font-weight: 700;
   font-size: 12px;
 }

 .responses h3 {
   font-size: 22px;
 }

 .host {
   display: flex;
   gap: 10px;
   align-items: center;
   border-top: 1px solid var(--l);
   border-bottom: 1px solid var(--l);
   padding: 15px 0;
   margin: 21px 0
 }

 .avatar {
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background: #dff2e6;
   color: var(--g);
   display: grid;
   place-items: center;
   font-weight: 850
 }

 /* .host small {
      display: block;
      color: var(--m)
    } */

 .venue {
   display: flex;
   gap: 9px;
   color: #526158
 }

 .date {
   color: var(--g);
   font-size: 12px;
   font-weight: 850;
   letter-spacing: 1.2px
 }

 .content h1 {
   font-size: 37px;
   font-weight: 700;
   letter-spacing: -0.04em;
   line-height: 1;
   margin: 7px 0 14px;
 }

 /* .notice {
      background: #ecf8ff !important;
      border-color: #bce2f6 !important;
      color: #075182 !important
    } 
    .notice {
      background: #fff4d8;
      border: 1px solid #f1dda1;
      border-radius: 9px;
      padding: 11px 13px;
      color: #775112;
      font-size: 13px;
      margin: 20px 0
    } */

 /* h3 {
      margin-bottom: 10px
    } */

 /* OTP */

 /* .verify {
   color: #082f68;
 } */

 .verify p {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.2 !important;
   color: #526158;
 }

 .otp-input-fields-input {
   height: 40px;
   width: 40px;
   background-color: transparent;
   border-radius: 4px;
   border: 1px solid #2f8f1f;
   text-align: center;
   outline: none;
   font-size: 16px;

   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
 }

 .otp-input-fields {
   margin: auto;
   width: auto;
   display: flex;
   justify-content: center;

   input {
     height: 40px;
     width: 40px;
     background-color: transparent;
     border-radius: 4px;
     border: 1px solid #a8aca9;
     text-align: center;
     outline: none;
     font-size: 16px;

     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }

     /* Firefox */
     &[type=number] {
       -moz-appearance: textfield;
     }

     &:focus {
       border-color: var(--g);
       box-shadow: 0 0 0 3px #dff7e8;
     }
   }
 }

 .margin-right-10 {
   margin-right: 10px !important;
 }

 .otp-field label {
   color: #022466;
 }

 /* Event Creation */

/* .btn {
            border: 0;
            border-radius: 10px;
            padding: 11px 15px;
            background: var(--g);
            color: #fff;
            font-weight: 850
        }  */



/* RSVP Confirmation */

.card-confirmation {
  background: #fff;
   border-radius: 24px;
   padding: 42px;
   max-width: 590px;
   margin: 4vh auto;
   text-align: center;
   /* box-shadow: 0 18px 55px #15392719 */
 }

 .check {
   width: 68px;
   height: 68px;
   margin: auto;
   background: #e5f8f2 !important;
   color: #0c9c78 !important;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 32px;
   font-weight: 850
 }

 .card-confirmation h1 {
   font-size: 37px;
   letter-spacing: -.06em;
   margin: 6px
 }

 .card-confirmation>p {
   color: var(--m)
 }

 .details {
   margin: 20px 0;
   text-align: left;
   background: #f4f9ff;
   border-radius: 13px;
   padding: 15px;
 }

 .details .date {
   color: var(--g);
   font-weight: 850;
   font-size: 12px;
   letter-spacing: 1px
 }

 .details h3 {
   margin: 4px 0;
   font-size: 19px
 }

 .details p {
   color: var(--m);
   margin: 0
 }

 .id {
   font-size: 12px;
   color: var(--m);
   margin-top: 22px
 }

 @media(max-width:620px) {
   .card-confirmation {
     margin: 0; 
     border-radius: 0;
     padding: 40px 20px 20px;
   }

   .card-confirmation h1 {
     font-size: 32px
   }
 }

 /* Guest List */
 .head-guest {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
 }
 
.head-guest a {
    width: 100px;
 }

 .head-guest h1 {
   margin: 9px 0 3px;
   letter-spacing: -.05em;
    letter-spacing: -.055em;
    font-weight: 700 !important;
    font-size: 2.5rem;
    line-height: 1.2;
 }

 .head-guest p {
   color: var(--m);
   margin: 0
 } 

 .panel {
   background: white;
   border: 1px solid var(--l);
   border-radius: 15px;
   padding: 19px;
 }
/* 
 .panelhead {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap:10px;
 } */
 
 .panelhead b{
   font-size:18px;
 }

 .tablewrap {
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }

 .tablewrap table {
   width: 100%;
   min-width: 650px;
   border-collapse: collapse;
 }

 .tablewrap th {
   padding: 10px;
   text-align: left;
   white-space: nowrap;
   color: #77857e;
   font-size: 12px;
   letter-spacing: .7px;
   width: 20%;
 }

 td {
   padding: 13px 10px;
   border-top: 1px solid var(--l);
   text-align: left;
   white-space: nowrap;
 }

 .person {
   display: flex;
   gap: 9px;
   align-items: center
 }

 .mini {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #dff1e5;
   color: var(--g);
   display: grid;
   place-items: center;
   font-size: 14px;
   font-weight: 850
 }

 .person small {
   color: var(--m);
   display: block
 }

 /* .badge-guest {
      padding: 4px 8px;
      border-radius: 99px;
      background: #e4f6e9;
      color: #187247;
      font-weight: 800;
      font-size: 12px
    }
  */
 .maybe {
   background: #fff0d7;
   color: #a05e00
 }

 .no {
   background: #fbe8e8;
   color: #a64343
 }

 .mini {
   background: #e7f3ff !important;
   color: #0d82d2 !important
 }

 .badge-guest {
   background: #e5f8f2 !important;
   color: #078460 !important
 }

 .badge-res {
   font-size: 13px !important;
   padding: 10px !important;
 }

 @media(max-width:760px) { 

   .tablewrap {
     overflow: auto
   }

   table {
     min-width: 700px
   }
 }

 @media(max-width:575.98px) {

   .head-guest {
     display: block
   }

   .head-guest>div:last-child {
     margin-top: 14px
   }
 }

 /* Login OTP */

 :root {
   --navy: #092e67;
   --green: #04b979;
   --pale: #f6fbfb;
   --line: #dce7ef
 }

 .logo-login {
   width: 150px;
   height: auto;
 }

 .signin-title {
   font-size: 22px;
   /* letter-spacing: -.015em; */
   color: var(--navy);
 }

 .alert {
			font-size: 14px;
            padding: 12px !important;
        }
		.alert-dismissible .btn-close {
			font-size: 10px;
           padding: 18px 15px !important;
		}

    .notice.warning {
    background: #ff98001a !important;
    border-color: #ff980078 !important;
    color: #ff9800 !important;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid #ff980078 ;
}

.confirmation-details .yes{
      color: var(--g);
      font-weight: 600; 
      background: none;
}
.confirmation-details .maybe{
  color: #ffc107;
    font-weight: 600; 
    background: none;
}

.confirmation-details .no{
      color: #dc3545;
    font-weight: 600;
    background: none;
}

.ck-editor__editable {
        min-height: 150px;
		font-size: 16px !important;
    cursor: text;
	color:#000;
    }
.back {
    color: var(--g);
    font-weight: 800;
    font-size: 18px;
    text-decoration: none;
}	
	
/* Login page */

 :root {
            --navy: #092e67;
            --green: #04b979;
            --pale: #f6fbfb;
            --line: #dce7ef
        }

          .login-page-shell {
   max-width: 970px; 
            background: rgba(255, 255, 255, .92);
            border: 1px solid #eef2f5;
            border-radius: 28px;
            /* box-shadow: 0 12px 32px rgba(8, 47, 104, .08); */
			      padding: 20px !important;  
            margin:auto;
        }
         .logo-login {
            width: 150px;
            height: auto;
        }
        
        .feature-row {
            border: 1px solid var(--line);
            border-radius: 17px;
			max-width: 780px;
        }

        .feature {
            min-height: 112px;
            padding: 14px 2px !important;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center; 
        }

        .feature:not(:last-child) {
            border-right: 1px solid var(--line)
        }

        .feature i {
		    font-size: 1.75rem;
            line-height: 1;
            height: 25px;              /* same icon area */
            display: flex;
            align-items: center;
            justify-content: center; 
        }
		
		.feature strong {
            display: block;
            margin-top: 10px; 
            text-align: center; 
            min-height: 45px;  
            color: var(--navy);       
        }

 .security {
   border: 1px solid #dcefee;
   background: linear-gradient(100deg, #f2fcfc, #fbfffe)
 }
 
        .trust i {
            font-size: 1.7rem
        }

        .divider {
            color: #64748b
        }

        .divider:before,
        .divider:after {
            content: '';
            height: 1px;
            background: #dce5ed;
            flex: 1
        }
 
        .consent{
            font-size: 14px;
        }
        .phone-input::placeholder{
             font-size: 14px;
        }
        .phone-prefix{
            font-size: 14px !important; 
            
			    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: #cfdbe8 !important;
    background: none !important;
    border: 1px solid #cfdbe8;
    color: #6c757d;
    font-weight: 400;
        } 

        .phone-prefix:hover{
          color:#6c757d !important; 
        }
		 
        .phone-input{
            padding: 12px !important;
			font-size: 14px !important;
            border-color: #cfdbe8;
        } 
		.secure{
		    font-size: 18px !important;
		}
    .trust span{
                 color: var(--navy);
            }
		@media (max-width: 575.98px) { 
            .feature-row {
                width: 100%;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important; 
            }

            .feature {
                min-height: 112px;
                padding: 9px 2px !important;
            }

            .feature i {
                font-size: 1.45rem;
                line-height: 1;
            }

            .feature strong {
                font-size: 13px;
                line-height: 18px;
                margin-top: 10px;
                font-weight: 600;
            }
			
			.login-page-shell {
                border-radius: 20px
            }  

            .phone-prefix {
                max-width: 106px
            } 
            .trust span{
                font-size: 13px;
            }
        } 

          @media (max-width: 350px) {

            .feature {
                min-height: 108px;
                padding-left: 1px !important;
                padding-right: 1px !important;
            }

            .feature i {
                font-size: 1.35rem !important;
            }

            .feature strong {
                font-size: 11px;
                line-height: 16px;
                margin-top: 6px;
            }
			
			.secure {
                font-size: 16px !important;
            }
			 
			.security span{
			    font-size: 14px !important;
			}
			.trust i {
                font-size: 20px;
            }
			.trust span {
                font-size: 11px;
            }
        }

        .login-btn {
    border: 0;
    border-radius: 8px;
    margin-top: 18px;
    padding: 14px; 
    color: white;
    font-weight: 850; 
    font-size: 18px;
    background: linear-gradient(100deg, #02b978, #03a96e);
}

.verify-btn {
  font-size: 18px !important;
  border: none !important;

}

.remove-rsvp{
	border:0; 
	background:none; 
	color:red; 
	cursor:pointer;
}

.remove-rsvp i{
	font-size: 16px;
}

.guest-filter{
	padding: 4px 20px 4px 8px;
    border: 1px solid #d7e3f0;
    border-radius: 6px;
    background: #fff;
    min-width: 130px;
    font-size: 14px;
    color: #082f68;
	/* font-weight: 500; */
}

.guest-filter:focus {
    border: 1px solid #12be84;
    box-shadow: 0 0 0 3px #dff7e8;
    outline: none;
}

.guest-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1rem;
    }

    .guest-avatar {
      width: 40px;
      height: 40px;
      background: #e6f3ff;
      color: #1477bf;
      font-size: 14px;
      font-weight: 800;
      place-items: center;
    }
    .table>:not(caption)>*>* {
      padding: 1rem !important;
    }

    .table thead th {
      color: #71829a;
      font-size: .72rem;
      letter-spacing: .06em;
      white-space: nowrap
    }

    .delete-btn {
      color: #e84a45;
    }

    .filter-btn {
      border-color: var(--line);
      color: var(--navy)
    }

    .status-yes {
      background: #e7f8f1;
      color: #078460 !important; 
    }

    .status-maybe {
      background: #fff5dc;
      color: #9d7100 !important; 
    }

    .status-no {
      background: #fff0ef;
      color: #cd453b !important; 
    }

    .panelhead span{
      font-size: 14px;
    }

     @media(max-width:575.98px) {
      .guest-panel .card-body {
        padding: 1rem
      }
     }

     @media (max-width: 575.98px) { 
    .head-guest h1{
      font-size: 1.9rem;
    }
    .head-guest a{
      width: 100% !important;
    }
    .event-content a{
  font-size: 14px;
}
}
.table-responsive small{
  font-size: 13px !important;
}

.date-time-field {
    position: relative;
}

.date-time-field input {
    position: relative;
    z-index: 2;
    background: transparent;
	color: #000;
}

.date-time-field span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.date-time-field input:focus + span {
    display: none;
}

.date-time-field input.empty {
    color: transparent;
}
.remove-event{
	border:0; 
	background:none; 
	color:red; 
	cursor:pointer; 
  padding: 0px;
}

/* 10-09-2026 */

    .head-event {
      display: flex;
      justify-content: space-between;
      align-items: start
    }

    .head-event h1 {
      margin: 0;
      font-size: 29px;
      letter-spacing: -.05em
    }

    .head-event p {
      color: var(--m);
      margin: 5px 0
    }
    @media(max-width:480px) {
      .head-event {
        display: block
      }

      .head-event .btn {
        margin-top: 14px
      }
    }
    @media (max-width: 767.98px) {
    .head-event .btn {
        width: 100%;
        min-height: 46px;
		padding: 9px;
    }
}

.icon-event{
   width: 40px;
      height: 40px;
      display: inline-grid;
      place-items: center;
      background: #e7f3ff !important;
      color: #0d82d2 !important;
      font-weight: 700;
      border-radius: 50%;
      margin-right: 9px;
      padding: 6px;
}

    .event-status {
       background: #dc354514;
    color: #dc3545;
    border-radius: 20px;
    padding: 4px 8px;
    font-weight: 800;
    font-size: 12px;
}


  .mobile-list {
    display: grid !important;
    gap: 10px;
  }

  .mobile-list-item {
    background: #fff;
    border: 1px solid #d7e3f0;
    border-radius: 14px;
    padding: 14px;
  }

  .mobile-list-item .list-title {
    color: #082f68;
    font-weight: 700;
  }

  .mobile-list-item .list-subtitle {
    color: #536b88;
    font-size: 14px;
    margin-top: 2px;
  }

  .mobile-list-item .list-meta {
    border-top: 1px solid #e8eef5;
    color: #536b88;
    font-size: 14px;
    margin-top: 11px;
    padding-top: 10px;
  }
  
  
  /* event details */

      .event-cover {
        border-radius: 15px;
        min-height: 180px;
        padding: 18px;
        color:#fff;
		background: linear-gradient(135deg, #082f68, #108ee3 48%, #16c889 49%, #08a76f);
    }
     .detail-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

      .detail-actions .btn:last-child {
        grid-column: 1/-1
      }

      .detail-actions a{
        font-weight: 700;
        border-radius: 10px;
      }

      .published-tag{
        background: #ffffff2b;
    border: 1px solid #ffffff50;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
      }

          .summary-card {
        padding: 13px;
        border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    }

    .summary-card small {
    color: var(--m);
    font-weight: 700;
    }
    .summary-number {
    display: block;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -.05em;
    margin-top: 6px;
    color: var(--i);
}

    .section-card {
      border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
        padding: 16px;
    }
    .section-card h2{
      color: var(--i);
    }

    .section-card strong{
      color: var(--i);
    }

    .section-card span{
      font-size: 14px;
    }

    .progress{
      height: 7px !important;
    }

    .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
        background: linear-gradient(90deg, #10bd84, #1397d5);
    }

.quick-link {
    color: var(--navy);
    font-weight: 750;
    text-decoration: none;
        font-size: 14px;
}
.quick-link i {
    color: var(--green);
}

.person{
      display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #edf1f5;
}
.response-badge {
    font-size: 12px !important;
    font-weight: 800;
    border-radius: 99px;
    padding: 5px 8px; 
}

.guest-btn{
  border: 1px solid #0d6efd !important;
  color: #0d6efd !important;
}

@media (max-width:768px){
  .detail-actions a{
    width: 50%;
  }
}

/* guest list */

    .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 25px 0;
}
    .stat {
       border-radius: 13px;
    padding: 16px;
        background: #fff;
        border: 1px solid var(--l);
    }

    .stat b {
    display: block;
    font-size: 27px;
    letter-spacing: -.05em;
    margin-top: 6px;
}

.stat span {
    color: var(--m);
    font-weight: 750;
}

    @media (max-width: 767.98px) {
    .stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 16px 0 !important;
    }
        .stat strong, .stat b {
        font-size: 23px !important;
    }
    .stat {
    background: #fff;
    border: 1px solid var(--l);
        padding: 13px !important;
        border-radius: 13px !important;
}
.panel{
  padding: 15px;
}
}

.footer{
  color: #6a757d;
  font-weight: 600;
  font-size: 15px;
}

.footer img{
  width: 130px;
}
.welcome{
  font-size: 18px;
}

.logout{
  color: white !important;
}