:root { --accent: #7758b1; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1); } 50% { box-shadow: -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #ffffff }/* Styling for the Related Events Block */ .related-listing-block { background: #f0e4ff; border: 1px solid #e0e0e0; border-radius: 5px; padding: 15px; margin-bottom: 15px; } .related-listing-block .pf-head { display: flex; align-items: center; margin-bottom: 10px; } .related-listing-block .pf-head .title-style-1 { display: flex; align-items: center; } .related-listing-block .pf-head .title-style-1 i { font-size: 20px; color: #007bff; margin-right: 8px; } .related-listing-block .pf-head .title-style-1 h5 { font-size: 18px; font-weight: 600; color: #333; margin: 0; } .related-listing-block .pf-body { display: flex; flex-direction: column; } .related-listing-block .pf-body .event-host { margin-bottom: 8px; padding: 8px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; transition: background 0.3s ease, border 0.3s ease; } .related-listing-block .pf-body .event-host:hover { background: #d2a7e6; border-color: #007bff; } .related-listing-block .pf-body .event-host a { text-decoration: none; } .related-listing-block .pf-body .event-host .host-name { font-size: 16px; color: #333; font-weight: 500; } .related-listing-block .pf-body .event-host:hover .host-name { color: #fff; } /* BACKGROUND FOR EVENTS ELEMENTS IN LEFT PART*/ /* equalize bottom padding on the “Categories” box */ .events-style { padding: 15px; margin-bottom: 20px; background: #f0e4ff; border: 1px solid #e0e0e0; border-radius: 8px; } /* if there’s an inner wrapper that needs its own bottom padding */ .events-style .content, .events-style .inner { padding-bottom: 15px; } /* MOve google LOGIN UP*/ .login-content { display: flex; flex-direction: column; font-size:16px; } .login-content .cts-social-login-wrapper { order: -1;font-size:16px; } p.connect-with { display: none;font-size:16px; } /* Hide dynamic listing name from the form*/ .hidden-listing-name { display: none; } /* background color of hero section*/ .section.hero { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; min-height: 100vh; padding-top: 60px; padding-bottom: 110px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-image: linear-gradient(135deg, #2855ff, #dc41b9); } /*MAKE IMAGE ON THE BOOK LISTING 50 PERCENT SMALLER*/ .image_book_listing img { max-width: 65% !important; height: auto !important; display: block; margin: 0 auto; } /* Subscriptions slider color fix*/ /* Style the switch container */ .packageswitch { position: relative; display: inline-block; width: 50px; height: 26px; } /* Hide default checkbox */ .packageswitch input { opacity: 0; width: 0; height: 0; } /* Style the slider (Default State BEFORE Switching) */ .packageslider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #a560c8; /* Solid purple background */ transition: 0.4s; border-radius: 26px; border: 2px solid #a560c8; /* Keeps border visible */ } /* Create the slider circle (BEFORE SWITCHED) */ .packageslider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #a560c8; /* Purple switcher (same as background) */ transition: 0.4s; border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Slight shadow for visibility */ } /* When checkbox is checked (SWITCHED ON) */ input:checked + .packageslider { background-color: #a560c8; /* Keep background purple */ } /* When switched, make the circle WHITE */ input:checked + .packageslider::before { background-color: white; transform: translateX(24px); border: 2px solid white; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } /* Make the button look disabled */ .disabled-button { pointer-events: none; opacity: 0.6; cursor: not-allowed; } /* Tooltip styling */ .disabled-button[title]:hover::after { content: attr(title); position: absolute; background: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 13px; white-space: nowrap; top: -30px; left: 50%; transform: translateX(-50%); opacity: 1; transition: opacity 0.3s ease-in-out; } /* Only apply tab styles on the "Add Listing" page */ body.page-id-129 .tab-container { display: flex; justify-content: center; margin-bottom: 20px; } body.page-id-129 .tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f4f4f4; margin: 0 5px; font-size: 16px; } body.page-id-129 .tab.active { background: #a560c8; color: white; font-weight: bold; } body.page-id-129 .tab-content { display: none; border: 1px solid #ccc; padding: 15px; background: #fff; } body.page-id-129 .tab-content.active { display: block; }