/* play long play description formatting
====================================*/
.swp-long-description {
    background: #111;
    color: #f3f3f3;
    margin-top: 0px;             /* adjust as needed */
    margin-bottom: 40px;
    max-height: 240px; 
    overflow-y: auto;            /*Scroll bar visible*/
    font-size: 17px;
}

/* play long description label styling
=================================*/
.swp-long-description-label {
    font-weight: bold;
    font-size: 30px;
    color: #ca9b35;    /* gold color to match theme */
    margin-top: 50px;
    margin-bottom: 0px;    /* space between label and description */
}

/* Add padding to bottom on long desc. box */
.swp-long-description-wrapper {
    padding-bottom: 1px;
}

.swp-long-description .vc_row,
.swp-long-description .wpb_row,
.swp-long-description .row_col_wrap_12,
.swp-long-description .row-bg-wrap {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

/* Single Product Page: Gap between 'Content' and main menu */
.single-product .container-wrap {
    padding-top: 130px;
}

/* Scrollbar styling for play long description 
==============================================*/
.swp-long-description {
   /* overflow-y: auto;        /* keep scrolling enabled */

/* Firefox */
    scrollbar-width: auto;     /* options: auto, thin, none */
    scrollbar-color: #ca9b35 #111;     /* thumb color, track color */
}

/* Chrome, Edge, Safari */
    .swp-long-description::-webkit-scrollbar {
    width: 50px !important;     /* adjust width */
}

.swp-long-description::-webkit-scrollbar-track {
    background: #111;     /* track color - this is the background behind the 'handle/thumb'*/
    border-radius: 30px;
}

.swp-long-description::-webkit-scrollbar-thumb {
    background-color: #ca9b35;      /* scrollbar handle/thumb I.e. what you 'grab' to drag down quickly*/
    border-radius: 0px;
    border: 20px solid #111;      /* space around handle */
    width: 25px;
}

.swp-long-description::-webkit-scrollbar-thumb:hover {
    background-color: #ffcc66;      /* hover effect */
}

/* Sample Script Button Styling 
=============================== */

.swp-sample-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 50px;
    width: 50px !Important;
}

.swp-sample-buttons button.btnqaforsample i {
    margin-right: 6px;
}

/* Sample Script & Audio Buttons styling  
=========================================*/

#btnqaforsample,
.btnqaforsampleaudio {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    height: 44px !Important;
    gap: 6px;                    /*space between icon & text*/
    width: 160px !Important;     
    padding: 3px 3px;             
    border-radius: 6px;          /* rounded corners like audio player */
    background-color: #614b1b;     
    color: #f3f3f3;                 /* text color */
    border: 0.5px solid #000;  
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    flex: 0 0 auto;              /* prevent flex container from stretching it */
}
#btnqaforsample:hover,
.btnqaforsampleaudio:hover {
    background-color: #333;     /* optional hover effect */
}

/* Sample Script Download Form styling 
======================================== */
.ui-dialog-titlebar .ui-dialog-title {
    color: #ca9b35;
    font-size: 20px;
}

.ui-dialog-titlebar-close .ui-icon {
    background: none !important;
    text-indent: 0;
}

.ui-dialog-titlebar-close .ui-icon::before {
    content: "×";
    font-size: 22px;
    font-weight: bold;
    color: #000;    /* black X */
    line-height: 1;
}

.wpcf7-form-control.wpcf7-text {
    font-size: 16px;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
font-size: 20px !important;
}

/* Download link styling 
=========================*/

#qaforsampleDialog .downloadlink {
    display: flex;
    justify-content: center;    /* horizontal centering */
}

#qaforsampleDialog .download-link {
    display: inline-block;    /* optional, flex would stretch if you use block */
    padding: 10px 20px;
    background-color: #ca9b35;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
}
#qaforsampleDialog .download-link {
    display: inline-block;    /* allows padding to form a box */
    padding: 10px 20px;    /* space around the text */
    background-color: #ca9b35;    /* gold background */
    color: #000;    /* black text */
    font-weight: bold;    /* bold text */
    text-decoration: none;    /* remove underline */
    border-radius: 4px;    /* rounded corners */
    margin-top: 10px;    /* spacing above the link */
    text-align: center;
    margin: 5px auto 0 auto;    /* top 10px, left/right auto = center */    
    transition: background 0.2s;    /* smooth hover transition */
}

/* Hover effect */
#qaforsampleDialog .download-link:hover {
    background-color: #e0b047;    /* brighter gold on hover */
    color: #000;
}

#qaforsampleDialog .wpcf7-response-output {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    border: none;

}
/* Style Wishlist Link 
=========================*/
.single-product .wishlist-under-thumbnail {
    padding-top: 25px;
    padding-bottom: 10px;
    text-align: center;
}

.wishlist-under-thumbnail .tinvwl_add_to_wishlist-text {
    font-weight: 700 !important;
    font-size: 16px;
}

.wishlist-under-thumbnail .tinvwl_already_on_wishlist-text {
    font-weight: 700 !important;
    font-size: 16px;
}

/* ===============
Add to Cart button
==================*/

.product-package-frontend.pla-standard {
    margin-top: 1px !Important;
}

/* Styling - Add-to-Cart Button */
.pf-button-row .single_add_to_cart_button {
    display: inline-flex !important;
    align-self: center !Important;
    font-size: 16px !Important;
    font-weight: 700;
    border-radius: 25px;
    background-color: #614b1b;
    color: #fff !important;
    border: 1px solid #0c0c0c;
    cursor: pointer;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none !important;
    padding: 20px 23px;  /* controls height & width */
    text-transform: uppercase;
}

.pf-button-row {
    display: flex;
    justify-content: center;    /* centers the button horizontally */
    width: 100%;
}

/* Hover effect */
.pf-button-row .pf_add_to_cart_button:hover {
    background-color: #333 !Important;
    color: #cea54d !Important;
}

/* ===========================================
 Style the Dropdown PLA Completion Checkbox
==============================================*/

/* Hide the real checkbox */
#pla_checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 25px;    /* size */
    height: 25px;
    border: 3px solid #ba9743;    /* gold border */
    border-radius: 4px;
    background: #000;    /* background behind the tick */
    cursor: pointer;
    position: relative;
    vertical-align: middle;        /* centers checkbox on line */
    margin-right: 10px;        /* space between checkbox and label text */
    margin-top: 20mm;
    top: -10mm;         /* move checkbox up */
}

/* Gold-filled checkbox when checked */
#pla_checkbox:checked {
    background-color: #ba9743;    /* gold background */
}

/* White tick */
#pla_checkbox:checked::after {
    content: "✓";
    display: block;
    color: #fff;    /* white tick */
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    left: 4px;
    top: 0px;
}

/*Styling of script only & guess qty blurb
===========================================*/

/* Container spacing */
.script-only-blurb {
    margin-top: 20px;    /* space above the block */
}

/* Input styling */
#script_only_no_of_perfs {
    width: 100%;
    max-width: 500px;
    padding: 6px 8px;
    font-size: 14px;
    border: 2px solid #ba9743;    /* gold border */
    border-radius: 4px;
    background-color: #000;    /* black background */
    color: #fff;    /* white text */
    box-sizing: border-box;
}

/* Instructional text */
.script-only-blurb .script-only-text {
    margin-top: 10px;    /* space below the input */
    font-size: 14px;
    line-height: 1.4;
    text-align: center;    /* center all lines */
}

/* Resize Info Icon*/
.info-icon {
    font-size: 24px;    /* increase size */
    color: #ba9743;    /* gold theme */
    vertical-align: middle;
    margin-left: 5px;
}
/*Performance Fees Heading*/
.package-item-heading {
    font-size: 1.2em;
    font-weight: bold;
    color: #ba9743;    /* gold color matching checkboxes */
    margin-bottom: 8px;
}

/*PLA 'Dropin Form' Hidden Form Styling 
======================================= */

#pla_fields h3 {
    color: #ca9b35;
    font-size: 23px;
    margin-bottom: 10px;
}

#pla_fields {
    display: none;
    margin-top: 15px;    /* space ABOVE the whole PLA block */
    padding: 4px;       /* space INSIDE the container */
    border: 1px solid #444;
    background: #000;
    color: #ca9735;
}

.pla-field {
    margin-bottom: 15px;    /*the space below each field group*/
}

/*Info/Answers Input Fields*/
.pla-field input {
    background: #c5c5c5 !important;
	width: 100%;
    padding: 5px;        /* the space inside the input box/rectangle */
	line-height: 35px;
}
.pla-field input:focus {
    width: 100%;
    padding: 5px;    /* the space inside the input box/rectangle */
	line-height: 35px;
    background: #fff !important;
}
.pla-field label {
    display: block;
    margin-bottom: 5px;     /* Controls the gap between label & it's box */
    color: #d1cdcd;
	font-size: 16px;
}

/*  font inside the answer boxes */
.pla-field .pla-required {
    font-size: 20px !important;
    color: #000 !important;
	font-weight: 700 !important;
}

/* Style "Purpost of Perf. & Theatre Type" Options */
#pla_purpose_of_performance {
    background-color: #c5c5c5;   
    color: #000;                 /* text */
    padding: 6px 10px;
    border-radius: 4px;
	line-height: 35px;
}
#pla_purpose_of_performance option {  /*list colors when down */
    color: #000;               /* text color inside list */
	font-weight: 700;
    background-color: #fff;
}
#pla_theatre_type {
    background-color: #c5c5c5;   
    color: #000;                 /* text */
    padding: 6px 10px;
    border-radius: 4px;
	line-height: 35px;
}
#pla_theatre_type option {  /*list colors when down */
    color: #000;               /* text color inside list */
	font-weight: 700;
    background-color: #fff;
}

/* Product Total block Styling 
==============================*/

/* Parent container */
#purchase-summary {
    margin-top: 0px;
    padding: 0px;
    background-color: #000;    /* optional: dark background */
    color: #fff;    /* default text color */
    max-width: 820px;    /* adjust as needed */
}

/* heading */
#purchase-summary h3 {
    color: #ca9735;
	font-weight: 800 !important;
    font-size: 40px !important;
	line-height: 1.8em;
    margin-top: 30px;
    margin-bottom: 25px;
	text-align: center;
	border: 4px solid #614b1b;
    padding: 6px 10px;   /* optional, makes the border look nicer */
    border-radius: 4px;  /* optional, softens the corners */
}

/* all elements within <p>'s (Line Items & subtotal_1 Line) */
#purchase-summary p {
    display: flex;
    justify-content: space-between;    /* label left, value right */
    margin-bottom: 10px !Important;
    line-height: 1.0;  
	padding: 2px 0 !Important;     /* padding between line items */
}

/* Border + emphasis for subtotal_1 line only 
effects entire line: label & value */
#purchase-summary p:has(#subtotal-1) {
    border-top: 1px solid #ccc;    /* white line */
    margin-top: 10px !Important;
}

/* Adjust position of subtotal_1 White Line */
#subtotal-1 p:nth-of-type(2) {
    padding-bottom: 2px !important;
}
#purchase-summary p:has(#subtotal-1) {
    border-top: 1px solid #ccc;
    padding-top: 10px !important;   /* moves the line down */
}

/* first-child is the subtotal_1 Line LABEL */
/* last-child is the subtotal_1 Line TOTAL */
#purchase-summary p:has(#subtotal-1) span:first-child,
#purchase-summary p:has(#subtotal-1) span:last-child {
    font-size: 20px;
    margin-top: 10px !Important;
	font-weight: bold;
}

/* first-child are the Line Item LABELS */
#purchase-summary p:not(:has(#subtotal-1)) span:first-child {
    text-align: left;
    font-size: 20px;
    margin-top: 2px !Important;
}

/*  last-child are the line item TOTALS */
#purchase-summary p:not(:has(#subtotal-1)) span:last-child {
    text-align: right;
    font-size: 20px;
}

/* hide woo's tax & fee rows in cart */
.cart_totals tr.fee,
.cart_totals tr.tax-total {
    display: none !important;
}