/* ============================ Weekly Schedule (table view) Matches [repro_doctor_schedule] shortcode ============================ */ body.rtl .repro-app-form, body.rtl .repro-app-form input, body.rtl .repro-app-form select, body.rtl .repro-app-btn { font-family: tajawal, sans-serif !important; } body.rtl .repro-inline-options label, body.rtl .repro-field input[type="text"], body.rtl .repro-field input[type="email"], body.rtl .repro-field input[type="date"], body.rtl .repro-field select, body.rtl .repro-field textarea body.rtl .repro-app-form label, body.rtl .repro-schedule-table { font-size: 16px !important; } .repro-app-form { font-family: outfit, sans-serif; font-weight: 400; font-style: normal; } .repro-schedule-table-wrapper { margin: 50px 0; padding: 0 10px; overflow-x: auto; } .repro-schedule-table { font-family: outfit, sans-serif; width: 100%; min-width: 900px; border-collapse: collapse; background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 35px rgba(0,0,0,.04); } .repro-schedule-table thead { background: #f6f7fb; } .repro-schedule-table th, .repro-schedule-table td { padding: 12px 10px; border-bottom: 1px solid #f0f0f5; vertical-align: top; text-align: center; font-size: 13px; } .repro-schedule-table th { font-weight: 600; color: #384055; } /* Each day column */ .repro-schedule-day-col { min-width: 140px; } /* Empty day message */ .repro-schedule-empty { font-size: 12px; color: #999; padding: 4px 0; } /* ============================ Schedule card (doctor slot) ============================ */ .repro-schedule-card { background: #f7fbff; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; text-align: inherit; position: relative; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 3px 8px rgba(0,0,0,.03); transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; } /* Colored stripe on the side */ .repro-schedule-card::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 4px; border-radius: 10px 0 0 10px; background: #2d2f94; /* default */ } /* If you later change PHP to set a CSS variable --slot-color, this will adapt automatically */ .repro-schedule-card[style*="background"]::before { background: rgba(0,0,0,0.15); } .repro-schedule-card:hover { background: #f0f7ff; box-shadow: 0 6px 16px rgba(0,0,0,.06); transform: translateY(-1px); } /* Doctor name + department */ .repro-schedule-doctor { margin-bottom: 3px; } .repro-schedule-doctor-name { font-size: 13px; font-weight: 600; color: #1e3250; text-decoration: none; } .repro-schedule-doctor-name:hover { text-decoration: underline; } .repro-schedule-doctor-dept { font-size: 13px; color: #7a879c; margin-top: 1px; } /* Time range */ .repro-schedule-time { font-size: 13px; color: #2d2f94; margin: 3px 0; } /* Clinic / room meta */ .repro-schedule-meta { font-size: 13px; color: #555; margin-top: 3px; } .repro-schedule-clinic, .repro-schedule-room { margin: 1px 0; } /* CTA button (Get Appointment) */ .repro-schedule-cta { margin-top: 6px; text-align: left; } .repro-schedule-btn { display: inline-block; background: #2d2f94; color: #ffffff; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s ease, transform 0.1s ease; } .repro-schedule-btn:hover { background: #2d2f94; transform: translateY(-1px); } /* ============================ RTL support WordPress adds .rtl on / in Arabic ============================ */ html.rtl .repro-schedule-table, body.rtl .repro-schedule-table { direction: rtl; } html.rtl .repro-schedule-table th, html.rtl .repro-schedule-table td, body.rtl .repro-schedule-table th, body.rtl .repro-schedule-table td { text-align: center; } html.rtl .repro-schedule-card::before, body.rtl .repro-schedule-card::before { inset-inline-start: auto; inset-inline-end: 0; border-radius: 0 10px 10px 0; } html.rtl .repro-schedule-cta, body.rtl .repro-schedule-cta { text-align: left; } /* ============================ Appointment request form styling (used by [repro_appointment_form]) ============================ */ .repro-app-wrapper { max-width: 980px; margin: 0 auto 70px; padding: 0px 15px 0px 15px; } .repro-app-section { /* display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px;*/ padding: 40px; margin: 30px 0; border-bottom: 1px solid #eee; background: #ffffff; border-radius: 10px; border: 1px; } .repro-app-section:last-child { border-bottom: none; } .repro-app-section-title h2 { font-size: 26px; line-height: 1.3; margin: 0 0 20px 0; } .repro-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 30px; } .repro-app-grid .repro-field-full { grid-column: 1 / -1; } .repro-field label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; } .repro-field input[type="text"], .repro-field input[type="email"], .repro-field input[type="date"], .repro-field select, .repro-field textarea { width: 100%; padding: 10px 12px; border-radius: 4px; border: 1px solid #e3e3e3; background: #fafafa; font-size: 13px; } .repro-field textarea { min-height: 110px; resize: vertical; } .repro-inline-options { display: flex; gap: 15px; align-items: center; margin-top: 3px; } .repro-inline-options label { font-weight: 400; font-size: 13px; } .repro-app-recaptcha { margin-top: 25px; } .repro-app-submit { margin-top: 30px; /* text-align: right; default for EN */ } body.rtl .repro-app-submit, html.rtl .repro-app-submit { text-align: right; /* flip in AR */ } .repro-app-btn { background: #2d2f94; color: #fff; border-radius: 4px; padding: 12px 30px; border: 0; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .2s ease; } .repro-app-btn:hover { background: #61CE70; } .repro-app-errors { background: #ffe8e8; color: #c0392b; padding: 12px 18px; border-radius: 4px; margin-bottom: 20px; font-size: 13px; } .repro-app-success { background: #ecf9f1; color: #2e7d32; padding: 15px 20px; border-radius: 4px; margin-bottom: 20px; } /* Responsive */ @media (max-width: 900px) { .repro-schedule-table { min-width: 600px; } .repro-app-section { grid-template-columns: 1fr; gap: 20px; } .repro-app-grid { grid-template-columns: 1fr; } } .repro-schedule-doctor-link { display: flex; align-items: center; gap: 10px; text-decoration: none; } .repro-schedule-doctor-photo img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; } .repro-schedule-doctor-name { font-weight: 600; }