:root { --accent: #e2795a; } @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: #f4f4f4 }/* Overlay modal */ .calendar-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); } /* Modal content */ .calendar-modal-content { background-color: #fff; margin: 5% auto; padding: 20px; border-radius: 10px; width: 90%; max-width: 700px; position: relative; } /* Close button */ .calendar-close { position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; } .my-btn { display: inline-block; padding: 10px 20px; background: #0073e6; color: #fff; text-decoration: none; border-radius: 5px; } .my-btn:hover { background: #005bb5; } /* --- Modal container --- */ .calendar-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; padding: 20px; opacity: 0; transition: opacity 0.35s ease; } /* when active */ .calendar-modal.show { display: flex; opacity: 1; } /* --- Overlay --- */ .calendar-modal-overlay { position: absolute; inset: 0; background: transparent; } /* --- Content --- */ .calendar-modal-content { position: relative; background: #fff; border-radius: 20px; width: 95%; max-width: 1100px; height: 80vh; box-shadow: 0 15px 40px rgba(0,0,0,0.3); overflow: hidden; transform: translateY(40px); transition: transform 0.35s ease; } /* animation on show */ .calendar-modal.show .calendar-modal-content { transform: translateY(0); } /* --- Close button --- */ .calendar-modal-close { position: absolute; top: 12px; right: 18px; font-size: 32px; cursor: pointer; color: #333; z-index: 20; transition: transform 0.2s, color 0.3s; } .calendar-modal-close:hover { transform: rotate(90deg); color: #0073e6; } /* --- Iframe --- */ #calendar-iframe { width: 100%; height: 100%; border: none; display: none; } /* --- Loader --- */ .calendar-loader { position: absolute; inset: 0; background: linear-gradient(135deg, #f7f9fb, #e8eff5); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 15px; font-weight: 500; color: #555; z-index: 5; } .spinner { width: 50px; height: 50px; border: 4px solid rgba(0, 0, 0, 0.1); border-top: 4px solid #0073e6; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- WOW Button --- */ .open-calendar-btn { background: linear-gradient(135deg, #00b4db, #0083b0); color: #fff; border: none; padding: 12px 28px; border-radius: 50px; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 131, 176, 0.3); } .open-calendar-btn:hover { background: linear-gradient(135deg, #00a2c9, #006b8e); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 131, 176, 0.4); } /* --- Scroll lock when modal open --- */ body.modal-open { overflow: hidden; } .post-cover-buttons { display: none; } .map-price-marker { color: #fff; font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transform: translate(-50%, -50%); white-space: nowrap; border: 2px solid #fff; transition: all 0.15s ease-in-out; } .map-price-marker:hover { transform: translate(-50%, -55%) scale(1.05); filter: brightness(1.15); } /* .renew-listing-btn { background: #f5f5f5; border: 1px solid #ddd; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-weight: 500; transition: all 0.2s ease-in-out; } .renew-listing-btn:hover { background: #0073aa; color: #fff; border-color: #0073aa; } .renew-result { font-size: 13px; margin-top: 5px; color: #555; line-height: 1.4em; } */ td.renew { display: flex !important; justify-content: center; flex-wrap: wrap; list-style:none; margin-bottom: 18px; } .datepick.datepick-multi.mphb-datepicker-minimal-blue { width: 100% !important; } .plan-features { height: 800px; } /*shordcode wooommerce for custom thank you page */ .custom-order-wrapper { max-width: 800px; margin: 40px auto; background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); } .custom-order-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .custom-order-totals { margin-top: 20px; font-size: 18px; } .custom-order-customer, .custom-order-payment { margin-top: 40px; padding-top: 20px; border-top: 2px solid #f5f5f5; } .bank-account { background: #f9fafc; padding: 15px; border-radius: 10px; margin-bottom: 15px; }