/* ===============================
   Wrapper for scroll
   =============================== */
.my-bookings-wrapper {
    position: relative; /* can also be absolute if needed */
    max-width: 100%;
    /*max-height: 500px;*/
    
    overflow: auto;

    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* right edge fade */
.my-bookings-wrapper::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

#my-bookings {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

/* ===============================
   All cells
   =============================== */
#my-bookings th,
#my-bookings td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    background: #fff;
    vertical-align: top;
    overflow: hidden;              /* prevents spillover */
    text-overflow: ellipsis;       /* optional */
    word-break: break-word;        /* allows wrapping */
}

/* ===============================
   Sticky header 
   =============================== */
#my-bookings thead th {
    position: sticky;
    top: 0;
    background: #f6f7f8;
    z-index: 10;
    font-weight: 600;
    text-align: left;
}

/* allow wrapping */

#my-bookings th,
#my-bookings td {
    white-space: normal;
    word-break: break-word;
}


/* ===============================
   Body row hover
   =============================== */
#my-bookings tbody tr:hover td {
    background: #a4d1d2;
}

#my-bookings tbody tr.srb-active-row {
    background-color: #a4d1d2; 
}


/* ===============================
   Buttons
   =============================== */
#my-bookings button {
    font: inherit;
    font-size: 0.9em;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

#my-bookings button:hover {
    background: #f0f0f0;
}

/* ===============================
   Select
   =============================== */
#my-bookings select {
    font: inherit;
    font-size: 0.9em;
    padding: 3px 28px 3px 8px; /* extra right padding for arrow */
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    height: auto;
    line-height: 1.35;
    box-sizing: border-box;

    /* remove native styling differences */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}


/* ===============================
   Modal styling
   =============================== */
/* Overlay */
#srb-change-date-modal {
    position: fixed;
    padding-top: 50px;  /* enough to clear admin bar */
    inset:0;
    background: rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal box */
#srb-change-date-modal .modal-content {
    position: relative;
    background: #fff;
    width: 420px;           /* smaller */
    max-width: 95%;
    padding: 16px 18px;     /* reduced spacing */
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    font-size: 0.9rem;      /* slightly smaller text */
}

/* Header */
#srb-change-date-modal h3 {
    margin: 0 0 10px 0;     /* reduce free space */
    font-size: 1rem;
    font-weight: 600;
}

/* Form spacing */
#srb-change-date-modal form {
    margin: 0;
}

#srb-change-date-modal label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

#srb-change-date-modal input,
#srb-change-date-modal button {
    font-size: 0.85rem;
}

/* Buttons more compact */
#srb-change-date-modal button {
    padding: 4px 10px;
}

#srb-change-date-modal .srb-modal-close {
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
}

/* Registration success / pending message */
.um-postmessage {
    background-color: #f2f7f4;
    border: 2px solid #2f6f4f;
    color: #1e3d2f;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}