/* PDT Booking - Default Styles
   You can override from Settings -> PDT Booking -> Custom CSS
*/

.pdt-modal-open {
       overflow: hidden;
}

.pdt-booking .pdt-btn {
       cursor: pointer;
       border: 0;
       padding: 10px 14px;
       border-radius: 10px;
       background: #111827;
       color: #fff;
       font-weight: 600;
       line-height: 1;
}

.pdt-booking .pdt-btn:hover {
       opacity: 0.92;
}

.pdt-booking .pdt-btn:active {
       transform: translateY(1px);
}

.pdt-booking .pdt-btn--primary {
       background: #2563eb;
}

.pdt-booking .pdt-btn--primary:hover {
       opacity: 0.95;
}

.pdt-booking .pdt-btn:focus {
       outline: 2px solid rgba(37, 99, 235, 0.35);
       outline-offset: 2px;
}

.pdt-booking .pdt-link {
       background: transparent;
       border: 0;
       padding: 0;
       color: #2563eb;
       text-decoration: underline;
       cursor: pointer;
       font-weight: 600;
}

.pdt-booking .pdt-hidden {
       display: none !important;
}

/* Modal */
.pdt-modal {
       position: fixed;
       inset: 0;
       z-index: 999999;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 18px;
}

.pdt-modal__backdrop {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.55);
}

.pdt-modal__dialog {
       position: relative;
       width: 100%;
       max-width: 980px;
       max-height: 88vh;
       overflow: auto;
       background: #fff;
       border-radius: 16px;
       box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
       padding: 18px;
}

.pdt-modal__close {
       position: absolute;
       top: 12px;
       right: 12px;
       width: 38px;
       height: 38px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #fff;
       cursor: pointer;
       font-size: 20px;
       line-height: 1;
}

.pdt-modal__close:hover {
       background: #f9fafb;
}

/* Header */
.pdt-header {
       margin: 8px 0 14px;
}

.pdt-header__title {
       font-size: 20px;
       font-weight: 800;
       color: #111827;
}

.pdt-header__sub {
       margin-top: 4px;
       color: #6b7280;
       font-size: 13px;
}

/* Steps */
.pdt-steps {
       display: flex;
       gap: 10px;
       margin: 6px 0 12px;
       flex-wrap: wrap;
}

.pdt-step {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 10px;
       border-radius: 999px;
       background: #f3f4f6;
       border: 1px solid #e5e7eb;
}

.pdt-step__dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: #9ca3af;
}

.pdt-step__label {
       font-size: 12px;
       font-weight: 700;
       color: #374151;
}

.pdt-step.is-active {
       background: rgba(37, 99, 235, 0.08);
       border-color: rgba(37, 99, 235, 0.25);
}

.pdt-step.is-active .pdt-step__dot {
       background: #2563eb;
}

.pdt-step.is-done {
       background: rgba(16, 185, 129, 0.08);
       border-color: rgba(16, 185, 129, 0.25);
}

.pdt-step.is-done .pdt-step__dot {
       background: #10b981;
}

/* Alerts */
.pdt-alert {
       padding: 10px 12px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #f9fafb;
       color: #111827;
       font-size: 13px;
       margin: 10px 0;
}

.pdt-alert--error {
       border-color: rgba(239, 68, 68, 0.25);
       background: rgba(239, 68, 68, 0.06);
       color: #7f1d1d;
}

.pdt-alert--success {
       border-color: rgba(16, 185, 129, 0.25);
       background: rgba(16, 185, 129, 0.06);
       color: #064e3b;
}

.pdt-alert--info {
       border-color: rgba(59, 130, 246, 0.25);
       background: rgba(59, 130, 246, 0.06);
       color: #1e3a8a;
}

/* Form */
.pdt-form {
       margin-top: 8px;
}

.pdt-field {
       margin-bottom: 12px;
}

.pdt-label {
       display: block;
       font-size: 12px;
       font-weight: 800;
       color: #111827;
       margin-bottom: 6px;
}

.pdt-help {
       margin-top: 6px;
       font-size: 12px;
       color: #6b7280;
}

.pdt-input,
.pdt-select,
.pdt-textarea {
       width: 100%;
       border: 1px solid #e5e7eb;
       border-radius: 12px;
       padding: 10px 12px;
       font-size: 14px;
       background: #fff;
       color: #111827;
}

.pdt-input:focus,
.pdt-select:focus,
.pdt-textarea:focus {
       outline: 2px solid rgba(37, 99, 235, 0.20);
       border-color: rgba(37, 99, 235, 0.30);
}

.pdt-textarea {
       resize: vertical;
}

/* Layout helpers */
.pdt-grid {
       display: grid;
       gap: 12px;
}

.pdt-grid--2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdt-grid--3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {

       .pdt-grid--2,
       .pdt-grid--3 {
              grid-template-columns: 1fr;
       }
}

/* Cards */
.pdt-card {
       border: 1px solid #e5e7eb;
       border-radius: 16px;
       padding: 14px;
       background: #fff;
       margin: 12px 0;
}

.pdt-card__title {
       font-size: 14px;
       font-weight: 900;
       margin-bottom: 10px;
       color: #111827;
}

.pdt-subtitle {
       font-size: 13px;
       font-weight: 800;
       margin: 10px 0 8px;
       color: #374151;
}

/* Lines */
.pdt-order-lines .pdt-line,
.pdt-payments .pdt-payment {
       border: 1px dashed #d1d5db;
       border-radius: 14px;
       padding: 12px;
       margin: 10px 0;
}

.pdt-line__top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 12px;
       margin-bottom: 10px;
}

.pdt-line__title {
       font-weight: 900;
       color: #111827;
       font-size: 13px;
}

/* Actions */
.pdt-actions {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       margin-top: 10px;
}

.pdt-actions--between {
       justify-content: space-between;
       align-items: center;
}

/* Iframe */
.pdt-iframe-wrap {
       border: 1px solid #e5e7eb;
       border-radius: 16px;
       overflow: hidden;
       background: #fff;
}

.pdt-iframe {
       width: 100%;
       height: 70vh;
       border: 0;
       display: block;
}

/* Loading */
.pdt-loading {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #f9fafb;
       margin-bottom: 12px;
}

.pdt-spinner {
       width: 18px;
       height: 18px;
       border-radius: 50%;
       border: 2px solid #d1d5db;
       border-top-color: #2563eb;
       animation: pdtSpin 0.9s linear infinite;
}

@keyframes pdtSpin {
       from {
              transform: rotate(0deg);
       }

       to {
              transform: rotate(360deg);
       }
}

.pdt-loading__text {
       font-size: 13px;
       font-weight: 700;
       color: #374151;
}

/* Output JSON */
.pdt-json {
       margin-top: 10px;
       padding: 12px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #0b1220;
       color: #e5e7eb;
       overflow: auto;
       font-size: 12px;
}