/* ==========================================================================
   WP Unlimited Payment Gateway — Frontend Checkout Styles v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Instructions outer wrapper
   -------------------------------------------------------------------------- */
.upgm-instructions-wrapper {
	display:       flex;
	flex-wrap:     wrap;
	gap:           15px;
	background:    #f8f8f8;
	border:        1px solid #ddd;
	padding:       15px;
	margin-bottom: 1em;
	border-radius: 5px;
	box-sizing:    border-box;
}

/* QR Code */
.qr-code-thumbnail-wrapper         { flex-shrink: 0; }
.qr-code-thumbnail-wrapper a       { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 12px; }
.qr-code-thumbnail                 { width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 5px; cursor: pointer; transition: transform 0.2s; }
.qr-code-thumbnail:hover           { transform: scale(1.05); }

/* Payment instructions grid */
.upgm-payment-instructions {
	flex:      1 1 200px;
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
	align-content: flex-start;
}

/* --------------------------------------------------------------------------
   Instruction item — COLUMN layout (label on top, value+button below)
   This is theme-proof because the copy button is inside .upgm-inst-row,
   isolated from the theme's generic button resets.
   -------------------------------------------------------------------------- */
.instruction-item {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	padding:        10px 12px;
	box-sizing:     border-box;
	background:     #fff;
	border:         1px solid #e8e8e8;
	border-radius:  4px;
	font-size:      14px;
	width:          100%;
}
.instruction-item.col-100 { width: 100%; }
.instruction-item.col-75  { width: calc(75% - 5px); }
.instruction-item.col-50  { width: calc(50% - 5px); }
.instruction-item.col-25  { width: calc(25% - 8px); }

/* Label row */
.upgm-inst-label {
	font-size:   0.8em;
	font-weight: 700;
	color:       #555;
	display:     block;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

/* Value + copy button row */
.upgm-inst-row {
	display:     flex;
	align-items: center;
	gap:         8px;
	min-height:  28px;
}

.upgm-inst-row .instruction-value {
	flex:      1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size:  1em;
	color:      #000;
	word-break: break-all;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Copy Button — inside .upgm-inst-row (isolated from theme button resets)
   -------------------------------------------------------------------------- */
.upgm-inst-row .copy-button {
	/* Layout — these will NOT be overridden by theme because the selector
	   .upgm-inst-row .copy-button is more specific than .payment_box button */
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;
	flex-grow:       0 !important;
	flex-basis:      auto !important;
	width:           30px !important;
	height:          30px !important;
	min-width:       30px !important;
	max-width:       30px !important;
	
	/* Spacing */
	margin:  0 !important;
	padding: 6px !important;
	
	/* Appearance */
	background:    #f0f0f0 !important;
	border:        1px solid #ccc !important;
	border-radius: 50% !important;
	cursor:        pointer !important;
	line-height:   1 !important;
	color:         #555 !important;
	transition:    all 0.2s ease !important;
	
	/* Float/position reset */
	float:    none !important;
	clear:    none !important;
	position: static !important;
	
	/* Text reset */
	text-transform:  none !important;
	letter-spacing:  normal !important;
	text-decoration: none !important;
	font-size:       0 !important; /* hide any text, only show SVG */
	white-space:     nowrap !important;
	
	/* Box */
	box-sizing:  border-box !important;
	box-shadow:  none !important;
	outline:     none !important;
	appearance:  none !important;
	-webkit-appearance: none !important;
	overflow: hidden !important;
	vertical-align: middle !important;
}

.upgm-inst-row .copy-button:hover {
	background:  #e0e0e0 !important;
	color:       #000 !important;
	transform:   none !important;
}

.upgm-inst-row .copy-button.copied {
	background:  #28a745 !important;
	border-color: #28a745 !important;
	color:       #fff !important;
}

/* SVG inside copy button */
.upgm-inst-row .copy-button svg {
	display:   block !important;
	width:     16px  !important;
	height:    16px  !important;
	min-width: 16px  !important;
	max-width: 16px  !important;
	flex:      0 0 16px !important;
	pointer-events: none !important;
	fill: currentColor !important;
}

/* Responsive breakpoints */
@media (max-width: 782px) {
	/* Tablet: 50% items go to ~full width on narrow checkout */
	.instruction-item.col-25 { width: calc(50% - 5px); }
}

@media (max-width: 600px) {
	/* Mobile: everything full width */
	.instruction-item.col-25,
	.instruction-item.col-50,
	.instruction-item.col-75 { width: 100% !important; }
	
	.upgm-payment-instructions { gap: 8px; }
	.upgm-instructions-wrapper { padding: 12px; }
	.instruction-item { padding: 8px 10px; }
}

@media (max-width: 480px) {
	.instruction-item { font-size: 13px; }
	.upgm-inst-label  { font-size: 0.75em; }
}

/* --------------------------------------------------------------------------
   Customer fields
   -------------------------------------------------------------------------- */
.upgm-customer-fields { border: none; padding: 0; margin-top: 1em; }

/* --------------------------------------------------------------------------
   QR Code Lightbox
   -------------------------------------------------------------------------- */
.upgm-qr-lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); display: none; justify-content: center; align-items: center; z-index: 100001; }
.upgm-qr-lightbox-overlay.show { display: flex; animation: upgm-fade-in 0.25s; }
.upgm-qr-lightbox-content { position: relative; background: #fff; padding: 20px; border-radius: 6px; animation: upgm-zoom-in 0.25s; }
.upgm-qr-lightbox-content img { max-width: 80vw; max-height: 80vh; display: block; }
.upgm-qr-lightbox-close { position: absolute; top: -14px; right: -14px; background: #fff; color: #000; border-radius: 50%; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; font-size: 22px; line-height: 1; cursor: pointer; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

@keyframes upgm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes upgm-zoom-in { from { transform: scale(0.85); } to { transform: scale(1); } }

/* --------------------------------------------------------------------------
   Gateway Icon on Checkout
   -------------------------------------------------------------------------- */
.wc_payment_method > label img { max-height: 24px; width: auto; vertical-align: middle; margin-left: 5px; }

/* --------------------------------------------------------------------------
   Payment Slip Upload
   -------------------------------------------------------------------------- */
.upgm-slip-wrapper          { margin-top: 14px; padding: 14px; background: #f9f9f9; border: 1px dashed #ccc; border-radius: 6px; transition: border-color 0.2s, background 0.2s; }
.upgm-slip-wrapper.is-uploading { border-color: #2271b1; background: #f0f6fc; }
.upgm-slip-wrapper.is-done      { border-color: #28a745; border-style: solid; background: #f0faf3; }
.upgm-slip-wrapper.is-error     { border-color: #dc3232; background: #fef6f6; }
.upgm-slip-label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #3c434a; margin-bottom: 8px; font-size: 14px; }
.upgm-slip-label .upgm-slip-required { color: #dc3232; font-weight: 700; }
.upgm-slip-label .upgm-slip-optional { color: #787c82; font-size: 12px; font-weight: 400; }
.upgm-slip-file-input  { display: block; width: 100%; font-size: 13px; cursor: pointer; }
.upgm-slip-hint        { font-size: 12px; color: #787c82; margin-top: 5px; display: block; }
.upgm-slip-status      { font-size: 13px; color: #2271b1; margin-top: 6px; display: block; }
.upgm-slip-error       { font-size: 13px; color: #dc3232; margin-top: 6px; display: block; }
.upgm-slip-wrapper.is-uploading .upgm-slip-status::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid #2271b1; border-top-color: transparent; border-radius: 50%; animation: upgm-spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes upgm-spin { to { transform: rotate(360deg); } }
.upgm-slip-preview  { margin-top: 10px; }
.upgm-slip-thumb    { max-width: 160px; max-height: 160px; border: 1px solid #ddd; border-radius: 4px; display: block; margin-bottom: 6px; object-fit: contain; background: #fff; padding: 3px; }
.upgm-slip-pdf-name { font-size: 13px; color: #50575e; display: block; margin-bottom: 6px; }
.upgm-slip-remove   { font-size: 12px; color: #dc3232; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.upgm-slip-remove:hover { color: #b32d2e; }

/* --------------------------------------------------------------------------
   Blocks checkout
   -------------------------------------------------------------------------- */
.upgm-blocks-content   { padding: 4px 0; }
.upgm-block-desc       { margin-bottom: 12px; color: #3c434a; }
.upgm-blocks-fields-note { font-size: 12px; color: #787c82; margin-top: 10px; }


/* Copy Button — #payment ID gives maximum specificity (beats all theme class rules)
   -------------------------------------------------------------------------- */
#payment .copy-button,
.upgm-instructions-wrapper .copy-button {
	/* Nuclear reset — overrides ALL theme button styles */
	display:         flex         !important;
	align-items:     center       !important;
	justify-content: center       !important;
	flex:            0 0 30px     !important;
	flex-shrink:     0            !important;
	flex-grow:       0            !important;
	flex-basis:      30px         !important;
	width:           30px         !important;
	height:          30px         !important;
	min-width:       30px         !important;
	max-width:       30px         !important;
	min-height:      30px         !important;
	max-height:      30px         !important;

	/* Spacing */
	margin:  0 0 0 auto !important;
	padding: 0          !important;

	/* Appearance */
	background:    #f0f0f0              !important;
	border:        1px solid #ccc       !important;
	border-radius: 50%                  !important;
	cursor:        pointer              !important;
	line-height:   1                    !important;
	color:         #555                 !important;
	transition:    background 0.2s ease !important;

	/* Reset everything a theme might set */
	float:               none        !important;
	clear:               none        !important;
	position:            static      !important;
	text-transform:      none        !important;
	letter-spacing:      normal      !important;
	text-decoration:     none        !important;
	font-size:           0           !important;
	white-space:         nowrap      !important;
	box-sizing:          border-box  !important;
	box-shadow:          none        !important;
	outline:             none        !important;
	appearance:          none        !important;
	-webkit-appearance:  none        !important;
	overflow:            hidden      !important;
	vertical-align:      middle      !important;
	transform:           none        !important;
	border-top:          none        !important;
	border-bottom:       none        !important;
	border-left:         none        !important;
	border-right:        none        !important;
	border:              1px solid #ccc !important;
}

#payment .copy-button:hover,
.upgm-instructions-wrapper .copy-button:hover {
	background: #e0e0e0 !important;
	color:      #333    !important;
	transform:  none    !important;
}

#payment .copy-button.copied,
.upgm-instructions-wrapper .copy-button.copied {
	background:   #28a745 !important;
	border-color: #28a745 !important;
	color:        #fff    !important;
}

/* SVG icon inside copy button */
#payment .copy-button svg,
.upgm-instructions-wrapper .copy-button svg {
	display:        block  !important;
	width:          16px   !important;
	height:         16px   !important;
	min-width:      16px   !important;
	max-width:      16px   !important;
	min-height:     16px   !important;
	max-height:     16px   !important;
	flex:           none   !important;
	pointer-events: none   !important;
	fill:           currentColor !important;
	margin:         0      !important;
	padding:        0      !important;
}